/* ============================================================================
   MYNDAPX — apx.myndsolution.com
   Design system ported from the MYND editorial system (Montserrat, navy/blue/pink,
   grain, dark/light cadence, numbered chapter heads, bespoke live data-viz).
   Backgrounds served locally from /images/bg/. Trust-led, APX-compliant.
   ========================================================================== */
    /* ============================================================================
   MYND INTEGRATED SOLUTIONS — "The work behind your work"
   Art-directed, concept-led homepage. Montserrat only. MYND palette.
   Bold asymmetric composition · engineered grid + grain texture ·
   animated dashboard-style data viz · live operations · alternating dark/light.
   ========================================================================== */

    :root {
      /* MYND brand codes */
      --navy: #253c74;
      --navy-700: #1d2f5c;
      --navy-deep: #1a2545;
      --navy-900: #141d38;
      --blue: #0c4da2;
      --blue-300: #5b86d6;
      /* tint for legibility on dark */
      --pink: #ee3897;
      --pink-300: #ff6fb6;
      --pink-700: #c01f78;

      --ink: #141a2b;
      --ink-700: #2c3346;
      --ink-500: #586079;
      --ink-400: #8b91a6;
      --line: #e6e8f0;
      --line-soft: #eef0f6;
      --line-strong: #cdd0dd;
      --surface: #f4f6fb;
      --paper: #ffffff;

      --on-dark: #eef1fb;
      --on-dark-mut: #9aa4c6;
      --dark-line: rgba(255, 255, 255, .12);
      --dark-line-2: rgba(255, 255, 255, .07);
      --dark-card: rgba(255, 255, 255, .025);

      --grad: linear-gradient(96deg, var(--blue), var(--pink));
      --grad-num: linear-gradient(180deg, #ffffff 0%, #d7e0f7 100%);
      /* dark canvas — navy dominant with blue + pink brand gradient */
      --dark-bg: radial-gradient(120% 130% at 90% -12%, rgba(238, 56, 151, .20), transparent 46%),
        radial-gradient(110% 120% at -8% 112%, rgba(12, 77, 162, .34), transparent 52%),
        linear-gradient(134deg, #16224a 0%, #1d2f5c 55%, #27386b 100%);

      --disp: 'Montserrat', system-ui, sans-serif;

      --maxw: 1280px;
      --maxw-wide: 1460px;
      --gut: clamp(22px, 5vw, 72px);
      --sx: clamp(78px, 9vw, 150px);
      --ease: cubic-bezier(.22, .61, .36, 1);
      --ease-io: cubic-bezier(.16, 1, .3, 1);

      /* ---- design-system spine (added in uplift) ---- */
      --radius-sm: 9px;
      --radius: 14px;
      --radius-lg: 22px;
      --shadow-1: 0 1px 2px rgba(20, 26, 43, .05), 0 10px 28px rgba(20, 26, 43, .07);
      --shadow-2: 0 26px 64px rgba(20, 26, 43, .12);
      --shadow-float: 0 44px 96px rgba(20, 26, 43, .16);
      --shadow-dark: 0 40px 90px rgba(0, 0, 0, .42);
      --surface-2: #eaeef7;
      --accent-soft: rgba(238, 56, 151, .10);
      --accent-soft-d: rgba(238, 56, 151, .16);
      --grad-soft: linear-gradient(96deg, rgba(12, 77, 162, .10), rgba(238, 56, 151, .10));
    }

    /* reset */
    *,
    *::before,
    *::after {
      box-sizing: border-box
    }

    * {
      margin: 0
    }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
      scroll-padding-top: 28px;
      overflow-x: clip
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }
    }

    body {
      font-family: var(--disp);
      font-weight: 400;
      font-size: 1.05rem;
      line-height: 1.6;
      color: var(--ink-700);
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden
    }

    img,
    svg {
      display: block;
      max-width: 100%
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button {
      font: inherit;
      color: inherit;
      cursor: pointer;
      background: none;
      border: none
    }

    ul {
      list-style: none;
      padding: 0
    }

    strong {
      font-weight: 700;
      color: var(--ink)
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--disp);
      font-weight: 800;
      line-height: 1.03;
      letter-spacing: -.03em;
      color: var(--ink)
    }

    ::selection {
      background: var(--pink);
      color: #fff
    }

    :focus-visible {
      outline: 2px solid var(--pink);
      outline-offset: 3px;
      border-radius: 2px
    }

    .tnum {
      font-variant-numeric: tabular-nums lining-nums;
      font-feature-settings: "tnum" 1, "lnum" 1
    }

    /* type scale */
    .h-hero {
      font-weight: 800;
      letter-spacing: -.045em;
      line-height: .92;
      font-size: clamp(2.8rem, 7.6vw, 7.6rem)
    }

    .h-chapter {
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: .97;
      font-size: clamp(2.2rem, 5.4vw, 5rem)
    }

    .h-mid {
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.04;
      font-size: clamp(1.95rem, 3.3vw, 3rem)
    }

    .lede {
      font-size: clamp(1.16rem, 1.45vw, 1.42rem);
      line-height: 1.62;
      color: var(--ink-500);
      font-weight: 400
    }

    .out {
      color: rgba(20, 26, 43, .07);
      -webkit-text-stroke: 2px var(--ink)
    }

    .section--dark .out {
      color: rgba(255, 255, 255, .18);
      -webkit-text-stroke-color: #fff;
      -webkit-text-stroke-width: 2px
    }

    .pk {
      color: var(--pink)
    }

    /* label (replaces mono kicker, stays Montserrat) */
    .label {
      display: inline-flex;
      align-items: center;
      gap: .7em;
      font-family: var(--disp);
      font-weight: 600;
      font-size: .74rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--ink-400)
    }

    .label .i {
      color: var(--blue)
    }

    .label.on-dark {
      color: var(--on-dark-mut)
    }

    .label.on-dark .i {
      color: var(--pink)
    }

    /* layout */
    .wrap {
      width: 100%;
      max-width: var(--maxw);
      margin-inline: auto;
      padding-inline: var(--gut)
    }

    .wrap--wide {
      max-width: var(--maxw-wide)
    }

    .section {
      padding-block: var(--sx);
      position: relative
    }

    .section--surface {
      background: var(--surface)
    }

    .section--dark {
      background: var(--dark-bg);
      color: var(--on-dark);
      position: relative;
      overflow: hidden
    }

    .section--dark::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
      background-size: 7.69vw 7.69vw
    }

    .section--dark>.wrap {
      position: relative;
      z-index: 1
    }

    .section--dark h1,
    .section--dark h2,
    .section--dark h3 {
      color: #fff
    }

    .section--dark .lede {
      color: var(--on-dark-mut)
    }

    .grain {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: .045;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
    }

    /* chapter head */
    .chead {
      border-top: 1.5px solid var(--ink);
      padding-top: 22px
    }

    .section--dark .chead {
      border-top-color: rgba(255, 255, 255, .42)
    }

    .cmeta {
      display: flex;
      align-items: center;
      gap: 13px
    }

    .cmeta .tick {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--grad);
      flex: none;
      box-shadow: 0 0 0 4px var(--accent-soft)
    }

    .section--dark .cmeta .tick {
      box-shadow: 0 0 0 4px var(--accent-soft-d)
    }

    .cmeta .no {
      font-weight: 800;
      font-size: .84rem;
      color: var(--ink);
      letter-spacing: .04em;
      font-variant-numeric: tabular-nums
    }

    .section--dark .cmeta .no {
      color: #fff
    }

    .cmeta .lab {
      font-weight: 600;
      font-size: .72rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ink-400)
    }

    .section--dark .cmeta .lab {
      color: var(--on-dark-mut)
    }

    .cmeta::after {
      content: "";
      flex: 1;
      height: 1px;
      min-width: 24px;
      background: linear-gradient(90deg, var(--line-strong), transparent)
    }

    .section--dark .cmeta::after {
      background: linear-gradient(90deg, rgba(255, 255, 255, .28), transparent)
    }

    .cintro {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: clamp(28px, 4vw, 72px);
      align-items: end;
      margin-top: clamp(26px, 3vw, 44px)
    }

    .cintro .h-chapter {
      max-width: 18ch
    }

    @media (max-width:820px) {
      .cintro {
        grid-template-columns: 1fr;
        gap: 18px
      }
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: .6em;
      font-family: var(--disp);
      font-weight: 700;
      font-size: .96rem;
      letter-spacing: -.01em;
      padding: .95em 1.6em;
      border-radius: 3px;
      transition: transform .3s var(--ease), background .3s, color .3s
    }

    .btn svg {
      width: 1.05em;
      height: 1.05em;
      transition: transform .3s var(--ease)
    }

    .btn:hover svg {
      transform: translateX(4px)
    }

    .btn:active {
      transform: translateY(1px)
    }

    .btn--pink {
      background: var(--pink);
      color: #fff
    }

    .btn--pink:hover {
      background: #fff;
      color: var(--ink);
      transform: translateY(-2px)
    }

    .btn--fill {
      background: var(--ink);
      color: #fff
    }

    .btn--fill:hover {
      background: var(--navy);
      transform: translateY(-2px)
    }

    .btn--line {
      border: 1.5px solid var(--line-strong);
      color: var(--ink)
    }

    .btn--line:hover {
      border-color: var(--ink);
      transform: translateY(-2px)
    }

    .section--dark .btn--line {
      border-color: rgba(255, 255, 255, .3);
      color: #fff
    }

    .section--dark .btn--line:hover {
      border-color: #fff
    }

    .btn--lg {
      padding: 1.1em 1.9em;
      font-size: 1rem
    }

    .alink {
      display: inline-flex;
      align-items: center;
      gap: .5em;
      font-weight: 600;
      font-size: .78rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink);
      position: relative;
      padding-bottom: 4px
    }

    .alink svg {
      width: 1.1em;
      height: 1.1em;
      transition: transform .3s var(--ease)
    }

    .alink::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1.5px;
      background: var(--pink);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s var(--ease)
    }

    .alink:hover::after {
      transform: scaleX(1)
    }

    .alink:hover svg {
      transform: translateX(4px)
    }

    .section--dark .alink {
      color: #fff
    }

    /* reveal */
    [data-reveal] {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .8s var(--ease-io), transform .8s var(--ease-io)
    }

    [data-reveal].is-in {
      opacity: 1;
      transform: none
    }

    [data-reveal][data-delay="1"] {
      transition-delay: .08s
    }

    [data-reveal][data-delay="2"] {
      transition-delay: .16s
    }

    [data-reveal][data-delay="3"] {
      transition-delay: .24s
    }

    [data-reveal][data-delay="4"] {
      transition-delay: .32s
    }

    [data-reveal][data-delay="5"] {
      transition-delay: .4s
    }

    [data-reveal][data-delay="6"] {
      transition-delay: .48s
    }

    [data-reveal="scale"] {
      transform: translateY(26px) scale(.985)
    }

    [data-reveal="scale"].is-in {
      transform: none
    }

    [data-reveal="left"] {
      transform: translateX(-26px)
    }

    [data-reveal="left"].is-in {
      transform: none
    }

    /* shared card primitive (light fields) */
    .card {
      position: relative;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-1);
      transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-2);
      border-color: var(--line-strong)
    }

    .section--dark .card {
      background: var(--dark-card);
      border-color: var(--dark-line);
      box-shadow: none
    }

    .section--dark .card:hover {
      border-color: rgba(255, 255, 255, .22);
      box-shadow: var(--shadow-dark)
    }

    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important
      }

      [data-reveal] {
        opacity: 1;
        transform: none
      }
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 0;
      background: var(--grad);
      z-index: 200
    }

    * {
      scrollbar-width: thin;
      scrollbar-color: #c5cee2 transparent
    }

    ::-webkit-scrollbar {
      width: 11px;
      height: 11px
    }

    ::-webkit-scrollbar-thumb {
      background: #ccd3e4;
      border-radius: 9px;
      border: 3px solid #fff
    }

    /* keyframe retained — used by the live dot/indicators */
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(238, 56, 151, .6)
      }

      70% {
        box-shadow: 0 0 0 9px rgba(238, 56, 151, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(238, 56, 151, 0)
      }
    }

    /* ================================ HERO ================================== */
    .hero {
      position: relative;
      z-index: 2;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding: clamp(36px, 6vh, 72px) 0 0;
      color: #fff;
      overflow: hidden;
      background:
        linear-gradient(125deg,
          rgba(18, 30, 68, .93) 0%,
          rgba(25, 43, 92, .92) 54%,
          rgba(64, 52, 118, .9) 78%,
          rgba(190, 42, 128, .88) 93%,
          rgba(238, 56, 151, .88) 100%),
        url("/images/bg/apx-bg-hero.webp") center/cover no-repeat;
      background-attachment: fixed, fixed
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 7.69vw 7.69vw
    }

    .hero-inner {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(30px, 4.5vh, 58px);
      width: 100%;
      max-width: var(--maxw-wide);
      margin: 0 auto;
      padding: clamp(26px, 4.5vh, 56px) var(--gut);
      position: relative;
      z-index: 4
    }

    .hero-lower {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      gap: clamp(34px, 5vw, 68px);
      align-items: center
    }

    .hero-lead {
      display: flex;
      flex-direction: column;
      align-items: flex-start
    }

    .hero-brand {
      display: inline-block;
      margin-bottom: clamp(22px, 3.4vh, 40px);
      opacity: 0;
      animation: fadein 1s .1s forwards
    }

    .hero-brand img {
      height: clamp(34px, 4vw, 44px);
      width: auto
    }

    .hero .label {
      margin-bottom: clamp(16px, 2.4vh, 26px);
      color: rgba(255, 255, 255, .6)
    }

    .hero .label .i {
      color: var(--pink)
    }

    .hero-copy {
      position: relative;
      z-index: 4;
      width: 100%
    }

    .h1 {
      font-weight: 800;
      letter-spacing: -.05em;
      line-height: 1.02;
      font-size: clamp(2.6rem, 5.9vw, 5rem);
      color: #fff
    }

    .h1 .l {
      display: block;
      overflow: hidden
    }

    .h1 .l>span {
      display: block;
      transform: translateY(110%);
      animation: rise 1s forwards var(--ease-io)
    }

    .h1 .l>span .pk {
      display: inline
    }

    .h1 .l:nth-child(1)>span {
      animation-delay: .05s
    }

    .h1 .l:nth-child(2)>span {
      animation-delay: .16s
    }

    .h1 .l:nth-child(3)>span {
      animation-delay: .27s
    }

    /* hero: "behind your" — white text on a pink marker highlight */
    .hero .h1 .l--hl {
      overflow: visible
    }

    .hero .h1 .l--hl>span {
      transform: none;
      animation: fadein .9s .2s both
    }

    .hero .h1 .hl {
      background: linear-gradient(94deg, var(--blue-300) 6%, var(--pink-300) 96%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 0
    }

    @keyframes rise {
      to {
        transform: none
      }
    }

    @keyframes fadein {
      to {
        opacity: 1
      }
    }

    .hero-sub {
      margin-top: 0;
      max-width: 46ch;
      font-size: clamp(1.08rem, 1.35vw, 1.28rem);
      line-height: 1.6;
      color: rgba(255, 255, 255, .78);
      opacity: 0;
      animation: fadein 1s .5s forwards
    }

    .hero-cta {
      margin-top: clamp(24px, 2.8vw, 34px);
      display: flex;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadein 1s .65s forwards
    }

    .hero-cta .alink {
      color: #fff
    }

    .hero-trust {
      margin-top: clamp(26px, 3vw, 38px);
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      border-top: 1px solid var(--dark-line);
      opacity: 0;
      animation: fadein 1s .8s forwards
    }

    .hero-trust li {
      padding: 18px clamp(16px, 2vw, 28px) 0 0;
      margin-right: clamp(16px, 2vw, 28px);
      border-right: 1px solid var(--dark-line)
    }

    .hero-trust li:last-child {
      border-right: none;
      margin-right: 0
    }

    .hero-trust b {
      display: block;
      font-weight: 800;
      font-size: clamp(1.65rem, 2.3vw, 2.3rem);
      letter-spacing: -.035em;
      color: #fff;
      line-height: 1
    }

    .hero-trust span {
      display: block;
      margin-top: 6px;
      font-size: .74rem;
      letter-spacing: .04em;
      color: var(--on-dark-mut)
    }

    /* hero command-centre dashboard */
    .hero-viz {
      position: relative;
      z-index: 3
    }

    .hero-viz::before {
      content: "";
      position: absolute;
      inset: -8% -6%;
      z-index: -1;
      pointer-events: none;
      background: radial-gradient(58% 58% at 74% 16%, rgba(238, 56, 151, .30), transparent 72%), radial-gradient(60% 60% at 18% 92%, rgba(12, 77, 162, .42), transparent 72%);
      filter: blur(18px);
      opacity: 0;
      animation: fadein 1.6s .5s forwards
    }

    .dash--hero {
      box-shadow: 0 50px 110px rgba(0, 0, 0, .5)
    }

    .dash--hero .dash-kpis {
      grid-template-columns: repeat(4, 1fr)
    }

    .dbars .b.d7 {
      transition-delay: .53s
    }

    .dbars .b.d8 {
      transition-delay: .61s
    }

    /* live ticker */
    .ticker {
      position: relative;
      z-index: 6;
      border-top: 1px solid var(--dark-line);
      border-bottom: 1px solid var(--dark-line);
      background: rgba(255, 255, 255, .02);
      display: flex;
      align-items: stretch;
      overflow: hidden
    }

    .ticker .tag {
      flex: none;
      background: var(--pink);
      color: #fff;
      font-weight: 600;
      font-size: .66rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 18px
    }

    .ticker .tag::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #fff;
      animation: blink 1.6s infinite
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }

    .ticker {
      max-width: 100vw
    }

    .ticker .track {
      overflow: hidden;
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      align-items: center
    }

    .ticker .move {
      display: flex;
      white-space: nowrap;
      animation: scroll 46s linear infinite
    }

    .ticker .move:hover {
      animation-play-state: paused
    }

    .ticker .move span {
      font-weight: 500;
      font-size: .8rem;
      color: rgba(255, 255, 255, .6);
      padding: 15px 0;
      letter-spacing: .01em
    }

    .ticker .move span b {
      color: #6ff0c0;
      font-weight: 600
    }

    .ticker .move span .s {
      color: rgba(255, 255, 255, .28);
      padding: 0 22px
    }

    @keyframes scroll {
      to {
        transform: translateX(-50%)
      }
    }

    /* hero labour-codes callout (replaces ticker) */
    .labour {
      position: relative;
      z-index: 6;
      display: flex;
      align-items: center;
      gap: clamp(14px, 2vw, 28px);
      border-top: 1px solid var(--dark-line);
      border-bottom: 1px solid var(--dark-line);
      background: rgba(255, 255, 255, .025);
      padding: clamp(14px, 1.9vh, 22px) var(--gut);
      transition: background .3s;
      max-width: 100vw
    }

    .labour:hover {
      background: rgba(238, 56, 151, .07)
    }

    .labour__tag {
      flex: none;
      font-weight: 700;
      font-size: .64rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #fff;
      background: var(--grad);
      padding: 6px 13px;
      border-radius: 99px
    }

    .labour__txt {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0
    }

    .labour__txt b {
      font-weight: 700;
      font-size: clamp(.96rem, 1.2vw, 1.12rem);
      color: #fff;
      letter-spacing: -.01em
    }

    .labour__txt>span {
      font-size: .88rem;
      color: var(--on-dark-mut)
    }

    .labour__cta {
      flex: none;
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: .5em;
      font-weight: 600;
      font-size: .76rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--pink-300);
      white-space: nowrap
    }

    .labour__cta svg {
      width: 1.15em;
      height: 1.15em;
      transition: transform .3s var(--ease)
    }

    .labour:hover .labour__cta svg {
      transform: translateX(4px)
    }

    @media(max-width:720px) {
      .labour {
        flex-wrap: wrap;
        gap: 10px
      }

      .labour__cta {
        margin-left: 0;
        width: 100%
      }
    }

    @media (max-width:940px) {
      .hero {
        min-height: auto;
        padding-top: clamp(28px, 5vh, 52px)
      }

      .hero-lower {
        grid-template-columns: 1fr;
        gap: clamp(34px, 6vw, 48px);
        align-items: start
      }

      .hero-sub {
        max-width: 56ch
      }

      .hero-viz {
        order: 2
      }
    }

    @media (max-width:560px) {
      .dash--hero .dash-kpis {
        grid-template-columns: repeat(2, 1fr)
      }

      .hero-trust li {
        padding-top: 14px
      }

      .hero-trust b {
        font-size: 1.4rem
      }
    }

    /* ============================ STATS GRID (brand image) ================== */
    .stats {
      position: relative;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
      box-shadow: var(--shadow-dark)
    }

    .stats::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(72% 90% at 100% 0, rgba(238, 56, 151, .13), transparent 55%), radial-gradient(62% 90% at 0 100%, rgba(12, 77, 162, .18), transparent 55%)
    }

    .stats-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, 1fr)
    }

    .stat {
      position: relative;
      padding: clamp(26px, 3vw, 46px);
      border-left: 1px solid rgba(255, 255, 255, .08);
      border-top: 1px solid rgba(255, 255, 255, .08);
      transition: background .35s var(--ease)
    }

    .stat::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -1px;
      height: 2px;
      background: var(--grad);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .5s var(--ease)
    }

    .stat:hover {
      background: rgba(255, 255, 255, .045)
    }

    .stat:hover::before {
      transform: scaleX(1)
    }

    .stat--accent {
      background: linear-gradient(155deg, rgba(12, 77, 162, .22), rgba(238, 56, 151, .12))
    }

    .stat--accent:hover {
      background: linear-gradient(155deg, rgba(12, 77, 162, .28), rgba(238, 56, 151, .17))
    }

    .stat:nth-child(-n+4) {
      border-top: none
    }

    .stat:nth-child(4n+1) {
      border-left: none
    }

    .stat__n {
      font-weight: 800;
      font-size: clamp(2.7rem, 4vw, 4rem);
      letter-spacing: -.04em;
      color: #fff;
      line-height: 1;
      font-variant-numeric: tabular-nums
    }

    .stat__n .u {
      color: var(--pink)
    }

    .stat__l {
      font-weight: 700;
      font-size: 1.1rem;
      color: #fff;
      margin-top: clamp(16px, 2vw, 22px)
    }

    .stat__s {
      font-weight: 400;
      font-size: .98rem;
      color: var(--on-dark-mut);
      margin-top: 7px
    }

    @media (max-width:880px) {
      .stats-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .stat:nth-child(-n+4) {
        border-top: 1px solid rgba(255, 255, 255, .08)
      }

      .stat:nth-child(1),
      .stat:nth-child(2) {
        border-top: none
      }

      .stat:nth-child(2n+1) {
        border-left: none
      }

      .stat:nth-child(4n+1) {
        border-left: none
      }
    }

    @media (max-width:520px) {
      .stats-grid {
        grid-template-columns: 1fr
      }

      .stat {
        border-left: none !important
      }

      .stat:nth-child(n) {
        border-top: 1px solid rgba(255, 255, 255, .08)
      }

      .stat:first-child {
        border-top: none
      }
    }

    /* =========================== ANIMATED DASHBOARD ========================= */
    .dash {
      position: relative;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, .1);
      background: linear-gradient(160deg, #18223f, #101a33);
      box-shadow: 0 40px 90px rgba(0, 0, 0, .4);
      overflow: hidden;
      color: #fff
    }

    .dash__bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 13px 18px;
      border-bottom: 1px solid var(--dark-line);
      background: rgba(255, 255, 255, .03)
    }

    .dash__bar .d {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .18)
    }

    .dash__bar .d.p {
      background: var(--pink)
    }

    .dash__bar .d.b {
      background: var(--blue-300)
    }

    .dash__title {
      font-weight: 700;
      font-size: .86rem;
      margin-left: 6px
    }

    .dash__live {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-weight: 600;
      font-size: .62rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #6ff0c0
    }

    .dash__live::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #36e29a;
      animation: blink 1.6s infinite
    }

    .dash__body {
      padding: clamp(16px, 2vw, 22px)
    }

    .dash-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 16px
    }

    .dash-kpi {
      border: 1px solid var(--dark-line);
      border-radius: 11px;
      padding: 13px
    }

    .dash-kpi.accent {
      background: linear-gradient(150deg, rgba(12, 77, 162, .18), rgba(238, 56, 151, .12));
      border-color: rgba(238, 56, 151, .28)
    }

    .dash-kpi .k {
      font-weight: 500;
      font-size: .6rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--on-dark-mut)
    }

    .dash-kpi .v {
      font-weight: 800;
      font-size: 1.5rem;
      letter-spacing: -.02em;
      margin-top: 7px;
      color: #fff;
      font-variant-numeric: tabular-nums
    }

    .dash-kpi.accent .v {
      color: var(--pink-300)
    }

    .dash-grid2 {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 14px;
      align-items: end
    }

    .dash-cap {
      font-weight: 600;
      font-size: .62rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--on-dark-mut);
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between
    }

    .dash-cap b {
      color: #6ff0c0;
      font-weight: 600
    }

    /* bars */
    .dbars {
      display: flex;
      align-items: flex-end;
      gap: 9px;
      height: 104px
    }

    .dbars .b {
      flex: 1;
      border-radius: 5px 5px 2px 2px;
      background: linear-gradient(180deg, var(--blue-300), var(--blue));
      transform: scaleY(.0001);
      transform-origin: bottom;
      transition: transform 1s var(--ease)
    }

    .dbars .b:last-child {
      background: linear-gradient(180deg, #ff8cc6, var(--pink))
    }

    [data-reveal].is-in .dbars .b {
      transform: scaleY(1)
    }

    .dbars .b.d1 {
      transition-delay: .05s
    }

    .dbars .b.d2 {
      transition-delay: .13s
    }

    .dbars .b.d3 {
      transition-delay: .21s
    }

    .dbars .b.d4 {
      transition-delay: .29s
    }

    .dbars .b.d5 {
      transition-delay: .37s
    }

    .dbars .b.d6 {
      transition-delay: .45s
    }

    /* gauge */
    .gauge {
      position: relative;
      width: 118px;
      height: 118px;
      margin: 0 auto
    }

    .gauge svg {
      transform: rotate(-90deg)
    }

    .gauge .ring {
      fill: none;
      stroke: rgba(255, 255, 255, .1);
      stroke-width: 11
    }

    .gauge .arc {
      fill: none;
      stroke: var(--pink);
      stroke-width: 11;
      stroke-linecap: round;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      transition: stroke-dashoffset 1.5s var(--ease)
    }

    [data-reveal].is-in .gauge .arc {
      stroke-dashoffset: var(--goff, .2)
    }

    .gauge .lbl {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center
    }

    .gauge .lbl b {
      font-weight: 800;
      font-size: 1.6rem;
      color: #fff
    }

    .gaugecap {
      display: block;
      text-align: center;
      font-weight: 600;
      font-size: .62rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--on-dark-mut);
      margin-top: 14px
    }

    /* rows / checks */
    .drows {
      display: grid;
      gap: 8px;
      margin-top: 6px
    }

    .drow {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 10px 13px;
      border: 1px solid var(--dark-line);
      border-radius: 10px;
      font-size: .78rem;
      opacity: 0;
      transform: translateX(-10px);
      transition: opacity .5s, transform .5s
    }

    [data-reveal].is-in .drow {
      opacity: 1;
      transform: none
    }

    [data-reveal].is-in .drow.r1 {
      transition-delay: .2s
    }

    [data-reveal].is-in .drow.r2 {
      transition-delay: .4s
    }

    [data-reveal].is-in .drow.r3 {
      transition-delay: .6s
    }

    [data-reveal].is-in .drow.r4 {
      transition-delay: .8s
    }

    .drow .id {
      color: rgba(255, 255, 255, .85);
      font-weight: 500
    }

    .drow .meta {
      margin-left: auto;
      color: var(--on-dark-mut);
      font-size: .7rem
    }

    .dchip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-weight: 600;
      font-size: .62rem;
      padding: 4px 9px;
      border-radius: 99px;
      background: rgba(54, 226, 154, .14);
      color: #6ff0c0
    }

    .dchip.b {
      background: rgba(91, 134, 214, .18);
      color: var(--blue-300)
    }

    .dchip svg {
      width: 11px;
      height: 11px
    }

    .dlegend {
      display: flex;
      gap: 16px;
      margin-top: 14px;
      flex-wrap: wrap
    }

    .dlegend span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: .66rem;
      color: var(--on-dark-mut)
    }

    .dlegend i {
      width: 9px;
      height: 9px;
      border-radius: 2px;
      display: inline-block
    }

    /* ======================= editorial components =========================== */
    .steps {
      margin-top: clamp(30px, 4vw, 52px)
    }

    .step {
      display: grid;
      grid-template-columns: 2.6rem 1fr;
      gap: clamp(16px, 2vw, 30px);
      padding: clamp(18px, 2vw, 26px) 0;
      border-top: 1px solid var(--line)
    }

    .step:last-child {
      border-bottom: 1px solid var(--line)
    }

    .section--dark .step {
      border-top-color: var(--dark-line)
    }

    .section--dark .step:last-child {
      border-bottom-color: var(--dark-line)
    }

    .step__n {
      font-weight: 700;
      font-size: .85rem;
      color: var(--blue);
      padding-top: 4px;
      transition: color .3s
    }

    .section--dark .step__n {
      color: var(--blue-300)
    }

    .step h3 {
      font-size: clamp(1.15rem, 1.5vw, 1.45rem)
    }

    .section--dark .step h3 {
      color: #fff
    }

    .step p {
      color: var(--ink-500);
      margin-top: 8px;
      max-width: 60ch;
      font-size: .97rem
    }

    .section--dark .step p {
      color: var(--on-dark-mut)
    }

    .step:hover .step__n {
      color: var(--pink)
    }

    /* framework — connected process flow */
    .flow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(18px, 2vw, 32px);
      margin-top: clamp(48px, 5.5vw, 78px);
      position: relative
    }

    .flow::before {
      content: "";
      position: absolute;
      top: 29px;
      left: 12.5%;
      right: 12.5%;
      height: 2px;
      background: linear-gradient(90deg, var(--blue-300), var(--pink));
      opacity: .5
    }

    .flow__step {
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center
    }

    .flow__node {
      position: relative;
      z-index: 1;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--navy-deep);
      border: 2px solid var(--pink);
      color: #fff;
      font-weight: 800;
      font-size: 1.3rem;
      letter-spacing: -.02em;
      margin-bottom: clamp(22px, 2.4vw, 30px);
      box-shadow: 0 0 0 7px rgba(238, 56, 151, .10)
    }

    .flow__step h3 {
      font-size: clamp(1.22rem, 1.5vw, 1.5rem);
      color: #fff;
      margin-bottom: 11px
    }

    .flow__step p {
      color: var(--on-dark-mut);
      font-size: 1.02rem;
      line-height: 1.6;
      max-width: 32ch;
      margin: 0 auto
    }

    @media(max-width:820px) {
      .flow {
        grid-template-columns: 1fr;
        gap: 34px
      }

      .flow::before {
        display: none
      }

      .flow__step {
        text-align: left;
        align-items: flex-start
      }

      .flow__step p {
        margin: 0
      }
    }

    /* feature triptych (complete ownership) */
    .triptych {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(14px, 1.6vw, 22px);
      margin-top: clamp(30px, 4vw, 52px)
    }

    @media(max-width:820px) {
      .triptych {
        grid-template-columns: 1fr
      }
    }

    .tcard {
      padding: clamp(24px, 2.5vw, 34px)
    }

    .tcard__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: clamp(18px, 2.2vw, 28px)
    }

    .tcard__i {
      width: 50px;
      height: 50px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--dark-line);
      color: var(--blue-300);
      transition: background .35s var(--ease), color .35s, box-shadow .35s, border-color .35s
    }

    .tcard__i svg {
      width: 25px;
      height: 25px
    }

    .tcard__n {
      font-weight: 800;
      font-size: 1.55rem;
      letter-spacing: -.03em;
      color: rgba(255, 255, 255, .16);
      transition: color .35s
    }

    .tcard:hover .tcard__i {
      background: var(--grad);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 12px 26px rgba(238, 56, 151, .26)
    }

    .tcard:hover .tcard__n {
      color: var(--pink)
    }

    .tcard h3 {
      font-size: clamp(1.12rem, 1.4vw, 1.32rem);
      color: #fff
    }

    .tcard p {
      color: var(--on-dark-mut);
      margin-top: 11px;
      font-size: .96rem;
      line-height: 1.55
    }

    .frows {
      display: grid
    }

    .frow {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 18px;
      padding: clamp(16px, 1.9vw, 24px) 0;
      border-top: 1px solid var(--line);
      align-items: start
    }

    .frow:last-child {
      border-bottom: 1px solid var(--line)
    }

    .section--dark .frow {
      border-top-color: var(--dark-line)
    }

    .section--dark .frow:last-child {
      border-bottom-color: var(--dark-line)
    }

    .frow__i {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--grad-soft);
      border: 1px solid var(--line);
      color: var(--blue);
      flex: none;
      transition: transform .35s var(--ease), color .35s, background .35s, box-shadow .35s, border-color .35s
    }

    .frow__i svg {
      width: 23px;
      height: 23px
    }

    .section--dark .frow__i {
      background: rgba(255, 255, 255, .05);
      border-color: var(--dark-line);
      color: var(--blue-300)
    }

    .frow:hover .frow__i {
      transform: translateY(-3px);
      background: var(--grad);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 12px 26px rgba(238, 56, 151, .26)
    }

    .frow p {
      color: var(--ink-500);
      font-size: 1.02rem;
      line-height: 1.6
    }

    .section--dark .frow p {
      color: var(--on-dark-mut)
    }

    .frow strong {
      display: block;
      color: var(--ink);
      font-size: 1.18rem;
      letter-spacing: -.01em;
      margin-bottom: 6px
    }

    .section--dark .frow strong {
      color: #fff
    }

    .fromto {
      margin-top: clamp(30px, 4vw, 52px);
      border-top: 1.5px solid var(--ink)
    }

    .section--dark .fromto {
      border-top-color: rgba(255, 255, 255, .42)
    }

    .fromto__r {
      display: grid;
      grid-template-columns: 1fr 48px 1fr;
      align-items: center;
      border-bottom: 1px solid var(--line);
      transition: background .25s
    }

    .section--dark .fromto__r {
      border-bottom-color: var(--dark-line)
    }

    .fromto__r:hover {
      background: var(--surface)
    }

    .section--dark .fromto__r:hover {
      background: rgba(255, 255, 255, .03)
    }

    .fromto__r.head span {
      font-weight: 600;
      font-size: .7rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-400);
      padding-block: 14px
    }

    .section--dark .fromto__r.head span {
      color: var(--on-dark-mut)
    }

    .fromto__r.head .t {
      color: var(--blue)
    }

    .section--dark .fromto__r.head .t {
      color: var(--pink)
    }

    .fromto__r>span {
      padding: 17px clamp(8px, 1.5vw, 20px);
      font-size: 1rem
    }

    .fromto__r .f {
      color: var(--ink-400)
    }

    .section--dark .fromto__r .f {
      color: var(--on-dark-mut)
    }

    .fromto__r .t {
      color: var(--ink);
      font-weight: 600
    }

    .section--dark .fromto__r .t {
      color: #fff
    }

    .fromto__r .ar {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--pink);
      padding: 0
    }

    .fromto__r .ar svg {
      width: 17px;
      height: 17px
    }

    @media (max-width:600px) {
      .fromto__r {
        grid-template-columns: 1fr 30px 1fr
      }

      .fromto__r>span {
        padding: 13px 6px;
        font-size: .85rem
      }
    }

    /* units (ecosystem index) */
    .units {
      border-top: 1.5px solid var(--ink);
      margin-top: clamp(30px, 4vw, 52px)
    }

    .section--dark .units {
      border-top-color: rgba(255, 255, 255, .42)
    }

    .unit {
      display: grid;
      grid-template-columns: 3.4rem minmax(0, 1.1fr) minmax(0, 1.2fr) auto;
      gap: clamp(14px, 2.4vw, 40px);
      align-items: center;
      padding: clamp(22px, 2.6vw, 34px) 0;
      border-bottom: 1px solid var(--line);
      position: relative;
      transition: padding-left .4s var(--ease)
    }

    .section--dark .unit {
      border-bottom-color: var(--dark-line)
    }

    .unit::before {
      content: "";
      position: absolute;
      left: 50%;
      width: 100vw;
      transform: translateX(-50%);
      top: 0;
      bottom: 0;
      background: var(--surface);
      opacity: 0;
      transition: opacity .35s;
      z-index: -1
    }

    .section--dark .unit::before {
      background: rgba(255, 255, 255, .03)
    }

    .unit:hover {
      padding-left: 20px
    }

    .unit:hover::before {
      opacity: 1
    }

    .unit::after {
      content: "";
      position: absolute;
      left: -2px;
      top: 50%;
      transform: translateY(-50%) scaleY(0);
      width: 3px;
      height: 54%;
      border-radius: 3px;
      background: var(--grad);
      transition: transform .4s var(--ease)
    }

    .unit:hover::after {
      transform: translateY(-50%) scaleY(1)
    }

    .unit__no {
      font-weight: 800;
      font-size: clamp(1.8rem, 2.5vw, 2.4rem);
      color: var(--line-strong);
      letter-spacing: -.04em;
      transition: color .35s
    }

    .section--dark .unit__no {
      color: rgba(255, 255, 255, .22)
    }

    .unit:hover .unit__no {
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent
    }

    .unit__name {
      font-weight: 800;
      font-size: clamp(1.2rem, 1.7vw, 1.5rem);
      letter-spacing: -.02em
    }

    .section--dark .unit__name {
      color: #fff
    }

    .unit__name span {
      display: block;
      font-weight: 400;
      font-size: 1.05rem;
      line-height: 1.5;
      color: var(--ink-500);
      margin-top: 8px;
      letter-spacing: 0
    }

    .section--dark .unit__name span {
      color: var(--on-dark-mut)
    }

    .unit__svcs {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 9px
    }

    .unit__svcs span {
      font-weight: 500;
      font-size: .84rem;
      color: var(--ink-500);
      white-space: nowrap
    }

    .section--dark .unit__svcs span {
      color: var(--on-dark-mut)
    }

    .unit__svcs span:not(:last-child)::after {
      content: " ·";
      color: var(--pink-700)
    }

    .section--dark .unit__svcs span:not(:last-child)::after {
      color: var(--pink)
    }

    .unit__go {
      width: 42px;
      height: 42px;
      border: 1px solid var(--line-strong);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--ink);
      justify-self: end;
      transition: .35s
    }

    .section--dark .unit__go {
      border-color: var(--dark-line);
      color: #fff
    }

    .unit__go svg {
      width: 16px;
      height: 16px
    }

    .unit:hover .unit__go {
      background: var(--grad);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 10px 22px rgba(238, 56, 151, .22)
    }

    @media (max-width:860px) {
      .unit {
        grid-template-columns: 2.2rem minmax(0, 1fr) 2.8rem;
        gap: 10px 14px;
        align-items: center
      }

      .unit__no {
        grid-column: 1
      }

      .unit__name {
        grid-column: 2;
        min-width: 0
      }

      .unit__go {
        grid-column: 3;
        grid-row: 1;
        justify-self: end
      }

      .unit__svcs {
        grid-column: 2/-1;
        min-width: 0
      }

      .unit__logo {
        max-width: 100%
      }
    }

    /* growth stages */
    .stages {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(18px, 2vw, 30px);
      margin-top: clamp(50px, 6vw, 82px);
      align-items: stretch
    }

    .stage {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: clamp(28px, 3vw, 44px);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-1);
      transition: transform .45s var(--ease), box-shadow .45s var(--ease)
    }

    .stage:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-2)
    }

    .stage__hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: clamp(20px, 2.4vw, 30px)
    }

    .stage__ph {
      font-weight: 700;
      font-size: .74rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-400)
    }

    .stage__idx {
      font-weight: 800;
      font-size: 1.5rem;
      letter-spacing: -.03em;
      color: var(--line-strong);
      font-variant-numeric: tabular-nums
    }

    .stage__scale {
      font-weight: 800;
      font-size: clamp(2.9rem, 4.3vw, 4.3rem);
      letter-spacing: -.05em;
      color: var(--ink);
      line-height: .92;
      font-variant-numeric: tabular-nums
    }

    .stage__unit {
      display: block;
      margin-top: 13px;
      font-weight: 600;
      font-size: .74rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-400)
    }

    .stage h3 {
      font-size: clamp(1.3rem, 1.7vw, 1.62rem);
      margin: clamp(22px, 2.4vw, 30px) 0 12px
    }

    .stage p {
      color: var(--ink-500);
      font-size: 1.04rem;
      line-height: 1.62;
      margin-bottom: 24px
    }

    .stage__svcs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: auto
    }

    .stage__svcs span {
      font-weight: 600;
      font-size: .78rem;
      color: var(--ink-700);
      padding: 7px 13px;
      border: 1px solid var(--line);
      border-radius: 99px;
      background: var(--surface)
    }

    .stage--now {
      transform: translateY(-16px);
      box-shadow: var(--shadow-float);
      border-color: transparent
    }

    .stage--now:hover {
      transform: translateY(-22px)
    }

    .stage--now::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1.6px;
      background: var(--grad);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none
    }

    .stage--now .stage__idx,
    .stage--now .stage__scale {
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent
    }

    .stage--now .stage__svcs span {
      border-color: transparent;
      background: var(--accent-soft);
      color: var(--pink-700)
    }

    .stage__flag {
      position: absolute;
      z-index: 3;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-weight: 700;
      font-size: .66rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #fff;
      background: var(--grad);
      padding: 7px 16px;
      border-radius: 99px;
      box-shadow: 0 10px 22px rgba(238, 56, 151, .32)
    }

    @media (max-width:860px) {
      .stages {
        grid-template-columns: 1fr
      }

      .stage--now {
        transform: none
      }

      .stage--now:hover {
        transform: translateY(-6px)
      }
    }

    /* register */
    .register {
      border-top: 1.5px solid var(--ink)
    }

    .section--dark .register {
      border-top-color: rgba(255, 255, 255, .42)
    }

    .reg {
      display: grid;
      grid-template-columns: 1.1fr 1.7fr .7fr;
      gap: clamp(12px, 2.4vw, 40px);
      align-items: baseline;
      padding: clamp(18px, 2.2vw, 28px) 0;
      border-bottom: 1px solid var(--line)
    }

    .section--dark .reg {
      border-bottom-color: var(--dark-line)
    }

    .reg.head span {
      font-weight: 600;
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-400)
    }

    .section--dark .reg.head span {
      color: var(--on-dark-mut)
    }

    .reg.head {
      padding-block: 12px
    }

    .reg .name {
      font-weight: 800;
      font-size: clamp(1.15rem, 1.6vw, 1.45rem);
      color: var(--ink);
      letter-spacing: -.02em
    }

    .section--dark .reg .name {
      color: #fff
    }

    .reg .desc {
      color: var(--ink-500);
      font-size: .96rem
    }

    .section--dark .reg .desc {
      color: var(--on-dark-mut)
    }

    .reg .valid {
      font-weight: 500;
      font-size: .82rem;
      color: var(--ink);
      text-align: right
    }

    .section--dark .reg .valid {
      color: var(--on-dark)
    }

    .reg .valid b {
      color: var(--pink-700);
      font-weight: 700
    }

    .section--dark .reg .valid b {
      color: var(--pink)
    }

    .reg .r {
      text-align: right
    }

    @media (max-width:720px) {
      .reg {
        grid-template-columns: 1fr;
        gap: 5px
      }

      .reg .valid,
      .reg .r {
        text-align: left
      }

      .reg.head {
        display: none
      }
    }

    /* certification cards (security) */
    .certs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(14px, 1.6vw, 22px)
    }

    @media(max-width:900px) {
      .certs {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:520px) {
      .certs {
        grid-template-columns: 1fr
      }
    }

    .cert {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: clamp(22px, 2.2vw, 30px);
      background: var(--dark-card);
      border: 1px solid var(--dark-line);
      border-radius: var(--radius);
      transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)
    }

    .cert:hover {
      transform: translateY(-5px);
      border-color: rgba(255, 255, 255, .22);
      box-shadow: var(--shadow-dark)
    }

    .cert__badge {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--dark-line);
      color: var(--blue-300);
      margin-bottom: clamp(16px, 1.8vw, 22px)
    }

    .cert__badge svg {
      width: 24px;
      height: 24px
    }

    .cert h3 {
      font-size: clamp(1.15rem, 1.4vw, 1.32rem);
      color: #fff;
      margin-bottom: 9px
    }

    .cert p {
      color: var(--on-dark-mut);
      font-size: .98rem;
      line-height: 1.55;
      margin-bottom: auto
    }

    .cert__valid {
      margin-top: 18px;
      font-weight: 600;
      font-size: .7rem;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--pink);
      padding: 6px 13px;
      border: 1px solid rgba(238, 56, 151, .32);
      border-radius: 99px;
      background: var(--accent-soft-d)
    }

    .assess {
      margin-top: clamp(34px, 4vw, 56px);
      border-top: 1px solid var(--line);
      padding-top: clamp(26px, 3vw, 38px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      flex-wrap: wrap
    }

    .section--dark .assess {
      border-top-color: var(--dark-line)
    }

    .assess p {
      font-weight: 700;
      font-size: clamp(1.15rem, 1.7vw, 1.5rem);
      letter-spacing: -.02em;
      color: var(--ink);
      max-width: 34ch
    }

    .section--dark .assess p {
      color: #fff
    }

    /* industries */
    .indgrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(12px, 1.4vw, 18px);
      margin-top: clamp(40px, 5vw, 68px)
    }

    @media(max-width:880px) {
      .indgrid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:430px) {
      .indgrid {
        grid-template-columns: 1fr
      }
    }

    .indcard {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: clamp(16px, 1.7vw, 22px);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-1);
      transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s
    }

    .indcard:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-2);
      border-color: var(--line-strong)
    }

    .indcard__i {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--grad-soft);
      border: 1px solid var(--line);
      color: var(--blue);
      flex: none;
      transition: background .35s var(--ease), color .35s, border-color .35s
    }

    .indcard__i svg {
      width: 24px;
      height: 24px
    }

    .indcard:hover .indcard__i {
      background: var(--grad);
      color: #fff;
      border-color: transparent
    }

    .indcard h3 {
      font-size: 1.04rem;
      font-weight: 700;
      letter-spacing: -.01em;
      color: var(--ink);
      line-height: 1.25
    }

    .indcard--more {
      background: var(--surface);
      border-style: dashed
    }

    .indcard--more .indcard__i {
      background: transparent;
      border-style: dashed
    }

    /* testimonial */
    .tquote {
      position: relative;
      margin-top: clamp(38px, 4.5vw, 60px);
      padding: clamp(32px, 4vw, 58px);
      overflow: hidden
    }

    .tquote__mark {
      position: absolute;
      top: clamp(0px, 1vw, 10px);
      right: clamp(26px, 4vw, 54px);
      font-family: Georgia, 'Times New Roman', serif;
      font-weight: 700;
      font-size: clamp(8rem, 14vw, 13rem);
      line-height: 1;
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      opacity: .16;
      pointer-events: none;
      user-select: none
    }

    .tslide {
      display: none
    }

    .tslide.is-active {
      display: block;
      animation: tfade .6s var(--ease-io)
    }

    @keyframes tfade {
      from {
        opacity: 0;
        transform: translateY(12px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .tslide blockquote {
      position: relative;
      font-weight: 800;
      letter-spacing: -.025em;
      line-height: 1.3;
      font-size: clamp(1.45rem, 2.4vw, 2.25rem);
      color: var(--ink);
      max-width: 44ch
    }

    .section--dark .tslide blockquote {
      color: #fff
    }

    .by {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: clamp(28px, 3vw, 40px)
    }

    .tav {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--grad);
      color: #fff;
      font-weight: 800;
      font-size: 1.05rem;
      letter-spacing: .01em;
      flex: none;
      box-shadow: 0 10px 22px rgba(238, 56, 151, .22)
    }

    .binfo {
      display: flex;
      flex-direction: column
    }

    .tslide .nm {
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--ink)
    }

    .section--dark .tslide .nm {
      color: #fff
    }

    .tslide .rl {
      color: var(--ink-500);
      font-size: .95rem;
      margin-top: 2px
    }

    .section--dark .tslide .rl {
      color: var(--on-dark-mut)
    }

    .tslide .co {
      display: block;
      font-weight: 600;
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--pink-700);
      margin-top: 5px
    }

    .section--dark .tslide .co {
      color: var(--pink)
    }

    .tnav {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: clamp(26px, 3vw, 36px)
    }

    .tnav button {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid var(--line-strong);
      display: grid;
      place-items: center;
      color: var(--ink);
      background: #fff;
      transition: .25s
    }

    .section--dark .tnav button {
      border-color: var(--dark-line);
      color: #fff;
      background: transparent
    }

    .tnav button:hover {
      background: var(--grad);
      color: #fff;
      border-color: transparent
    }

    .tnav button svg {
      width: 18px;
      height: 18px
    }

    .tnav .count {
      font-weight: 600;
      font-size: .8rem;
      color: var(--ink-400);
      letter-spacing: .06em
    }

    .section--dark .tnav .count {
      color: var(--on-dark-mut)
    }

    .tnav .count b {
      color: var(--ink)
    }

    .section--dark .tnav .count b {
      color: #fff
    }

    /* journey / built by mynd */
    .journey {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: clamp(34px, 5vw, 76px);
      align-items: center
    }

    @media (max-width:940px) {
      .journey {
        grid-template-columns: 1fr;
        gap: 40px
      }
    }

    .jnums {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: clamp(26px, 3vw, 38px)
    }

    .jnum {
      border-left: 1px solid var(--dark-line);
      padding: 0 clamp(14px, 2vw, 26px)
    }

    .jnum:first-child {
      border-left: none;
      padding-left: 0
    }

    .jnum__n {
      font-weight: 800;
      font-size: clamp(1.9rem, 2.8vw, 2.7rem);
      letter-spacing: -.04em;
      color: #fff;
      font-variant-numeric: tabular-nums
    }

    .jnum__n .u {
      color: var(--pink)
    }

    .jnum__l {
      display: block;
      margin-top: 11px;
      font-size: .92rem;
      color: var(--on-dark-mut)
    }

    .marks {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: clamp(14px, 2.4vw, 38px)
    }

    .marks .lbl {
      font-weight: 600;
      font-size: .68rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--on-dark-mut)
    }

    .marks b {
      font-weight: 600;
      font-size: .88rem;
      color: var(--on-dark);
      opacity: .92;
      padding: 8px 15px;
      border: 1px solid var(--dark-line);
      border-radius: 99px;
      background: rgba(255, 255, 255, .03);
      transition: .25s
    }

    .marks b:hover {
      opacity: 1;
      color: #fff;
      border-color: rgba(255, 255, 255, .3);
      background: rgba(255, 255, 255, .07)
    }

    .marks--ruled {
      border-top: 1px solid var(--dark-line);
      padding-top: clamp(28px, 3vw, 40px)
    }

    /* svg chart shared (journey area) */
    .viz {
      width: 100%;
      height: auto;
      display: block
    }

    .v-grid {
      stroke: var(--dark-line-2)
    }

    .v-axis {
      stroke: var(--dark-line)
    }

    .v-tick {
      font-family: var(--disp);
      font-weight: 500;
      font-size: 10px;
      fill: var(--on-dark-mut)
    }

    .v-line {
      fill: none;
      stroke: var(--blue-300);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .v-line[pathLength] {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      transition: stroke-dashoffset 1.6s var(--ease)
    }

    [data-reveal].is-in .v-line[pathLength] {
      stroke-dashoffset: 0
    }

    .v-dot {
      fill: #18223f;
      stroke: var(--blue-300);
      stroke-width: 2.5
    }

    .v-dot--pink {
      stroke: var(--pink)
    }

    .v-areaWrap {
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1.6s var(--ease)
    }

    [data-reveal].is-in .v-areaWrap {
      clip-path: inset(0 0 0 0)
    }

    .v-fade {
      opacity: 0;
      transition: opacity .6s ease 1s
    }

    [data-reveal].is-in .v-fade {
      opacity: 1
    }

    .v-anno {
      font-family: var(--disp);
      font-weight: 500;
      font-size: 11px;
      fill: var(--on-dark-mut)
    }

    /* faq */
    .faqlayout {
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
      gap: clamp(34px, 5vw, 76px);
      align-items: start;
      margin-top: clamp(6px, 1vw, 14px)
    }

    @media(max-width:880px) {
      .faqlayout {
        grid-template-columns: 1fr;
        gap: 32px
      }
    }

    .faqlayout__head {
      position: sticky;
      top: 48px
    }

    @media(max-width:880px) {
      .faqlayout__head {
        position: static
      }
    }

    .faq {
      max-width: 900px;
      margin-inline: auto;
      border-top: 1px solid var(--line)
    }

    .section--dark .faq {
      border-top-color: var(--dark-line)
    }

    .faqlayout .faq {
      max-width: none;
      margin: 0
    }

    .faq__item {
      border-bottom: 1px solid var(--line)
    }

    .section--dark .faq__item {
      border-bottom-color: var(--dark-line)
    }

    .faq__q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      text-align: left;
      list-style: none;
      cursor: pointer;
      padding: clamp(20px, 2.2vw, 28px) 0;
      font-weight: 800;
      font-size: clamp(1.05rem, 1.4vw, 1.3rem);
      color: var(--ink);
      letter-spacing: -.02em;
      transition: color .2s
    }

    .section--dark .faq__q {
      color: #fff
    }

    .faq__q:hover {
      color: var(--blue)
    }

    .section--dark .faq__q:hover {
      color: var(--pink-300)
    }

    .faq__q::-webkit-details-marker {
      display: none
    }

    .faq__ic {
      flex: none;
      width: 20px;
      height: 20px;
      position: relative;
      color: var(--blue);
      transition: transform .3s var(--ease)
    }

    .section--dark .faq__ic {
      color: var(--pink)
    }

    .faq__item[open] .faq__ic {
      transform: rotate(45deg)
    }

    .faq__ic::before,
    .faq__ic::after {
      content: "";
      position: absolute;
      background: currentColor;
      border-radius: 2px
    }

    .faq__ic::before {
      left: 50%;
      top: 2px;
      bottom: 2px;
      width: 2px;
      transform: translateX(-50%)
    }

    .faq__ic::after {
      top: 50%;
      left: 2px;
      right: 2px;
      height: 2px;
      transform: translateY(-50%)
    }

    .faq__a {
      padding: 0 40px clamp(22px, 2.2vw, 28px) 0
    }

    .faq__a p {
      color: var(--ink-500);
      max-width: 78ch
    }

    .section--dark .faq__a p {
      color: var(--on-dark-mut)
    }

    /* contact */
    .contact-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(36px, 5vw, 80px);
      align-items: start
    }

    @media (max-width:900px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px
      }
    }

    .channels {
      margin-top: clamp(34px, 4vw, 56px);
      border-top: 1px solid var(--dark-line);
      padding-top: clamp(28px, 3vw, 42px);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(22px, 3vw, 46px)
    }

    .ch {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-start
    }

    .ch__k {
      font-weight: 600;
      font-size: .7rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--on-dark-mut)
    }

    .ch__v {
      font-size: 1.05rem;
      color: #fff;
      line-height: 1.5
    }

    .ch__v a:hover {
      color: var(--pink-300)
    }

    @media(max-width:760px) {
      .channels {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px
      }
    }

    @media(max-width:440px) {
      .channels {
        grid-template-columns: 1fr
      }
    }

    .form {
      border: 1px solid var(--dark-line);
      border-radius: var(--radius-lg);
      background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
      padding: clamp(26px, 3vw, 42px);
      display: grid;
      gap: clamp(16px, 2vw, 21px);
      box-shadow: var(--shadow-dark)
    }

    .enq {
      display: flex;
      flex-wrap: wrap;
      gap: 9px
    }

    .enq button {
      font-weight: 600;
      font-size: .78rem;
      padding: 10px 16px;
      border: 1px solid var(--dark-line);
      border-radius: 99px;
      color: var(--on-dark-mut);
      transition: .2s
    }

    .enq button:hover {
      border-color: var(--pink);
      color: #fff
    }

    .enq button.is-sel {
      background: var(--pink);
      color: #fff;
      border-color: var(--pink)
    }

    .fld {
      display: grid;
      gap: 7px
    }

    .fld label {
      font-weight: 600;
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--on-dark-mut)
    }

    .fld input,
    .fld textarea {
      font-family: var(--disp);
      font-size: 1.02rem;
      color: #fff;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--dark-line);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      transition: border-color .2s, box-shadow .2s
    }

    .fld input::placeholder,
    .fld textarea::placeholder {
      color: var(--on-dark-mut)
    }

    .fld input:focus,
    .fld textarea:focus {
      outline: none;
      border-color: var(--pink);
      box-shadow: 0 0 0 3px rgba(238, 56, 151, .15)
    }

    .fld textarea {
      resize: vertical;
      min-height: 92px
    }

    .frow2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(14px, 1.8vw, 18px)
    }

    @media (max-width:560px) {
      .frow2 {
        grid-template-columns: 1fr
      }
    }

    .form__note {
      font-weight: 500;
      font-size: .74rem;
      color: var(--on-dark-mut)
    }

    /* closing cta + footer */
    .cta {
      text-align: center
    }

    .cta__inner {
      max-width: 820px;
      margin-inline: auto;
      position: relative;
      z-index: 1
    }

    .cta .label {
      justify-content: center
    }

    .cta__actions {
      margin-top: 34px;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: center
    }

    /* split (copy + dashboard) */
    .split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(34px, 5vw, 76px);
      align-items: center
    }

    .split--viz-first .split__viz {
      order: -1
    }

    @media (max-width:940px) {
      .split {
        grid-template-columns: 1fr;
        gap: 40px
      }

      .split--viz-first .split__viz {
        order: 0
      }
    }

    .section-foot {
      margin-top: clamp(40px, 5vw, 68px)
    }

    /* ===================== brand gradient section variants ================== */
    /* blue-leaning dark field */
    /* unified: the Built-by-MYND blue->pink overlay (90%) over the ops photo,
   for every blue / blue-pink dark section; gradient angle varies per section */
    .section--dark.section--g-blue,
    .section--dark.section--photo,
    .section--dark.section--g-pink.section--photo {
      background:
        linear-gradient(var(--gang, 118deg),
          rgba(18, 30, 68, .9) 0%,
          rgba(25, 43, 92, .9) 50%,
          rgba(64, 52, 118, .9) 75%,
          rgba(190, 42, 128, .9) 92%,
          rgba(238, 56, 151, .9) 100%),
        var(--bgimg, url("/images/bg/apx-bg-engine.webp")) center/cover no-repeat;
      background-attachment: fixed, fixed
    }

    /* per-section angle, to mix it up (Built by MYND = the reference, 110deg) */
    #about {
      --gang: 110deg;
      --bgimg: url("/images/bg/apx-bg-engine.webp")
    }

    #platform {
      --gang: 128deg;
      --bgimg: url("/images/bg/apx-bg-control.webp")
    }

    .section--photo[aria-labelledby="shift-h"] {
      --gang: 72deg;
      --bgimg: url("/images/bg/apx-bg-control.webp")
    }

    #framework {
      --gang: 150deg;
      --bgimg: url("/images/bg/apx-bg-compliance.webp")
    }

    #security {
      --gang: 96deg;
      --bgimg: url("/images/bg/apx-bg-security.webp")
    }

    #contact {
      --gang: 166deg;
      --bgimg: url("/images/bg/apx-bg-cta.webp")
    }

    @media (max-width:760px),
    (prefers-reduced-motion:reduce) {

      .section--dark.section--g-blue,
      .section--dark.section--photo {
        background-attachment: scroll, scroll
      }

      .hero {
        background-attachment: scroll
      }
    }

    /* readability: brighten body + labels that sit over the photo/blue backdrops */
    .section--g-blue .lede,
    .section--photo .lede,
    .section--g-blue .frow p,
    .section--photo .frow p,
    .section--photo .flow__step p,
    .section--photo .fromto__r .f {
      color: rgba(255, 255, 255, .93)
    }

    .section--g-blue .cmeta .lab,
    .section--photo .cmeta .lab,
    .section--g-blue .prodrow__lbl,
    .section--photo .prodrow__lbl,
    .section--g-blue .marks .lbl,
    .section--photo .marks .lbl,
    .section--g-blue .jnum__l,
    .section--photo .jnum__l,
    .section--photo .ch__k {
      color: rgba(255, 255, 255, .86)
    }

    /* pink-leaning dark field */
    .section--dark.section--g-pink {
      background: radial-gradient(110% 110% at 96% -12%, rgba(238, 56, 151, .15), transparent 46%),
        radial-gradient(110% 125% at -6% 112%, rgba(12, 77, 162, .34), transparent 58%),
        linear-gradient(134deg, #181f44 0%, #232a5c 54%, #2c2f63 100%)
    }

    /* gradient chapter rule on dark sections */
    .section--dark .chead {
      border-top: 0;
      border-image: linear-gradient(90deg, var(--blue-300), var(--pink)) 1;
      border-style: solid;
      border-width: 2px 0 0 0
    }

    /* ===================== division logos (ecosystem units) ================= */
    .unit__logo {
      height: clamp(28px, 3vw, 36px);
      width: auto;
      max-width: 230px;
      object-fit: contain;
      object-position: left center;
      display: block;
      margin-bottom: 10px
    }

    @media (max-width:860px) {
      .unit__logo {
        max-width: 190px
      }
    }

    /* ===================== product logo strip (MYNDX suite) ================= */
    .prodrow {
      display: flex;
      flex-direction: column;
      gap: clamp(16px, 2vw, 22px);
      border-top: 1px solid var(--dark-line);
      padding-top: clamp(28px, 3vw, 40px)
    }

    .prodrow__lbl {
      font-weight: 600;
      font-size: .68rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--on-dark-mut)
    }

    .prodrow__logos {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: clamp(22px, 3.6vw, 54px);
      background: rgba(255, 255, 255, .025);
      border: 1px solid var(--dark-line);
      border-radius: var(--radius);
      padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3.2vw, 44px)
    }

    .prodrow__logos img {
      height: clamp(22px, 2.4vw, 28px);
      width: auto;
      opacity: .9;
      transition: opacity .25s var(--ease), transform .25s var(--ease)
    }

    .prodrow__logos img:hover {
      opacity: 1;
      transform: translateY(-2px)
    }

    /* ===================== closing CTA — editorial image backdrop ========== */
    .cta {
      position: relative;
      isolation: isolate
    }

    .cta__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: url("/images/bg/apx-bg-cta.webp") center/cover no-repeat;
      opacity: .5
    }

    .cta__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(82% 92% at 50% 38%, rgba(20, 29, 56, .5), rgba(20, 29, 56, .9) 78%), linear-gradient(180deg, rgba(20, 29, 56, .55) 0%, rgba(22, 34, 74, .94) 100%)
    }

    .cta__inner {
      position: relative;
      z-index: 1
    }

    /* ===================== brand sign-off (replaces footer) ================= */
    .signoff {
      margin-top: clamp(42px, 5vw, 66px);
      padding-top: clamp(26px, 3vw, 36px);
      border-top: 1px solid var(--dark-line);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px
    }

    .signoff__logo {
      height: clamp(34px, 4vw, 42px);
      width: auto
    }

    .signoff__legal {
      color: var(--on-dark-mut);
      font-size: .8rem;
      line-height: 1.7;
      letter-spacing: .02em;
      text-align: center
    }

    /* ===================== small-screen dashboard hardening ================= */
    @media (max-width:480px) {
      .dash-kpis {
        grid-template-columns: repeat(2, 1fr)
      }

      .dash--hero .dash-kpis {
        grid-template-columns: repeat(2, 1fr)
      }

      .dash-kpi .v {
        font-size: 1.3rem
      }

      .dash-grid2 {
        grid-template-columns: 1fr;
        gap: 18px
      }

      .gauge {
        margin-top: 4px
      }
    }

    /* ============================================================================
       PAYROLL PAGE — additions layered on the homepage design system.
       Only new devices + the documented light-section overrides live here.
       ========================================================================== */

    /* ---- process section photo backdrop (reuses a hosted homepage webp;
            payroll-specific webp is a held item, see commit) ---- */
    #process {
      --gang: 150deg;
      --bgimg: url("/images/bg/apx-bg-engine.webp")
    }

    /* ---- triptych/tcard on a LIGHT section (index styles these for dark only) ---- */
    .section:not(.section--dark) .tcard {
      background: var(--paper);
      border-color: var(--line);
      box-shadow: var(--shadow-1)
    }

    .section:not(.section--dark) .tcard h3 {
      color: var(--ink)
    }

    .section:not(.section--dark) .tcard p {
      color: var(--ink-500)
    }

    .section:not(.section--dark) .tcard__n {
      color: var(--line-strong)
    }

    .section:not(.section--dark) .tcard__i {
      background: var(--grad-soft);
      border-color: var(--line);
      color: var(--blue)
    }

    .section:not(.section--dark) .tcard:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-2);
      border-color: var(--line-strong)
    }

    .section:not(.section--dark) .tcard:hover .tcard__i {
      background: var(--grad);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 12px 26px rgba(238, 56, 151, .26)
    }

    .section:not(.section--dark) .tcard:hover .tcard__n {
      color: var(--pink)
    }

    /* ---- bespoke hero device: payroll-run stage stepper ---- */
    .prun {
      display: flex;
      align-items: flex-start;
      gap: 0;
      margin: 2px 0 18px
    }

    .prun .st {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      position: relative;
      text-align: center;
      font-weight: 600;
      font-size: .56rem;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--on-dark-mut)
    }

    .prun .st .dot {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, .06);
      border: 1px solid var(--dark-line);
      color: var(--on-dark-mut);
      font-weight: 800;
      font-size: .62rem
    }

    .prun .st .dot svg {
      width: 13px;
      height: 13px
    }

    .prun .st::before {
      content: "";
      position: absolute;
      top: 11px;
      left: -50%;
      width: 100%;
      height: 2px;
      background: var(--dark-line);
      z-index: -1
    }

    .prun .st:first-child::before {
      display: none
    }

    .prun .st.done .dot {
      background: var(--grad);
      border-color: transparent;
      color: #fff
    }

    .prun .st.done::before {
      background: linear-gradient(90deg, var(--blue-300), var(--pink))
    }

    .prun .st.now .dot {
      border-color: var(--pink);
      color: #fff;
      background: rgba(238, 56, 151, .18);
      animation: pulse 2s infinite
    }

    .prun .st.now {
      color: #fff
    }

    /* ---- bespoke device: gross-to-net composition bar (a payslip, decomposed) ---- */
    .paybar-cap {
      font-weight: 600;
      font-size: .62rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--on-dark-mut);
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between
    }

    .paybar-cap b {
      color: #6ff0c0;
      font-weight: 600
    }

    .paybarWrap {
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1.3s var(--ease)
    }

    [data-reveal].is-in .paybarWrap {
      clip-path: inset(0 0 0 0)
    }

    .paybar {
      display: flex;
      height: 34px;
      border-radius: 7px;
      overflow: hidden;
      gap: 2px;
      background: rgba(255, 255, 255, .04)
    }

    .paybar .seg {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: .64rem;
      color: #fff;
      white-space: nowrap;
      min-width: 0
    }

    .paybar .seg.net {
      background: linear-gradient(180deg, var(--blue-300), var(--blue))
    }

    .paybar .seg.tds {
      background: linear-gradient(180deg, #ff8cc6, var(--pink))
    }

    .paybar .seg.pf {
      background: rgba(91, 134, 214, .5)
    }

    .paybar .seg.oth {
      background: rgba(238, 56, 151, .42)
    }

    .paylegend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      margin-top: 12px
    }

    .paylegend span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: .66rem;
      color: var(--on-dark-mut)
    }

    .paylegend i {
      width: 9px;
      height: 9px;
      border-radius: 2px;
      display: inline-block
    }

    .paylegend i.net {
      background: var(--blue-300)
    }

    .paylegend i.tds {
      background: var(--pink)
    }

    .paylegend i.pf {
      background: rgba(91, 134, 214, .55)
    }

    .paylegend i.oth {
      background: rgba(238, 56, 151, .5)
    }

    /* ---- related-services nav (internal links, per SEO gate) ---- */
    .related {
      margin-top: clamp(42px, 5vw, 64px);
      padding-top: clamp(26px, 3vw, 36px);
      border-top: 1px solid var(--dark-line);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 12px clamp(16px, 2.4vw, 30px)
    }

    .related .lbl {
      font-weight: 600;
      font-size: .68rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--on-dark-mut)
    }

    .related a {
      font-weight: 600;
      font-size: .92rem;
      color: var(--on-dark);
      border-bottom: 1px solid transparent;
      transition: color .25s, border-color .25s;
      display: inline-flex;
      align-items: center;
      gap: .5em
    }

    .related a:hover {
      color: #fff;
      border-bottom-color: var(--pink)
    }

    .related a svg {
      width: 1em;
      height: 1em;
      color: var(--pink-300)
    }

    /* ---- capability strip (payroll.md "Complete Payroll Solutions" checklist) ---- */
    .capstrip {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 12px;
      margin-top: clamp(26px, 3vw, 42px)
    }

    .capstrip span {
      display: inline-flex;
      align-items: center;
      gap: .55em;
      font-weight: 600;
      font-size: .82rem;
      color: var(--ink-700);
      padding: 9px 16px;
      border: 1px solid var(--line);
      border-radius: 99px;
      background: var(--surface);
      transition: border-color .25s, transform .25s var(--ease)
    }

    .capstrip span:hover {
      border-color: var(--line-strong);
      transform: translateY(-2px)
    }

    .capstrip span svg {
      width: 1.05em;
      height: 1.05em;
      color: var(--blue)
    }

    /* ---- offerings: two titled columns (engine + people) ---- */
    .offer-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(30px, 4vw, 66px);
      margin-top: clamp(34px, 4vw, 52px)
    }

    @media (max-width:860px) {
      .offer-cols {
        grid-template-columns: 1fr;
        gap: 34px
      }
    }

    .offer-cols__h {
      font-weight: 600;
      font-size: .72rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink-400);
      padding-bottom: 4px;
      border-bottom: 1.5px solid var(--ink);
      margin-bottom: 6px
    }

    .offer-cols__h .n {
      color: var(--pink-700);
      margin-right: .6em
    }

    /* ---- benefits by buyer (payroll.md CHRO / CFO / Senior Leadership) ---- */
    .buyers {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(14px, 1.8vw, 24px);
      margin-top: clamp(34px, 4vw, 56px)
    }

    @media (max-width:860px) {
      .buyers {
        grid-template-columns: 1fr
      }
    }

    .buyer {
      display: flex;
      flex-direction: column;
      padding: clamp(26px, 2.6vw, 38px)
    }

    .buyer__role {
      font-weight: 600;
      font-size: .72rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--pink-700);
      margin-bottom: 12px
    }

    .buyer h3 {
      font-size: clamp(1.18rem, 1.5vw, 1.44rem);
      color: var(--ink);
      margin-bottom: 18px;
      letter-spacing: -.02em
    }

    .buyer ul {
      display: grid;
      gap: 12px;
      margin-top: auto
    }

    .buyer li {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      font-size: .97rem;
      line-height: 1.5;
      color: var(--ink-500)
    }

    .buyer li svg {
      width: 19px;
      height: 19px;
      flex: none;
      margin-top: 2px;
      color: var(--blue)
    }

    /* ---- proof metrics (jnums) on a LIGHT section ---- */
    .section:not(.section--dark) .jnum {
      border-left-color: var(--line)
    }

    .section:not(.section--dark) .jnum__n {
      color: var(--ink)
    }

    .section:not(.section--dark) .jnum__n .u {
      color: var(--pink)
    }

    .section:not(.section--dark) .jnum__l {
      color: var(--ink-500)
    }

    /* ---- MyPay section photo backdrop (reuses hosted platform webp) ---- */
    #mypay {
      --gang: 128deg;
      --bgimg: url("/images/bg/apx-bg-control.webp")
    }

    /* ---- retained-authority "control map": the work vs your call ---- */
    .ownmap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(16px, 2vw, 26px);
      margin-top: clamp(34px, 4vw, 52px)
    }

    @media (max-width:760px) {
      .ownmap {
        grid-template-columns: 1fr
      }
    }

    .ownmap__col {
      padding: clamp(24px, 2.6vw, 38px);
      position: relative;
      overflow: hidden
    }

    .ownmap__h {
      display: flex;
      align-items: center;
      gap: .6em;
      font-weight: 700;
      font-size: .74rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink-400);
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line)
    }

    .ownmap__h svg {
      width: 1.2em;
      height: 1.2em
    }

    .ownmap ul {
      display: grid;
      gap: 13px;
      margin-top: 18px
    }

    .ownmap li {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      font-size: 1rem;
      line-height: 1.5;
      color: var(--ink-700)
    }

    .ownmap li svg {
      width: 19px;
      height: 19px;
      flex: none;
      margin-top: 2px
    }

    .ownmap__col--work .ownmap__h {
      color: var(--blue)
    }

    .ownmap__col--work li svg {
      color: var(--blue)
    }

    .ownmap__col--you::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 3px;
      background: var(--grad)
    }

    .ownmap__col--you .ownmap__h {
      color: var(--pink-700);
      border-bottom-color: var(--line-strong)
    }

    .ownmap__col--you li svg {
      color: var(--pink)
    }

    /* ---- testimonial: pulled-out outcome above the quote (P5) ---- */
    .tslide__out {
      display: inline-block;
      font-weight: 700;
      font-size: .88rem;
      letter-spacing: -.01em;
      color: var(--pink-700);
      background: var(--accent-soft);
      border: 1px solid rgba(238, 56, 151, .2);
      padding: 7px 14px;
      border-radius: 99px;
      margin-bottom: 22px
    }

    .section--dark .tslide__out {
      color: var(--pink-300);
      background: var(--accent-soft-d);
      border-color: rgba(238, 56, 151, .3)
    }

    /* ============================================================================
       MyPay PAGE — overrides + additions on the shared design system.
       ========================================================================== */

    /* Distinct hero backdrop for the product page (data-centre bokeh), so the
       MyPay hero reads differently from the payroll page's office scene.
       Reuses the reduced-pink hero gradient. */
    .hero {
      background:
        linear-gradient(125deg,
          rgba(18, 30, 68, .93) 0%,
          rgba(25, 43, 92, .92) 54%,
          rgba(64, 52, 118, .9) 78%,
          rgba(190, 42, 128, .88) 93%,
          rgba(238, 56, 151, .88) 100%),
        url("/images/bg/apx-bg-hero.webp") center/cover no-repeat;
      background-attachment: fixed, fixed
    }

    @media (max-width:760px),
    (prefers-reduced-motion:reduce) {
      .hero {
        background-attachment: scroll
      }
    }

    /* promise pillars: a short list inside each tcard */
    .tcard-list {
      display: grid;
      gap: 9px;
      margin-top: 16px
    }

    .tcard-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: .92rem;
      line-height: 1.45;
      color: var(--on-dark-mut)
    }

    .section:not(.section--dark) .tcard-list li {
      color: var(--ink-500)
    }

    .tcard-list li::before {
      content: "";
      width: 6px;
      height: 6px;
      margin-top: 7px;
      border-radius: 50%;
      background: var(--pink);
      flex: none
    }

    /* standard-features check grid (compact two-column checklist) */
    .stdgrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px clamp(18px, 3vw, 44px);
      margin-top: clamp(30px, 4vw, 48px)
    }

    @media (max-width:640px) {
      .stdgrid {
        grid-template-columns: 1fr
      }
    }

    .stdgrid li {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid var(--dark-line);
      font-size: 1.02rem;
      color: var(--on-dark)
    }

    .stdgrid li svg {
      width: 20px;
      height: 20px;
      flex: none;
      color: var(--pink-300)
    }

    /* integration groups */
    .intgroups {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px, 2vw, 26px);
      margin-top: clamp(30px, 4vw, 48px)
    }

    @media (max-width:820px) {
      .intgroups {
        grid-template-columns: 1fr
      }
    }

    .intgroup {
      padding: clamp(22px, 2.4vw, 32px)
    }

    .intgroup h3 {
      font-size: 1.02rem;
      color: var(--ink);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: .6em
    }

    .intgroup h3 svg {
      width: 1.2em;
      height: 1.2em;
      color: var(--blue)
    }

    .intgroup ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .intgroup li {
      font-weight: 600;
      font-size: .82rem;
      color: var(--ink-700);
      padding: 7px 13px;
      border: 1px solid var(--line);
      border-radius: 99px;
      background: var(--surface)
    }

    /* five-node process flow (mobile collapses to one column) */
    .flow--5 {
      grid-template-columns: repeat(5, 1fr)
    }

    .flow--5::before {
      left: 10%;
      right: 10%
    }

    @media (max-width:820px) {
      .flow--5 {
        grid-template-columns: 1fr
      }
    }

    /* ============================================================================
       Product-screen mocks (apx product-tour style), light-optimised.
       Browser-framed screens shown beside copy in alternating splits.
       ========================================================================== */
    .mstep {
      padding-block: clamp(28px, 4vw, 50px)
    }

    .mstep+.mstep {
      border-top: 1px solid var(--line-soft)
    }

    #features .split__viz {
      position: relative
    }

    .mstep__no {
      display: inline-flex;
      align-items: center;
      gap: .5em;
      font-weight: 600;
      font-size: .74rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-400);
      margin-bottom: 15px
    }

    .mstep__no .idx {
      font-weight: 800;
      color: var(--pink-700)
    }

    .mstep h3 {
      font-size: clamp(1.4rem, 2.1vw, 1.9rem);
      letter-spacing: -.02em
    }

    .mstep p {
      color: var(--ink-500);
      margin-top: 14px;
      font-size: 1.04rem;
      line-height: 1.62;
      max-width: 46ch
    }

    /* browser mock frame */
    .mock {
      position: relative;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-2);
      overflow: hidden;
      transition: transform .4s var(--ease), box-shadow .4s var(--ease)
    }

    .mstep .split__viz:hover .mock {
      transform: translateY(-4px);
      box-shadow: var(--shadow-float)
    }

    .mock__bar {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 11px 14px;
      border-bottom: 1px solid var(--line);
      background: var(--surface)
    }

    .mock__dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--line-strong)
    }

    .mock__url {
      margin-left: 10px;
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      font-size: .7rem;
      color: var(--ink-400);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 4px 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 62%
    }

    .mock__screen {
      padding: clamp(16px, 2vw, 22px)
    }

    .m-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 15px
    }

    .m-head__title {
      font-weight: 700;
      font-size: 1rem;
      color: var(--ink)
    }

    .m-head__chip {
      font-weight: 600;
      font-size: .64rem;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--blue);
      background: var(--grad-soft);
      border: 1px solid var(--line);
      border-radius: 99px;
      padding: 5px 11px;
      white-space: nowrap
    }

    .m-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px;
      margin-bottom: 6px
    }

    .m-kpi {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px
    }

    .m-kpi--accent {
      background: var(--accent-soft);
      border-color: rgba(238, 56, 151, .2)
    }

    .m-kpi__label {
      font-weight: 500;
      font-size: .58rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink-400)
    }

    .m-kpi__val {
      display: block;
      font-weight: 800;
      font-size: 1.24rem;
      letter-spacing: -.02em;
      margin-top: 6px;
      color: var(--ink);
      font-variant-numeric: tabular-nums
    }

    .m-kpi--accent .m-kpi__val {
      color: var(--pink-700)
    }

    .m-rows {
      display: grid;
      gap: 8px
    }

    .m-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 13px;
      border: 1px solid var(--line);
      border-radius: 10px;
      font-size: .82rem
    }

    .m-row__id {
      font-weight: 600;
      color: var(--ink)
    }

    .m-row__mid {
      color: var(--ink-500)
    }

    .m-row--muted {
      opacity: .62
    }

    .m-chip {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-weight: 600;
      font-size: .64rem;
      padding: 4px 10px;
      border-radius: 99px;
      white-space: nowrap
    }

    .m-chip svg {
      width: 11px;
      height: 11px
    }

    .m-chip--ok {
      background: rgba(22, 145, 90, .12);
      color: #16915a
    }

    .m-chip--wait {
      background: rgba(12, 77, 162, .09);
      color: var(--blue)
    }

    .m-chip--accent {
      background: var(--accent-soft);
      color: var(--pink-700)
    }

    .m-flow {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 14px;
      font-weight: 600;
      font-size: .72rem;
      color: var(--ink-500)
    }

    .m-flow i {
      width: 13px;
      height: 1.5px;
      background: var(--line-strong);
      flex: none
    }

    .m-flow .is-end {
      color: var(--pink-700);
      font-weight: 700
    }

    /* floating label on a mock */
    .float-chip {
      position: absolute;
      z-index: 3;
      font-weight: 700;
      font-size: .68rem;
      letter-spacing: .01em;
      color: #fff;
      padding: 8px 14px;
      border-radius: 99px;
      box-shadow: var(--shadow-2)
    }

    .float-chip--blue {
      background: var(--blue);
      top: -12px;
      left: 22px
    }

    .float-chip--pink {
      background: var(--pink);
      bottom: -12px;
      right: 22px
    }

    @media (max-width:520px) {
      .float-chip {
        font-size: .62rem;
        padding: 6px 11px
      }
    }

    /* ---- wire in hosted MYNDAPX-specific backgrounds (dark cinematic set,
            generated to match index.html; each dark section gets its own webp,
            gradient angle varied per section so they don't read identically) ---- */
    #engine {
      --gang: 118deg;
      --bgimg: url("/images/bg/apx-bg-engine.webp")
    }

    #control {
      --gang: 96deg;
      --bgimg: url("/images/bg/apx-bg-control.webp")
    }

    #compliance {
      --gang: 150deg;
      --bgimg: url("/images/bg/apx-bg-compliance.webp")
    }

    #security {
      --gang: 128deg;
      --bgimg: url("/images/bg/apx-bg-security.webp")
    }

    .cta__bg {
      background: url("/images/bg/apx-bg-cta.webp") center/cover no-repeat
    }

    /* ============================================================================
       APX SITE CHROME — bespoke nav + drawer + footer for the 5-page funnel.
       The base editorial system is header-less; this adds cross-page navigation
       on-palette (Montserrat wordmark, navy/pink, transparent-over-hero → navy blur).
       ========================================================================== */
    :root { --nav-h: 74px; }
    html { scroll-padding-top: 92px; }

    .skip-link {
      position: fixed; top: -60px; left: 12px; z-index: 300;
      background: var(--pink); color: #fff; font-weight: 700; font-size: .9rem;
      padding: .7em 1.1em; border-radius: 6px; transition: top .2s var(--ease);
    }
    .skip-link:focus { top: 12px; }

    .site-nav {
      position: fixed; inset: 0 0 auto 0; z-index: 90;
      height: var(--nav-h);
      display: flex; align-items: center;
      background: transparent;
      transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
      border-bottom: 1px solid transparent;
    }
    .site-nav.is-scrolled {
      background: rgba(18, 26, 54, .82);
      -webkit-backdrop-filter: saturate(140%) blur(14px);
      backdrop-filter: saturate(140%) blur(14px);
      border-bottom-color: rgba(255,255,255,.10);
      box-shadow: 0 12px 40px rgba(10, 14, 30, .28);
    }
    .nav-inner {
      width: 100%; max-width: var(--maxw-wide); margin-inline: auto;
      padding-inline: var(--gut);
      display: flex; align-items: center; gap: clamp(18px, 3vw, 40px);
    }
    .brand {
      display: inline-flex; align-items: center; gap: .5em;
      font-family: var(--disp); font-weight: 800; letter-spacing: -.03em;
      font-size: 1.32rem; color: #fff; line-height: 1;
    }
    .brand .pk { color: var(--pink); }
    .brand__mark { width: 26px; height: 26px; flex: none; }
    .nav-links {
      display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
      margin-left: auto;
    }
    .nav-links a {
      font-family: var(--disp); font-weight: 600; font-size: .82rem;
      letter-spacing: .02em; color: rgba(255,255,255,.82);
      position: relative; padding: .4em 0; transition: color .25s;
    }
    .nav-links a::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
      background: var(--pink); transform: scaleX(0); transform-origin: left;
      transition: transform .3s var(--ease);
    }
    .nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
    .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
    .nav-actions { display: flex; align-items: center; gap: 12px; }
    .site-nav .btn { padding: .68em 1.15em; font-size: .84rem; border-radius: 3px; }
    .site-nav .btn--line { border-color: rgba(255,255,255,.34); color: #fff; }
    .site-nav .btn--line:hover { border-color: #fff; background: rgba(255,255,255,.06); transform: translateY(-1px); }
    .nav-toggle {
      display: none; width: 42px; height: 42px; border-radius: 8px;
      align-items: center; justify-content: center; flex-direction: column; gap: 5px;
      border: 1px solid rgba(255,255,255,.24);
    }
    .nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
    .nav-drawer { display: none; }

    @media (max-width: 900px) {
      .nav-links, .nav-actions .btn { display: none; }
      .nav-toggle { display: inline-flex; }
      .nav-drawer {
        display: block; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 89;
        background: var(--dark-bg); background-color: #16224a;
        padding: clamp(24px, 6vw, 44px) var(--gut);
        transform: translateY(-12px); opacity: 0; pointer-events: none;
        transition: opacity .3s var(--ease), transform .3s var(--ease);
        overflow-y: auto;
      }
      .nav-drawer.is-open { opacity: 1; transform: none; pointer-events: auto; }
      .nav-drawer a.dl {
        display: block; font-family: var(--disp); font-weight: 700; letter-spacing: -.02em;
        font-size: 1.6rem; color: #fff; padding: .55em 0; border-bottom: 1px solid rgba(255,255,255,.10);
      }
      .nav-drawer a.dl .pk { color: var(--pink); }
      .nav-drawer .drawer-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
      .nav-drawer .btn { width: 100%; justify-content: center; }
      body.nav-open { overflow: hidden; }
      .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
      .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    }

    /* ---- site footer (dark, cross-page nav) ---- */
    .site-footer { position: relative; background: #10193a; color: var(--on-dark); overflow: hidden; }
    .site-footer::after {
      content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 7.69vw 7.69vw;
    }
    .site-footer > .wrap { position: relative; z-index: 1; padding-block: clamp(56px, 7vw, 90px); }
    .foot-top {
      display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
      gap: clamp(34px, 5vw, 72px); align-items: start;
    }
    .foot-brand .brand { font-size: 1.7rem; margin-bottom: 18px; }
    .foot-brand p { color: var(--on-dark-mut); max-width: 40ch; font-size: .98rem; }
    .foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
    .foot-col h4 {
      font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
      color: var(--on-dark-mut); margin-bottom: 16px;
    }
    .foot-col a, .foot-col span.fi {
      display: block; color: rgba(255,255,255,.80); font-size: .92rem; font-weight: 500;
      padding: 6px 0; transition: color .2s;
    }
    .foot-col a:hover { color: #fff; }
    .foot-bottom {
      margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; border-top: 1px solid rgba(255,255,255,.10);
      display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between;
    }
    .foot-legal { color: var(--on-dark-mut); font-size: .82rem; line-height: 1.6; max-width: 62ch; }
    .foot-certs { color: var(--on-dark-mut); font-size: .78rem; letter-spacing: .04em; }
    @media (max-width: 860px) {
      .foot-top { grid-template-columns: 1fr; gap: 40px; }
      .foot-cols { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 460px) { .foot-cols { grid-template-columns: 1fr; } }

    /* ============================================================================
       APX PAGE COMPOSITES — bespoke layout blocks built on the design tokens,
       so each funnel page composes differently instead of repeating one primitive.
       ========================================================================== */

    /* Gateway cards — the homepage's three routes into the deep pages */
    .gateways { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px, 2vw, 26px); margin-top: clamp(32px, 4vw, 52px); }
    .gw {
      display: flex; flex-direction: column; gap: 14px;
      padding: clamp(28px, 3vw, 40px);
      background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
      box-shadow: var(--shadow-1); color: inherit;
      transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
    }
    .gw:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
    .gw__no { font-weight: 800; font-size: .82rem; letter-spacing: .04em; color: var(--pink); font-variant-numeric: tabular-nums; }
    .gw h3 { font-size: clamp(1.3rem, 1.7vw, 1.62rem); letter-spacing: -.025em; }
    .gw p { color: var(--ink-500); font-size: .98rem; margin-top: 2px; }
    .gw .alink { margin-top: auto; padding-top: 10px; }
    .section--dark .gw { background: var(--dark-card); border-color: var(--dark-line); box-shadow: none; }
    .section--dark .gw:hover { border-color: rgba(255,255,255,.22); box-shadow: var(--shadow-dark); }
    .section--dark .gw p { color: var(--on-dark-mut); }
    @media (max-width: 860px) { .gateways { grid-template-columns: 1fr; } }

    /* Outcomes grid — the CFO benefit set */
    .ocg { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px, 1.8vw, 22px); margin-top: clamp(30px, 3.5vw, 48px); }
    .oc {
      padding: clamp(24px, 2.4vw, 32px); border-radius: var(--radius);
      background: rgba(255,255,255,.03); border: 1px solid var(--dark-line);
      transition: transform .4s var(--ease), border-color .4s var(--ease);
    }
    .oc:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.24); }
    .oc__i { display: block; width: 34px; height: 34px; color: var(--pink-300); margin-bottom: 14px; }
    .oc__i svg { display: block; width: 34px; height: 34px; }
    .oc h3 { color: #fff; font-size: 1.12rem; letter-spacing: -.02em; }
    .oc p { color: var(--on-dark-mut); font-size: .94rem; margin-top: 8px; }
    .section:not(.section--dark) .oc { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-1); }
    .section:not(.section--dark) .oc h3 { color: var(--ink); }
    .section:not(.section--dark) .oc p { color: var(--ink-500); }
    .section:not(.section--dark) .oc__i { color: var(--blue); }
    @media (max-width: 860px) { .ocg { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .ocg { grid-template-columns: 1fr; } }

    /* The three commercial "nos" — scoped under .nos so .no never collides with
       the chapter-head number span (.cmeta .no), which was the "white square" bug. */
    .nos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,1.8vw,22px); margin-top: clamp(26px,3vw,40px); }
    .nos .no {
      padding: clamp(24px,2.4vw,34px); border-radius: var(--radius); background: var(--paper);
      border: 1px solid var(--line); box-shadow: var(--shadow-1);
    }
    .nos .no__x { display:inline-flex; align-items:center; justify-content:center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--pink); margin-bottom: 14px; }
    .nos .no__x svg { width: 18px; height: 18px; }
    .nos .no h3 { font-size: 1.12rem; letter-spacing: -.02em; }
    .nos .no p { color: var(--ink-500); font-size: .94rem; margin-top: 6px; }
    @media (max-width: 720px) { .nos { grid-template-columns: 1fr; } }

    /* Product-tour screenshot rail */
    .shots { display: grid; gap: clamp(56px, 7vw, 96px); margin-top: clamp(30px,4vw,52px); }
    .shot { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(28px,4vw,60px); align-items: center; }
    .shot:nth-child(even) .shot__fig { order: 2; }
    .shot__fig { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-2); background: var(--surface); }
    .shot__fig img { width: 100%; height: auto; display: block; }
    .shot__no { font-weight: 800; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); }
    .shot h3 { font-size: clamp(1.4rem, 2.1vw, 1.95rem); letter-spacing: -.03em; margin: 12px 0 12px; }
    .shot p { color: var(--ink-500); font-size: 1.02rem; }
    @media (max-width: 820px) { .shot { grid-template-columns: 1fr; gap: 22px; } .shot:nth-child(even) .shot__fig { order: 0; } }

    /* Bold text on dark surfaces must stay light (global reset makes <strong> dark ink) */
    .hero-sub strong, .hero strong { color: #fff; }
    .section--dark strong { color: #fff; }
    .section--dark .oc p strong, .section--dark .lede strong { color: #fff; }

    /* ---- working-session form (get-started) ---- */
    .form-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(30px,4vw,64px); align-items: start; margin-top: clamp(30px,4vw,50px); }
    .form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: clamp(26px,3vw,42px); }
    .field { margin-bottom: 18px; }
    .field label { display: block; font-family: var(--disp); font-weight: 600; font-size: .82rem; letter-spacing: .02em; color: var(--ink-700); margin-bottom: 8px; }
    .field input, .field select, .field textarea {
      width: 100%; font: inherit; font-size: 1rem; padding: .8em 1em;
      border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
      background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s;
    }
    .field textarea { min-height: 96px; resize: vertical; }
    .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
    .form__note { margin-top: 14px; font-size: .88rem; color: var(--ink-500); }
    @media (max-width: 860px) { .form-layout { grid-template-columns: 1fr; } }
    @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

    /* ============================================================================
       POST-AUDIT FIXES (central, apply to all pages)
       ========================================================================== */

    /* Missing class definitions (were undefined, flagged by audit) */
    .section--tight { padding-block: clamp(60px, 7vw, 96px); }
    .dash-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Stats band was built for dark sections (white numbers/labels). Make it
       readable on a light --surface section too. */
    .section--surface .stat, .section:not(.section--dark) .stats .stat { border-color: var(--line); }
    .section--surface .stat__n, .section:not(.section--dark) .stats .stat__n { color: var(--ink); }
    .section--surface .stat__l, .section:not(.section--dark) .stats .stat__l { color: var(--ink); }
    .section--surface .stat__s, .section:not(.section--dark) .stats .stat__s { color: var(--ink-500); }
    .section--surface .stat:hover, .section:not(.section--dark) .stats .stat:hover { background: rgba(20, 26, 43, .03); }
    .section--surface .stat--accent, .section:not(.section--dark) .stats .stat--accent { background: linear-gradient(155deg, rgba(12, 77, 162, .08), rgba(238, 56, 151, .06)); }
    .section--surface .stat--accent:hover { background: linear-gradient(155deg, rgba(12, 77, 162, .12), rgba(238, 56, 151, .09)); }

    /* Light-text default on dark sections so a bare <p> is never dark-on-dark.
       More specific rules (cards, forms, .frow) still win. */
    .section--dark p { color: var(--on-dark-mut); }
    .section--dark .split__copy p { color: rgba(255, 255, 255, .90); }
    .section--dark .form-card p, .section--dark .form-card label { color: inherit; }
    .section--dark .form-card .form__note { color: var(--ink-500); }

    /* Float-chips must anchor to their own viz box, not a distant ancestor */
    .split__viz { position: relative; }

    /* Brand logo (real MYNDAPX mark; white on the dark nav/footer) */
    .brand__logo { height: clamp(26px, 2.6vw, 32px); width: auto; display: block; }
    .site-nav .brand__logo, .site-footer .brand__logo { filter: brightness(0) invert(1); }
    .foot-brand .brand__logo { height: 38px; }

    /* ---- Restored working session form (#apx-walkthrough-form / .rw-form),
            wired to walkthrough.js -> Apps Script -> sheet + Zoho. Styled on the
            new design tokens. Markup + field names + data flow unchanged. ---- */
    .rw-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: clamp(24px, 3vw, 38px); }
    .rw-form.is-validated :invalid { border-color: var(--pink-700); }
    .rw-form__head { margin-bottom: 20px; }
    .rw-form__eyebrow { display: block; font-weight: 700; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); margin-bottom: 8px; }
    .rw-form__title { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.02em; }
    .rw-form__sub { color: var(--ink-500); font-size: .95rem; margin-top: 8px; }
    .rw-field { margin-bottom: 16px; }
    .rw-field > label { display: block; font-family: var(--disp); font-weight: 600; font-size: .82rem; color: var(--ink-700); margin-bottom: 8px; }
    .rw-field input, .rw-field select, .rw-field textarea { width: 100%; font: inherit; font-size: 1rem; padding: .78em 1em; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
    .rw-field textarea { min-height: 88px; resize: vertical; }
    .rw-field input:focus, .rw-field select:focus, .rw-field textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
    .rw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
    .rw-captcha__row { display: flex; align-items: center; gap: 10px; }
    .rw-captcha__code { font-weight: 800; letter-spacing: .3em; font-size: 1.1rem; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 8px; padding: 9px 14px; user-select: none; color: var(--ink); }
    .rw-captcha__refresh { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink-500); flex: none; }
    .rw-captcha__refresh svg { width: 18px; height: 18px; }
    .rw-captcha__row input { flex: 1; }
    .rw-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; opacity: 0; }
    .rw-form__submit { width: 100%; justify-content: center; margin-top: 6px; }
    .rw-form__status { margin-top: 12px; font-size: .9rem; color: var(--pink-700); min-height: 1.1em; }
    .rw-form__alt { margin-top: 14px; font-size: .9rem; color: var(--ink-500); }
    .rw-form__alt a { color: var(--blue); font-weight: 600; }
    .rw-success { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: clamp(28px, 3vw, 42px); }
    .rw-success h3 { font-size: 1.5rem; letter-spacing: -.02em; }
    .rw-success p { color: var(--ink-500); margin-top: 10px; }
    @media (max-width: 560px) { .rw-row { grid-template-columns: 1fr; } }