/* Ninth draft of the home page (marketing copy, 28 Oct 2026). */
.v9-hero { position: relative; overflow: hidden; isolation: isolate; padding-bottom: 120px !important; }
.v9-hero .hp-stage-wrap { min-height: min(62vh, 560px); display: flex; flex-direction: column; justify-content: center; }
/* soft animation: three slow, blurred glows drifting across the blue */
.v9-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v9-glow i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
.v9-glow i:nth-child(1) { width: 46vw; height: 46vw; right: -8vw; top: -18vw; background: #2027E1; animation: v9-drift 18s ease-in-out infinite; }
.v9-glow i:nth-child(2) { width: 30vw; height: 30vw; right: 22vw; bottom: -14vw; background: #4A3EF0; opacity: 0.35; animation: v9-drift 24s ease-in-out infinite reverse; }
.v9-glow i:nth-child(3) { width: 22vw; height: 22vw; left: -6vw; top: 30%; background: #1B2BA8; opacity: 0.4; animation: v9-drift 30s ease-in-out infinite; }
@keyframes v9-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4vw, 3vw) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .v9-glow i { animation: none; } }
body .px .v9-hero .hp-stage-title:not(#_) { max-width: 13em; }
/* type */
body .px h2.v9-h2:not(#_) { margin: 0 0 16px !important; font-size: clamp(28px, 3vw, 42px) !important; font-weight: 500 !important; line-height: 1.12 !important; letter-spacing: -0.025em !important; color: #10164D !important; }
.v9-h2 span { color: #2027E1; }
body .px .v9-lead { max-width: 34em; margin: 0 0 24px !important; font-size: 19px !important; line-height: 1.55 !important; color: #10164D !important; }
body .px .v9-body { max-width: 36em; margin: 0 0 20px !important; color: #4A5170 !important; }
/* split sections with one product view */
.v9-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.v9-grid-flip > :first-child { order: 0; }
.v9-points, .v9-seq, .v9-fit { list-style: none; margin: 0 0 24px; padding: 0; }
.v9-points li, .v9-seq li { padding: 14px 0; border-top: 1px solid #E6E8F2; font-size: 16px; line-height: 1.6; color: #4A5170; }
.v9-points li strong, .v9-seq li strong, .v9-fit li strong { display: block; margin-bottom: 2px; font-weight: 500; color: #10164D; }
.v9-seq { counter-reset: s; }
.v9-seq li { counter-increment: s; position: relative; padding-left: 40px; }
.v9-seq li::before { content: counter(s); position: absolute; left: 0; top: 15px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #EEF0FF; color: #2027E1; font-size: 13px; font-weight: 500; }
/* the product-view card */
.v9-app { margin: 0; border: 1px solid #E3E6F2; border-radius: 18px; background: #fff; box-shadow: 0 30px 70px rgba(16, 22, 77, 0.12); overflow: hidden; }
.v9-app-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #F7F8FC; border-bottom: 1px solid #ECEEF6; }
.v9-dots { display: inline-flex; gap: 6px; }
.v9-dots i { width: 9px; height: 9px; border-radius: 50%; background: #DADDEB; }
body .px .v9-app-bar p { margin: 0 !important; font-size: 13px !important; font-weight: 500; color: #6B7090 !important; }
.v9-app-body { padding: 22px 24px; }
body .px .v9-tag { display: inline-block; margin: 0 0 10px !important; padding: 3px 10px; border-radius: 999px; font-size: 12px !important; font-weight: 500; }
.v9-tag-warn { background: #FFF1D6; color: #8A5300 !important; }
body .px .v9-app-t { margin: 0 0 14px !important; font-size: 17px !important; font-weight: 500; color: #10164D !important; }
.v9-kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 0 0 18px; font-size: 14px; }
.v9-kv dt { color: #8A8FA8; }
.v9-kv dd { margin: 0; color: #10164D; }
.v9-app-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
.v9-app-actions span { padding: 8px 12px; border: 1px solid #E3E6F2; border-radius: 999px; font-size: 13px; color: #10164D; }
.v9-app-actions .is-primary { background: #10164D; border-color: #10164D; color: #fff; }
.v9-app figcaption { padding: 10px 16px; border-top: 1px solid #ECEEF6; font-size: 12px; color: #8A8FA8; background: #FBFBFE; }
.v9-rec { list-style: none; margin: 0 0 14px; padding: 0; }
.v9-rec li { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #F0F1F7; font-size: 14px; }
.v9-rec b { font-weight: 500; color: #10164D; }
.v9-rec span { color: #6B7090; }
.v9-rec i { font-style: normal; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 999px; background: #E3E6FF; color: #1B22B8; }
.v9-rec-out { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: #EEF0FF; font-size: 14px; color: #4A5170; }
.v9-rec-out b { font-weight: 600; color: #10164D; }
.v9-labels { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v9-labels li { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #DCE0F2; font-size: 14px; font-weight: 500; color: #10164D; }
.v9-video { position: relative; display: block; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(16, 22, 77, 0.12); }
.v9-video img { display: block; width: 100%; height: auto; }
/* results */
.v9-nums { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.v9-nums li { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.v9-nums strong { font-size: clamp(40px, 4.6vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: #fff; margin-bottom: 8px; }
.v9-nums span { font-size: 17px; color: rgba(255, 255, 255, 0.92); }
.v9-nums em { font-style: normal; font-size: 14px; color: rgba(255, 255, 255, 0.65); }
/* enterprise fit: compact three-up */
.v9-fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.v9-fit li { font-size: 15px; line-height: 1.6; color: #4A5170; }
@media (max-width: 900px) {
  .v9-grid { grid-template-columns: 1fr; gap: 40px; }
  .v9-nums, .v9-fit { grid-template-columns: 1fr; gap: 24px; }
  .v9-hero .hp-stage-wrap { min-height: 0; }
}
body .px h3.v9-h3:not(#_) { margin: 0 0 10px !important; font-size: clamp(24px, 2.4vw, 32px) !important; font-weight: 500 !important; line-height: 1.15 !important; color: #10164D !important; }
.v9-links { display: flex; flex-wrap: wrap; gap: 24px; margin: 8px 0 0 !important; }
.v9-insight { align-items: center; }

/* Tenth draft (upgrade brief, 28 Oct 2026). Hero = the original Wix hero
   (comp-mkdm2x0g): hero-background.mp4 over #2027E1, cut at the bottom by
   hero-divider.svg at 2100px x 218px, mirrored, centred, as Wix drew it. */
.hx-hero.hp-stage { background: #2027E1; padding: 0 !important; min-height: 735px; display: flex; }
.hx-media { position: absolute; inset: 0; z-index: -2; }
.hx-media img, .hx-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-divider { position: absolute; left: 0; right: 0; bottom: -1px; height: 218px; z-index: -1; pointer-events: none;
  background: url("/assets/img/home/hero-divider.svg") center bottom / 2100px 100% no-repeat; transform: scale(-1, 1); }
.hx-hero .v9-glow { display: none; }
.hx-wrap.hp-stage-wrap { width: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 168px; padding-bottom: 250px; }
body .px .hx-hero .hp-stage-title:not(#_) { max-width: 12em; margin: 0 !important; font-size: clamp(36px, 4.2vw, 60px) !important; }
.hx-side { padding-top: 34px; }
body .px .hx-hero .hp-stage-body:not(#_) { color: rgba(255, 255, 255, 0.9) !important; }
@media (prefers-reduced-motion: reduce) { .hx-video { display: none; } }
@media (max-width: 900px) {
  .hx-hero.hp-stage { min-height: 0; }
  .hx-wrap.hp-stage-wrap { grid-template-columns: 1fr; gap: 20px; padding-top: 112px; padding-bottom: 150px; }
  .hx-side { padding-top: 0; }
  .hx-divider { height: 120px; background-size: 1157px 100%; }
}
/* tighter rhythm between sections (brief: reduce excessive gaps) */
body .px.no-field > .px-section:not(#_) { padding-top: 96px !important; }
body .px.no-field > .px-band:not(#_) { margin-top: 96px !important; padding: 88px 0 !important; }
body .px.no-field > .hp-trust:not(#_) { padding-top: 24px !important; }
@media (max-width: 720px) {
  body .px.no-field > .px-section:not(#_) { padding-top: 56px !important; }
  body .px.no-field > .px-band:not(#_) { margin-top: 56px !important; padding: 56px 0 !important; }
}
/* expertise: product video with a visible play control */
.v9-demo { margin: 0; }
.v9-demo .v9-video { aspect-ratio: 16 / 9; }
.v9-demo .v9-video img { width: 100%; height: 100%; object-fit: cover; }
.v9-demo iframe { display: block; width: 100%; height: 100%; border: 0; }
.v9-play { position: absolute; left: 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; }
.v9-play i { width: 28px; height: 28px; border-radius: 50%; background: #fff; position: relative; }
.v9-play i::after { content: ""; position: absolute; left: 11px; top: 8px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #2027E1; }
.v9-video:hover .v9-play { background: #2027E1; }
.v9-demo figcaption { margin-top: 12px; font-size: 13px; color: #8A8FA8; }
/* results: one number size across all three columns */
.v9-nums strong { font-size: clamp(44px, 5vw, 68px); white-space: nowrap; }
/* enterprise choice */
.v9-fit-head { max-width: 760px; margin-bottom: 32px; }
.v9-fit li { padding-top: 16px; border-top: 1px solid #E6E8F2; }
.v9-fit-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #E6E8F2; }
body .px .v9-claim:not(#_) { margin: 0 !important; font-size: clamp(20px, 2vw, 26px) !important; font-weight: 500; letter-spacing: -0.015em; color: #10164D !important; }
.v9-claim span { color: #2027E1; }
body .px.no-field > .hp-prime:not(#_) { margin-top: 88px; padding-top: 88px !important; padding-bottom: 88px !important; }
body .px.no-field > .hp-prime + .px-section:not(#_) { padding-top: 88px !important; }
@media (max-width: 720px) { body .px.no-field > .hp-prime:not(#_) { margin-top: 56px; padding-top: 56px !important; padding-bottom: 56px !important; } }
body .px.no-field > .c2-cred:not(#_) { padding-top: 24px !important; padding-bottom: 0 !important; }
body .px.no-field > .c2-cred + .px-section:not(#_) { padding-top: 80px !important; }
.hp-start-wrap .hp-start { padding: clamp(56px, 7vw, 96px) 24px; }
body .px.no-field > .hp-start-wrap:last-child { margin-bottom: 64px; }
.v9-play { left: auto; right: 20px; }
body .px.no-field > .px-band + .hp-prime:not(#_) { margin-top: 0; }
/* NXT AP in action: three video cards */
.v9-vids .px-head { align-items: flex-end; }
body .px .v9-vids .v9-body:not(#_) { margin-bottom: 0 !important; }
.v9-vgrid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.v9-vthumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 44px rgba(16, 22, 77, 0.12); margin-bottom: 16px; }
.v9-vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v9-vthumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.v9-vthumb .yt-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(16, 22, 77, 0.88); }
.v9-vthumb .yt-play::after { content: ""; position: absolute; left: 20px; top: 17px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; }
.v9-vthumb:hover .yt-play, .v9-vthumb:focus-visible .yt-play { background: #2027E1; }
.v9-vlen { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 6px; background: rgba(16, 22, 77, 0.85); color: #fff; font-size: 12px; font-weight: 500; }
body .px .v9-vgrid h3:not(#_) { margin: 0 0 6px !important; font-size: 18px !important; font-weight: 500 !important; color: #10164D !important; }
body .px .v9-vgrid p:not(#_) { margin: 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: #4A5170 !important; }
/* Partner with us: compact, subtle blue, one link */
.v9-partner { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding: 36px 40px; border-radius: 18px; background: #EEF0FF; }
body .px .v9-partner .v9-h2:not(#_) { font-size: clamp(22px, 2.2vw, 28px) !important; margin-bottom: 8px !important; }
body .px .v9-partner .v9-body:not(#_) { margin: 0 !important; max-width: 44em; }
.v9-partner .px-more { white-space: nowrap; }
body .px.no-field > .v9-partner-wrap:not(#_) { padding-top: 72px !important; }
body .px.no-field > .v9-partner-wrap + .hp-start-wrap:not(#_) { padding-top: 56px !important; }
@media (max-width: 900px) {
  .v9-vgrid { grid-template-columns: 1fr; gap: 28px; }
  .v9-partner { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}
/* play button in the corner so it never covers the thumbnail's headline */
.v9-vthumb .yt-play { left: 14px; top: auto; bottom: 12px; width: 44px; height: 44px; margin: 0; }
.v9-vthumb .yt-play::after { left: 17px; top: 14px; border-width: 8px 0 8px 12px; }
body .px .v9-sub:not(#_) { margin: 0 !important; }
body .px .v9-sub:not(#_) { max-width: 60em; }

/* Invoice path beneath the hero (upgrade brief, 28 Oct 2026): five glass
   cubes, an invoice moving through them, one successful path, 10 s loop.
   --p (0..4) is the invoice's stage; --on (0..1) lights a cube. */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --in { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --on { syntax: "<number>"; inherits: true; initial-value: 0; }
.v9-path-wrap { position: relative; padding: 8px 0 0; }
.v9-path { position: relative; max-width: 940px; margin: 0 auto; padding: 36px 24px 26px; border-radius: 22px; background: #F7F8FC; box-shadow: inset 0 0 0 1px #ECEEF6; }
.v9-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.v9-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 44px; height: 1px; background: linear-gradient(90deg, #C9CEF3, #C9CEF3 50%, transparent 50%) 0 0 / 8px 1px repeat-x; }
.v9-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.v9-cubebox { position: relative; z-index: 2; display: block; width: 88px; height: 88px; --on: 0; animation: 10s linear infinite both; filter: drop-shadow(0 calc(10px + 6px * var(--on)) calc(14px + 8px * var(--on)) rgba(16, 22, 77, calc(0.08 + 0.08 * var(--on)))); }
.v9-cube { display: block; width: 100%; height: 100%; overflow: visible; }
.v9-cube .f-top { fill: rgba(255, 255, 255, calc(0.75 - 0.2 * var(--on))); }
.v9-cube .f-left { fill: rgba(32, 39, 225, calc(0.06 + 0.22 * var(--on))); }
.v9-cube .f-right { fill: rgba(32, 39, 225, calc(0.03 + 0.12 * var(--on))); }
.v9-cube .f-top { stroke: none; }
.v9-cube .f-edge { fill: none; stroke: rgba(32, 39, 225, calc(0.22 + 0.45 * var(--on))); stroke-width: 1.2; stroke-linejoin: round; }
.v9-step-label { font-size: 15px; font-weight: 500; line-height: 1.3; color: #10164D; }
/* the invoice: behind the glass, so it reads as passing through */
.v9-inv { position: absolute; z-index: 1; top: 36px; left: calc(24px + (100% - 48px) * (0.1 + 0.2 * var(--p))); width: 26px; height: 32px; margin: 32px 0 0 -13px; animation: v9-inv 10s linear infinite both; }
.v9-inv svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(16, 22, 77, 0.18)); }
@keyframes v9-inv {
  0% { --p: 0; --in: 0; opacity: 1; } 8% { --p: 0; --in: 1; }
  20%, 26% { --p: 1; } 38%, 44% { --p: 2; } 56%, 68% { --p: 3; } 80% { --p: 4; opacity: 1; }
  92% { --p: 4; opacity: 1; } 97%, 100% { --p: 4; opacity: 0; }
}
@keyframes v9-c1 { 0%, 5% { --on: 0; } 9%, 95% { --on: 1; } 100% { --on: 0; } }
.v9-s1 .v9-cubebox { animation-name: v9-c1; }
@keyframes v9-c2 { 0%, 21% { --on: 0; } 25%, 95% { --on: 1; } 100% { --on: 0; } }
.v9-s2 .v9-cubebox { animation-name: v9-c2; }
@keyframes v9-c3 { 0%, 39% { --on: 0; } 43%, 95% { --on: 1; } 100% { --on: 0; } }
.v9-s3 .v9-cubebox { animation-name: v9-c3; }
@keyframes v9-c4 { 0%, 57% { --on: 0; } 61%, 95% { --on: 1; } 100% { --on: 0; } }
.v9-s4 .v9-cubebox { animation-name: v9-c4; }
@keyframes v9-c5 { 0%, 81% { --on: 0; } 85%, 95% { --on: 1; } 100% { --on: 0; } }
.v9-s5 .v9-cubebox { animation-name: v9-c5; }

/* Match & validate: three small checks */
.v9-checks { position: absolute; left: 50%; top: -14px; display: flex; gap: 5px; transform: translateX(-50%); }
.v9-checks i { width: 14px; height: 14px; border-radius: 50%; background: #2027E1; opacity: 0; animation: v9-chk 10s linear infinite both; position: relative; }
.v9-checks i::after { content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.v9-checks i:nth-child(2) { animation-name: v9-chk2; }
.v9-checks i:nth-child(3) { animation-name: v9-chk3; }
@keyframes v9-chk { 0%, 59% { opacity: 0; } 61%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes v9-chk2 { 0%, 62% { opacity: 0; } 64%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes v9-chk3 { 0%, 65% { opacity: 0; } 67%, 95% { opacity: 1; } 100% { opacity: 0; } }
/* Post: status once the invoice is through */
.v9-posted { position: absolute; left: 50%; top: -16px; padding: 3px 10px; border-radius: 999px; background: #10164D; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; transform: translateX(-50%); opacity: 0; animation: v9-post 10s linear infinite both; }
@keyframes v9-post { 0%, 83% { opacity: 0; } 86%, 95% { opacity: 1; } 100% { opacity: 0; } }
body .px .v9-path-note:not(#_) { margin: 14px 0 0 !important; text-align: center; font-size: 13px !important; color: #6B7090 !important; }
body .px .v9-path-cta:not(#_) { margin: 6px 0 0 !important; text-align: center; }
body .px.no-field > .v9-path-wrap + .c2-cred:not(#_) { padding-top: 56px !important; }
/* reduced motion: the completed sequence, still */
@media (prefers-reduced-motion: reduce) {
  .v9-cubebox, .v9-inv, .v9-checks i, .v9-posted { animation: none !important; }
  .v9-cubebox { --on: 1; }
  .v9-checks i, .v9-posted { opacity: 1; }
  .v9-inv { --p: 4; opacity: 0; }
}
/* phones: the same sequence, top to bottom, labels beside the cubes */
@media (max-width: 720px) {
  .v9-path { padding: 24px 20px; }
  .v9-steps { grid-template-columns: 1fr; gap: 14px; }
  .v9-steps::before { left: 35px; right: auto; top: 10%; bottom: 10%; width: 1px; height: auto; background: linear-gradient(180deg, #C9CEF3, #C9CEF3 50%, transparent 50%) 0 0 / 1px 8px repeat-y; }
  .v9-step { flex-direction: row; gap: 18px; text-align: left; }
  .v9-cubebox { width: 72px; height: 72px; flex: none; }
  .v9-checks, .v9-posted { top: 50%; left: 84px; transform: translateY(-50%); }
  .v9-posted { left: auto; right: -96px; }
  .v9-step-label { font-size: 16px; }
  .v9-inv { left: 56px; top: calc(24px + (100% - 48px) * (0.1 + 0.2 * var(--p))); margin: -16px 0 0 -13px; }
}
@media (max-width: 720px) {
  .v9-steps { gap: 6px; }
  .v9-cubebox { position: static; width: 58px; height: 58px; }
  .v9-steps::before { left: 29px; }
  .v9-checks, .v9-posted { top: 50%; left: auto; right: 0; transform: translateY(-50%); }
  .v9-inv { left: 49px; width: 22px; height: 28px; margin: -14px 0 0 -11px; }
}
/* shadow on the cube itself: a filter on the box would trap the phone
   layout's check marks and status inside the cube */
.v9-cubebox { filter: none; }
.v9-cube { filter: drop-shadow(0 calc(10px + 6px * var(--on)) calc(14px + 8px * var(--on)) rgba(16, 22, 77, calc(0.08 + 0.08 * var(--on)))); }
@media (max-width: 720px) { .v9-cube { position: relative; z-index: 2; } }
/* customer logos as a quiet "including" line inside the closing invitation */
.v9-incl { margin: 40px auto 0; padding-top: 28px; max-width: 760px; border-top: 1px solid #E3E6F2; }
body .px .v9-incl p:not(#_) { margin: 0 0 14px !important; font-size: 13px !important; color: #6B7090 !important; }
.v9-incl .hp-logos { margin: 0; gap: 20px 40px; justify-content: center; opacity: 0.85; }
body .px.no-field > .v9-path-wrap + .px-section:not(#_) { padding-top: 72px !important; }
body .px .v9-path-cta:not(#_) { margin-top: 16px !important; }
/* Product views as 3D glass (Pooja, 28 Oct): soft blue light behind a
   frosted, translucent card with lit edges; inner rows and actions are
   translucent tiles of the same glass. */
.v9-glass { position: relative; isolation: isolate; padding: 28px; }
.v9-glass::before, .v9-glass::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(46px); pointer-events: none; }
.v9-glass::before { width: 62%; height: 62%; right: -2%; top: -4%; background: radial-gradient(circle, rgba(32, 39, 225, 0.55), rgba(32, 39, 225, 0) 70%); }
.v9-glass::after { width: 52%; height: 52%; left: -4%; bottom: -6%; background: radial-gradient(circle, rgba(111, 180, 255, 0.6), rgba(111, 180, 255, 0) 70%); }
.v9-glass .v9-app { position: relative; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(32, 39, 225, 0.08),
    0 1px 2px rgba(16, 22, 77, 0.06), 0 24px 60px -12px rgba(16, 22, 77, 0.22); }
/* a thin light sweep across the top edge */
.v9-glass .v9-app::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 40%, rgba(32, 39, 225, 0.18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.v9-glass .v9-app-bar { background: rgba(255, 255, 255, 0.35); border-bottom: 1px solid rgba(255, 255, 255, 0.7); }
.v9-glass .v9-dots i { background: rgba(16, 22, 77, 0.14); }
.v9-glass .v9-app figcaption { background: rgba(255, 255, 255, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.7); }
.v9-glass .v9-tag-warn { background: rgba(255, 214, 140, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.v9-glass .v9-kv { gap: 6px; grid-template-columns: 1fr; }
.v9-glass .v9-kv dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v9-glass .v9-kv dd::before { content: attr(data-k) / ""; }
.v9-glass .v9-kv dd { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(16, 22, 77, 0.04); }
.v9-glass .v9-kv dd::before { content: attr(data-k); color: #8A8FA8; }
.v9-glass .v9-app-actions span { background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.85); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(16, 22, 77, 0.06); }
.v9-glass .v9-app-actions .is-primary { background: linear-gradient(180deg, #1B2380, #10164D); border-color: rgba(16, 22, 77, 0.9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px rgba(16, 22, 77, 0.25); }
.v9-glass .v9-rec li { margin-bottom: 6px; padding: 10px 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.v9-glass .v9-rec i { background: rgba(32, 39, 225, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.v9-glass .v9-rec-out { background: linear-gradient(135deg, rgba(32, 39, 225, 0.14), rgba(111, 180, 255, 0.16)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); }
@media (max-width: 720px) { .v9-glass { padding: 12px 0; } .v9-glass .v9-kv dd { grid-template-columns: 1fr; gap: 2px; } }
.v9-glass::before { width: 58%; height: 70%; right: 0; top: 2%; filter: blur(36px); background: radial-gradient(circle, rgba(32, 39, 225, 0.75), rgba(32, 39, 225, 0) 68%); }
.v9-glass::after { width: 50%; height: 60%; left: 2%; bottom: 0; filter: blur(36px); background: radial-gradient(circle, rgba(111, 180, 255, 0.85), rgba(111, 180, 255, 0) 68%); }
.v9-glass .v9-app { background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.38)); }
body .px .v9-glass .v9-app figcaption:not(#_) { padding: 6px 16px; font-size: 10.5px !important; letter-spacing: 0.01em; color: #A3A7BD !important; }
/* Invoice path as glass (Pooja, 28 Oct): frosted panel over soft blue
   light, cubes with gradient faces, lit inner edges and one gleam. */
.v9-path-wrap .px-wrap { position: relative; isolation: isolate; }
.v9-path-wrap .px-wrap::before, .v9-path-wrap .px-wrap::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(48px); pointer-events: none; }
.v9-path-wrap .px-wrap::before { width: 46%; height: 70%; left: 8%; top: 8%; background: radial-gradient(circle, rgba(111, 180, 255, 0.5), rgba(111, 180, 255, 0) 68%); }
.v9-path-wrap .px-wrap::after { width: 46%; height: 70%; right: 8%; top: 0; background: radial-gradient(circle, rgba(32, 39, 225, 0.38), rgba(32, 39, 225, 0) 68%); }
.v9-path { border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 24px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(32, 39, 225, 0.08), 0 24px 60px -18px rgba(16, 22, 77, 0.2); }
.v9-cube .f-top, .v9-cube .f-left, .v9-cube .f-right { transition: none; }
.v9-cube .f-top { fill: url(#v9g-top); opacity: 1; }
.v9-cube .f-left { fill: url(#v9g-left); opacity: calc(0.75 + 0.25 * var(--on)); }
.v9-cube .f-right { fill: url(#v9g-right); opacity: calc(0.8 + 0.2 * var(--on)); }
.v9-cube .f-left, .v9-cube .f-right { filter: saturate(calc(1 + 0.8 * var(--on))); }
.v9-cube .f-edge { stroke: rgba(32, 39, 225, calc(0.28 + 0.4 * var(--on))); stroke-width: 1; }
.v9-cube .f-lit { fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v9-cube .f-gleam { fill: none; stroke: rgba(255, 255, 255, 0.8); stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.v9-cube { filter: drop-shadow(0 calc(12px + 6px * var(--on)) calc(16px + 6px * var(--on)) rgba(32, 39, 225, calc(0.1 + 0.12 * var(--on)))); }
.v9-steps::before { background: linear-gradient(90deg, rgba(32, 39, 225, 0.25), rgba(32, 39, 225, 0.25) 50%, transparent 50%) 0 0 / 8px 1px repeat-x; }
@media (max-width: 720px) { .v9-steps::before { background: linear-gradient(180deg, rgba(32, 39, 225, 0.25), rgba(32, 39, 225, 0.25) 50%, transparent 50%) 0 0 / 1px 8px repeat-y; } }
/* Glass tiles after Pooja's reference (28 Oct): frosted rounded squares with
   a soft white inner-glow edge, two thinner glass plates stacked beneath,
   on a light-blue field. Replaces the isometric cubes. */
.v9-path { background: linear-gradient(160deg, #E9F2FD 0%, #CFE1F7 55%, #B9D2F2 100%); border-color: rgba(255, 255, 255, 0.7); }
.v9-cubebox { filter: none; width: 84px; height: 84px; }
.v9-tile, .v9-plate { position: absolute; left: 50%; display: block; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, calc(0.62 + 0.2 * var(--on))), rgba(255, 255, 255, calc(0.32 + 0.2 * var(--on))));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.v9-tile { z-index: 3; top: 0; width: 72px; height: 66px; border-radius: 18px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.95), inset 0 0 14px rgba(255, 255, 255, 0.85), inset 0 -10px 18px rgba(120, 160, 230, calc(0.12 + 0.18 * var(--on))),
    0 calc(8px + 4px * var(--on)) 22px rgba(40, 80, 170, calc(0.12 + 0.1 * var(--on))); }
.v9-plate { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.7); }
.v9-plate-1 { z-index: 2; top: 60px; width: 60px; height: 14px; }
.v9-plate-2 { z-index: 1; top: 70px; width: 46px; height: 13px; border-radius: 8px; }
/* light blue tint grows in a tile as its stage completes */
.v9-tile::after { content: ""; position: absolute; inset: 10px; border-radius: 12px; background: radial-gradient(circle at 50% 60%, rgba(32, 39, 225, 0.22), rgba(32, 39, 225, 0) 70%); opacity: var(--on); }
.v9-steps::before { top: 33px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9) 50%, transparent 50%) 0 0 / 8px 1.5px repeat-x; height: 1.5px; }
.v9-inv { top: 36px; margin-top: 14px; }
.v9-checks { top: -16px; }
.v9-posted { top: -18px; }
@media (max-width: 720px) {
  .v9-cubebox { width: 64px; height: 68px; position: relative; }
  .v9-tile { width: 56px; height: 52px; border-radius: 14px; }
  .v9-plate-1 { top: 47px; width: 46px; height: 11px; }
  .v9-plate-2 { top: 55px; width: 34px; height: 10px; }
  .v9-checks, .v9-posted { position: absolute; }
  .v9-steps::before { left: 31px; top: 10%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9) 50%, transparent 50%) 0 0 / 1.5px 8px repeat-y; width: 1.5px; height: auto; }
  .v9-inv { left: 52px; margin-top: -24px; }
}
/* light brand-blue field behind the glass tiles */
.v9-path { background: linear-gradient(160deg, #EEF0FF 0%, #D3D6FB 50%, #B4B8F6 100%); }
.v9-path-wrap .px-wrap::before { background: radial-gradient(circle, rgba(32, 39, 225, 0.28), rgba(32, 39, 225, 0) 68%); }
/* ticks and status now sit on the step, not inside the tile; they share the
   tile's --on timing through their own keyframes */
.v9-step > .v9-checks { top: -16px; }
.v9-step > .v9-posted { top: -18px; }
@media (max-width: 720px) {
  .v9-step > .v9-checks, .v9-step > .v9-posted { top: 50%; left: auto; right: 0; transform: translateY(-50%); }
}
.v9-step > .v9-checks, .v9-step > .v9-posted { z-index: 4; }
.v9-step > .v9-checks { top: -24px; }
.v9-step > .v9-posted { top: -30px; }
@media (max-width: 720px) {
  .v9-step > .v9-checks, .v9-step > .v9-posted { top: 50%; }
  .v9-inv { top: calc(24px + (100% - 48px) * (0.1 + 0.2 * var(--p))); margin-top: -18px; }
}
@media (max-width: 900px) { .v9-grid { grid-template-columns: minmax(0, 1fr); } }
/* blue, not violet (Pooja, 28 Oct): sky-blue field as in her reference */
.v9-path { background: linear-gradient(160deg, #E8F2FE 0%, #BFDAF7 50%, #8FBBEE 100%); }
.v9-path-wrap .px-wrap::before { background: radial-gradient(circle, rgba(70, 140, 230, 0.3), rgba(70, 140, 230, 0) 68%); }
.v9-path-wrap .px-wrap::after { background: radial-gradient(circle, rgba(40, 110, 220, 0.3), rgba(40, 110, 220, 0) 68%); }
.v9-tile::after { background: radial-gradient(circle at 50% 60%, rgba(40, 120, 230, 0.3), rgba(40, 120, 230, 0) 70%); }
.v9-tile { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.95), inset 0 0 14px rgba(255, 255, 255, 0.85), inset 0 -10px 18px rgba(80, 150, 230, calc(0.12 + 0.18 * var(--on))),
    0 calc(8px + 4px * var(--on)) 22px rgba(30, 90, 180, calc(0.14 + 0.1 * var(--on))); }
/* More air between sections (Pooja, 28 Oct: "looks cramped") */
body .px.no-field > .px-section:not(#_) { padding-top: 136px !important; }
body .px.no-field > .v9-path-wrap + .px-section:not(#_) { padding-top: 128px !important; }
body .px.no-field > .px-band:not(#_) { margin-top: 136px !important; padding: 112px 0 !important; }
body .px.no-field > .hp-prime:not(#_) { margin-top: 136px; padding-top: 120px !important; padding-bottom: 120px !important; }
body .px.no-field > .px-band + .hp-prime:not(#_) { margin-top: 0; }
body .px.no-field > .hp-prime + .px-section:not(#_) { padding-top: 136px !important; }
body .px.no-field > .v9-partner-wrap:not(#_) { padding-top: 120px !important; }
body .px.no-field > .v9-partner-wrap + .hp-start-wrap:not(#_) { padding-top: 96px !important; }
body .px.no-field > .hp-start-wrap:last-child { margin-bottom: 120px; }
.v9-path-wrap { padding-top: 24px; }
@media (max-width: 720px) {
  body .px.no-field > .px-section:not(#_), body .px.no-field > .v9-path-wrap + .px-section:not(#_), body .px.no-field > .hp-prime + .px-section:not(#_) { padding-top: 88px !important; }
  body .px.no-field > .px-band:not(#_) { margin-top: 88px !important; padding: 72px 0 !important; }
  body .px.no-field > .hp-prime:not(#_) { margin-top: 88px; padding-top: 72px !important; padding-bottom: 72px !important; }
  body .px.no-field > .v9-partner-wrap:not(#_) { padding-top: 80px !important; }
  body .px.no-field > .v9-partner-wrap + .hp-start-wrap:not(#_) { padding-top: 64px !important; }
  body .px.no-field > .hp-start-wrap:last-child { margin-bottom: 80px; }
}
/* Second pass, more generous (Pooja, 28 Oct) */
.v9-path-wrap { padding-top: 64px; }
body .px.no-field > .px-section:not(#_), body .px.no-field > .v9-path-wrap + .px-section:not(#_), body .px.no-field > .hp-prime + .px-section:not(#_) { padding-top: 176px !important; }
body .px.no-field > .px-band:not(#_) { margin-top: 176px !important; padding: 128px 0 !important; }
body .px.no-field > .hp-prime:not(#_) { padding-top: 136px !important; padding-bottom: 136px !important; }
body .px.no-field > .v9-partner-wrap:not(#_) { padding-top: 160px !important; }
body .px.no-field > .v9-partner-wrap + .hp-start-wrap:not(#_) { padding-top: 120px !important; }
body .px.no-field > .hp-start-wrap:last-child { margin-bottom: 160px; }
.v9-grid { gap: 88px; }
body .px h2.v9-h2:not(#_) { margin-bottom: 20px !important; }
body .px .v9-lead:not(#_) { margin-bottom: 28px !important; }
.v9-vgrid, .v9-fit { margin-top: 48px; }
.v9-nums { margin-top: 48px; }
@media (max-width: 720px) {
  .v9-path-wrap { padding-top: 40px; }
  body .px.no-field > .px-section:not(#_), body .px.no-field > .v9-path-wrap + .px-section:not(#_), body .px.no-field > .hp-prime + .px-section:not(#_) { padding-top: 104px !important; }
  body .px.no-field > .px-band:not(#_) { margin-top: 104px !important; padding: 80px 0 !important; }
  body .px.no-field > .hp-prime:not(#_) { padding-top: 80px !important; padding-bottom: 80px !important; }
  body .px.no-field > .v9-partner-wrap:not(#_) { padding-top: 96px !important; }
  body .px.no-field > .v9-partner-wrap + .hp-start-wrap:not(#_) { padding-top: 72px !important; }
  body .px.no-field > .hp-start-wrap:last-child { margin-bottom: 96px; }
}
@media (max-width: 900px) { .v9-grid { gap: 48px; } }
/* Full-width band, invoice flies in from the page edge, more air
   (Pooja, 28 Oct: "much wider", "come from the edge", "much more space"). */
.v9-path-wrap { padding-top: 96px; overflow-x: clip; }
.v9-path-wrap .px-wrap::before, .v9-path-wrap .px-wrap::after { display: none; }
.v9-path { --tw: min(100% - 48px, 1180px); width: 100vw; max-width: none; margin-left: calc(50% - 50vw); padding: 88px 0 72px; border: 0; border-radius: 0; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.6); }
.v9-steps { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.v9-steps::before { left: calc(24px + 10%); right: calc(24px + 10%); top: 42px; }
.v9-cubebox { width: 100px; height: 104px; }
.v9-tile { width: 88px; height: 80px; border-radius: 22px; }
.v9-plate-1 { top: 74px; width: 72px; height: 16px; border-radius: 12px; }
.v9-plate-2 { top: 86px; width: 56px; height: 15px; border-radius: 10px; }
.v9-step { gap: 22px; }
.v9-step-label { font-size: 16px; }
.v9-step > .v9-checks { top: -30px; }
.v9-step > .v9-posted { top: -36px; }
.v9-inv { top: 88px; margin: 26px 0 0 -13px;
  left: calc(((100% - var(--tw)) / 2 + var(--tw) * (0.1 + 0.2 * var(--p))) * var(--in) - 60px * (1 - var(--in))); }
body .px .v9-path-cta:not(#_) { margin-top: 36px !important; }
/* space inside sections */
.v9-points li, .v9-seq li { padding: 22px 0; }
.v9-seq li { padding-left: 44px; }
.v9-seq li::before { top: 23px; }
.v9-fit { gap: 48px; }
.v9-vgrid { gap: 40px; }
body .px .v9-lead:not(#_) { margin-bottom: 36px !important; }
body .px .v9-body:not(#_) { margin-bottom: 28px !important; }
.v9-labels { margin-bottom: 36px; gap: 10px; }
.v9-fit-head { margin-bottom: 48px; }
.v9-fit-foot { margin-top: 48px; padding-top: 32px; }
.hp-platform { margin-top: 16px; }
@media (max-width: 720px) {
  .v9-path-wrap { padding-top: 56px; }
  .v9-path { padding: 48px 0; }
  .v9-steps { gap: 14px; }
  .v9-steps::before { left: 55px; right: auto; top: 10%; }
  .v9-cubebox { width: 64px; height: 68px; }
  .v9-tile { width: 56px; height: 52px; border-radius: 14px; }
  .v9-plate-1 { top: 47px; width: 46px; height: 11px; border-radius: 8px; }
  .v9-plate-2 { top: 55px; width: 34px; height: 10px; border-radius: 6px; }
  .v9-step { gap: 18px; }
  .v9-step > .v9-checks, .v9-step > .v9-posted { top: 50%; }
  .v9-inv { top: calc(48px + (100% - 96px) * (0.1 + 0.2 * var(--p))); margin: -18px 0 0 -11px;
    left: calc(80px * var(--in) - 60px * (1 - var(--in))); }
  .v9-points li, .v9-seq li { padding: 18px 0; }
  .v9-seq li { padding-left: 40px; }
  .v9-fit { gap: 32px; }
}
/* hero copy of 28 Oct: three-line headline, bold tagline in the light-blue accent */
body .px .hx-hero .hp-stage-title:not(#_) { max-width: none; }
body .px .hx-tagline:not(#_) { margin: -12px 0 28px !important; font-size: 17px !important; font-weight: 600; color: #fff !important; }
.hx-tagline span { color: #6FB4FF; }
@media (max-width: 720px) { .v9-inv { left: calc(56px * var(--in) - 60px * (1 - var(--in))); } }
/* Back to the contained panel (Pooja, 28 Oct); only the invoice comes in
   from the page edge, flying over the white page into Intake. */
.v9-path { width: auto; max-width: 940px; margin: 0 auto; padding: 64px 24px 52px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 24px; overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 1px 0 0 rgba(255, 255, 255, 0.6), 0 24px 60px -18px rgba(30, 90, 180, 0.25); }
.v9-steps { max-width: none; padding: 0; }
.v9-steps::before { left: 10%; right: 10%; }
.v9-inv { top: 64px; z-index: 1;
  left: calc((24px + (100% - 48px) * (0.1 + 0.2 * var(--p))) * var(--in) + ((100% - 100vw) / 2 - 60px) * (1 - var(--in))); }
@media (max-width: 720px) {
  .v9-path { padding: 32px 20px; border-radius: 20px; }
  .v9-steps::before { left: 31px; }
  .v9-inv { top: calc(32px + (100% - 64px) * (0.1 + 0.2 * var(--p)));
    left: calc(52px * var(--in) - 100px * (1 - var(--in))); }
}
/* a more realistic invoice: coloured header, line items, total */
.v9-inv { width: 40px; height: 52px; margin: 14px 0 0 -20px; }
.v9-inv svg { filter: drop-shadow(0 6px 12px rgba(16, 22, 77, 0.22)); }
@media (max-width: 720px) { .v9-inv { width: 30px; height: 39px; margin: -20px 0 0 -15px; } }
/* Product views in Pooja's frosted reference (28 Oct): a sky-blue field,
   the card as frosted white glass with a soft white inner-glow edge, and
   two thinner glass plates stacked beneath it. Inner rows are small
   frosted tiles of the same glass. */
.v9-glass { padding: 44px 40px 72px; border-radius: 28px; background: linear-gradient(160deg, #E8F2FE 0%, #BFDAF7 55%, #8FBBEE 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 70px -24px rgba(30, 90, 180, 0.3); }
.v9-glass::before, .v9-glass::after { content: ""; position: absolute; z-index: 0; left: 50%; transform: translateX(-50%); filter: none; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.32));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), inset 0 0 10px rgba(255, 255, 255, 0.7); }
.v9-glass::before { top: auto; right: auto; bottom: 44px; width: calc(100% - 128px); height: 24px; }
.v9-glass::after { top: auto; bottom: 30px; width: calc(100% - 176px); height: 22px; border-radius: 14px; }
.v9-glass .v9-app { z-index: 1; border: 0; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.5));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.95), inset 0 0 22px rgba(255, 255, 255, 0.85), inset 0 -14px 26px rgba(80, 150, 230, 0.12),
    0 18px 40px -10px rgba(30, 90, 180, 0.28); }
.v9-glass .v9-app::before { display: none; }
.v9-glass .v9-app-bar { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.8); }
.v9-glass .v9-app figcaption { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.8); }
.v9-glass .v9-kv dd, .v9-glass .v9-rec li { background: rgba(255, 255, 255, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 10px rgba(255, 255, 255, 0.6); }
.v9-glass .v9-app-actions span { padding: 7px 12px; font-size: 12.5px; background: rgba(255, 255, 255, 0.5); border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), inset 0 0 8px rgba(255, 255, 255, 0.7); }
.v9-glass .v9-app-actions .is-primary { background: linear-gradient(180deg, #2A3BD8, #1B2380); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 14px rgba(27, 35, 128, 0.3); }
.v9-glass .v9-rec-out { background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), inset 0 0 12px rgba(120, 170, 240, 0.25); }
.v9-glass .v9-rec i { background: rgba(255, 255, 255, 0.7); color: #1B5FC9; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95); }
@media (max-width: 720px) {
  .v9-glass { padding: 24px 16px 56px; border-radius: 22px; }
  .v9-glass::before { bottom: 34px; width: calc(100% - 64px); height: 20px; }
  .v9-glass::after { bottom: 22px; width: calc(100% - 104px); height: 18px; }
}
.v9-glass .v9-app-actions { gap: 6px; flex-wrap: nowrap; }
.v9-glass .v9-app-actions span { padding: 7px 11px; font-size: 12px; white-space: nowrap; }
@media (max-width: 720px) { .v9-glass .v9-app-actions { flex-wrap: wrap; } }
/* Entrance once in view (home-preview.js adds .v9-anim, then .is-in):
   card rises, plates settle under it, rows arrive one by one, checks pass
   in turn, the outcome and actions land last. Then a slow light sweep. */
@keyframes v9-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes v9-plate { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes v9-row { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes v9-pop { 0% { opacity: 0; transform: scale(0.7); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes v9-sheen { 0%, 70% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes v9-tagglow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(255, 190, 80, 0); } 50% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 6px rgba(255, 190, 80, 0.18); } }
.v9-anim .v9-app, .v9-anim::before, .v9-anim::after, .v9-anim .v9-kv dd, .v9-anim .v9-rec li, .v9-anim .v9-rec i, .v9-anim .v9-rec-out, .v9-anim .v9-app-actions, .v9-anim .v9-tag { opacity: 0; }
.v9-anim.is-in .v9-app { animation: v9-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.v9-anim.is-in::before { animation: v9-plate 0.6s 0.35s ease-out both; }
.v9-anim.is-in::after { animation: v9-plate 0.6s 0.5s ease-out both; }
.v9-anim.is-in .v9-tag { animation: v9-rise 0.5s 0.45s ease-out both, v9-tagglow 3.2s 1.6s ease-in-out infinite; }
.v9-anim.is-in .v9-kv dd, .v9-anim.is-in .v9-rec li { animation: v9-row 0.5s calc(0.55s + var(--i) * 0.14s) ease-out both; }
.v9-anim.is-in .v9-rec i { animation: v9-pop 0.45s calc(0.95s + var(--i) * 0.28s) ease-out both; }
.v9-rec li:nth-child(1) { --i: 0; } .v9-rec li:nth-child(2) { --i: 1; } .v9-rec li:nth-child(3) { --i: 2; } .v9-rec li:nth-child(4) { --i: 3; } .v9-rec li:nth-child(5) { --i: 4; }
.v9-anim.is-in .v9-rec-out { animation: v9-rise 0.6s 2.5s ease-out both; }
.v9-anim.is-in .v9-app-actions { animation: v9-rise 0.6s 1.25s ease-out both; }
.v9-glass .v9-app::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 28%; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); transform: translateX(-120%) skewX(-18deg); }
.v9-anim.is-in .v9-app::after { animation: v9-sheen 7s 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .v9-glass .v9-app::after { display: none; } }
@media (min-width: 721px) { .v9-glass { padding-left: 28px; padding-right: 28px; } .v9-glass .v9-rec li { grid-template-columns: 112px 1fr auto; } }
/* One simple frosted box (Pooja, 28 Oct): no stacked plates, no outer
   field; a soft sky-blue light behind is all the glass needs. */
.v9-glass { padding: 28px; border-radius: 0; background: none; box-shadow: none; }
.v9-glass::before, .v9-glass::after { display: block; content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(50px); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; opacity: 1; animation: none !important; bottom: auto; }
.v9-glass::before { left: auto; right: 0; top: 0; width: 60%; height: 70%; background: radial-gradient(circle, rgba(80, 150, 235, 0.55), rgba(80, 150, 235, 0) 70%); }
.v9-glass::after { left: 0; top: auto; bottom: 0; width: 55%; height: 60%; background: radial-gradient(circle, rgba(140, 195, 250, 0.6), rgba(140, 195, 250, 0) 70%); }
@media (max-width: 720px) { .v9-glass { padding: 12px 0; } }
/* hero supporting line: understated, below the body (28 Oct brief) */
body .px .hx-tagline:not(#_) { margin: -16px 0 32px !important; font-size: 15px !important; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.72) !important; }
.hx-tagline span { color: rgba(156, 200, 255, 0.95); }
/* decision record: Validation, Authority, Outcome */
body .px .v9-rec-h:not(#_) { margin: 0 0 8px !important; font-size: 11px !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7090 !important; }
.v9-rec + .v9-rec-h { margin-top: 14px !important; }
.v9-status { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: #10164D; color: #fff; font-style: normal; font-size: 12px; font-weight: 500; }
.v9-rec-out span { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.v9-glass .v9-rec li { grid-template-columns: 124px 1fr auto; font-size: 13.5px; padding: 9px 14px; }
.v9-bar-note { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95); font-size: 11.5px; color: #4A5170; white-space: nowrap; }
@media (max-width: 720px) { .v9-glass .v9-rec li { grid-template-columns: 1fr auto; } .v9-glass .v9-rec li span { grid-column: 1; } .v9-glass .v9-rec li i { grid-row: 1; grid-column: 2; } .v9-bar-note { display: none; } }
body .px .v9-app-bar p:not(#_) { white-space: nowrap; flex-shrink: 0; }
/* Ask NXT AI: small dark band, dotted orb on the right (Pooja's ref, 28 Oct) */
.v9-ask { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 32px; padding: 56px 64px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(70% 90% at 80% 50%, #0B1A5C 0%, #050824 60%, #03051A 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 70px -24px rgba(5, 8, 36, 0.5); }
body .px .v9-ask-eyebrow:not(#_) { margin: 0 0 14px !important; font-size: 13px !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #6FD3FF !important; }
body .px h2.v9-ask-h:not(#_) { margin: 0 0 28px !important; font-size: clamp(26px, 2.6vw, 36px) !important; font-weight: 500 !important; line-height: 1.15 !important; color: #fff !important; }
.v9-ask-h span { background: linear-gradient(90deg, #6FD3FF, #4C7DFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v9-ask-form { display: flex; align-items: center; gap: 8px; max-width: 520px; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.v9-ask-form:focus-within { box-shadow: inset 0 0 0 1px rgba(111, 211, 255, 0.7); }
.v9-ask-form input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; outline: none; }
.v9-ask-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.v9-ask-form button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: linear-gradient(135deg, #4CC8FF, #2C5BFF); color: #fff; font-size: 18px; cursor: pointer; }
.v9-ask-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v9-ask-chips button { padding: 7px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); font: inherit; font-size: 13px; cursor: pointer; }
.v9-ask-chips button:hover { background: rgba(111, 211, 255, 0.14); }
body .px .v9-ask-note:not(#_) { min-height: 1.5em; margin: 16px 0 0 !important; font-size: 14px !important; color: rgba(255, 255, 255, 0.75) !important; }
.v9-ask-note a { color: #6FD3FF; }
.v9-orb { width: 100%; height: 380px; display: block; }
@media (max-width: 900px) {
  .v9-ask { grid-template-columns: 1fr; padding: 40px 24px 8px; }
  .v9-orb { height: 260px; order: -1; margin: -24px 0 -16px; }
}
body .px.no-field > .v9-path-wrap + .v9-ask-wrap:not(#_) { padding-top: 120px !important; } @media (max-width: 720px) { body .px.no-field > .v9-path-wrap + .v9-ask-wrap:not(#_) { padding-top: 72px !important; } }
/* hero headline (28 Oct brief): two lines on desktop, second in the light-blue accent */
.hx-title span { display: block; color: #fff; }
.hx-title span + span { color: #6FB4FF; }
@media (min-width: 901px) { .hx-title span { white-space: nowrap; } }
/* Hero stacked (Pooja, 28 Oct: "cramped"): headline on its own, then the
   paragraph, actions and SAP line in a calmer column below. */
.hx-wrap.hp-stage-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 150px; padding-bottom: 260px; }
.hx-side { padding-top: 0; max-width: 600px; }
body .px .hx-hero .hp-stage-title:not(#_) { font-size: clamp(38px, 5vw, 72px) !important; line-height: 1.08 !important; }
body .px .hx-hero .hp-stage-body:not(#_) { margin-bottom: 36px !important; }
body .px .hx-hero .hp-stage-support:not(#_) { margin-top: 24px !important; }
@media (max-width: 900px) { .hx-wrap.hp-stage-wrap { gap: 24px; padding-top: 112px; padding-bottom: 160px; } }
@media (min-width: 901px) { .hx-wrap.hp-stage-wrap { padding-bottom: 300px; } }
/* Not stacked (Pooja, 28 Oct): side by side again, with air between. */
@media (min-width: 901px) {
  .hx-wrap.hp-stage-wrap { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 96px; align-items: center; padding-top: 168px; padding-bottom: 260px; }
  .hx-side { max-width: 460px; padding-top: 36px; }
  body .px .hx-hero .hp-stage-title:not(#_) { font-size: clamp(36px, 3.9vw, 56px) !important; line-height: 1.1 !important; }
}
/* Hero sizing brief (28 Oct): headline about 14% smaller, line height 1.1,
   about 25% less space above the eyebrow, and the hero no taller than it
   needs to be, so the CTAs and the lower curve show on a laptop screen. */
@media (min-width: 901px) {
  .hx-hero.hp-stage { min-height: 0; }
  .hx-wrap.hp-stage-wrap { padding-top: 126px; padding-bottom: 236px; }
  body .px .hx-hero .hp-stage-title:not(#_) { font-size: clamp(32px, 3.35vw, 48px) !important; line-height: 1.1 !important; }
}
/* "Give Finance a higher gear": compact benefits */
.v9-adv-head { max-width: 760px; }
.v9-benefits { margin-top: 40px; }
.v9-adv-more { margin: 32px 0 0 !important; }
/* "Autonomy you can verify": text in two columns, then the before/after pair */
.v9-gov-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 88px; align-items: end; margin-bottom: 56px; }
body .px .v9-gov-head .v9-h2:not(#_) { margin-bottom: 0 !important; }
.v9-pair { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: stretch; margin: 0; padding: 32px; }
.v9-pair .v9-card { display: flex; flex-direction: column; }
.v9-pair .v9-app-body { flex: 1; display: flex; flex-direction: column; }
.v9-pair .v9-rec-out { margin-top: auto; }
.v9-pair > figcaption { grid-column: 1 / -1; position: relative; z-index: 1; margin-top: 18px; text-align: center; font-size: 11px; color: #8A8FA8; }
.v9-glass .v9-rec i.is-warn { color: #8A5300; background: rgba(255, 214, 140, 0.55); }
.v9-status.is-wait { background: #FFE2A8; color: #6B4100; }
.v9-link { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; text-align: center; }
.v9-link-arrow { position: relative; width: 100%; height: 1.5px; background: linear-gradient(90deg, rgba(32, 39, 225, 0.15), rgba(32, 39, 225, 0.7)); }
.v9-link-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent rgba(32, 39, 225, 0.8); }
.v9-link-label { font-size: 12px; font-weight: 500; line-height: 1.3; color: #2027E1; }
.v9-anim.is-in .v9-link { animation: v9-rise 0.6s 0.9s ease-out both; }
.v9-anim .v9-link { opacity: 0; }
.v9-pair .v9-card:last-of-type { }
.v9-anim.is-in .v9-card + .v9-link + .v9-card { animation-delay: 0.5s; }
@media (max-width: 900px) {
  .v9-gov-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .v9-pair { grid-template-columns: 1fr; padding: 12px 0; }
  .v9-link { flex-direction: row; padding: 18px 0; }
  .v9-link-arrow { width: 1.5px; height: 36px; background: linear-gradient(180deg, rgba(32, 39, 225, 0.15), rgba(32, 39, 225, 0.7)); }
  .v9-link-arrow::after { right: -4px; top: auto; bottom: -1px; border-width: 8px 5px 0 5px; border-color: rgba(32, 39, 225, 0.8) transparent transparent transparent; }
}
.v9-gov-head { align-items: start; }
.v9-pair .v9-rec li { grid-template-columns: 104px 1fr auto; font-size: 13px; }
@media (max-width: 720px) { .v9-pair .v9-rec li { grid-template-columns: 1fr auto; } }
/* spacing for the 28 Oct order: hero, Ask, logos, results ... path above the pair */
body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { padding-top: 104px !important; }
body .px.no-field > .lm-wrap + .px-band:not(#_) { margin-top: 112px !important; }
body .px.no-field > .px-band + .v9-adv:not(#_) { padding-top: 160px !important; }
body .px.no-field > .px-section + .v9-path-wrap:not(#_) { padding-top: 160px; }
body .px.no-field > .v9-path-wrap + .hp-prime:not(#_) { margin-top: 120px; }
@media (max-width: 720px) {
  body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { padding-top: 56px !important; }
  body .px.no-field > .lm-wrap + .px-band:not(#_) { margin-top: 72px !important; }
  body .px.no-field > .px-band + .v9-adv:not(#_) { padding-top: 96px !important; }
  body .px.no-field > .px-section + .v9-path-wrap:not(#_) { padding-top: 96px; }
  body .px.no-field > .v9-path-wrap + .hp-prime:not(#_) { margin-top: 80px; }
}
/* Success reads green (Pooja, 28 Oct): ticks, Passed/Granted and Posted */
.v9-checks i { background: #16A34A; }
.v9-glass .v9-rec i:not(.is-warn) { color: #157A3B; background: rgba(22, 163, 74, 0.12); box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.18); }
.v9-status:not(.is-wait) { background: #16A34A; color: #fff; }
.v9-posted { background: #16A34A; }
/* Ask NXT AI as the hero's echo (Pooja, 28 Oct): a second blue block whose
   top edge is the hero's own curved edge (the same divider shape, mirrored
   as on the hero), set a parallel gap lower, so the two interlock. */
body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { --cut: 218px; --gap: 36px; position: relative; z-index: 1; margin-top: calc(var(--gap) - var(--cut)); padding: calc(var(--cut) + 8px) 0 96px !important;
  background: #0B1250 url("/assets/img/home/hero.jpg") center / cover no-repeat;
  -webkit-mask: url("/assets/img/home/hero-divider-mirror.svg") center top / 2100px var(--cut) no-repeat, linear-gradient(#000 0 0) 0 var(--cut) / 100% calc(100% - var(--cut)) no-repeat;
  mask: url("/assets/img/home/hero-divider-mirror.svg") center top / 2100px var(--cut) no-repeat, linear-gradient(#000 0 0) 0 var(--cut) / 100% calc(100% - var(--cut)) no-repeat; }
.hx-hero + .v9-ask-wrap .v9-ask { padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
@media (max-width: 900px) {
  body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { --cut: 120px; --gap: 24px; padding-bottom: 56px !important;
    -webkit-mask-size: 1157px var(--cut), 100% calc(100% - var(--cut)); mask-size: 1157px var(--cut), 100% calc(100% - var(--cut)); }
  .hx-hero + .v9-ask-wrap .v9-ask { padding: 0; }
}
/* overlap the two mask layers by a few pixels so no hairline shows */
body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) {
  -webkit-mask-position: center top, 0 calc(var(--cut) - 4px); mask-position: center top, 0 calc(var(--cut) - 4px);
  -webkit-mask-size: 2100px var(--cut), 100% calc(100% - var(--cut) + 4px); mask-size: 2100px var(--cut), 100% calc(100% - var(--cut) + 4px); }
@media (max-width: 900px) {
  body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { -webkit-mask-size: 1157px var(--cut), 100% calc(100% - var(--cut) + 4px); mask-size: 1157px var(--cut), 100% calc(100% - var(--cut) + 4px); }
}
/* thinner gap between the hero and the Ask block (Pooja, 28 Oct) */
body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { --gap: 16px; }
@media (max-width: 900px) { body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { --gap: 12px; } }
/* Expertise, text only: heading block, then the three steps across */
.v9-imp .v9-lead, .v9-imp .v9-body { max-width: 760px; }
.v9-imp .v9-seq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
.v9-imp .v9-seq li { border-top: 1px solid #E6E8F2; }
body .px .v9-imp-note:not(#_) { margin: 8px 0 0 !important; font-size: 13px !important; color: #8A8FA8 !important; }
@media (max-width: 900px) { .v9-imp .v9-seq { grid-template-columns: 1fr; gap: 0; margin-top: 24px; } }
/* gallery: play button top-right, clear of the thumbnails' small text */
.v9-vthumb .yt-play { left: auto; right: 12px; top: 12px; bottom: auto; }
/* Hairline gap, and the orb floats up over the hero's edge (Pooja, 28 Oct).
   The curved mask now cuts only the block's background (::before), so the
   orb is not clipped and can cross the white line into the hero. */
body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { --gap: 3px; isolation: isolate; background: none;
  -webkit-mask: none; mask: none; }
.hx-hero + .v9-ask-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #0B1250 url("/assets/img/home/hero.jpg") center / cover no-repeat;
  -webkit-mask: url("/assets/img/home/hero-divider-mirror.svg") center top / 2100px var(--cut) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--cut) - 4px) / 100% calc(100% - var(--cut) + 4px) no-repeat;
  mask: url("/assets/img/home/hero-divider-mirror.svg") center top / 2100px var(--cut) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--cut) - 4px) / 100% calc(100% - var(--cut) + 4px) no-repeat; }
.hx-hero + .v9-ask-wrap .v9-orb { position: relative; z-index: 2; height: 460px; margin: -230px 0 -40px; }
@media (max-width: 900px) {
  body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { --gap: 2px; }
  .hx-hero + .v9-ask-wrap::before { -webkit-mask-size: 1157px var(--cut), 100% calc(100% - var(--cut) + 4px); mask-size: 1157px var(--cut), 100% calc(100% - var(--cut) + 4px); }
  .hx-hero + .v9-ask-wrap .v9-orb { height: 300px; margin: -150px 0 -16px; }
}
/* "Your AP expertise": dark glass cards (Pooja's dark-boxes ref, 28 Oct) */
body .px.no-field > .v9-dark:not(#_) { position: relative; isolation: isolate; overflow: hidden; margin-top: 176px; padding: 120px 0 112px !important; background: radial-gradient(60% 80% at 20% 0%, #13237A 0%, rgba(19, 35, 122, 0) 60%), radial-gradient(50% 70% at 90% 100%, #0F2E9E 0%, rgba(15, 46, 158, 0) 60%), #050824; color: #fff; }
body .px .v9-dark .v9-h2:not(#_) { color: #fff !important; }
.v9-dark .v9-h2 span { color: #6FB4FF; }
body .px .v9-dark .v9-lead:not(#_) { color: rgba(255, 255, 255, 0.75) !important; }
.v9-dcards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.v9-dcard { position: relative; padding: 28px 28px 26px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 24px 50px -20px rgba(0, 0, 0, 0.6); transition: transform 300ms, box-shadow 300ms; }
.v9-dcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(111, 211, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 30px 60px -20px rgba(44, 91, 255, 0.45); }
.v9-dviz { display: block; width: 100%; height: 96px; margin-bottom: 22px; filter: drop-shadow(0 0 12px rgba(111, 211, 255, 0.35)); }
body .px .v9-dcard h3:not(#_) { margin: 0 0 6px !important; font-size: 20px !important; font-weight: 500 !important; color: #fff !important; }
body .px .v9-dcard p:not(#_) { margin: 0 0 18px !important; font-size: 15px !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.7) !important; }
.v9-dtag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #9CD6FF; background: rgba(111, 180, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(111, 180, 255, 0.25); }
body .px .v9-dnote:not(#_) { margin: 28px 0 0 !important; font-size: 13px !important; color: rgba(255, 255, 255, 0.5) !important; }
body .px.no-field > .v9-dark + .v9-path-wrap:not(#_) { padding-top: 160px; }
/* "Your SAP. Your AI choices.": statement + three short cards */
.v9-choice-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.v9-ccards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v9-ccards li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px; background: #F5F7FD; box-shadow: inset 0 0 0 1px #E6E9F5; }
.v9-ccards strong { grid-column: 2; font-weight: 500; color: #10164D; }
.v9-ccards li > span:not(.v9-cicon) { grid-column: 2; font-size: 14px; color: #6B7090; }
.v9-cicon { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #E6F1FE, #CFE1FB); color: #2C5BFF; font-size: 18px; }
body .px .v9-statement:not(#_) { margin: 88px 0 0 !important; font-size: clamp(28px, 3.6vw, 52px) !important; font-weight: 500; line-height: 1.12; letter-spacing: -0.025em; color: #10164D !important; }
.v9-statement span { display: block; color: #2027E1; }
@media (max-width: 900px) {
  .v9-dcards { grid-template-columns: 1fr; }
  body .px.no-field > .v9-dark:not(#_) { margin-top: 104px; padding: 72px 0 !important; }
  .v9-choice-grid { grid-template-columns: 1fr; gap: 32px; }
  body .px .v9-statement:not(#_) { margin-top: 56px !important; }
}
body .px .v9-statement:not(#_) { line-height: 1.08 !important; }
/* spacing for the 28 Oct final flow */
body .px.no-field > .hp-prime + .px-band:not(#_) { margin-top: 0 !important; }
body .px.no-field > .px-band + .v9-dark:not(#_) { margin-top: 0; }
body .px.no-field > .v9-path-wrap + .lm-wrap { padding-top: 112px; }
@media (max-width: 720px) { body .px.no-field > .v9-path-wrap + .lm-wrap { padding-top: 72px; } }
/* Ask NXT AI, compact tool (28 Oct): one small heading, input as focal point */
body .px h2.v9-ask-h:not(#_) { margin: 0 0 20px !important; font-size: clamp(22px, 1.9vw, 27px) !important; font-weight: 500 !important; letter-spacing: -0.01em; }
.v9-ask { padding: 36px 56px; gap: 24px; }
.v9-ask .v9-ask-form { max-width: 560px; padding-top: 8px; padding-bottom: 8px; }
.v9-ask .v9-ask-form input { font-size: 16px; }
.v9-ask .v9-orb { height: 240px; }
@media (max-width: 900px) { .v9-ask { padding: 28px 22px 4px; } .v9-ask .v9-orb { height: 200px; margin: -12px 0 -20px; } }
/* taller hero (Pooja, 29 Oct): more blue above and below the copy */
@media (min-width: 901px) { .hx-wrap.hp-stage-wrap { padding-top: 160px; padding-bottom: 380px; } }
@media (max-width: 900px) { .hx-wrap.hp-stage-wrap { padding-top: 128px; padding-bottom: 210px; } }
/* orb sits mostly in its own block; about a quarter crosses into the hero */
.hx-hero + .v9-ask-wrap .v9-ask { align-items: start; }
.hx-hero + .v9-ask-wrap .v9-orb { align-self: start; margin: -140px 0 -60px; }
.hx-hero + .v9-ask-wrap .v9-orb { margin-top: -62px; }
.hx-hero + .v9-ask-wrap .v9-orb { margin-top: -128px; }
.hx-hero + .v9-ask-wrap .v9-orb { margin-top: -178px; }
@media (max-width: 900px) { .hx-hero + .v9-ask-wrap .v9-orb { margin: -110px 0 -24px; } }
/* First screen (Pooja, 29 Oct): the whole white hairline shows without
   scrolling on a laptop, and "Ask NXT AI" starts clear of the fold rather
   than half-visible. Hero 636px tall at 1440 wide; Ask copy 96px below the line. */
@media (min-width: 901px) {
  .hx-wrap.hp-stage-wrap { padding-top: 120px; padding-bottom: 272px; }
  body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { padding-top: calc(var(--cut) + 96px) !important; }
  .hx-hero + .v9-ask-wrap .v9-orb { margin-top: -266px; }
}
/* The space above "Ask NXT AI" follows the window height, so on load the
   heading always starts just below the fold (never half-visible); the orb
   keeps its quarter overlap with the hero. */
@media (min-width: 901px) {
  body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { --askgap: clamp(96px, calc(100vh - 712px), 420px); padding-top: calc(var(--cut) + var(--askgap)) !important; }
  .hx-hero + .v9-ask-wrap .v9-orb { margin-top: calc(-170px - var(--askgap)); }
}
/* NXT-blue glow behind the orb so the brand-blue dots read on the blue block */
.v9-orb { background: radial-gradient(closest-side, rgba(32, 39, 225, 0.55), rgba(32, 39, 225, 0.18) 55%, rgba(32, 39, 225, 0) 75%); }
/* closing line of the deployment section: small, navy (29 Oct) */
body .px .v9-closing:not(#_) { margin: 40px 0 0 !important; padding-top: 24px; border-top: 1px solid #E6E8F2; font-size: 18px !important; font-weight: 500; line-height: 1.5; color: #10164D !important; }
/* ===== NXT AI Skills + Skill Designer (29 Oct brief) ===== */
body .px.no-field > .v9-skills:not(#_) { position: relative; isolation: isolate; overflow: hidden; margin-top: 160px; padding: 112px 0 104px !important; color: #fff;
  background: radial-gradient(55% 70% at 15% 0%, #13237A 0%, rgba(19, 35, 122, 0) 60%), radial-gradient(45% 60% at 95% 55%, #0F2E9E 0%, rgba(15, 46, 158, 0) 60%), #050824; }
body .px.no-field > .v9-skills + .hp-prime:not(#_) { margin-top: 0; }
body .px .v9-sk-eyebrow:not(#_) { margin: 0 0 14px !important; font-size: 13px !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #6FD3FF !important; }
body .px .v9-skills .v9-h2:not(#_) { color: #fff !important; max-width: 20em; }
.v9-skills .v9-h2 span { display: block; color: #6FB4FF; }
body .px .v9-skills .v9-lead:not(#_) { max-width: 46em; margin-bottom: 0 !important; color: rgba(255, 255, 255, 0.78) !important; }
.v9-sk-head { margin-bottom: 56px; }
/* connected illustration: invoice -> Skills -> next action */
.v9-sk-map { display: grid; grid-template-columns: 180px 56px minmax(0, 1fr) 56px 280px; align-items: center; margin: 0; padding: 40px; border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.v9-sk-inv { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.v9-sk-invsvg { width: 64px; height: 83px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }
body .px .v9-sk-inv p:not(#_) { margin: 0 !important; font-size: 14px !important; font-weight: 500; color: #fff !important; }
.v9-sk-link { position: relative; height: 1.5px; background: linear-gradient(90deg, rgba(111, 180, 255, 0.2), rgba(111, 180, 255, 0.8)); }
.v9-sk-link::after { content: ""; position: absolute; right: -1px; top: -4px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent rgba(111, 180, 255, 0.9); }
.v9-sk-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v9-sk-tiles li { display: flex; align-items: center; gap: 10px; padding: 16px 16px; border-radius: 16px; font-size: 15px; font-weight: 500; color: #fff;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22); animation: v9-sk-on 10s ease-in-out infinite both; }
.v9-sk-tiles li:nth-child(2) { animation-delay: 2.5s; } .v9-sk-tiles li:nth-child(3) { animation-delay: 5s; } .v9-sk-tiles li:nth-child(4) { animation-delay: 7.5s; }
@keyframes v9-sk-on { 0%, 24%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22); } 6%, 18% { box-shadow: inset 0 0 0 1px rgba(111, 211, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 24px rgba(44, 91, 255, 0.45); } }
.v9-sk-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6FD3FF; box-shadow: 0 0 8px rgba(111, 211, 255, 0.8); }
.v9-sk-next { padding: 20px 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
body .px .v9-sk-next-h:not(#_) { margin: 0 0 12px !important; font-size: 12px !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6) !important; }
body .px .v9-sk-path:not(#_) { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 14px !important; line-height: 1.35; color: #fff !important; }
.v9-sk-path i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.v9-sk-path.is-go i { background: #22C55E; box-shadow: 0 0 8px rgba(34, 197, 94, 0.7); }
.v9-sk-path.is-route i { background: #F2A900; box-shadow: 0 0 8px rgba(242, 169, 0, 0.6); }
body .px .v9-sk-or:not(#_) { margin: 6px 0 !important; text-align: center; font-size: 12px !important; color: rgba(255, 255, 255, 0.5) !important; }
.v9-sk-map > figcaption { grid-column: 1 / -1; margin-top: 24px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
/* Skill Designer */
.v9-sk-designer { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; margin-top: 72px; }
body .px h3.v9-sk-h3:not(#_) { margin: 0 0 12px !important; font-size: clamp(22px, 2vw, 28px) !important; font-weight: 500 !important; line-height: 1.2 !important; color: #fff !important; }
body .px .v9-sk-body:not(#_) { margin: 0 0 20px !important; font-size: 16px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.75) !important; }
.v9-sk-life { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v9-sk-life li { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #CFE6FF; background: rgba(111, 180, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(111, 180, 255, 0.28); }
.v9-sk-life li + li::before { content: "→"; margin: 0 8px 0 -2px; color: rgba(111, 180, 255, 0.7); }
.v9-sk-life li + li { padding-left: 10px; }
body .px .v9-sk-note:not(#_) { margin: 0 !important; font-size: 14px !important; color: rgba(255, 255, 255, 0.6) !important; }
.v9-sk-shot { margin: 0; }
.v9-sk-shot a { display: block; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 24px 50px -16px rgba(0, 0, 0, 0.6); }
.v9-sk-shot img { display: block; width: 100%; height: auto; }
.v9-sk-shot figcaption { margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
/* governance line, CTA, availability */
.v9-sk-foot { margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 40px; align-items: baseline; }
body .px .v9-sk-gov:not(#_) { margin: 0 !important; font-size: 16px !important; color: rgba(255, 255, 255, 0.85) !important; }
body .px .v9-sk-cta:not(#_) { margin: 0 !important; }
.v9-skills .px-more { color: #fff; }
body .px .v9-sk-avail:not(#_) { grid-column: 1 / -1; margin: 6px 0 0 !important; font-size: 12px !important; color: rgba(255, 255, 255, 0.5) !important; }
@media (prefers-reduced-motion: reduce) { .v9-sk-tiles li { animation: none; } }
@media (max-width: 1000px) {
  .v9-sk-map { grid-template-columns: 1fr; gap: 0; padding: 24px; justify-items: stretch; }
  .v9-sk-inv { flex-direction: row; justify-content: center; }
  .v9-sk-invsvg { width: 40px; height: 52px; }
  .v9-sk-link { justify-self: center; width: 1.5px; height: 32px; margin: 8px 0; background: linear-gradient(180deg, rgba(111, 180, 255, 0.2), rgba(111, 180, 255, 0.8)); }
  .v9-sk-link::after { right: -4px; top: auto; bottom: -1px; border-width: 8px 5px 0 5px; border-color: rgba(111, 180, 255, 0.9) transparent transparent transparent; }
  .v9-sk-designer { grid-template-columns: 1fr; gap: 32px; margin-top: 56px; }
  .v9-sk-foot { grid-template-columns: 1fr; }
  body .px.no-field > .v9-skills:not(#_) { margin-top: 104px; padding: 72px 0 !important; }
}
@media (max-width: 520px) { .v9-sk-tiles { grid-template-columns: 1fr; } }
.v9-sk-designer { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.v9-sk-life { gap: 4px; }
.v9-sk-life li { padding: 5px 10px; font-size: 12.5px; }
.v9-sk-life li + li { padding-left: 8px; }
.v9-sk-life li + li::before { margin-right: 6px; }
/* Skills section in the dark frosted-glass style (Pooja's dark-boxes ref, 29 Oct):
   blurred electric-blue light behind, translucent navy cards with thin lit
   edges, the screenshot set in a glass bezel, and more room throughout. */
.v9-skills::before, .v9-skills::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.v9-skills::before { width: 520px; height: 420px; left: 6%; top: 34%; background: rgba(44, 91, 255, 0.45); }
.v9-skills::after { width: 560px; height: 460px; right: 4%; bottom: 14%; background: rgba(32, 39, 225, 0.5); }
.v9-sk-glass, .v9-sk-map, .v9-sk-designer { border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 40px 80px -30px rgba(0, 0, 0, 0.7); }
.v9-sk-head { margin-bottom: 64px; }
.v9-sk-map { padding: 48px; }
.v9-sk-map > figcaption { margin-top: 32px; }
.v9-sk-designer { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; margin-top: 48px; padding: 56px; }
body .px h3.v9-sk-h3:not(#_) { margin-bottom: 16px !important; }
body .px .v9-sk-body:not(#_) { margin-bottom: 28px !important; }
.v9-sk-life { margin-bottom: 24px; }
.v9-sk-shot a { padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
.v9-sk-shot img { border-radius: 12px; }
.v9-sk-shot figcaption { margin-top: 14px; font-size: 13px; }
.v9-sk-foot { margin-top: 72px; padding-top: 36px; }
body .px.no-field > .v9-skills:not(#_) { padding: 128px 0 128px !important; }
@media (max-width: 1000px) {
  .v9-sk-map { padding: 24px; }
  .v9-sk-designer { padding: 28px 22px; gap: 36px; }
  .v9-sk-foot { margin-top: 48px; }
  body .px.no-field > .v9-skills:not(#_) { padding: 80px 0 !important; }
  .v9-skills::before, .v9-skills::after { width: 300px; height: 300px; }
}
@media (min-width: 1001px) { .v9-sk-designer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .v9-sk-life { flex-wrap: nowrap; } .v9-sk-life li { padding: 5px 9px; font-size: 12px; white-space: nowrap; } }
/* ===== NXT platform map (29 Oct brief) ===== */
body .px.no-field > .v9-plat:not(#_) { padding-top: 160px !important; }
.v9-plat-head { max-width: 760px; margin-bottom: 64px; }
.v9-map { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1.45fr) 112px minmax(0, 1fr); grid-template-areas: "in gl core gr out" "bands bands bands bands bands" "cap cap cap cap cap"; align-items: stretch; margin: 0; padding: 64px 40px 28px; border-radius: 28px; background: linear-gradient(180deg, #F5F8FF, #EEF3FE); box-shadow: inset 0 0 0 1px #E3E8F7; }
.v9-map-in { grid-area: in; } .v9-gut-l { grid-area: gl; } .v9-core { grid-area: core; } .v9-gut-r { grid-area: gr; } .v9-map-out { grid-area: out; }
.v9-map-col { position: relative; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
body .px .v9-map-k:not(#_) { position: absolute; top: -30px; left: 2px; margin: 0 !important; font-size: 11px !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6B7090 !important; }
.v9-node { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 18px 20px; border-radius: 18px; text-decoration: none; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px #DCE3F5, 0 10px 24px -14px rgba(16, 22, 77, 0.25); transition: box-shadow 200ms, transform 200ms; }
.v9-node strong { font-size: 16px; font-weight: 600; color: #10164D; }
.v9-node span { font-size: 13px; line-height: 1.45; color: #4A5170; }
a.v9-node:hover, a.v9-node:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px #2027E1, 0 14px 30px -14px rgba(32, 39, 225, 0.35); outline: none; }
/* centre: NXT AP */
.v9-core { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 30px 30px 26px; border-radius: 24px; color: #fff; background: radial-gradient(120% 90% at 85% 0%, #1E2BB8 0%, #10164D 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 30px 60px -24px rgba(16, 22, 77, 0.55); }
.v9-core-t { align-self: flex-start; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: #fff; text-decoration: none; }
.v9-core-t:hover, .v9-core-t:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
body .px .v9-core-d:not(#_) { margin: 4px 0 18px !important; font-size: 15px !important; color: rgba(255, 255, 255, 0.8) !important; }
.v9-core-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.v9-core-steps li { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); animation: v9-step 12s ease-in-out infinite both; }
.v9-core-steps li:nth-child(1) { animation-delay: 1.8s; } .v9-core-steps li:nth-child(2) { animation-delay: 2.5s; } .v9-core-steps li:nth-child(3) { animation-delay: 3.2s; } .v9-core-steps li:nth-child(4) { animation-delay: 3.9s; } .v9-core-steps li:nth-child(5) { animation-delay: 4.6s; }
@keyframes v9-step { 0%, 9%, 100% { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); } 2%, 6% { background: rgba(111, 180, 255, 0.35); color: #fff; } }
body .px .v9-core-status:not(#_) { height: 26px; margin: 0 0 14px !important; }
.v9-core-status span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #16A34A; color: #fff; font-size: 12.5px; font-weight: 500; opacity: 0; animation: v9-posted 12s ease-in-out infinite both; }
.v9-core-status span::before { content: "✓"; font-size: 11px; }
@keyframes v9-posted { 0%, 46% { opacity: 0; transform: translateY(4px); } 49%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
body .px .v9-core-ex:not(#_) { margin: 0 !important; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.22); font-size: 13px !important; color: rgba(255, 255, 255, 0.7) !important; }
.v9-core-ex a { color: #FFD27A; font-weight: 500; }
/* connectors with rounded corners, echoing the hero curve */
.v9-gut { position: relative; }
.v9-c { position: absolute; border: 0 solid rgba(32, 39, 225, 0.4); }
.v9-gut-l .v9-c-up { left: 0; top: 25%; width: 50%; height: 25%; border-top-width: 1.5px; border-right-width: 1.5px; border-top-right-radius: 16px; }
.v9-gut-l .v9-c-dn { left: 0; top: 50%; width: 50%; height: 25%; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 16px; }
.v9-gut-l .v9-c-mid { left: 50%; top: 50%; width: 50%; border-top-width: 1.5px; }
.v9-gut-r .v9-c-mid { left: 0; top: 50%; width: 50%; border-top-width: 1.5px; }
.v9-gut-r .v9-c-up { left: 50%; top: 25%; width: 50%; height: 25%; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 16px; }
.v9-gut-r .v9-c-dn { left: 50%; top: 50%; width: 50%; height: 25%; border-bottom-width: 1.5px; border-left-width: 1.5px; border-bottom-left-radius: 16px; border-style: dashed; }
.v9-gut-l .v9-c-mid::after, .v9-gut-r .v9-c-up::after { content: ""; position: absolute; right: -1px; top: -5.5px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent rgba(32, 39, 225, 0.6); }
.v9-gut-r .v9-c-dn::after, .v9-gut-r .v9-c-dn::before { content: ""; position: absolute; bottom: -5.5px; border-style: solid; }
.v9-gut-r .v9-c-dn::after { right: -1px; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent rgba(32, 39, 225, 0.6); }
.v9-c-lab { position: absolute; left: 4px; right: 0; font-style: normal; font-size: 11px; line-height: 1.25; text-align: center; color: #4A5170; }
.v9-c-lab-up { top: calc(25% - 34px); }
.v9-c-lab-dn { top: calc(75% + 8px); }
.v9-c-lab-dn::before { content: "⇄ "; color: #2027E1; }
/* pulses */
.v9-pulse { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #2027E1; box-shadow: 0 0 0 4px rgba(32, 39, 225, 0.18), 0 0 12px rgba(32, 39, 225, 0.6); opacity: 0; }
.v9-pulse-in { animation: v9-pin 12s linear infinite both; }
@keyframes v9-pin { 0% { left: 0; top: 25%; opacity: 0; } 1.5% { opacity: 1; } 5% { left: 50%; top: 25%; } 8% { left: 50%; top: 50%; } 12% { left: 100%; top: 50%; opacity: 1; } 13.5%, 100% { left: 100%; top: 50%; opacity: 0; } }
.v9-pulse-out { animation: v9-pout 12s linear infinite both; }
@keyframes v9-pout { 0%, 52% { left: 0; top: 50%; opacity: 0; } 53.5% { opacity: 1; } 57% { left: 50%; top: 50%; } 60% { left: 50%; top: 75%; } 64% { left: 100%; top: 75%; opacity: 1; } 65.5%, 100% { left: 100%; top: 75%; opacity: 0; } }
/* supporting capability bands */
.v9-bands { grid-area: bands; list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 8px; }
.v9-bands a { display: flex; align-items: baseline; gap: 16px; padding: 12px 18px; border-radius: 12px; text-decoration: none; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px #E1E7F6; transition: box-shadow 200ms; }
.v9-bands strong { flex: none; width: 260px; font-size: 14px; font-weight: 600; color: #10164D; }
.v9-bands span { font-size: 14px; color: #4A5170; }
.v9-bands a:hover, .v9-bands a:focus-visible { box-shadow: inset 0 0 0 1.5px #2027E1; outline: none; }
.v9-band-h a { animation: v9-band 12s ease-in-out infinite both; animation-delay: 3.9s; }
.v9-band-i a { animation: v9-band 12s ease-in-out infinite both; animation-delay: 7.6s; }
@keyframes v9-band { 0%, 14%, 100% { background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px #E1E7F6; } 3%, 10% { background: #E6ECFF; box-shadow: inset 0 0 0 1.5px rgba(32, 39, 225, 0.55); } }
.v9-map > figcaption { grid-area: cap; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; font-size: 12px; color: #6B7090; }
.v9-map-pause { padding: 6px 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #DCE3F5; font: inherit; font-size: 12px; color: #10164D; cursor: pointer; }
.v9-map-pause:focus-visible { outline: 2px solid #2027E1; outline-offset: 2px; }
.v9-map.is-paused *, .v9-map.is-paused *::before, .v9-map.is-paused *::after { animation-play-state: paused !important; }
body .px .v9-map-scope:not(#_) { margin: 16px 0 0 !important; font-size: 12px !important; color: #8A8FA8 !important; }
body .px .v9-map-cta:not(#_) { margin: 20px 0 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .v9-core-steps li, .v9-band-h a, .v9-band-i a { animation: none; }
  .v9-core-status span { animation: none; opacity: 1; }
  .v9-pulse { display: none; }
}
/* phones and tablets: vertical, same grouping */
@media (max-width: 960px) {
  .v9-map { grid-template-columns: 1fr; grid-template-areas: "in" "gl" "core" "gr" "out" "bands" "cap"; padding: 48px 20px 20px; }
  .v9-map-col { grid-template-rows: auto auto; }
  .v9-map-out { margin-top: 30px; }
  .v9-gut { height: 44px; }
  .v9-gut > * { display: none; }
  .v9-gut::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; border-left: 1.5px solid rgba(32, 39, 225, 0.4); }
  .v9-gut::after { content: ""; position: absolute; left: calc(50% - 4.25px); bottom: 2px; border-style: solid; border-width: 8px 5px 0 5px; border-color: rgba(32, 39, 225, 0.6) transparent transparent transparent; }
  .v9-gut-r { margin-bottom: 8px; }
  .v9-bands a { flex-direction: column; gap: 2px; }
  .v9-bands strong { width: auto; }
  .v9-map > figcaption { flex-direction: column; align-items: flex-start; }
}
.v9-gut-r .v9-c-dn::before { content: none; }
.v9-map > figcaption span { font-size: 12px; color: #6B7090; }
body .px .v9-map > figcaption:not(#_) { font-size: 12px !important; }
.v9-c-lab-up { top: calc(25% - 40px); left: 40%; }
/* Skill version states (from the catalogue's Figure 11), in dark glass */
.v9-sk-ver { margin: 0; }
.v9-ver-row { display: grid; grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1.1fr) 86px minmax(0, 1fr); align-items: center; }
.v9-ver { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border-radius: 18px; text-align: center; }
.v9-ver strong { font-size: 17px; font-weight: 600; color: #fff; }
.v9-ver span { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.7); }
.v9-ver.is-draft { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1.5px rgba(111, 180, 255, 0.0); border: 1.5px dashed rgba(111, 180, 255, 0.45); }
.v9-ver.is-live { padding: 24px 18px; background: linear-gradient(160deg, #2C5BFF, #1B23B0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(111, 180, 255, 0.5), 0 18px 40px -12px rgba(44, 91, 255, 0.6); }
.v9-ver.is-live span { color: rgba(255, 255, 255, 0.88); }
.v9-ver.is-old { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.v9-ver.is-old strong { color: rgba(255, 255, 255, 0.8); }
.v9-ver-arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 6px; font-size: 11px; color: #9CD6FF; text-align: center; }
.v9-ver-arrow i { position: relative; width: 100%; height: 1.5px; background: rgba(111, 180, 255, 0.7); }
.v9-ver-arrow i::after { content: ""; position: absolute; right: -1px; top: -4.5px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent rgba(111, 180, 255, 0.9); }
.v9-ver-arrow .is-back { color: rgba(255, 255, 255, 0.45); }
.v9-ver-arrow .is-back::before { content: "← "; }
.v9-ver-envs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
body .px .v9-ver-envs p:not(#_) { margin: 0 !important; padding: 14px 16px; border-radius: 14px; font-size: 13px !important; line-height: 1.5; color: rgba(255, 255, 255, 0.72) !important; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.v9-ver-envs b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6FD3FF; }
.v9-sk-ver figcaption { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
@media (max-width: 640px) {
  .v9-ver-row { grid-template-columns: 1fr; gap: 0; }
  .v9-ver-arrow { flex-direction: row; justify-content: center; padding: 10px 0; }
  .v9-ver-arrow i { width: 1.5px; height: 22px; order: 0; }
  .v9-ver-arrow i::after { right: -4.25px; top: auto; bottom: -1px; border-width: 8px 5px 0 5px; border-color: rgba(111, 180, 255, 0.9) transparent transparent transparent; }
  .v9-ver-envs { grid-template-columns: 1fr; }
}
/* Designer card: text on top, version diagram full width beneath */
.v9-sk-designer, .v9-sk-designer:not(#_) { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
.v9-sk-designer > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 56px; align-items: start; }
.v9-sk-designer > div:first-child .v9-sk-h3 { grid-column: 1; }
.v9-sk-designer > div:first-child .v9-sk-body { grid-column: 1; }
.v9-sk-designer > div:first-child .v9-sk-life { grid-column: 2; grid-row: 1; align-self: end; }
.v9-sk-designer > div:first-child .v9-sk-note { grid-column: 2; grid-row: 2; }
.v9-ver-row { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1.1fr) 110px minmax(0, 1fr); }
@media (max-width: 1000px) {
  .v9-sk-designer > div:first-child { grid-template-columns: 1fr; }
  .v9-sk-designer > div:first-child .v9-sk-life, .v9-sk-designer > div:first-child .v9-sk-note { grid-column: 1; grid-row: auto; }
  .v9-sk-life { flex-wrap: wrap !important; }
}
@media (max-width: 640px) { .v9-ver-row { grid-template-columns: 1fr; } }
/* four metrics: 4 across, 2x2 on tablet, stacked on phones */
.v9-nums-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.v9-nums-4 strong { font-size: clamp(40px, 4.2vw, 60px); }
.v9-nums-4 span { font-size: 16px; }
body .px .v9-nums-tbc:not(#_) { margin: 36px 0 0 !important; font-size: 12px !important; color: rgba(255, 255, 255, 0.55) !important; }
@media (max-width: 1000px) { .v9-nums-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; } }
@media (max-width: 560px) { .v9-nums-4 { grid-template-columns: 1fr; } }
/* Platform map, calm frosted glass (Pooja, 29 Oct): sky-blue field,
   frosted white tiles with a soft white inner-glow edge (her light
   reference), a deep-blue glass centre, fine white connectors. */
.v9-map { padding: 72px 48px 32px; border-radius: 32px; background: linear-gradient(160deg, #EAF3FE 0%, #CFE2F9 55%, #A9CAF3 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 70px -30px rgba(30, 90, 180, 0.35); }
body .px .v9-map-k:not(#_) { color: rgba(16, 22, 77, 0.55) !important; letter-spacing: 0.16em; }
.v9-node { border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.95), inset 0 0 18px rgba(255, 255, 255, 0.8), 0 14px 30px -18px rgba(30, 90, 180, 0.4); }
a.v9-node:hover, a.v9-node:focus-visible { box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 22px rgba(255, 255, 255, 0.95), 0 18px 36px -16px rgba(30, 90, 180, 0.5); }
.v9-node span { color: #3D4566; }
.v9-core { border-radius: 28px; background: linear-gradient(160deg, rgba(44, 91, 255, 0.92), rgba(16, 22, 77, 0.94) 65%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 30px 60px -26px rgba(16, 22, 77, 0.6); }
.v9-core-steps li { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.v9-c { border-color: rgba(255, 255, 255, 0.95); }
.v9-gut-l .v9-c-mid::after, .v9-gut-r .v9-c-up::after, .v9-gut-r .v9-c-dn::after { border-left-color: #fff; }
.v9-c-lab { color: rgba(16, 22, 77, 0.55); font-size: 10.5px; }
.v9-c-lab-dn::before { color: rgba(16, 22, 77, 0.55); }
.v9-pulse { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 0 14px rgba(255, 255, 255, 0.9); }
.v9-bands { margin-top: 48px; gap: 10px; }
.v9-bands a { border-radius: 16px; padding: 14px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.36)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 12px rgba(255, 255, 255, 0.6); }
.v9-bands span { color: #3D4566; }
@keyframes v9-band { 0%, 14%, 100% { background: rgba(255, 255, 255, 0.5); } 3%, 10% { background: rgba(255, 255, 255, 0.92); } }
.v9-map > figcaption { justify-content: flex-end; margin-top: 20px; }
.v9-map-pause { background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95); }
@media (max-width: 960px) {
  .v9-map { padding: 52px 18px 20px; }
  .v9-gut::before { border-left-color: rgba(255, 255, 255, 0.95); }
  .v9-gut::after { border-top-color: #fff; }
}
/* whiter frost for contrast (Pooja, 29 Oct) */
.v9-node { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.8)); box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 18px rgba(255, 255, 255, 0.9), 0 16px 34px -18px rgba(30, 90, 180, 0.45); }
.v9-bands a { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)); box-shadow: inset 0 0 0 1px #fff, 0 8px 20px -14px rgba(30, 90, 180, 0.35); }
@keyframes v9-band { 0%, 14%, 100% { background: rgba(255, 255, 255, 0.85); } 3%, 10% { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(32, 39, 225, 0.45), 0 8px 20px -14px rgba(30, 90, 180, 0.35); } }
.v9-map-pause { background: rgba(255, 255, 255, 0.92); }
/* Closing invitation over the atrium photo (Pooja, 29 Oct): the people sit
   low in the frame, the headline and button in the open space above;
   a navy-to-blue tint keeps it on brand and the white text readable. */
.hp-start.hp-start-photo { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 640px; padding: 96px 24px 280px; border-radius: 28px; text-align: center;
  background: linear-gradient(180deg, rgba(8, 12, 48, 0.88) 0%, rgba(16, 22, 77, 0.7) 38%, rgba(32, 39, 225, 0.32) 72%, rgba(16, 22, 77, 0.55) 100%), url("/assets/img/home/closing-atrium.jpg") center 92% / cover no-repeat;
  box-shadow: 0 40px 80px -40px rgba(16, 22, 77, 0.6); }
.hp-start-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #2027E1; mix-blend-mode: color; opacity: 0.35; pointer-events: none; }
body .px .hp-start-photo #hp-start-title:not(#_) { color: #fff !important; }
body .px .hp-start-photo .hp-start-sub:not(#_) { color: rgba(255, 255, 255, 0.82) !important; }
@media (max-width: 720px) { .hp-start.hp-start-photo { min-height: 560px; padding: 64px 22px 240px; border-radius: 22px; background-position: center, 50% 96%; } }
/* split layout: copy on navy, the portrait photo on the right, blue not violet */
.hp-start.hp-start-photo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; min-height: 600px; padding: 0; text-align: left; background: radial-gradient(90% 120% at 0% 0%, #1A2A9E 0%, #10164D 55%, #0A0F3A 100%); }
.hp-start-photo::after { content: none; }
.hp-start-copy { position: relative; z-index: 1; padding: 72px 40px 72px 72px; }
body .px .hp-start-photo #hp-start-title:not(#_) { text-align: left; margin-bottom: 18px !important; }
body .px .hp-start-photo .hp-start-sub:not(#_) { margin: 0 0 32px !important; max-width: 30em; text-align: left; }
.hp-start-photo .px-actions { justify-content: flex-start !important; }
.hp-start-photo-img { grid-column: 2; grid-row: 1; align-self: stretch; position: relative;
  background: url("/assets/img/home/closing-atrium.jpg") center 70% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%); mask-image: linear-gradient(90deg, transparent 0%, #000 28%); }
.hp-start-photo-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 22, 77, 0.25), rgba(30, 90, 200, 0.18)); mix-blend-mode: multiply; }
.hp-start-copy { grid-column: 1; grid-row: 1; }
@media (max-width: 860px) {
  .hp-start.hp-start-photo { grid-template-columns: 1fr; min-height: 0; }
  .hp-start-photo-img { grid-column: 1; grid-row: 2; height: 360px; background-position: center 82%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
  .hp-start-copy { padding: 52px 24px 8px; }
}
/* closing photo swapped to the conference foyer (Pooja, 29 Oct) */
.hp-start.hp-start-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hp-start-photo-img { background-image: url("/assets/img/home/closing-foyer.jpg"); background-position: 42% 55%; }
@media (max-width: 860px) { .hp-start-photo-img { background-position: 42% 55%; height: 300px; } }
@media (max-width: 860px) { .hp-start.hp-start-photo { grid-template-columns: 1fr; } }
/* translucent navy over the photo (Pooja, 29 Oct): the scene runs behind the
   whole panel; the blue wash is strongest behind the copy and clears to the right */
.hp-start.hp-start-photo { background: url("/assets/img/home/closing-foyer.jpg") 60% 55% / cover no-repeat; }
.hp-start-photo-img { grid-column: 1 / -1; grid-row: 1; -webkit-mask-image: none; mask-image: none; background: linear-gradient(90deg, rgba(16, 22, 77, 0.78) 0%, rgba(20, 30, 110, 0.62) 38%, rgba(26, 42, 158, 0.3) 70%, rgba(26, 42, 158, 0.12) 100%); }
.hp-start-photo-img::after { content: none; }
@media (max-width: 860px) {
  .hp-start.hp-start-photo { background-position: 42% 55%; }
  .hp-start-photo-img { grid-row: 1 / span 2; height: auto; background: linear-gradient(180deg, rgba(16, 22, 77, 0.8) 0%, rgba(20, 30, 110, 0.6) 55%, rgba(26, 42, 158, 0.2) 100%); }
  .hp-start.hp-start-photo::before { content: ""; grid-row: 2; height: 240px; }
}
.hp-start-photo-img { background: linear-gradient(90deg, rgba(10, 18, 66, 0.82) 0%, rgba(14, 36, 112, 0.6) 40%, rgba(18, 64, 160, 0.26) 72%, rgba(18, 70, 170, 0.1) 100%); }
@media (max-width: 860px) { .hp-start-photo-img { background: linear-gradient(180deg, rgba(10, 18, 66, 0.84) 0%, rgba(14, 36, 112, 0.6) 55%, rgba(18, 64, 160, 0.18) 100%); } }
/* brighter connectors and pulse on the frosted map (Pooja, 29 Oct) */
.v9-c { border-color: #fff; border-width: 0; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 6px rgba(111, 180, 255, 0.7)); }
.v9-gut-l .v9-c-up, .v9-gut-l .v9-c-dn, .v9-gut-r .v9-c-up, .v9-gut-r .v9-c-dn { border-width: 0; }
.v9-gut-l .v9-c-up { border-top-width: 2px; border-right-width: 2px; }
.v9-gut-l .v9-c-dn { border-bottom-width: 2px; border-right-width: 2px; }
.v9-gut-l .v9-c-mid, .v9-gut-r .v9-c-mid { border-top-width: 2px; }
.v9-gut-r .v9-c-up { border-top-width: 2px; border-left-width: 2px; }
.v9-gut-r .v9-c-dn { border-bottom-width: 2px; border-left-width: 2px; }
.v9-gut-l .v9-c-mid::after, .v9-gut-r .v9-c-up::after, .v9-gut-r .v9-c-dn::after { border-left-color: #fff; }
.v9-pulse { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #fff; box-shadow: 0 0 0 5px rgba(32, 39, 225, 0.35), 0 0 16px 4px rgba(255, 255, 255, 0.95), 0 0 28px 8px rgba(44, 91, 255, 0.55); }
/* ===== NXT AI Skills, simplified (29 Oct): open section, two groupings ===== */
.v9-sk2 .v9-sk-head { max-width: 720px; margin-bottom: 56px; }
/* group 1: invoice -> Skills -> next action, no outer container */
.v9-sk-flow { display: grid; grid-template-columns: 150px 56px minmax(0, 1fr) 56px 250px; align-items: center; margin: 0; }
.v9-sk2 .v9-sk-inv { padding: 18px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.v9-sk2 .v9-sk-invsvg { width: 52px; height: 68px; }
.v9-sk2 .v9-sk-tiles { gap: 10px; }
.v9-sk2 .v9-sk-tiles li { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: none; backdrop-filter: none; }
.v9-sk-out { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v9-sk-out li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 14px; color: #fff; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.v9-sk-out i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.v9-sk-out .is-go i { background: #22C55E; box-shadow: 0 0 8px rgba(34, 197, 94, 0.7); }
.v9-sk-out .is-route i { background: #F2A900; box-shadow: 0 0 8px rgba(242, 169, 0, 0.6); }
.v9-sk-flow > figcaption { grid-column: 1 / -1; margin-top: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
/* group 2: Designer copy + video */
.v9-sk-des { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; margin-top: 104px; padding-top: 72px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.v9-sk-des-copy { max-width: 440px; }
body .px .v9-sk2 h3.v9-sk-h3:not(#_) { font-size: clamp(24px, 2.3vw, 32px) !important; margin-bottom: 16px !important; }
.v9-sk2 .v9-sk-h3 span { display: block; color: #6FB4FF; }
body .px .v9-sk2 .v9-sk-body:not(#_) { margin-bottom: 24px !important; }
body .px .v9-sk-cta:not(#_) { margin: 0 0 14px !important; }
body .px .v9-sk2 .v9-sk-avail:not(#_) { margin: 0 !important; font-size: 12px !important; color: rgba(255, 255, 255, 0.5) !important; }
.v9-sk-langs { display: inline-flex; gap: 2px; margin-bottom: 12px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.v9-sk-langs button { padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, 0.7); font: inherit; font-size: 13px; cursor: pointer; }
.v9-sk-langs button[aria-pressed="true"] { background: #fff; color: #10164D; }
.v9-sk-langs button:focus-visible { outline: 2px solid #6FD3FF; outline-offset: 2px; }
.v9-sk-video .v9-video { aspect-ratio: 16 / 9; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 24px 50px -20px rgba(0, 0, 0, 0.6); }
.v9-sk-video .v9-video img { width: 100%; height: 100%; object-fit: cover; }
.v9-sk-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.v9-sk-video [hidden] { display: none !important; }
body .px .v9-sk2 .v9-sk-gov:not(#_) { margin: 72px 0 0 !important; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 14px !important; color: rgba(255, 255, 255, 0.6) !important; }
@media (max-width: 1000px) {
  .v9-sk-flow { grid-template-columns: 1fr; }
  .v9-sk2 .v9-sk-inv { flex-direction: row; justify-content: center; }
  .v9-sk2 .v9-sk-invsvg { width: 36px; height: 47px; }
  .v9-sk-des { grid-template-columns: 1fr; gap: 32px; margin-top: 72px; padding-top: 56px; }
}
/* One video size across the home page (Pooja, 29 Oct): the Skill Designer
   proportions, 16:9 in a 1.1fr column beside 0.9fr of copy. */
.v9-adv .v9-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
.v9-adv .v9-demo .v9-video, .v9-lv .v9-video { aspect-ratio: 16 / 9; border-radius: 16px; }
.v9-adv .v9-demo .v9-video img, .v9-lv .v9-video img { width: 100%; height: 100%; object-fit: cover; }
.v9-adv .v9-demo iframe, .v9-lv iframe { display: block; width: 100%; height: 100%; border: 0; }
.v9-lv [hidden], .v9-vcard-lv [hidden] { display: none !important; }
/* language switch on light sections */
.v9-lv .v9-sk-langs, .v9-vcard-lv .v9-sk-langs { background: #EEF0FA; box-shadow: inset 0 0 0 1px #DCE0F2; }
.v9-lv .v9-sk-langs button, .v9-vcard-lv .v9-sk-langs button { color: #4A5170; }
.v9-lv .v9-sk-langs button[aria-pressed="true"], .v9-vcard-lv .v9-sk-langs button[aria-pressed="true"] { background: #10164D; color: #fff; }
.v9-sk-langs-sm { margin-bottom: 10px; }
.v9-sk-langs-sm button { padding: 4px 11px; font-size: 12px; }
.v9-insight { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .v9-adv .v9-grid, .v9-insight { grid-template-columns: 1fr; gap: 36px; } }
/* gallery card: language switch floats on the thumbnail so cards stay aligned */
.v9-vcard-lv { position: relative; }
.v9-vcard-lv .v9-sk-langs-sm { position: absolute; z-index: 3; top: 10px; left: 10px; margin: 0; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 12px rgba(16, 22, 77, 0.15); }
/* ===== NXT AI Harness section (29 Oct brief) ===== */
.v9-hx-head { max-width: 760px; }
body .px .v9-hx .v9-h2:not(#_) { margin-bottom: 14px !important; }
.v9-hx .v9-h2 span { display: block; color: #2027E1; }
body .px .v9-hx .v9-lead:not(#_) { margin-bottom: 18px !important; }
body .px .v9-hx-cta:not(#_) { margin: 0 !important; }
/* control strip: four understated labels, subtle connectors */
.v9-hx-strip { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 40px 0 48px; padding: 0; }
.v9-hx-strip li { padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #10164D; background: #fff; box-shadow: inset 0 0 0 1px #DCE2F4; }
.v9-hx-strip li + li::before { content: ""; display: inline-block; width: 28px; height: 1.5px; margin: 0 10px 0 -16px; vertical-align: middle; background: #AEB8E8; transform: translateX(-12px); }
.v9-hx-strip li + li { margin-left: 30px; position: relative; }
.v9-hx-strip li + li::before { position: absolute; left: -30px; top: 50%; margin: 0; transform: none; width: 30px; }
.v9-hx-strip li + li::after { content: ""; position: absolute; left: -7px; top: calc(50% - 3.5px); border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #AEB8E8; }
/* the pair, secondary to the headline and strip */
.v9-hx-pair { padding: 20px 0 0; }
.v9-hx-pair .v9-rec li { grid-template-columns: 1fr auto; }
.v9-hx-pair .v9-rec li > span { color: #10164D; }
.v9-gate { margin-top: 10px; border-radius: 14px !important; background: rgba(32, 39, 225, 0.07) !important; box-shadow: inset 0 0 0 1.5px rgba(32, 39, 225, 0.55), 0 6px 16px -10px rgba(32, 39, 225, 0.5) !important; }
.v9-gate b { display: block; font-weight: 600; color: #1B23B0; }
.v9-gate span { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: #4A5170 !important; }
.v9-gate b::before { content: ""; display: inline-block; width: 9px; height: 11px; margin-right: 8px; vertical-align: -1px; border-radius: 2px; background: #2027E1; box-shadow: 0 -4px 0 -1px #fff, 0 -5px 0 0 #2027E1; }
.v9-glass .v9-rec .v9-gate i { color: #fff; background: #2027E1; box-shadow: none; }
.v9-hx-pair > figcaption { margin-top: 14px; }
@media (max-width: 900px) {
  .v9-hx-strip { flex-direction: column; align-items: flex-start; gap: 22px; }
  .v9-hx-strip li + li { margin-left: 0; }
  .v9-hx-strip li + li::before { left: 22px; top: -22px; width: 1.5px; height: 22px; }
  .v9-hx-strip li + li::after { left: 18.5px; top: -6px; border-width: 6px 4px 0 4px; border-color: #AEB8E8 transparent transparent transparent; }
}
/* CFO playbook section (29 Oct): copy on white; on the right the atrium
   photo, with the three cards as frosted white panels over its shadow
   lines and the two people visible below. */
.v9-cfo .v9-choice-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: stretch; }
.v9-cfo .v9-choice-grid > div:first-child { align-self: center; }
.v9-cfo-visual { position: relative; min-height: 640px; padding: 28px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(180deg, rgba(16, 22, 77, 0.1), rgba(16, 22, 77, 0.0) 40%, rgba(16, 22, 77, 0.12)), url("/assets/img/home/cfo-atrium.jpg") center 70% / cover no-repeat;
  box-shadow: 0 30px 70px -34px rgba(16, 22, 77, 0.45); }
.v9-cfo .v9-ccards { gap: 12px; }
.v9-cfo .v9-ccards li { background: rgba(255, 255, 255, 0.84); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), 0 12px 28px -16px rgba(16, 22, 77, 0.35); }
.v9-cfo .v9-h2 span { display: block; color: #2027E1; }
.v9-cfo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 8px 0 0 !important; }
body .px .v9-cfo .v9-closing:not(#_) { margin-top: 48px !important; }
body .px .v9-cfo-note:not(#_) { margin: 10px 0 0 !important; font-size: 12px !important; color: #8A8FA8 !important; }
@media (max-width: 900px) {
  .v9-cfo .v9-choice-grid { grid-template-columns: 1fr; gap: 32px; }
  .v9-cfo-visual { min-height: 560px; padding: 18px; background-position: center 80%; }
}
/* CFO playbook tiles, from the original Wix home (Pooja, 29 Oct) */
.v9-pb-tiles { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 56px 0 0; padding: 0; }
.v9-pb-tiles li { display: grid; place-items: center; aspect-ratio: 5 / 7; padding: 20px; text-align: center; color: #fff; font-size: clamp(16px, 1.45vw, 20px); font-weight: 500; line-height: 1.35;
  background: linear-gradient(180deg, #2027E1 0%, #1A1FC4 55%, #0F14A0 100%); }
.v9-pb-tiles li span { max-width: 9em; }
.v9-pb-tiles li.is-photo { background: #E9E9E9 url("/assets/img/home/tile-photo.jpg") center / cover no-repeat; }
@media (max-width: 900px) {
  .v9-pb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v9-pb-tiles li { aspect-ratio: 4 / 5; }
  .v9-pb-tiles li.is-photo { grid-row: span 1; }
}
body .px .v9-pb-tiles li:not(#_) { font-size: clamp(16px, 1.45vw, 20px) !important; font-weight: 500 !important; color: #fff !important; }
/* CFO playbook tiles as 3D frosted glass, in step with the other frosted
   boxes on the page (Pooja, 29 Oct) */
.v9-pb-tiles { position: relative; isolation: isolate; gap: 16px; }
.v9-pb-tiles::before { content: ""; position: absolute; z-index: -1; inset: 8% 6%; border-radius: 50%; filter: blur(60px); background: radial-gradient(closest-side, rgba(44, 91, 255, 0.45), rgba(111, 180, 255, 0.25) 60%, transparent); pointer-events: none; }
.v9-pb-tiles li { border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, rgba(64, 80, 255, 0.82) 0%, rgba(32, 39, 225, 0.72) 45%, rgba(16, 22, 160, 0.86) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 22px rgba(255, 255, 255, 0.22), inset 0 -18px 30px rgba(8, 12, 80, 0.35), 0 24px 44px -18px rgba(16, 22, 140, 0.55);
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 300ms; }
.v9-pb-tiles li:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 26px rgba(255, 255, 255, 0.3), inset 0 -18px 30px rgba(8, 12, 80, 0.35), 0 32px 56px -20px rgba(16, 22, 140, 0.6); }
.v9-pb-tiles li span { text-shadow: 0 1px 8px rgba(8, 12, 80, 0.35); }
.v9-pb-tiles li.is-photo { background: #E9E9E9 url("/assets/img/home/tile-photo.jpg") center / cover no-repeat; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85), inset 0 1px 0 #fff, 0 24px 44px -18px rgba(16, 22, 77, 0.4); }
@media (prefers-reduced-motion: reduce) { .v9-pb-tiles li { transition: none; } .v9-pb-tiles li:hover { transform: none; } }
.v9-pb-tiles li:not(.is-photo) { background: linear-gradient(160deg, rgba(40, 60, 255, 0.95) 0%, rgba(32, 39, 225, 0.93) 45%, rgba(14, 20, 150, 0.96) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 18px rgba(255, 255, 255, 0.12), inset 0 -18px 30px rgba(8, 12, 80, 0.4), 0 24px 44px -18px rgba(16, 22, 140, 0.55); }
/* "The CFO playbook" is the headline; the two-line line beneath is a subheading */
body .px .v9-cfo-sub:not(#_) { margin: -4px 0 18px !important; font-size: clamp(20px, 1.8vw, 24px) !important; font-weight: 500; line-height: 1.3; color: #10164D !important; }
.v9-cfo-sub span { display: block; color: #2027E1; }
/* subscription CTA beside the closing line (Pooja, 29 Oct) */
.v9-cfo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid #E6E8F2; }
body .px .v9-cfo .v9-cfo-foot .v9-closing:not(#_) { margin: 0 !important; padding: 0; border: 0; }
.v9-sub-btn { display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px; background: #fff; color: #10164D; font-size: 15px; font-weight: 500; text-decoration: none; box-shadow: inset 0 0 0 1.5px #10164D; transition: background 200ms, color 200ms; }
.v9-sub-btn:hover, .v9-sub-btn:focus-visible { background: #10164D; color: #fff; }
@media (max-width: 720px) { .v9-sub-btn { width: 100%; justify-content: center; text-align: center; } }
/* subscription CTA: solid, bright electric blue (Pooja, 29 Oct) */
.v9-sub-btn, .v9-sub-btn:not(#_) { background: #2C5BFF; color: #fff; box-shadow: 0 10px 24px -10px rgba(44, 91, 255, 0.7); }
.v9-sub-btn:hover, .v9-sub-btn:focus-visible { background: #2027E1; color: #fff; }
body .px .hx-sub-cta:not(#_) { margin: 14px 0 0 !important; }
.hx-hero .v9-sub-btn { padding: 13px 24px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 12px 28px -10px rgba(44, 91, 255, 0.9); }
/* subscribe pill in core cobalt #2027E1 (Pooja, 29 Oct) */
.v9-sub-btn, .v9-sub-btn:not(#_) { background: #2027E1; box-shadow: 0 10px 24px -10px rgba(32, 39, 225, 0.7); }
.v9-sub-btn:hover, .v9-sub-btn:focus-visible { background: #1A1FC4; }
.hx-hero .v9-sub-btn { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 12px 28px -10px rgba(32, 39, 225, 0.9); }
/* spacing for the 29 Oct order (CFO playbook right after Ask NXT AI) */
body .px.no-field > .v9-ask-wrap + .v9-cfo:not(#_) { padding-top: 160px !important; }
body .px.no-field > .v9-adv + .lm-wrap { padding-top: 140px; }
body .px.no-field > .v9-plat + .v9-skills:not(#_) { margin-top: 160px; }
@media (max-width: 720px) { body .px.no-field > .v9-ask-wrap + .v9-cfo:not(#_) { padding-top: 96px !important; } body .px.no-field > .v9-adv + .lm-wrap { padding-top: 88px; } body .px.no-field > .v9-plat + .v9-skills:not(#_) { margin-top: 104px; } }
/* six videos: two rows of three */
.v9-vgrid { row-gap: 48px; }
/* CFO playbook, calm (29 Oct) */
.v9-cfo-calm .v9-choice-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 80px; align-items: center; }
body .px .v9-cfo-calm .v9-cfo-sub:not(#_) { font-size: clamp(18px, 1.5vw, 21px) !important; margin-bottom: 20px !important; }
.v9-cfo-calm .v9-cfo-sub span { display: inline; }
body .px .v9-cfo-calm .v9-lead:not(#_) { margin-bottom: 24px !important; }
.v9-cfo-list { list-style: none; margin: 0 0 32px; padding: 0; }
.v9-cfo-list li { padding: 14px 0; border-top: 1px solid #E6E8F2; font-size: 15px; line-height: 1.55; color: #4A5170; }
.v9-cfo-list li:last-child { border-bottom: 1px solid #E6E8F2; }
.v9-cfo-list strong { display: block; margin-bottom: 2px; font-weight: 500; color: #10164D; }
.v9-cfo-photo { min-height: 600px; border-radius: 24px; background: url("/assets/img/home/cfo-atrium.jpg") center 62% / cover no-repeat; box-shadow: 0 30px 70px -36px rgba(16, 22, 77, 0.4); }
@media (max-width: 900px) { .v9-cfo-calm .v9-choice-grid { grid-template-columns: 1fr; gap: 40px; } .v9-cfo-photo { min-height: 420px; } }
/* closing: shared services copy (29 Oct) */
body .px .hx-start-eyebrow:not(#_) { margin: 0 0 14px !important; color: #9CC8FF !important; }
body .px .hp-start-photo #hp-start-title:not(#_) { max-width: 15em; }
@media (min-width: 861px) { .hp-start-photo #hp-start-title span { display: block; } }
body .px .hp-start-photo .hp-start-sub:not(#_) { max-width: 30em; }
.hp-start-copy { padding-right: 24px; }
@media (min-width: 861px) {
  .hp-start.hp-start-photo { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  body .px .hp-start-photo #hp-start-title:not(#_) { max-width: none; white-space: nowrap; font-size: clamp(30px, 3.2vw, 44px) !important; }
}
/* darker navy under the closing copy (Pooja, 29 Oct) */
.hp-start-photo-img { background: linear-gradient(90deg, rgba(8, 12, 48, 0.94) 0%, rgba(10, 18, 66, 0.88) 38%, rgba(14, 36, 112, 0.55) 62%, rgba(18, 64, 160, 0.18) 85%, rgba(18, 70, 170, 0.08) 100%); }
@media (max-width: 860px) { .hp-start-photo-img { background: linear-gradient(180deg, rgba(8, 12, 48, 0.94) 0%, rgba(10, 18, 66, 0.86) 60%, rgba(18, 64, 160, 0.25) 100%); } }
/* closing photo: glowing office tiers (Pooja, 29 Oct) */
.hp-start.hp-start-photo { background: #0A0F3A url("/assets/img/home/closing-tiers.jpg") 70% 45% / cover no-repeat; }
@media (max-width: 860px) { .hp-start.hp-start-photo { background-position: 75% 40%; } }
/* CFO playbook: photo on the left, copy on the right (29 Oct; subscription pill removed 5 Nov) */
.v9-cfo-calm .v9-choice-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
.v9-cfo-calm .v9-cfo-media { order: -1; display: flex; flex-direction: column; gap: 20px; }
body .px .v9-cfo-calm .v9-closing:not(#_) { margin: 28px 0 0 !important; padding: 0; border: 0; font-size: 16px !important; }
@media (max-width: 900px) { .v9-cfo-calm .v9-cfo-media { order: 1; } }
/* optional closing background video, behind the navy wash */
.hp-start-video { grid-column: 1 / -1; grid-row: 1; align-self: stretch; justify-self: stretch; width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%; }
.hp-start-photo { position: relative; }
/* platform map on light grey (Pooja, 29 Oct): blue connectors and pulse,
   white tiles with a fine border */
.v9-map { background: linear-gradient(180deg, #F4F5F8 0%, #ECEEF3 100%); box-shadow: inset 0 0 0 1px #E3E6EE, 0 30px 70px -40px rgba(16, 22, 77, 0.25); }
body .px .v9-map-k:not(#_), .v9-c-lab, .v9-c-lab-dn::before { color: #6B7090 !important; }
.v9-node, .v9-node:not(#_) { background: #fff; box-shadow: inset 0 0 0 1px #E3E6EE, 0 12px 28px -18px rgba(16, 22, 77, 0.3); }
.v9-c { border-color: #2027E1; filter: none; }
.v9-gut-l .v9-c-mid::after, .v9-gut-r .v9-c-up::after, .v9-gut-r .v9-c-dn::after { border-left-color: #2027E1; }
.v9-pulse { background: #2027E1; box-shadow: 0 0 0 5px rgba(32, 39, 225, 0.18), 0 0 14px 3px rgba(32, 39, 225, 0.5); }
.v9-bands a, .v9-bands a:not(#_) { background: #fff; box-shadow: inset 0 0 0 1px #E3E6EE; }
@keyframes v9-band { 0%, 14%, 100% { background: #fff; box-shadow: inset 0 0 0 1px #E3E6EE; } 3%, 10% { background: #EEF0FF; box-shadow: inset 0 0 0 1.5px rgba(32, 39, 225, 0.5); } }
.v9-map-pause { background: #fff; box-shadow: inset 0 0 0 1px #DCE0EA; color: #10164D; }
@media (max-width: 960px) { .v9-gut::before { border-left-color: #2027E1; } .v9-gut::after { border-top-color: #2027E1; } }
/* NXT AP card in the vibrant brand gradient, as on the playbook tiles (29 Oct) */
.v9-core { background: linear-gradient(160deg, #3048FF 0%, #2027E1 45%, #0E1496 100%); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -18px 30px rgba(8, 12, 80, 0.35), 0 26px 50px -20px rgba(32, 39, 225, 0.6); }
body .px .v9-core-d:not(#_), body .px .v9-core-ex:not(#_) { color: rgba(255, 255, 255, 0.88) !important; }
.v9-core-steps li { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); color: #fff; }
.v9-core-ex a { color: #fff; }
/* NXT AP card: darker, saturated brand gradient (Pooja, 29 Oct) */
.v9-core { background: linear-gradient(155deg, #2A3AF5 0%, #1A20D0 35%, #10138F 70%, #0B0F5C 100%); }

/* NXT AI Skills on white: intro and illustration light; the Designer part
   becomes its own navy panel (Pooja, 29 Oct) */
body .px.no-field > .v9-skills.v9-sk2:not(#_) { background: #fff; color: #10164D; padding-top: 160px !important; padding-bottom: 40px !important; margin-top: 0; }
.v9-sk2::before, .v9-sk2::after { display: none; }
body .px .v9-sk2 .v9-sk-head .v9-sk-eyebrow:not(#_) { color: #2027E1 !important; }
body .px .v9-sk2 .v9-sk-head .v9-h2:not(#_) { color: #10164D !important; }
.v9-sk2 .v9-sk-head .v9-h2 span { color: #2027E1; }
body .px .v9-sk2 .v9-sk-head .v9-lead:not(#_) { color: #4A5170 !important; }
.v9-sk2 .v9-sk-inv { background: #F4F6FC; box-shadow: inset 0 0 0 1px #E3E6F2; }
body .px .v9-sk2 .v9-sk-inv p:not(#_) { color: #10164D !important; }
.v9-sk2 .v9-sk-tiles li, .v9-sk2 .v9-sk-out li { color: #10164D; background: #fff; box-shadow: inset 0 0 0 1px #E3E6F2, 0 10px 24px -16px rgba(16, 22, 77, 0.25); }
@keyframes v9-sk-on { 0%, 24%, 100% { box-shadow: inset 0 0 0 1px #E3E6F2, 0 10px 24px -16px rgba(16, 22, 77, 0.25); } 6%, 18% { box-shadow: inset 0 0 0 1.5px #2027E1, 0 12px 28px -14px rgba(32, 39, 225, 0.45); } }
.v9-sk2 .v9-sk-dot { background: #2027E1; box-shadow: 0 0 6px rgba(32, 39, 225, 0.5); }
.v9-sk2 .v9-sk-link { background: linear-gradient(90deg, rgba(32, 39, 225, 0.25), #2027E1); }
.v9-sk2 .v9-sk-link::after { border-left-color: #2027E1; }
.v9-sk2 .v9-sk-des { position: relative; isolation: isolate; overflow: hidden; margin-top: 96px; padding: 56px; border-top: 0; border-radius: 28px; color: #fff;
  background: radial-gradient(60% 90% at 15% 0%, #1B2A9E 0%, rgba(27, 42, 158, 0) 60%), radial-gradient(50% 80% at 95% 100%, #1A2AA8 0%, rgba(26, 42, 168, 0) 60%), #070B33; box-shadow: 0 30px 70px -30px rgba(7, 11, 51, 0.6); }
body .px .v9-sk2 .v9-sk-gov:not(#_) { margin-top: 40px !important; border-top-color: #E6E8F2; color: #6B7090 !important; }
@media (max-width: 1000px) {
  body .px.no-field > .v9-skills.v9-sk2:not(#_) { padding-top: 104px !important; }
  .v9-sk2 .v9-sk-link { background: linear-gradient(180deg, rgba(32, 39, 225, 0.25), #2027E1); }
  .v9-sk2 .v9-sk-link::after { border-left-color: transparent; border-top-color: #2027E1; }
  .v9-sk2 .v9-sk-des { padding: 32px 22px; margin-top: 64px; }
}
/* high-contrast step highlight inside NXT AP (Pooja, 29 Oct) */
@keyframes v9-step2 {
  0%, 10%, 100% { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); transform: none; }
  2%, 8% { background: #fff; color: #1A20D0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25), 0 0 22px rgba(255, 255, 255, 0.7); transform: translateY(-2px); }
}
.v9-core-steps li { animation-name: v9-step2; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .v9-core-steps li { animation: none; } }

/* platform map: the moving marker is a small invoice, not a dot (Pooja, 29 Oct) */
.v9-pulse { width: 26px; height: 34px; margin: -17px 0 0 -13px; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 52%22%3E %3Cdefs%3E%3ClinearGradient id=%22v9skinv-hd%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%22 stop-color=%22%232027E1%22/%3E%3Cstop offset=%221%22 stop-color=%22%234C8DF0%22/%3E%3C/linearGradient%3E%3C/defs%3E %3Crect x=%22.5%22 y=%22.5%22 width=%2239%22 height=%2251%22 rx=%223.5%22 fill=%22%23fff%22 stroke=%22%23D5DBEE%22/%3E %3Cpath d=%22M4 .5h32a3.5 3.5 0 0 1 3.5 3.5v7H.5V4A3.5 3.5 0 0 1 4 .5Z%22 fill=%22url(%23v9skinv-hd)%22/%3E %3Crect x=%224%22 y=%223.5%22 width=%225%22 height=%225%22 rx=%221.2%22 fill=%22%23fff%22 opacity=%22.9%22/%3E %3Crect x=%2211%22 y=%224.2%22 width=%2214%22 height=%221.6%22 rx=%22.8%22 fill=%22%23fff%22 opacity=%22.95%22/%3E %3Crect x=%2211%22 y=%226.8%22 width=%229%22 height=%221.3%22 rx=%22.65%22 fill=%22%23fff%22 opacity=%22.6%22/%3E %3Crect x=%2227%22 y=%224.5%22 width=%229%22 height=%223.2%22 rx=%221.6%22 fill=%22%23FFC85C%22/%3E %3Crect x=%224%22 y=%2215%22 width=%2212%22 height=%221.4%22 rx=%22.7%22 fill=%22%239AA3C7%22/%3E %3Crect x=%224%22 y=%2218%22 width=%2216%22 height=%221.4%22 rx=%22.7%22 fill=%22%23C9CFE3%22/%3E %3Crect x=%2226%22 y=%2215%22 width=%2210%22 height=%221.4%22 rx=%22.7%22 fill=%22%239AA3C7%22/%3E %3Crect x=%2229%22 y=%2218%22 width=%227%22 height=%221.4%22 rx=%22.7%22 fill=%22%23C9CFE3%22/%3E %3Crect x=%224%22 y=%2223%22 width=%2232%22 height=%223.2%22 rx=%22.8%22 fill=%22%23EEF1FB%22/%3E %3Crect x=%224%22 y=%2228.5%22 width=%2217%22 height=%221.4%22 rx=%22.7%22 fill=%22%23C9CFE3%22/%3E%3Crect x=%2230%22 y=%2228.5%22 width=%226%22 height=%221.4%22 rx=%22.7%22 fill=%22%239AA3C7%22/%3E %3Crect x=%224%22 y=%2232%22 width=%2214%22 height=%221.4%22 rx=%22.7%22 fill=%22%23C9CFE3%22/%3E%3Crect x=%2230%22 y=%2232%22 width=%226%22 height=%221.4%22 rx=%22.7%22 fill=%22%239AA3C7%22/%3E %3Crect x=%224%22 y=%2235.5%22 width=%2219%22 height=%221.4%22 rx=%22.7%22 fill=%22%23C9CFE3%22/%3E%3Crect x=%2230%22 y=%2235.5%22 width=%226%22 height=%221.4%22 rx=%22.7%22 fill=%22%239AA3C7%22/%3E %3Cpath d=%22M4 40.5h32%22 stroke=%22%23E3E7F3%22 stroke-width=%22.8%22/%3E %3Crect x=%2220%22 y=%2243%22 width=%2216%22 height=%225%22 rx=%221.5%22 fill=%22%23E8EEFF%22/%3E %3Crect x=%2222%22 y=%2244.8%22 width=%226%22 height=%221.4%22 rx=%22.7%22 fill=%22%232027E1%22/%3E%3Crect x=%2229.5%22 y=%2244.8%22 width=%224.5%22 height=%221.4%22 rx=%22.7%22 fill=%22%2310164D%22/%3E %3Crect x=%224%22 y=%2244%22 width=%228%22 height=%223.2%22 rx=%221.6%22 fill=%22%232ECC8F%22 opacity=%22.85%22/%3E %3C/svg%3E") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 6px 10px rgba(16, 22, 77, 0.3)); }
/* Harness: intro + video, then strip, pair and comparison (29 Oct) */
.v9-hx-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.v9-hx-cmp { margin-top: 72px; }
body .px h3.v9-hx-cmp-h:not(#_) { margin: 0 0 10px !important; font-size: clamp(22px, 2.1vw, 28px) !important; font-weight: 500 !important; line-height: 1.2 !important; color: #10164D !important; }
body .px .v9-hx-cmp-lead:not(#_) { max-width: 44em; margin: 0 0 24px !important; font-size: 16px !important; color: #4A5170 !important; }
.v9-cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 1px #E3E6F2; overflow: hidden; }
.v9-cmp th, .v9-cmp td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid #ECEEF6; }
.v9-cmp thead th { border-top: 0; font-size: 13px; font-weight: 600; color: #6B7090; }
.v9-cmp tbody th { width: 24%; font-weight: 500; color: #10164D; }
.v9-cmp td { color: #4A5170; }
.v9-cmp .is-nxt { background: #EEF0FF; color: #10164D; }
.v9-cmp thead .is-nxt { color: #2027E1; }
@media (max-width: 900px) { .v9-hx-top { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 720px) {
  .v9-cmp, .v9-cmp thead, .v9-cmp tbody, .v9-cmp tr, .v9-cmp th, .v9-cmp td { display: block; width: auto; }
  .v9-cmp { background: none; box-shadow: none; }
  .v9-cmp thead { display: none; }
  .v9-cmp tr { margin-bottom: 12px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #E3E6F2; }
  .v9-cmp tbody th { border-top: 0; background: #F7F8FC; }
  .v9-cmp td::before { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: #6B7090; }
  .v9-cmp td:nth-of-type(1)::before { content: "Traditional AP workflow controls"; }
  .v9-cmp td.is-nxt::before { content: "NXT AP with NXT AI Harness"; color: #2027E1; }
}
/* Partner band over the world map (from the Wix home, brand-recoloured, 30 Oct) */
.v9-pmap-stage { position: relative; display: grid; place-items: center; min-height: 520px; }
.v9-pmap-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.16; animation: v9-pmap-drift 24s ease-in-out infinite alternate; }
@keyframes v9-pmap-drift { from { transform: translateX(-1.5%) scale(1); } to { transform: translateX(1.5%) scale(1.03); } }
.v9-pmap-box { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px 56px; align-items: center; width: min(100%, 960px); padding: 48px 56px; border-radius: 24px; color: #fff;
  background: linear-gradient(155deg, rgba(42, 58, 245, 0.92) 0%, rgba(26, 32, 208, 0.9) 45%, rgba(11, 15, 92, 0.94) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 30px 60px -24px rgba(16, 22, 140, 0.55); }
body .px h2.v9-pmap-title:not(#_) { margin: 0 !important; font-size: clamp(26px, 2.6vw, 36px) !important; font-weight: 500 !important; line-height: 1.15 !important; color: #fff !important; }
body .px .v9-pmap-copy p:not(#_) { margin: 0 0 24px !important; font-size: 16px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.85) !important; }
/* gentle entrance as it scrolls in */
.px-motion .v9-pmap-box { opacity: 0; transform: translateY(24px); transition: opacity 900ms ease, transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.px-motion .v9-pmap-box.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v9-pmap-img { animation: none; } .px-motion .v9-pmap-box { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .v9-pmap-stage { min-height: 0; padding: 40px 0; }
  .v9-pmap-img { object-fit: cover; }
  .v9-pmap-box { grid-template-columns: 1fr; padding: 32px 24px; }
}
.v9-pmap-img { opacity: 0.22; }
/* partner box much more transparent so the map shows through (Pooja, 30 Oct) */
.v9-pmap-box { background: linear-gradient(155deg, rgba(42, 58, 245, 0.55) 0%, rgba(26, 32, 208, 0.5) 45%, rgba(11, 15, 92, 0.62) 100%); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
.v9-pmap-img { opacity: 0.38; }
.v9-pmap-box { background: linear-gradient(155deg, rgba(30, 70, 230, 0.6) 0%, rgba(24, 40, 200, 0.55) 45%, rgba(11, 18, 100, 0.68) 100%); }
/* closing photo: team silhouettes over the city (Pooja, 30 Oct) */
.hp-start.hp-start-photo { background: #0A0F3A url("/assets/img/home/closing-team.jpg") 60% 50% / cover no-repeat; }
@media (max-width: 860px) { .hp-start.hp-start-photo { background-position: 62% 50%; } }
/* video gallery: four simplified cards in one row (Pooja, 30 Oct) */
.v9-vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; row-gap: 32px; }
.v9-vgrid [hidden] { display: none !important; }
.v9-vthumb { border-radius: 12px; margin-bottom: 12px; }
.v9-vthumb .yt-play { width: 34px; height: 34px; right: 8px; top: 8px; }
.v9-vthumb .yt-play::after { left: 13px; top: 10px; border-width: 7px 0 7px 10px; }
.v9-vlen { right: 8px; bottom: 8px; font-size: 11px; padding: 1px 6px; }
body .px .v9-vgrid h3:not(#_) { font-size: 16px !important; margin-bottom: 4px !important; }
body .px .v9-vgrid p:not(#_) { font-size: 14px !important; }
body .px .v9-vgrid .v9-vlang:not(#_) { display: flex; align-items: center; gap: 4px; margin-top: 8px !important; font-size: 12px !important; color: #8A8FA8 !important; }
.v9-vlang button { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 500; color: #8A8FA8; cursor: pointer; }
.v9-vlang button[aria-pressed="true"] { color: #2027E1; text-decoration: underline; text-underline-offset: 3px; }
.v9-vlang button:focus-visible { outline: 2px solid #2027E1; outline-offset: 2px; }
@media (max-width: 1000px) { .v9-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v9-vgrid { grid-template-columns: 1fr; } }
/* Closing: split, so the team photo keeps its glow (Pooja, 30 Oct: "looks bad") */
@media (min-width: 861px) {
  .hp-start.hp-start-photo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); background: radial-gradient(90% 120% at 0% 0%, #1A2A9E 0%, #10164D 55%, #0A0F3A 100%); }
  .hp-start-photo-img { grid-column: 2; grid-row: 1; background: url("/assets/img/home/closing-team.jpg") 52% 50% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
  .hp-start-photo-img::after { content: ""; position: absolute; inset: 0; background: rgba(16, 30, 110, 0.18); mix-blend-mode: multiply; }
  .hp-start-photo-img { position: relative; }
  body .px .hp-start-photo #hp-start-title:not(#_) { white-space: normal; font-size: clamp(30px, 2.9vw, 42px) !important; max-width: 13em; }
  .hp-start-photo #hp-start-title span { display: inline; }
}
/* Platform map, integrated (2 Nov): Skills perform, Harness governs,
   Intelligence measures, Designer adapts. */
.v9-map { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1.9fr) 88px minmax(0, 1fr); grid-template-areas: "in gl core gr out" ". . intel . ." "cap cap cap cap cap"; }
.v9-core { padding: 26px 26px 22px; }
body .px .v9-core-d:not(#_) { margin-bottom: 14px !important; }
.v9-core-run { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 26px; align-items: center; margin-bottom: 12px; }
/* Harness: a labelled boundary around the Skills and the permitted SAP action */
.v9-hb { position: relative; padding: 22px 14px 14px; border-radius: 16px; border: 1.5px dashed rgba(255, 255, 255, 0.55); animation: v9-hb 12s ease-in-out infinite both; animation-delay: 4.6s; }
@keyframes v9-hb { 0%, 9%, 100% { border-color: rgba(255, 255, 255, 0.55); box-shadow: none; } 2%, 7% { border-color: #fff; box-shadow: 0 0 22px rgba(255, 255, 255, 0.35); } }
.v9-hb-label { position: absolute; top: -11px; left: 12px; padding: 2px 10px; border-radius: 999px; background: #fff; color: #1A20D0; font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.v9-hb-label span { font-weight: 400; color: #4A5170; }
body .px .v9-sk-label:not(#_) { margin: 0 0 8px !important; font-size: 12.5px !important; color: rgba(255, 255, 255, 0.85) !important; }
.v9-sk-label strong { font-weight: 600; color: #fff; }
.v9-core-steps { margin-bottom: 10px; gap: 5px; }
.v9-core-steps li { padding: 4px 10px; font-size: 12px; }
body .px .v9-core-gate:not(#_) { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; padding: 6px 10px; border-radius: 10px; font-size: 12.5px !important; font-weight: 500; color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); animation: v9-gate 12s ease-in-out infinite both; animation-delay: 4.6s; }
.v9-core-gate i { flex: none; width: 9px; height: 8px; margin-top: 3px; border-radius: 2px; background: currentColor; box-shadow: 0 -4px 0 -1px transparent; position: relative; }
.v9-core-gate i::before { content: ""; position: absolute; left: 1.5px; top: -4px; width: 6px; height: 5px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
@keyframes v9-gate { 0%, 9%, 100% { background: rgba(255, 255, 255, 0.1); color: #fff; } 2%, 7% { background: #fff; color: #1A20D0; } }
body .px .v9-core-out:not(#_) { display: inline-block; margin: 0 !important; padding: 4px 10px; border-radius: 999px; font-size: 12px !important; font-weight: 500; color: #fff; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); animation: v9-step2 12s ease-in-out infinite both; animation-delay: 5.4s; }
/* Designer: beside the Skills, connected, never in the invoice path */
.v9-des { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; text-decoration: none; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.v9-des::before { content: ""; position: absolute; left: -26px; top: 50%; width: 26px; border-top: 1.5px dashed rgba(255, 255, 255, 0.6); }
.v9-des strong { font-size: 12px; font-weight: 600; line-height: 1.25; color: #fff; }
.v9-des span { font-size: 11px; line-height: 1.35; color: rgba(255, 255, 255, 0.8); }
.v9-des:hover, .v9-des:focus-visible { box-shadow: inset 0 0 0 1px #fff; outline: none; }
body .px .v9-core-status:not(#_) { margin-bottom: 10px !important; }
/* Intelligence: beneath NXT AP, connected to its results */
.v9-intel { grid-area: intel; position: relative; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 30px; padding: 12px 18px; border-radius: 14px; text-decoration: none; background: #fff; box-shadow: inset 0 0 0 1px #E3E6EE; animation: v9-band 12s ease-in-out infinite both; animation-delay: 7.6s; }
.v9-intel::before { content: ""; position: absolute; left: 50%; top: -30px; height: 30px; border-left: 2px solid #2027E1; }
.v9-intel strong { font-size: 14px; font-weight: 600; color: #10164D; }
.v9-intel span { font-size: 13px; color: #4A5170; }
.v9-intel:hover, .v9-intel:focus-visible { outline: 2px solid #2027E1; outline-offset: 2px; }
.v9-map > figcaption { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .v9-hb, .v9-core-gate, .v9-core-out, .v9-intel { animation: none; } }
@media (max-width: 960px) {
  .v9-map { grid-template-columns: 1fr; grid-template-areas: "in" "gl" "core" "intel" "gr" "out" "cap"; }
  .v9-core-run { grid-template-columns: 1fr; gap: 20px; }
  .v9-des::before { left: 50%; top: -20px; width: 0; height: 20px; border-top: 0; border-left: 1.5px dashed rgba(255, 255, 255, 0.6); }
  .v9-intel { margin-top: 24px; }
  .v9-intel::before { top: -24px; height: 24px; }
}
/* platform map in plain language (2 Nov): the message leads, product names are small print */
.v9-sk-label span, .v9-hb-label span { font-weight: 400; font-size: 10.5px; opacity: 0.75; margin-left: 4px; }
.v9-hb-label { color: #10164D; }
.v9-sk-label strong { font-size: 14px; }
body .px .v9-core-ex:not(#_) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.v9-core-ex strong { font-weight: 500; color: #fff; }
.v9-core-ex a { font-size: 11px; opacity: 0.8; }
.v9-des strong { font-size: 13px; }
.v9-des span { font-size: 10.5px; opacity: 0.8; }
.v9-intel strong { font-size: 15px; }
.v9-intel span { font-size: 12px; color: #6B7090; }
body .px .v9-core-d:not(#_) { margin-bottom: 22px !important; }
/* the animation covers every route (Pooja, 2 Nov): invoices alternate between
   Mailbox and eNET; after posting, one goes to InvoiceNxt and one is handed
   off to Payments, stopping at the handoff (no payment release is implied). */
.v9-pulse-in { animation: v9-pin2 24s linear infinite both; }
@keyframes v9-pin2 {
  0% { left: 0; top: 25%; opacity: 0; } 0.75% { opacity: 1; } 2.5% { left: 50%; top: 25%; } 4% { left: 50%; top: 50%; } 6% { left: 100%; top: 50%; opacity: 1; } 6.75%, 49.9% { left: 100%; top: 50%; opacity: 0; }
  50% { left: 0; top: 75%; opacity: 0; } 50.75% { opacity: 1; } 52.5% { left: 50%; top: 75%; } 54% { left: 50%; top: 50%; } 56% { left: 100%; top: 50%; opacity: 1; } 56.75%, 100% { left: 100%; top: 50%; opacity: 0; }
}
.v9-pulse-pay { animation: v9-ppay 12s linear infinite both; }
@keyframes v9-ppay { 0%, 56% { left: 0; top: 50%; opacity: 0; } 57.5% { opacity: 1; } 61% { left: 50%; top: 50%; } 64% { left: 50%; top: 25%; } 68% { left: 100%; top: 25%; opacity: 1; } 69.5%, 100% { left: 100%; top: 25%; opacity: 0; } }

/* NXT AP at a glance (2 Nov brief): tighter intro, explanations legible at rest */
.v9-plat-head { margin-bottom: 32px; }
.v9-sk-label span, .v9-hb-label span, .v9-des span { font-size: 11.5px; opacity: 1; }
.v9-core-ex a { font-size: 13px; font-weight: 600; opacity: 1; }
body .px .v9-plat-head .v9-h2:not(#_) { max-width: none; }
.v9-plat-head .v9-h2 span { display: block; }
@media (max-width: 560px) { .v9-hb { padding-top: 40px; } .v9-hb-label { left: 8px; right: 8px; top: -14px; padding: 5px 12px; border-radius: 12px; font-size: 11.5px; } .v9-hb-label span { display: block; margin-left: 0; font-size: 11px; } }

/* Harness now follows the platform map, Skills follows Harness (2 Nov) */
body .px.no-field > .v9-plat + .hp-prime:not(#_) { margin-top: 160px; }
body .px.no-field > .hp-prime + .v9-skills:not(#_) { margin-top: 0; }
@media (max-width: 720px) { body .px.no-field > .v9-plat + .hp-prime:not(#_) { margin-top: 88px; } }

/* Harness comparison as a visual (2 Nov brief): replaces the table. Complete
   when static; the one animated action never travels past a blocked outcome. */
.v9-cv { margin-top: 88px; }
body .px h3.v9-hx-cmp-h:not(#_) span { display: block; color: #2027E1; }
.v9-cv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 20px; margin-top: 28px; }
.v9-cv-p { display: flex; flex-direction: column; padding: 28px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px #E3E6F2, 0 16px 36px -28px rgba(16, 22, 77, 0.3); }
.v9-cv-p.is-nxt { background: linear-gradient(160deg, #EEF3FF, #E4EBFF); box-shadow: inset 0 0 0 1px #CFDAFB, 0 20px 44px -30px rgba(32, 39, 225, 0.45); }
body .px .v9-cv-k:not(#_) { margin: 0 0 8px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7090 !important; }
.v9-cv-p.is-nxt .v9-cv-k { color: #2027E1 !important; }
body .px .v9-cv-t:not(#_) { margin: 0 0 24px !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1.25 !important; color: #10164D !important; }
body .px .v9-cv-s:not(#_) { margin: auto 0 0 !important; padding-top: 20px; font-size: 13.5px !important; line-height: 1.5 !important; color: #4A5170 !important; }
.v9-cv svg { display: block; flex: none; width: 22px; height: 22px; color: #2027E1; }
/* Left: three connected steps */
.v9-cv-chain { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; }
.v9-cv-chain li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; line-height: 1.3; color: #10164D; }
.v9-cv-chain svg { box-sizing: content-box; padding: 11px; border-radius: 14px; color: #4A5170; background: #F4F5FA; box-shadow: inset 0 0 0 1px #E3E6F2; }
.v9-cv-chain li + li::before { content: ""; position: absolute; left: -22px; top: 22px; width: 18px; border-top: 1.5px solid #AEB4CC; }
.v9-cv-chain li + li::after { content: ""; position: absolute; left: -7px; top: 18.5px; border: 4px solid transparent; border-left: 6px solid #AEB4CC; }
/* Right: proposal, boundary, outcomes */
.v9-cv-flow { display: grid; grid-template-columns: 112px 30px minmax(0, 1fr) 176px; align-items: center; }
.v9-cv-skill { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #CFDAFB; font-size: 12.5px; line-height: 1.3; color: #4A5170; }
.v9-cv-skill b { margin-top: 6px; padding: 5px 8px; border-radius: 999px; text-align: center; font-weight: 600; color: #fff; background: #2027E1; white-space: nowrap; }
.v9-cv-link { position: relative; display: block; height: 0; border-top: 2px solid #2027E1; }
.v9-cv-link::after { content: ""; position: absolute; right: -1px; top: -6px; border: 5px solid transparent; border-left: 7px solid #2027E1; }
.v9-cv-hb { position: relative; padding: 24px 14px 14px; border-radius: 16px; background: #fff; border: 2px solid #2027E1; box-shadow: 0 0 0 5px rgba(32, 39, 225, 0.12), 0 16px 32px -18px rgba(32, 39, 225, 0.55); }
body .px .v9-cv-hb-l:not(#_) { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); margin: 0 !important; padding: 4px 12px; border-radius: 999px; font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: nowrap; color: #fff !important; background: linear-gradient(155deg, #2A3AF5, #10138F); }
.v9-cv-hb ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.v9-cv-hb li { display: flex; flex-direction: column; gap: 5px; padding: 9px 8px; border-radius: 10px; font-size: 12px; line-height: 1.25; color: #10164D; background: #F2F5FF; }
.v9-cv-hb svg { width: 18px; height: 18px; }
.v9-cv-out { display: grid; gap: 14px; }
.v9-cv-b { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; }
.v9-cv-b p { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; margin: 0 !important; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #CFDAFB; }
.v9-cv-b p > span { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.3; color: #4A5170; }
.v9-cv-b b { font-size: 13px; font-weight: 600; line-height: 1.25; color: #10164D; }
.v9-cv-b svg { width: 18px; height: 18px; }
.v9-cv-b.is-ok svg { color: #15803D; }
.v9-cv-b.is-no svg { color: #B4322A; }
.v9-cv-b.is-no .v9-cv-link { border-top: 2px dashed #B4322A; margin-right: 6px; }
.v9-cv-b.is-no .v9-cv-link::after { right: -6px; top: -7px; width: 2px; height: 12px; border: 0; background: #B4322A; }
/* One action: permitted on the first pass, blocked on the second */
.v9-cv-link i { position: absolute; top: -5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #2027E1; box-shadow: 0 0 8px 2px rgba(32, 39, 225, 0.5); opacity: 0; }
.v9-cv-in i { animation: v9-cv-in 16s linear infinite both; }
.is-ok .v9-cv-link i { animation: v9-cv-ok 16s linear infinite both; }
.v9-cv-hb { animation: v9-cv-hb 16s ease-in-out infinite both; }
.v9-cv-b.is-ok p { animation: v9-cv-okp 16s ease-in-out infinite both; }
.v9-cv-b.is-no p { animation: v9-cv-nop 16s ease-in-out infinite both; }
@keyframes v9-cv-in { 0% { left: 0; opacity: 0; } 2% { opacity: 1; } 10% { left: calc(100% - 8px); opacity: 1; } 12%, 50% { left: calc(100% - 8px); opacity: 0; } 50.1% { left: 0; opacity: 0; } 52% { opacity: 1; } 60% { left: calc(100% - 8px); opacity: 1; } 62%, 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes v9-cv-hb { 0%, 10%, 30%, 60%, 80%, 100% { box-shadow: 0 0 0 5px rgba(32, 39, 225, 0.12), 0 16px 32px -18px rgba(32, 39, 225, 0.55); } 16%, 24%, 66%, 74% { box-shadow: 0 0 0 9px rgba(32, 39, 225, 0.22), 0 16px 32px -18px rgba(32, 39, 225, 0.55); } }
@keyframes v9-cv-ok { 0%, 28% { left: 0; opacity: 0; } 29% { opacity: 1; } 36% { left: calc(100% - 8px); opacity: 1; } 38%, 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes v9-cv-okp { 0%, 34%, 48%, 100% { box-shadow: inset 0 0 0 1px #CFDAFB; } 37%, 45% { box-shadow: inset 0 0 0 2px #15803D; } }
@keyframes v9-cv-nop { 0%, 78%, 96%, 100% { box-shadow: inset 0 0 0 1px #CFDAFB; } 81%, 93% { box-shadow: inset 0 0 0 2px #B4322A; } }
@media (prefers-reduced-motion: reduce) { .v9-cv-link i, .v9-cv-hb, .v9-cv-b p { animation: none; } }
@media (max-width: 1100px) { .v9-cv-grid { grid-template-columns: 1fr; } body .px .v9-cv-s:not(#_) { margin-top: 0 !important; } }
@media (max-width: 760px) {
  .v9-cv-flow { grid-template-columns: 1fr; justify-items: stretch; }
  .v9-cv-skill { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .v9-cv-skill b { margin: 0 0 0 auto; }
  .v9-cv-link { width: 0; height: 28px; margin: 0 auto; border-top: 0; border-left: 2px solid #2027E1; }
  .v9-cv-link::after { right: auto; left: -6px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 7px solid #2027E1; }
  .v9-cv-link i { display: none; }
  .v9-cv-out { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .v9-cv-b { grid-template-columns: 1fr; }
  .v9-cv-b.is-no .v9-cv-link { margin: 0 auto; border-top: 0; border-left: 2px dashed #B4322A; }
  .v9-cv-b.is-no .v9-cv-link::after { left: -7px; right: auto; top: auto; bottom: 0; width: 12px; height: 2px; }
}
body .px .v9-cv-hb li:not(#_) { font-size: 13px !important; line-height: 1.25 !important; }
body .px .v9-cv-chain li:not(#_) { font-size: 13.5px !important; line-height: 1.3 !important; }
.v9-cv-chain { margin: auto 0; }

/* Insights heading (2 Nov brief) */
.v9-ins-head { max-width: 720px; }
.v9-ins-head .v9-h2 { margin-bottom: 12px; }
body .px .v9-ins-head .v9-lead:not(#_) { margin: 0 !important; }

/* NXT AI Skills as three worked examples (2 Nov brief): input -> task -> result,
   complete when static. Blue = completed work, amber = the discrepancy. */
.v9-skx { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 40px 0 0; padding: 0; }
.v9-skx-c { display: flex; flex-direction: column; align-items: stretch; padding: 22px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px #E3E6F2, 0 18px 40px -30px rgba(16, 22, 77, 0.35); }
body .px .v9-skx-t:not(#_) { margin: 0 0 16px !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #10164D !important; }
.v9-skx-doc { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: #F7F8FC; box-shadow: inset 0 0 0 1px #E3E6F2; }
.v9-skx-doc.is-sap { background: #F1F4FF; box-shadow: inset 0 0 0 1px #D3DCFA; }
.v9-skx-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7090; }
.v9-skx-f { padding: 5px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.3; color: #4A5170; background: #fff; }
.v9-skx-f.is-hl { color: #10164D; font-weight: 500; box-shadow: inset 0 0 0 1.5px #2027E1; animation: v9-skx-hl 9s ease-in-out infinite both; }
.v9-skx-f.is-dim { color: #8A90AD; }
.v9-skx-arrow { position: relative; display: block; align-self: center; width: 2px; height: 24px; margin: 6px 0; background: #2027E1; }
.v9-skx-arrow::after { content: ""; position: absolute; left: -4px; bottom: -2px; border: 5px solid transparent; border-top: 7px solid #2027E1; border-bottom: 0; }
body .px .v9-skx-r:not(#_) { align-self: flex-start; margin: 16px 0 0 !important; padding: 6px 12px 6px 28px; border-radius: 999px; position: relative; font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #fff !important; background: #2027E1; }
.v9-skx-r::before { content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 5px; margin-top: -4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.v9-skx-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v9-skx-3 .v9-skx-doc { align-items: center; gap: 2px; padding: 10px 6px; text-align: center; }
.v9-skx-3 .v9-skx-k { font-size: 9.5px; letter-spacing: 0.04em; }
.v9-skx-q { margin-top: 4px; font-size: 22px; font-weight: 600; line-height: 1.1; color: #10164D; }
.v9-skx-u { font-size: 11px; color: #8A90AD; }
.v9-skx-3 .is-off { background: #FFF7E6; box-shadow: inset 0 0 0 1.5px #E0A21B; animation: v9-skx-warn 9s ease-in-out infinite both; }
.v9-skx-3 .is-off .v9-skx-q { color: #A15C00; }
.is-warn .v9-skx-arrow { background: #E0A21B; }
.is-warn .v9-skx-arrow::after { border-top-color: #E0A21B; }
body .px .v9-skx-diff:not(#_) { margin: 0 !important; padding: 8px 12px; border-radius: 10px; font-size: 12.5px !important; line-height: 1.35 !important; color: #7A4A00 !important; background: #FFF7E6; box-shadow: inset 0 0 0 1px #F2D39A; }
body .px .is-warn .v9-skx-r:not(#_) { padding-left: 12px; color: #4A2E00 !important; background: #FFC85C; }
.is-warn .v9-skx-r::before { display: none; }
body .px .v9-skx-shared:not(#_) { margin: 32px 0 0 !important; font-size: 17px !important; font-weight: 500 !important; color: #10164D !important; text-align: center; }
body .px .v9-skx-more:not(#_) { margin: 10px 0 0 !important; text-align: center; }
.v9-skx-c:nth-child(2) .is-hl { animation-delay: 1s; }
.v9-skx-c:nth-child(3) .is-hl { animation-delay: 2s; }
@keyframes v9-skx-hl { 0%, 30%, 100% { box-shadow: inset 0 0 0 1.5px #2027E1; } 10%, 20% { box-shadow: inset 0 0 0 1.5px #2027E1, 0 0 0 4px rgba(32, 39, 225, 0.16); } }
@keyframes v9-skx-warn { 0%, 40%, 100% { box-shadow: inset 0 0 0 1.5px #E0A21B; } 50%, 60% { box-shadow: inset 0 0 0 1.5px #E0A21B, 0 0 0 4px rgba(224, 162, 27, 0.22); } }
@media (prefers-reduced-motion: reduce) { .v9-skx-f.is-hl, .v9-skx-3 .is-off { animation: none; } }
@media (max-width: 900px) { .v9-skx { grid-template-columns: 1fr; } body .px .v9-skx-shared:not(#_), body .px .v9-skx-more:not(#_) { text-align: left; } }
body .px .v9-skx-more a.px-more:not(#_) { color: #2027E1 !important; }
body .px .v9-skx-r:not(#_) { margin-top: auto !important; }
.v9-skx-c > .v9-skx-doc.is-sap, .v9-skx-diff { margin-bottom: 16px !important; }
body .px .v9-skx-c .v9-skx-diff:not(#_) { margin: 0 0 16px !important; }

/* NXT AI Skills as one compact feature block (2 Nov brief): the benefit here,
   the mechanics on the product page. */
.v9-skf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; margin-bottom: 96px; }
body .px .v9-skf-cta:not(#_) { margin: 24px 0 0 !important; }
body .px .v9-skf .v9-h2 span:not(#_) { display: block; }
.v9-skf-vis { position: relative; margin: 0; padding: 32px; border-radius: 24px; background: linear-gradient(160deg, #F6F8FF, #EDF1FF); box-shadow: inset 0 0 0 1px #DDE4FA; text-align: center; }
body .px .v9-skf-k:not(#_) { margin: 0 0 16px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; color: #2027E1 !important; }
.v9-skf-tiles { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.v9-skf-tiles li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 10px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #DDE4FA, 0 12px 26px -20px rgba(32, 39, 225, 0.45); font-size: 15px; font-weight: 500; color: #10164D; animation: v9-skf-t 6s ease-in-out infinite both; }
.v9-skf-tiles li:nth-child(2) { animation-delay: 1.2s; }
.v9-skf-tiles li:nth-child(3) { animation-delay: 2.4s; }
.v9-skf-tiles svg { width: 26px; height: 26px; color: #2027E1; }
.v9-skf-branch { display: block; width: 0; height: 28px; margin: 12px auto 0; border-left: 1.5px dashed #9AA6D6; }
body .px .v9-skf-team:not(#_) { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 8px 14px; border-radius: 999px; font-size: 13.5px !important; font-weight: 500 !important; color: #4A5170 !important; background: #fff; box-shadow: inset 0 0 0 1px #DDE4FA; }
.v9-skf-team svg { width: 18px; height: 18px; color: #6B7090; }
@keyframes v9-skf-t { 0%, 30%, 100% { box-shadow: inset 0 0 0 1px #DDE4FA, 0 12px 26px -20px rgba(32, 39, 225, 0.45); } 10%, 20% { box-shadow: inset 0 0 0 1.5px #2027E1, 0 14px 30px -16px rgba(32, 39, 225, 0.55); } }
@media (prefers-reduced-motion: reduce) { .v9-skf-tiles li { animation: none; } }
@media (max-width: 900px) { .v9-skf { grid-template-columns: 1fr; gap: 36px; margin-bottom: 64px; } .v9-skf-vis { padding: 24px 18px; } }
body .px .v9-sk2 .v9-skf .v9-h2:not(#_) { color: #10164D !important; }
body .px .v9-sk2 .v9-skf .v9-h2 span:not(#_) { color: #2027E1 !important; }
body .px .v9-sk2 .v9-skf .v9-lead:not(#_) { margin-top: 16px !important; color: #4A5170 !important; }
body .px .v9-sk2 .v9-skf-cta a.px-more:not(#_) { color: #2027E1 !important; }
@media (min-width: 901px) { .v9-skf { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; } .v9-skf .v9-h2 span { white-space: nowrap; } }

/* ===== 3 Nov review brief ===== */
/* 1 CFO playbook on phones: one full-width column, image last */
@media (max-width: 900px) {
  .v9-cfo-calm .v9-choice-grid { grid-template-columns: 1fr; gap: 32px; }
  .v9-cfo-calm .v9-cfo-media { order: 1; }
  .v9-cfo-photo { min-height: 300px; }
  body .px .v9-cfo-actions:not(#_) { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
  .v9-cfo-actions .px-btn { white-space: nowrap; }
}
/* 2 Shorter opening: smaller orb, Ask closer to the hero copy */
body .px .hx-sub-link:not(#_) { margin: 16px 0 0 !important; font-size: 14px !important; }
.hx-sub-link a { color: rgba(255, 255, 255, 0.88); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.hx-sub-link a:hover, .hx-sub-link a:focus-visible { color: #fff; text-decoration-color: #fff; }
/* Hero: subscriptions are the second button, in bold (5 Nov) */
body .px .hx-btn-sub:not(#_) { font-weight: 700; }
@media (min-width: 901px) {
  .hx-wrap.hp-stage-wrap { padding-top: 112px; padding-bottom: 200px; }
  body .px.no-field > .hx-hero + .v9-ask-wrap:not(#_) { --askgap: 12px; padding-bottom: 64px !important; }
  .hx-hero + .v9-ask-wrap .v9-orb { height: 300px; margin-top: calc(-120px - var(--askgap)); margin-bottom: -40px; }
}
@media (max-width: 900px) {
  .hx-wrap.hp-stage-wrap { padding-bottom: 150px; }
  .hx-hero + .v9-ask-wrap .v9-orb { height: 200px; margin: -96px 0 -12px; }
}
/* 3 Customers apart from partners and platforms */
.lm-rel { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px 72px; margin-top: 36px; }
.lm-group { display: flex; align-items: center; gap: 24px; }
body .px .lm-sub:not(#_) { margin: 0 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7090 !important; }
.lm-group ul { list-style: none; display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; }
.lm-group img { display: block; width: auto; height: var(--h); }
@media (max-width: 720px) { .lm-group { flex-direction: column; gap: 14px; } .lm-group ul { gap: 24px; flex-wrap: wrap; justify-content: center; } }
body .px.no-field > .v9-ask-wrap + .lm-wrap { padding-top: 88px; }
/* 4 Harness: the execution visual on its own, full width */
.v9-cv-solo { margin-top: 56px; }
.v9-cv-solo .v9-cv-grid { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin: 0 auto; }
@media (min-width: 761px) { .v9-cv-solo .v9-cv-flow { grid-template-columns: 150px 44px minmax(0, 1fr) 210px; } }
/* section spacing for the new order */
body .px.no-field > .v9-skills + .hp-prime:not(#_) { margin-top: 120px; }
body .px.no-field > .hp-prime + .v9-cfo:not(#_) { padding-top: 136px !important; }
@media (max-width: 900px) { body .px.no-field > .v9-skills + .hp-prime:not(#_) { margin-top: 72px; } body .px.no-field > .hp-prime + .v9-cfo:not(#_) { padding-top: 88px !important; } }
/* 7c Phones: Intelligence measures the process, so it sits apart, not in the flow */
@media (max-width: 960px) {
  .v9-map { grid-template-areas: "in" "gl" "core" "gr" "out" "intel" "cap"; }
  .v9-intel { margin-top: 28px; }
  .v9-intel::before { content: none; }
}

/* Partner world map in light grey (Pooja, 5 Nov); the box stays brand blue */
.v9-pmap-img { filter: grayscale(1) brightness(1.9) contrast(0.7); opacity: 0.32; }

/* Ask NXT AI as a voice assistant (preview, 5 Nov): a mic on the orb with a
   state label, and a mic button in the question box. */
body .px .v9-ask-hint:not(#_) { margin: -8px 0 16px !important; font-size: 14px !important; color: rgba(255, 255, 255, 0.72) !important; }
.v9-ask-form .v9-ask-mic { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); display: grid; place-items: center; }
.v9-ask-form .v9-ask-mic svg { width: 18px; height: 18px; }
.v9-ask-form .v9-ask-mic:hover, .v9-ask-form .v9-ask-mic[aria-pressed="true"] { background: #fff; color: #2027E1; }
.v9-orb-talk { position: absolute; z-index: 3; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; font: inherit; }
.v9-orb-mic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 30px rgba(111, 180, 255, 0.45); transition: background 200ms, transform 200ms, opacity 300ms; }
.v9-orb-mic svg { width: 26px; height: 26px; }
.v9-orb-talk:hover .v9-orb-mic, .v9-orb-talk:focus-visible .v9-orb-mic { background: rgba(255, 255, 255, 0.26); transform: scale(1.06); }
.v9-orb-talk:focus-visible { outline: none; }
.v9-orb-talk:focus-visible .v9-orb-mic { box-shadow: inset 0 0 0 2px #fff, 0 0 30px rgba(111, 180, 255, 0.6); }
.v9-orb-state { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; background: rgba(11, 18, 80, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.v9-ask[data-voice="listening"] .v9-orb-mic, .v9-ask[data-voice="speaking"] .v9-orb-mic { opacity: 0.35; }
.v9-ask[data-voice="thinking"] .v9-orb-mic { opacity: 0; }
@media (max-width: 900px) { .v9-orb-mic { width: 56px; height: 56px; } }
/* mic on the orb: transparent, just a thin ring and the icon (Pooja, 5 Nov) */
.v9-orb-mic { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.v9-orb-talk:hover .v9-orb-mic, .v9-orb-talk:focus-visible .v9-orb-mic { background: rgba(255, 255, 255, 0.08); }
.v9-orb-talk:focus-visible .v9-orb-mic { box-shadow: inset 0 0 0 2px #fff; }
/* Orb mic (5 Nov): smaller, symbol only. The "Tap to talk" label is hidden
   at rest (the button keeps its "Talk to NXT Live" name for screen readers);
   it appears only while a voice state is running (Listening…, Thinking…). */
.v9-orb-mic, .v9-orb-mic:not(#_) { width: 44px; height: 44px; }
.v9-orb-mic svg { width: 18px; height: 18px; }
.v9-orb-talk .v9-orb-state { display: none; }
.v9-ask[data-voice="listening"] .v9-orb-state, .v9-ask[data-voice="thinking"] .v9-orb-state, .v9-ask[data-voice="speaking"] .v9-orb-state { display: inline-block; }
@media (max-width: 900px) { .v9-orb-mic, .v9-orb-mic:not(#_) { width: 44px; height: 44px; } }
/* Orb overlay canvas (home-preview.js): larger than the orb's layout box so
   the moving shape is never clipped. It never takes clicks, and the section
   clips it sideways only, so it cannot cause horizontal scrolling. */
.v9-orb-draw { position: absolute; z-index: 2; pointer-events: none; display: block; }
.v9-ask-wrap { overflow-x: clip; }
/* Hero subscription button, a step up from the plain outline (5 Nov): a
   brighter white rim, a faint glass fill and a soft light-blue glow, so it
   reads as the second call to action next to the white "Book a live demo". */
body .px .hp-btn-ghost.hx-btn-sub:not(#_) {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 0 24px -6px rgba(111, 180, 255, 0.55);
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
}
body .px .hp-btn-ghost.hx-btn-sub:not(#_):hover, body .px .hp-btn-ghost.hx-btn-sub:not(#_):focus-visible {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1.5px #fff, 0 0 30px -4px rgba(111, 180, 255, 0.75);
}

/* NXT Live (5 Nov): the conversation under the box, the session bar, the sign-up dialog */
.v9-live-log { max-width: 560px; max-height: 260px; overflow-y: auto; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
body .px .v9-live-line:not(#_) { margin: 0 0 8px !important; font-size: 14px !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.92) !important; }
.v9-live-line b { font-weight: 600; color: #fff; }
.v9-live-line.is-you b { color: #9CC8FF; }
.v9-live-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; max-width: 560px; margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.v9-live-time { font-variant-numeric: tabular-nums; }
.v9-live-end { padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); color: #fff; font: inherit; cursor: pointer; }
.v9-live-demo { margin-left: auto; color: #fff; font-weight: 600; }
.v9-live-dlg { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 40px 120px rgba(16, 22, 77, 0.45); overflow: auto; }
.v9-live-dlg::backdrop { background: rgba(10, 14, 52, 0.62); backdrop-filter: blur(6px); }
.v9-live-step { padding: 28px; }
.v9-live-h { margin: 0 0 6px; font: 600 22px/1.2 'Poppins', sans-serif; color: #10164D; }
.v9-live-p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: #4A5170; }
.v9-live-f { display: block; margin-bottom: 12px; }
.v9-live-f span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: #10164D; }
.v9-live-f input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #D3D8EA; border-radius: 10px; font: inherit; font-size: 15px; color: #10164D; }
.v9-live-f input:focus { outline: 2px solid #2027E1; outline-offset: 1px; border-color: transparent; }
.v9-live-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.v9-live-c { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 10px; font-size: 13px; line-height: 1.45; color: #10164D; }
.v9-live-c input { margin-top: 3px; }
.v9-live-small { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: #6B7090; }
.v9-live-small a { color: #2027E1; }
.v9-live-err { min-height: 1.2em; margin: 0 0 8px; font-size: 13px; color: #B4322A; }
.v9-live-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v9-live-go { border: 0; cursor: pointer; background: #2027E1 !important; color: #fff !important; }
.v9-live-x { padding: 8px 4px; border: 0; background: none; color: #4A5170; font: inherit; font-size: 14px; cursor: pointer; }

/* NXT Live typed only (voice not offered yet): no mics on the orb or in the box. */
.nxt-live-typed .v9-ask-mic,
.nxt-live-typed .v9-orb-mic,
.nxt-live-typed .v9-orb-state { display: none !important; }
.nxt-live-typed .v9-orb-talk { cursor: text; }
/* NXT Live: what the page hides (no session yet) stays hidden. */
.v9-live-bar[hidden], .v9-live-log[hidden] { display: none !important; }
/* Closing photo (6 Nov): the team at the table, in light. Small copy for now;
   Pooja sends the full-size file. */
@media (min-width: 861px) {
  .hp-start-photo-img { background-image: url("/assets/img/home/closing-table.jpg"); background-position: 72% 60%; }
}
/* Closing photo (6 Nov, alternative): the walking figure on grain. */
@media (min-width: 861px) {
  .hp-start-photo-img { background: #E6E6E6 url("/assets/img/home/closing-walk.jpg") 50% 52% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); }
  .hp-start-photo-img::after { background: rgba(16, 30, 110, 0.08); }
}
/* Closing photo: a seamless fade (6 Nov) - an eased mask over half the panel
   (no visible start line) and a navy veil so the blend stays blue, not muddy. */
@media (min-width: 861px) {
  .hp-start-photo-img {
    --hp-fade: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.028) 5%, rgba(0,0,0,.104) 10%, rgba(0,0,0,.216) 15%, rgba(0,0,0,.352) 20%, rgba(0,0,0,.5) 25%, rgba(0,0,0,.648) 30%, rgba(0,0,0,.784) 35%, rgba(0,0,0,.896) 40%, rgba(0,0,0,.972) 45%, #000 50%);
    -webkit-mask-image: var(--hp-fade); mask-image: var(--hp-fade); }
  .hp-start-photo-img::after { background: linear-gradient(90deg, rgba(16, 26, 110, 0.6) 0%, rgba(16, 26, 110, 0.32) 22%, rgba(16, 26, 110, 0.1) 42%, rgba(16, 26, 110, 0) 58%); mix-blend-mode: normal; }
}
/* Closing photo: white instead of grey (6 Nov). */
@media (min-width: 861px) {
  .hp-start-photo-img { background-color: #fff; background-image: url("/assets/img/home/closing-walk-white.jpg"); }
}

/* Partner card on phones (7 Nov, Pooja: "we need to see the world map.. fully"):
   the whole map sits above the card instead of being cropped behind it (no grey
   sliver at the edge); the card overlaps its lower edge a little. */
@media (max-width: 860px) {
  .v9-pmap-stage { display: block; min-height: 0; padding: 8px 0 0; }
  .v9-pmap-img { position: relative; inset: auto; display: block; width: 100%; height: auto; object-fit: contain; animation: none; opacity: 0.6; }
  .v9-pmap-box { width: 100%; margin-top: -36px; padding: 32px 24px 28px; gap: 16px; border-radius: 22px; }
  body .px h2.v9-pmap-title:not(#_) { font-size: 28px !important; }
  body .px .v9-pmap-copy p:not(#_) { font-size: 15px !important; line-height: 1.55 !important; margin-bottom: 22px !important; }
}

/* Closing section on phones (7 Nov, Pooja: "surprised to see this image on
   mobile"): the same as the laptop – navy card, the copy, then the walking
   figure below it, fading up into the navy. The old team photo is gone here too. */
@media (max-width: 860px) {
  .hp-start.hp-start-photo { background: radial-gradient(120% 90% at 0% 0%, #1A2A9E 0%, #10164D 55%, #0A0F3A 100%); }
  .hp-start.hp-start-photo::before { content: none; }
  .hp-start-photo-img { grid-column: 1; grid-row: 2; position: relative; height: 340px;
    background: #fff url("/assets/img/home/closing-walk-white.jpg") 50% 42% / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 18%, rgba(0,0,0,.8) 34%, #000 48%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 18%, rgba(0,0,0,.8) 34%, #000 48%); }
  .hp-start-photo-img::after { content: ""; position: absolute; inset: 0; mix-blend-mode: normal;
    background: linear-gradient(180deg, rgba(16, 26, 110, 0.55) 0%, rgba(16, 26, 110, 0.15) 40%, rgba(16, 26, 110, 0) 60%); }
  .hp-start-copy { padding-bottom: 0; }
}