/* kx-page-hero: port of platform/PlatformHero.tsx. The template's <main> clears the fixed header,
   so the section pulls back up under it and keeps the design's own top padding. */
.kx.kx-page-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--kx-header-h)); padding-top: 6.5rem; padding-bottom: clamp(3rem, 6vw, 6rem); }
@media (min-width: 1024px) { .kx.kx-page-hero { margin-top: calc(-1 * var(--kx-header-h-lg)); padding-top: 9.5rem; } }
.kx.kx-page-hero > .kx-shell { position: relative; }
.kx.kx-page-hero .kx-page-hero__gradient { position: absolute; inset: 0; z-index: -20; pointer-events: none;
  background: linear-gradient(to bottom, var(--kx-navy) 0%, var(--kx-navy) 12%, #0a5578 27%, #2192bd 42%, #8fd1e4 56%, #cbe8f1 70%, #e9f4f8 85%, var(--kx-paper) 100%); }
.kx.kx-page-hero .kx-page-hero__wave { position: absolute; inset: 0; z-index: -10; opacity: 0.8; mix-blend-mode: screen; }

/* Two columns centred against each other (client feedback 7 Oct: "bring up left side and bring
   down right side so they are even"); the design bottom-aligned them, which left the taller copy
   column starting well above the lockup. */
.kx.kx-page-hero .kx-page-hero__grid { display: grid; align-items: center; row-gap: 2rem; }
@media (min-width: 1024px) { .kx.kx-page-hero .kx-page-hero__grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr); column-gap: 3rem; } }
.kx.kx-page-hero .kx-page-hero__lockup { margin-bottom: 1.75rem; }
.kx.kx-page-hero .kx-page-hero__lockup img { height: clamp(2.5rem, 3.4vw, 3.25rem); width: auto; }
.kx.kx-page-hero .kx-page-hero__heading { color: #fff; }
.kx.kx-page-hero .kx-page-hero__lead { max-width: 38ch; color: #fff; }
.kx.kx-page-hero .kx-page-hero__p { margin-top: 1.25rem; max-width: 46ch; color: rgb(255 255 255 / 0.75); }
.kx.kx-page-hero .kx-page-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.kx.kx-page-hero .kx-page-hero__magnet { display: inline-block; }

.kx.kx-page-hero .kx-page-hero__panel { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.kx.kx-page-hero .kx-page-hero__bezel { --glass-edge-w: 1.5px; border-radius: clamp(1.1rem, 1.8vw, 1.75rem); background: rgb(255 255 255 / 0.2); padding: clamp(0.4rem, 0.85vw, 0.85rem);
  box-shadow: 0 2px 8px rgb(4 49 75 / 0.06), 0 44px 90px -40px rgb(4 49 75 / 0.55); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); }
.kx.kx-page-hero .kx-page-hero__app { display: block; width: 100%; border-radius: calc(clamp(1.1rem, 1.8vw, 1.75rem) - clamp(0.4rem, 0.85vw, 0.85rem)); }

/* WCAG AA (client feedback 7 Oct): the copy sits over the palest part of the glow, where white text
   measured 1.65:1 at 1024. A soft navy shade behind the text block lifts every line above 4.5:1 while
   the gradient and wave stay. The body paragraph is full white for the same reason. */
.kx.kx-page-hero .kx-page-hero__grid { position: relative; }
.kx.kx-page-hero .kx-page-hero__grid::before { content: ""; position: absolute; z-index: -1; inset: -5rem -12vw -4rem; pointer-events: none;
  background: radial-gradient(ellipse 70% 65% at 40% 50%, rgb(11 36 64 / 0.72), rgb(11 36 64 / 0.45) 60%, rgb(11 36 64 / 0) 100%); }
/* The ellipse is still tinted where its box ends, which drew a hard line across the glow under the CTAs
   (Andre, 8 Oct: "the Vercel version is more subtle"). Fade the box edges out beyond the copy, so the
   text keeps its full shade and the gradient reads as one sweep again. */
@media (min-width: 1024px) {
  .kx.kx-page-hero .kx-page-hero__grid::before { inset: -5rem -12vw -8rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5rem, #000 calc(100% - 8rem), transparent), linear-gradient(to right, transparent, #000 12vw, #000 calc(100% - 12vw), transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent, #000 5rem, #000 calc(100% - 8rem), transparent), linear-gradient(to right, transparent, #000 12vw, #000 calc(100% - 12vw), transparent);
    mask-composite: intersect; }
}
@media (max-width: 1023px) { .kx.kx-page-hero .kx-page-hero__grid::before { inset: -4rem -1.5rem -2rem;
  background: linear-gradient(to bottom, rgb(11 36 64 / 0.78), rgb(11 36 64 / 0.72) 80%, rgb(11 36 64 / 0) 100%); } } /* stacked column: the CTAs sit at the bottom, so the shade fades only below them */
.kx.kx-page-hero .kx-page-hero__p { color: #fff; }
.kx.kx-page-hero .kx-btn--outline-light { background: rgb(4 49 75 / 0.55); } /* ghost pill gets a navy tint so its white label clears 4.5:1 on the glow */