/* kx-band: ports of ConversionBand.tsx (photo, copy left), Conversation.tsx (photo, copy right)
   and About.tsx (light, split). Depends on kx-tokens. */
.kx.kx-band { position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden; }
.kx.kx-band > .kx-shell { position: relative; }

.kx.kx-band.kx-band--photo { background: var(--kx-navy); }
.kx.kx-band.kx-band--photo.kx-band--h-default { min-height: 30rem; padding-block: 5rem; }
.kx.kx-band.kx-band--photo.kx-band--h-tall    { min-height: 32rem; padding-block: 6rem; }
.kx.kx-band.kx-band--photo.kx-band--h-auto    { padding-block: 5rem; }
@media (min-width: 1024px) {
  .kx.kx-band.kx-band--photo.kx-band--h-default { min-height: 34rem; padding-block: 6rem; }
  .kx.kx-band.kx-band--photo.kx-band--h-tall    { min-height: 40rem; padding-block: 8rem; }
}
.kx.kx-band .kx-band__photo { position: absolute; inset-inline: 0; z-index: -20; pointer-events: none; top: -6%; height: 112%; }
.kx.kx-band.kx-band--copy-right .kx-band__photo { top: -4%; height: 108%; }
.kx.kx-band .kx-band__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.kx.kx-band.kx-band--focus-left .kx-band__photo img { object-position: 30% 50%; }
.kx.kx-band.kx-band--focus-center .kx-band__photo img { object-position: 50% 50%; }
.kx.kx-band .kx-band__scrim { position: absolute; inset: 0; z-index: -10; pointer-events: none;
  background: linear-gradient(96deg, rgb(2 38 56 / 0.82) 0%, rgb(2 38 56 / 0.66) 34%, rgb(2 38 56 / 0.28) 58%, transparent 78%); }
.kx.kx-band.kx-band--copy-right .kx-band__scrim {
  background: linear-gradient(264deg, var(--kx-navy) 0%, rgb(4 49 75 / 0.96) 30%, rgb(4 49 75 / 0.8) 46%, rgb(4 49 75 / 0.38) 62%, transparent 82%); }

/* Mobile and tablet (below the plugin's 1024px desktop breakpoint): no text over a photograph
   (client feedback 7 Oct). The photo and its scrim are hidden and the band is plain navy with the
   white copy it already has; it sizes to its content since there is no picture to show. */
@media (max-width: 1023.98px) {
  .kx.kx-band.kx-band--photo .kx-band__photo, .kx.kx-band.kx-band--photo .kx-band__scrim { display: none; }
  .kx.kx-band.kx-band--photo.kx-band--h-default, .kx.kx-band.kx-band--photo.kx-band--h-tall { min-height: 0; }
}

.kx.kx-band.kx-band--light { background: var(--kx-paper); padding-block: var(--kx-space-section); }
.kx.kx-band.kx-band--tint  { background: var(--kx-paper-soft); padding-block: var(--kx-space-section); }
.kx.kx-band.kx-band--dark  { background: var(--kx-navy); padding-block: var(--kx-space-section); }

/* Guilloche, as About.tsx: lg only, 64rem box, 40rem past the right edge */
.kx.kx-band .kx-band__lattice { display: none; }
@media (min-width: 1024px) { .kx.kx-band .kx-band__lattice { display: block; position: absolute; top: 50%; right: -40rem; width: 64rem; height: 64rem; transform: translateY(-50%); z-index: -10; color: var(--kx-navy); } }

.kx.kx-band .kx-band__inner { position: relative; }
.kx.kx-band .kx-band__eyebrow { margin-bottom: 1.5rem; }
.kx.kx-band .kx-heading--display.kx-band__heading { max-width: 18ch; }
/* The design's measure (1160px at 104px): two even lines, "Book a Demo with an / Airline Retail Expert",
   instead of a lone "Expert" at full width (Andre, 8 Oct). */
.kx.kx-band .kx-heading--h1.kx-band__heading { max-width: 11.2em; }
.kx.kx-band .kx-band__body { margin-top: 2rem; max-width: 48ch; }
.kx.kx-band .kx-band__p + .kx-band__p { margin-top: 1rem; }
.kx.kx-band .kx-band__cta { margin-top: 2.25rem; }
.kx.kx-band .kx-band__magnet { display: inline-block; }
.kx.kx-band.kx-on-navy .kx-band__p { color: rgb(255 255 255 / 0.85); }

/* Conversation */
.kx.kx-band.kx-band--copy-right .kx-band__inner { margin-left: auto; max-width: 34rem; }
.kx.kx-band.kx-band--copy-right .kx-band__body { margin-top: 1.75rem; max-width: none; }

/* ConversionBand white pill */
.kx.kx-band .kx-btn--white { background: #fff; color: var(--kx-navy); } /* same pill size as the hero buttons (Andre, 7 Oct); the design's larger bare link is dropped */
.kx.kx-band .kx-btn--white:hover { background: var(--kx-green); }

/* About */
.kx.kx-band.kx-band--copy-split .kx-band__eyebrow { margin-bottom: 2rem; }
.kx.kx-band.kx-band--copy-split .kx-heading--display.kx-band__heading { max-width: 12ch; }
.kx.kx-band.kx-band--copy-split .kx-band__body { margin-top: 3rem; max-width: none; }
.kx.kx-band.kx-band--copy-split .kx-band__p { max-width: 46ch; }
/* Long single words (About PROS: "independence") must fit the heading column (client feedback 7 Oct).
   At the Display/Large sizes the word was wider than its half-width column, and the line masks that
   SplitText wraps round each line (overflow: clip) cut its last letter off. The size is now capped
   to the column (14.5cqi ~ a 12-letter bold word plus the optical-left pull), and the masks only
   clip vertically, so a longer word can never be cut sideways again. */
.kx.kx-band.kx-band--copy-split .kx-band__head { container-type: inline-size; }
.kx.kx-band.kx-band--copy-split .kx-heading--display.kx-band__heading { font-size: min(var(--kx-text-display), 14.5cqi); }
.kx.kx-band.kx-band--copy-split .kx-heading--h1.kx-band__heading { font-size: min(var(--kx-text-h1), 14.5cqi); }
.kx.kx-band .kx-band__heading .split-line-mask { overflow-x: visible !important; overflow-y: clip !important; }
@media (min-width: 1024px) {
  .kx.kx-band.kx-band--copy-split .kx-band__inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 5rem; align-items: start; }
  .kx.kx-band.kx-band--copy-split .kx-band__body { margin-top: 0; padding-top: 1.5rem; }
}

/* Lead line under the heading (platform page): blue on light, green on navy */
.kx.kx-band .kx-band__lead { margin-top: 1.5rem; max-width: 34ch; color: var(--kx-blue-ink); }
.kx.kx-band.kx-on-navy .kx-band__lead { color: var(--kx-green); }
.kx.kx-band .kx-band__body--stepped .kx-band__p + .kx-band__p { margin-top: 1.25rem; }
.kx.kx-band .kx-band__tagline { display: flex; align-items: center; gap: 0.75rem; margin-top: 2rem; font-size: 0.875rem; line-height: 1.6; color: var(--kx-ink-faint); }

/* Panel (platform/Expertise.tsx): rounded soft-paper card inset on white */
.kx.kx-band.kx-band--panel { background: var(--kx-paper); padding-block: var(--kx-space-section); }
.kx.kx-band .kx-band__panel { border-radius: 1.5rem; background: var(--kx-paper-soft); padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 4rem); }
.kx.kx-band.kx-band--panel .kx-heading--h2.kx-band__heading { max-width: 16ch; }
.kx.kx-band.kx-band--panel.kx-band--copy-split .kx-band__eyebrow { margin-bottom: 1.5rem; }
.kx.kx-band.kx-band--panel.kx-band--copy-split .kx-band__body { margin-top: 2rem; }
.kx.kx-band.kx-band--panel.kx-band--copy-split .kx-band__p { max-width: 52ch; }
@media (min-width: 1024px) {
  .kx.kx-band.kx-band--panel.kx-band--copy-split .kx-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(2.5rem, 4vw, 4rem); }
  .kx.kx-band.kx-band--panel.kx-band--copy-split .kx-band__body { margin-top: 0; padding-top: 0.25rem; }
}
/* Below 1280 a one-third column squeezed the heading into four short lines ("Grounded in / Four Decades /
   of Airline / Expertise"); split evenly there, as the design does (Andre, 8 Oct). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .kx.kx-band.kx-band--panel.kx-band--copy-split .kx-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Panel intro in the current pros.com style (client feedback 7 Oct), the same values as
   kx-statement light ("Built for Commercial Independence"): compact heavy navy heading, the first
   paragraph as a 24px navy lead, the rest 16px navy body, and the lead line under the heading in
   muted ink instead of blue. Panel only, so the homepage About band (light, split) is unchanged. */
.kx.kx-band.kx-band--panel .kx-band__heading { font-size: clamp(2.375rem, 3.47vw, 3.125rem); line-height: 1; letter-spacing: -0.025em; font-weight: 800 !important; }
.kx.kx-band.kx-band--panel .kx-band__lead { margin-top: 1.25rem; max-width: 32ch; font-size: 1.125rem; line-height: 1.5; color: var(--kx-ink-muted); }
.kx.kx-band.kx-band--panel .kx-band__body .kx-band__p { max-width: 60ch; font-size: 1rem; line-height: 1.55; color: var(--kx-ink); }
.kx.kx-band.kx-band--panel .kx-band__body .kx-band__p:first-child { max-width: 34em; font-size: clamp(1.3125rem, 1.67vw, 1.5rem); line-height: 1.45; letter-spacing: -0.018em; }
.kx.kx-band.kx-band--panel .kx-band__body .kx-band__p + .kx-band__p { margin-top: 1.5rem; }