/*!
 * KX embed module stylesheet - v1  (KTWD-1202)
 *
 * WHAT THIS IS. A copy of the HQ Hub's `public/styles/kx-style-reference.css`,
 * the sheet its section generator writes markup against. Until this file
 * existed the Hub had to INLINE the whole 38 KB sheet into every entry it
 * pushed, because the website defined exactly one of its classes
 * (`.kx-logo-mask` - and that one is not even in this sheet).
 *
 * PROVENANCE - do not edit this file by hand.
 *   source : kx-hq-hub  public/styles/kx-style-reference.css
 *   sha256 : 3244e7a32192dc0e (first 16 of the SOURCE file, @font-face included)
 *   copied : 2026-08-20
 *   classes: 147 distinct .kx-* selectors
 *   change : all 4 @font-face blocks removed - see below
 *
 * WHY @font-face IS GONE. The website already declares all four faces this
 * sheet declared, at byte-identical family/weight/style/src, in
 * `src/app/globals.css` - plus a fifth (Simplon Norm 700) that the Hub sheet
 * lacks. Keeping them would be a duplicate download of the same .otf files.
 * Verified rather than assumed, 2026-08-20.
 *
 * THE FILENAME IS VERSIONED, AND THAT IS THE WHOLE SAFETY MECHANISM.
 *
 * Every entry the Hub pushed BEFORE this shipped carries its own inlined
 * snapshot of the sheet, frozen at its push date. Those snapshots sit in the
 * entry BODY, so they come after this file's <link> in document order and win
 * at equal specificity - which is deliberate: an already-published entry keeps
 * rendering exactly as it does today, rather than silently restyling because a
 * shared sheet moved underneath it.
 *
 * Measured before shipping (production `master`, 2026-08-20): 5 entries use a
 * .kx-* class in a class attribute, and all 5 have every class they use defined
 * by their own snapshot. Serving this file changes ZERO production renders. The
 * only declaration differing anywhere in the estate is
 * `.kx-pathway-step::before` - 2 entries hardcode the teal rgba where this
 * sheet now uses `var(--kx-pathway-line, ...)`. Same selector, so the same
 * specificity, so the snapshot wins and nothing moves.
 *
 * So: NEVER revise this file in place. Ship `...v2.css`, point the component at
 * it, and let v1 keep serving whatever still depends on it. Editing v1 is how
 * you restyle live commercial pages - including the AU Nike partnership
 * section - with no diff to review and no way to notice.
 *
 * The class manifest is pinned by tests/unit/kx-embed-modules.test.ts, so
 * dropping a class here reddens CI rather than un-styling a page quietly.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   KX Design System — kx-style-reference.css
   Loaded by the Embed Section Generator preview iframe.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── Fonts ──────────────────────────────────────────────────────────────── */
/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  font-family: 'Simplon Norm', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { cursor: pointer; }

/* ─── Brand tokens ───────────────────────────────────────────────────────── */
:root {
  --kx-teal:      #02B2BA;
  /* Brand-pure (KTWD-221): no deep-teal navy, no warm cream. The legacy
     token names are kept so existing section markup keeps working, but
     repointed to the brand-pure charcoal + cool surface. */
  --kx-deep-teal: #15171b;
  --kx-cream:     #f4f5f5;
  --kx-soft:      #f7f7f7;
  --kx-black:     #000000;
  --kx-white:     #ffffff;
  --kx-grey:      #53565A;
}

/* ─── Section structure ──────────────────────────────────────────────────── */
.kx-full-width {
  width: 100%;
}

.kx-section {
  padding: 96px 0;
}

.kx-section-compact {
  padding: 56px 0;
}

.kx-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

.kx-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kx-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.kx-split-top {
  align-items: start;
}

.kx-narrow {
  max-width: 580px;
}

.kx-center .kx-narrow {
  margin-left: auto;
  margin-right: auto;
}

.kx-mt-lg {
  margin-top: 56px;
}

/* ─── Panels ─────────────────────────────────────────────────────────────── */
.kx-panel {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 28px;
  padding: 56px;
}

.kx-panel-dark {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 28px;
  padding: 56px;
}

/* ─── Background colours ─────────────────────────────────────────────────── */
.kx-bg-white     { background-color: var(--kx-white); }
.kx-bg-soft      { background-color: var(--kx-soft); }
.kx-bg-cream     { background-color: var(--kx-cream); }
.kx-bg-teal      { background-color: var(--kx-teal); }
.kx-bg-deep-teal { background-color: var(--kx-deep-teal); }
.kx-bg-black     { background-color: var(--kx-black); }
.kx-bg-grey      { background-color: var(--kx-grey); }

.kx-bg-image {
  position: relative;
  overflow: hidden;
  background-color: var(--kx-image-bg-color, var(--kx-deep-teal));
}

.kx-section-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--kx-image-opacity, 0.35);
  z-index: 0;
}

.kx-bg-image .kx-container {
  position: relative;
  z-index: 1;
}

/* ─── Eyebrow ────────────────────────────────────────────────────────────── */
.kx-eyebrow {
  display: block;
  font-family: 'Simplon Norm', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kx-teal);
  margin: 0 0 16px;
}

.kx-bg-black .kx-eyebrow:not([class*="kx-text-"]),
.kx-bg-deep-teal .kx-eyebrow:not([class*="kx-text-"]),
.kx-bg-grey .kx-eyebrow:not([class*="kx-text-"]),
.kx-bg-image .kx-eyebrow:not([class*="kx-text-"]) {
  color: rgba(255, 255, 255, 0.6);
}

.kx-bg-teal .kx-eyebrow:not([class*="kx-text-"]) {
  color: rgba(0, 0, 0, 0.6);
}

/* ─── Headings ───────────────────────────────────────────────────────────── */
.kx-heading-xl {
  font-family: 'National 2 Condensed', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(60px, 9vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 28px;
}

.kx-heading-lg {
  font-family: 'National 2 Condensed', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.93;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 24px;
}

.kx-heading-md {
  font-family: 'National 2 Condensed', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.97;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.kx-card-heading {
  font-family: 'National 2 Condensed', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.02;
  text-transform: uppercase;
  margin: 8px 0 12px;
}

/* ─── Body copy ──────────────────────────────────────────────────────────── */
.kx-copy {
  font-family: 'Simplon Norm', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 16px;
}

.kx-copy:last-child {
  margin-bottom: 0;
}

.kx-copy-small {
  font-family: 'Simplon Norm', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
  opacity: 0.85;
}

.kx-copy-light {
  opacity: 0.75;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.kx-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.kx-center .kx-button-row {
  justify-content: center;
}

.kx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Simplon Norm', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  padding: 15px 32px;
  border: 2px solid transparent;
  transition: opacity 0.15s ease, transform 0.1s ease;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.kx-button:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}

.kx-button-primary {
  background-color: var(--kx-teal);
  color: var(--kx-black);
  border-color: var(--kx-teal);
}

.kx-button-secondary-light {
  background-color: transparent;
  color: var(--kx-black);
  border-color: var(--kx-black);
}

.kx-button-secondary-dark {
  background-color: transparent;
  color: var(--kx-white);
  border-color: var(--kx-white);
}

/* ─── Card grid ──────────────────────────────────────────────────────────── */
.kx-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.kx-card {
  border-radius: 20px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  background: var(--kx-white);
}

/* Cards on dark sections */
.kx-bg-black .kx-card,
.kx-bg-deep-teal .kx-card,
.kx-bg-grey .kx-card,
.kx-bg-image .kx-card {
  background: rgba(255, 255, 255, 0.07);
  color: var(--kx-white);
}

.kx-bg-teal .kx-card {
  background: rgba(0, 0, 0, 0.1);
}

/* Cards on light sections */
.kx-bg-soft .kx-card,
.kx-bg-cream .kx-card {
  background: var(--kx-white);
}

.kx-card-accent {
  border-top: 3px solid var(--kx-teal);
}

.kx-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}

.kx-card .kx-button {
  margin-top: auto;
  align-self: flex-start;
}

/* ─── Pills ──────────────────────────────────────────────────────────────── */
.kx-pill {
  display: inline-block;
  font-family: 'Simplon Norm', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(2, 178, 186, 0.1);
  color: var(--kx-teal);
  border: 1px solid rgba(2, 178, 186, 0.3);
  border-radius: 999px;
  padding: 4px 12px;
}

.kx-bg-black .kx-pill,
.kx-bg-deep-teal .kx-pill,
.kx-bg-grey .kx-pill,
.kx-bg-image .kx-pill {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ─── Font utilities ─────────────────────────────────────────────────────── */
.font-national,
.font-national-condensed-bold-italic {
  font-family: 'National 2 Condensed', sans-serif;
  font-weight: 700;
  font-style: italic;
}

.font-simplon         { font-family: 'Simplon Norm', sans-serif; font-weight: 400; }
.font-simplon-medium  { font-family: 'Simplon Norm', sans-serif; font-weight: 500; }
.font-simplon-bold    { font-family: 'Simplon Norm', sans-serif; font-weight: 500; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .kx-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .kx-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .kx-section        { padding: 64px 0; }
  .kx-section-compact { padding: 40px 0; }
  .kx-container      { padding: 0 24px; }
  .kx-card-grid      { grid-template-columns: 1fr; }
  .kx-card-grid-2    { grid-template-columns: 1fr; }
  .kx-panel,
  .kx-panel-dark     { padding: 32px 24px; }
  .kx-button-row     { flex-direction: column; }
  .kx-button         { text-align: center; justify-content: center; }
  .kx-stats-row      { flex-direction: column; gap: 24px; }
}

/* ─── Two-column card grid ───────────────────────────────────────────────── */
.kx-card-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ─── Stats row ──────────────────────────────────────────────────────────── */
.kx-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 48px;
}
.kx-stats-row > * {
  flex: 1;
  min-width: 120px;
}

/* ─── Flex end ───────────────────────────────────────────────────────────── */
.kx-flex-end {
  display: flex;
  justify-content: flex-end;
}

/* ─── Blockquote reset ───────────────────────────────────────────────────── */
blockquote {
  margin: 0 0 24px;
}

/* ─── Large quote text ───────────────────────────────────────────────────── */
.kx-copy-large {
  font-family: 'Simplon Norm', sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.5;
  margin: 0 0 24px;
}

/* ─── Panel colour variants ──────────────────────────────────────────────── */
.kx-panel-white     { background: var(--kx-white) !important; }
.kx-panel-soft      { background: var(--kx-soft) !important; }
.kx-panel-cream     { background: var(--kx-cream) !important; }
.kx-panel-teal      { background: var(--kx-teal) !important; }
.kx-panel-deep-teal { background: var(--kx-deep-teal) !important; color: var(--kx-white); }
.kx-panel-black     { background: var(--kx-black) !important; color: var(--kx-white); }
.kx-panel-grey      { background: var(--kx-grey) !important; color: var(--kx-white); }

/* ─── Card background colour variants ───────────────────────────────────── */
.kx-card-bg-white     { background: var(--kx-white) !important; }
.kx-card-bg-soft      { background: var(--kx-soft) !important; }
.kx-card-bg-cream     { background: var(--kx-cream) !important; }
.kx-card-bg-teal      { background: var(--kx-teal) !important; }
.kx-card-bg-deep-teal { background: var(--kx-deep-teal) !important; color: var(--kx-white); }
.kx-card-bg-black     { background: var(--kx-black) !important; color: var(--kx-white); }
.kx-card-bg-grey      { background: var(--kx-grey) !important; color: var(--kx-white); }
.kx-card-bg-glass     { background: rgba(255, 255, 255, 0.07) !important; }

/* ─── Card border variants ───────────────────────────────────────────────── */
.kx-card-border         { border: 1px solid rgba(0, 0, 0, 0.12); }
.kx-card-border-teal    { border: 2px solid var(--kx-teal); }
.kx-card-border-white   { border: 1px solid rgba(255, 255, 255, 0.2); }
.kx-card-border-black   { border: 1px solid rgba(0, 0, 0, 0.2); }
.kx-card-border-deep-teal { border: 2px solid var(--kx-deep-teal); }

/* ─── Full-bleed split halves ────────────────────────────────────────────── */
/* Used when column backgrounds are set — each half fills 50% of the section */
.kx-section-split {
  display: flex;
  width: 100%;
}

.kx-section-split-compact .kx-split-half {
  padding-top: 56px;
  padding-bottom: 56px;
}

.kx-split-half {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 96px 56px;
}

/* Push content toward the centre divide */
.kx-split-half:first-child {
  justify-content: flex-end;
}
.kx-split-half:first-child .kx-split-half-inner {
  max-width: 520px;
  width: 100%;
}
.kx-split-half:last-child .kx-split-half-inner {
  max-width: 520px;
  width: 100%;
}

/* Half background colours */
.kx-split-half-bg-white     { background: var(--kx-white); }
.kx-split-half-bg-soft      { background: var(--kx-soft); }
.kx-split-half-bg-cream     { background: var(--kx-cream); }
.kx-split-half-bg-teal      { background: var(--kx-teal); }
.kx-split-half-bg-deep-teal { background: var(--kx-deep-teal); color: var(--kx-white); }
.kx-split-half-bg-black     { background: var(--kx-black); color: var(--kx-white); }
.kx-split-half-bg-grey      { background: var(--kx-grey); color: var(--kx-white); }
.kx-split-half-bg-image {
  position: relative;
  background-color: var(--kx-split-overlay-color, var(--kx-deep-teal));
  color: var(--kx-white);
}
.kx-split-half-bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--kx-split-bg-image, none);
  background-size: cover;
  background-position: center;
  opacity: var(--kx-split-image-opacity, 0.35);
  pointer-events: none;
}
.kx-split-half-bg-image .kx-split-half-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .kx-section-split { flex-direction: column; }
  .kx-split-half { padding: 56px 24px; justify-content: flex-start; }
}

/* ─── FAQ accordion (script-free <details>/<summary>) ────────────────────── */
/* Colours are driven by per-instance CSS custom properties set on .kx-faq, with
   brand-safe fallbacks: --kx-faq-q-color, --kx-faq-a-color, --kx-faq-icon-bg,
   --kx-faq-icon-color, --kx-faq-divider. */
.kx-faq {
  max-width: 900px;
  margin: 48px auto 0;
}

.kx-faq-item {
  border-bottom: 1px solid var(--kx-faq-divider, rgba(200, 201, 199, 0.35));
}

.kx-faq-item:last-child {
  border-bottom: 0;
}

.kx-faq-q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-family: 'Simplon Norm', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--kx-faq-q-color, var(--kx-deep-teal));
}

.kx-faq-q::-webkit-details-marker { display: none; }
.kx-faq-q::marker { content: ''; }

.kx-faq-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kx-faq-icon-bg, var(--kx-teal));
  color: var(--kx-faq-icon-color, var(--kx-white));
  transition: transform 0.2s ease;
}

.kx-faq-icon svg { display: block; width: 14px; height: 14px; }

.kx-faq-item[open] .kx-faq-icon { transform: rotate(45deg); }

.kx-faq-a {
  padding: 0 52px 24px 0;
  font-family: 'Simplon Norm', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--kx-faq-a-color, var(--kx-grey));
}

.kx-faq-a p { margin: 0 0 12px; }
.kx-faq-a p:last-child { margin-bottom: 0; }
.kx-faq-a a { color: var(--kx-teal); text-decoration: underline; }
.kx-faq-a ul { list-style: disc; padding-left: 20px; margin: 0 0 12px; }
.kx-faq-a ol { list-style: decimal; padding-left: 20px; margin: 0 0 12px; }
.kx-faq-a li { margin-bottom: 4px; }
/* Simplon Norm's heaviest loaded weight is Medium (500) — match .font-simplon-bold
   rather than native <strong> 700 (which would render faux-bold). */
.kx-faq-a strong, .kx-faq-a b { font-weight: 500; }
.kx-faq-a em, .kx-faq-a i { font-style: italic; }

@media (max-width: 600px) {
  .kx-faq { margin-top: 32px; }
  .kx-faq-q { font-size: 16px; padding: 18px 0; }
  .kx-faq-icon { width: 32px; height: 32px; }
  .kx-faq-a { font-size: 14px; padding-right: 12px; }
}

/* ─── Logo / lockup image (KTWD-409) ─────────────────────────────────────── */
.kx-logo-lockup {
  margin: 0 0 28px;
  line-height: 0;
}

.kx-logo-lockup img {
  display: inline-block;
  width: var(--kx-logo-width, 200px);
  max-width: 100%;
  height: auto;
}

/* Explicit alignment — span the full row, then align with text-align.
   Without one of these the lockup follows the layout's own flow. */
.kx-logo-left,
.kx-logo-center,
.kx-logo-right  { align-self: stretch; }
.kx-logo-left   { text-align: left; }
.kx-logo-center { text-align: center; }
.kx-logo-right  { text-align: right; }

/* ─── Image banner (KTWD-409) ────────────────────────────────────────────── */
.kx-image-banner {
  display: block;
  width: 100%;
  height: auto;
}

.kx-image-banner-link {
  display: block;
  line-height: 0;
}

/* Full-bleed mode — the image runs edge-to-edge with no section padding. */
.kx-image-banner-flush {
  padding: 0;
}

/* ─── Card auto-fit (KTWD-411) — no phantom margin after the last element ── */
.kx-card > :last-child { margin-bottom: 0; }

/* ─── Rich body copy (KTWD-415) — honour paragraphs, line breaks, inline HTML ── */
.kx-copy-rich > :last-child { margin-bottom: 0; }
.kx-copy-rich p {
  font-family: 'Simplon Norm', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 16px;
}
.kx-copy-rich a { color: var(--kx-teal); text-decoration: underline; }
/* Simplon Norm's heaviest loaded weight is Medium (500) — avoid faux-bold 700. */
.kx-copy-rich strong, .kx-copy-rich b { font-weight: 500; }
.kx-copy-rich em, .kx-copy-rich i { font-style: italic; }
.kx-copy-rich ul { list-style: disc; padding-left: 20px; margin: 0 0 16px; }
.kx-copy-rich ol { list-style: decimal; padding-left: 20px; margin: 0 0 16px; }
.kx-copy-rich li { margin-bottom: 4px; }

/* ─── Hover-reveal cards (KTWD-414) — CSS-only; desktop hover / keyboard focus ── */
.kx-card-reveal {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  outline: none;
}
.kx-card-reveal:hover,
.kx-card-reveal:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}
/* The reveal animates height via grid-template-rows 0fr → 1fr (smooth, no fixed
   max-height) with the inner wrapper clipping overflow. */
.kx-card-reveal-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.35s ease;
}
.kx-card-reveal:hover .kx-card-reveal-body,
.kx-card-reveal:focus-within .kx-card-reveal-body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.kx-card-reveal-inner {
  overflow: hidden;
  min-height: 0;
}
.kx-card-reveal-inner > :first-child { margin-top: 12px; }
.kx-card-reveal-inner > :last-child { margin-bottom: 0; }
.kx-card-more { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) {
  .kx-card-reveal,
  .kx-card-reveal-body { transition: none; }
}
/* No hover on touch — reveal the detail by default on small screens. */
@media (max-width: 600px) {
  .kx-card-reveal-body { grid-template-rows: 1fr; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   10 NEW SECTION BLOCKS (KTWD-422) — appended per the design handoff.
   Blocks A–J for the HTML Section Builder. Relies on the tokens, fonts,
   container, section, eyebrow, heading, copy, button, pill and background
   helpers already defined above. Script-free; brand palette only.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. Pathway / step timeline ─────────────────────────────────────────── */
.kx-pathway { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.kx-pathway-step { position: relative; padding-top: 40px; }
/* Connector line colour + visibility are builder-overridable via custom props
   emitted on .kx-pathway (inline styles can't reach a ::before) — defaults keep
   the original translucent teal, always shown. */
.kx-pathway-step::before { content: ''; position: absolute; top: 16px; left: 0; right: -24px; height: 2px; background: var(--kx-pathway-line, rgba(2, 178, 186, 0.35)); display: var(--kx-pathway-line-display, block); }
.kx-pathway-step:last-child::before { right: 0; }
.kx-pathway-node { position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 999px; background: var(--kx-teal); color: var(--kx-black); display: flex; align-items: center; justify-content: center; font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; font-size: 16px; }
.kx-pathway-step h3 { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 22px; line-height: 1.05; margin: 0 0 8px; }
.kx-pathway-dur { font-family: 'Simplon Norm', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kx-teal); margin: 0 0 10px; }

/* ── B. Pricing / plan cards ────────────────────────────────────────────── */
.kx-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; align-items: stretch; }
.kx-plan { display: flex; flex-direction: column; border-radius: 20px; padding: 36px; background: var(--kx-white); border: 1px solid rgba(0, 0, 0, 0.12); }
.kx-bg-black .kx-plan, .kx-bg-deep-teal .kx-plan, .kx-bg-grey .kx-plan { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: var(--kx-white); }
.kx-plan-featured { background: var(--kx-teal); border-color: var(--kx-teal); color: var(--kx-black); transform: translateY(-8px); box-shadow: 0 24px 60px rgba(2, 178, 186, 0.35); }
.kx-bg-black .kx-plan-featured, .kx-bg-deep-teal .kx-plan-featured { color: var(--kx-black); }
.kx-plan-price { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; font-size: 56px; line-height: 0.9; margin: 18px 0 4px; }
.kx-plan-price small { font-family: 'Simplon Norm', sans-serif; font-weight: 400; font-style: normal; font-size: 14px; letter-spacing: 0.04em; opacity: 0.7; }
.kx-plan-features { list-style: none; padding: 22px 0 0; margin: 22px 0 28px; border-top: 1px solid currentColor; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.kx-plan-features li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.4; }
.kx-plan-features li::before { content: ''; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 999px; background: currentColor; opacity: 0.25; }
.kx-plan-features li::after { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.kx-plan .kx-button { margin-top: auto; }

/* ── C. Comparison table (CSS grid) ─────────────────────────────────────── */
.kx-compare { margin-top: 56px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px; overflow: hidden; }
.kx-bg-white .kx-compare, .kx-bg-soft .kx-compare { border-color: rgba(0, 0, 0, 0.12); }
.kx-compare-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; }
.kx-compare-row + .kx-compare-row { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.kx-bg-white .kx-compare-row + .kx-compare-row, .kx-bg-soft .kx-compare-row + .kx-compare-row { border-color: rgba(0, 0, 0, 0.08); }
.kx-compare-cell { padding: 20px 24px; font-size: 15px; line-height: 1.4; text-align: center; }
.kx-compare-cell:first-child { text-align: left; font-weight: 500; }
.kx-compare-head { background: rgba(2, 178, 186, 0.08); }
.kx-compare-head .kx-compare-cell { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 18px; }
.kx-compare-col-kx { background: rgba(2, 178, 186, 0.12); }
.kx-compare-mark { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-size: 20px; color: var(--kx-teal); }
.kx-compare-x { opacity: 0.35; font-size: 18px; }

/* ── D. Media + text feature rows (alternating) ─────────────────────────── */
.kx-media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.kx-media-row + .kx-media-row { margin-top: 80px; }
.kx-media-row-reverse .kx-media-figure { order: 2; }
.kx-media-figure { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
.kx-media-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── E. People / instructor grid ────────────────────────────────────────── */
.kx-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.kx-team-card { display: flex; flex-direction: column; }
.kx-team-photo { border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: 16px; }
.kx-team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kx-team-name { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 22px; line-height: 1; margin: 0 0 4px; }
.kx-team-role { font-size: 13px; letter-spacing: 0.04em; color: var(--kx-teal); text-transform: uppercase; }

/* ── F. Oversized editorial stat band (ghost numerals) ──────────────────── */
.kx-index-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; }
.kx-index-item { position: relative; padding: 36px 32px; overflow: hidden; }
.kx-index-item + .kx-index-item { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.kx-bg-white .kx-index-item + .kx-index-item, .kx-bg-soft .kx-index-item + .kx-index-item { border-color: rgba(0, 0, 0, 0.1); }
.kx-index-ghost { position: absolute; top: -18px; right: 8px; font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; font-size: 150px; line-height: 1; color: var(--kx-teal); opacity: 0.14; pointer-events: none; }
.kx-index-item h3 { position: relative; font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 26px; margin: 0 0 10px; }
.kx-index-item p { position: relative; font-size: 15px; line-height: 1.55; opacity: 0.85; margin: 0; }

/* ── G. Logo wall / social proof ────────────────────────────────────────── */
.kx-logo-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 56px; }
.kx-logo-cell { aspect-ratio: 5 / 2; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 12px; }
.kx-bg-black .kx-logo-cell, .kx-bg-deep-teal .kx-logo-cell, .kx-bg-grey .kx-logo-cell { border-color: rgba(255, 255, 255, 0.14); }
.kx-logo-cell img { max-width: 100%; max-height: 100%; height: auto; display: block; filter: grayscale(1); opacity: 0.75; transition: opacity 0.15s, filter 0.15s; }
.kx-logo-cell:hover img { filter: none; opacity: 1; }

/* ── H. Editorial image story (full-bleed overlay caption) ──────────────── */
.kx-story { position: relative; overflow: hidden; border-radius: 28px; min-height: clamp(440px, 60vh, 620px); display: flex; align-items: flex-end; padding: clamp(28px, 4vw, 56px); margin-top: 56px; background-color: var(--kx-deep-teal); }
.kx-story::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.8) 100%); }
.kx-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kx-story-body { position: relative; z-index: 2; max-width: 640px; color: var(--kx-white); }
.kx-story-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* ── I. Quote wall (CSS-columns masonry) ────────────────────────────────── */
.kx-quote-wall { columns: 3; column-gap: 24px; margin-top: 56px; }
.kx-quote-card { break-inside: avoid; border-radius: 20px; padding: 28px; margin: 0 0 24px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.kx-bg-white .kx-quote-card, .kx-bg-soft .kx-quote-card { background: var(--kx-white); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.kx-quote-card blockquote { margin: 0 0 16px; font-size: 17px; line-height: 1.5; }
.kx-quote-attr { display: flex; align-items: center; gap: 12px; }
.kx-quote-avatar { width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0; overflow: hidden; background: var(--kx-teal); }
.kx-quote-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kx-quote-who { font-family: 'Simplon Norm', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0.03em; }

/* ── J. Manifesto statement band ────────────────────────────────────────── */
.kx-statement { max-width: 1080px; margin: 0 auto; text-align: center; }
.kx-statement p { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.01em; margin: 0; }

/* ── New-blocks responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .kx-pathway, .kx-team-grid { grid-template-columns: 1fr 1fr; }
  /* Connector lines are always hidden once the pathway grid wraps — a line
     "continuing" onto the next row renders strangely; overrides the
     --kx-pathway-line-display builder toggle by cascade order. */
  .kx-pathway-step::before { display: none; }
  .kx-plan-grid, .kx-index-row { grid-template-columns: 1fr; }
  .kx-index-item + .kx-index-item { border-left: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); }
  .kx-media-row { grid-template-columns: 1fr; gap: 32px; }
  .kx-media-row-reverse .kx-media-figure { order: 0; }
  .kx-compare-cell { padding: 14px; font-size: 13px; }
  .kx-logo-wall { grid-template-columns: repeat(3, 1fr); }
  .kx-quote-wall { columns: 2; }
}
@media (max-width: 600px) {
  .kx-logo-wall { grid-template-columns: repeat(2, 1fr); }
  .kx-quote-wall { columns: 1; }
}

/* ─── Text colours (defined last to win specificity cascade) ─────────────── */
.kx-text-black     { color: var(--kx-black) !important; }
.kx-text-white     { color: var(--kx-white) !important; }
.kx-text-teal      { color: var(--kx-teal) !important; }
.kx-text-grey      { color: var(--kx-grey) !important; }
.kx-text-deep-teal { color: var(--kx-deep-teal) !important; }

/* ─── Embedded Video layout (KTWD-520) ──────────────────────────────────────
   Self-contained responsive video block. Ships in the reference sheet so it
   renders in the WCG preview AND in the pushed module (which inlines this sheet).
   Sizing/aspect/alignment are class-driven — no inline layout styles (cleanFragment
   keeps only colour + --kx-* custom props). */
.kx-embed-video { width: 100%; }
.kx-embed-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--kx-black, #15171b);
  border-radius: 16px;
  overflow: hidden;
}
.kx-embed-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
video.kx-embed-video__el { object-fit: cover; }
/* Aspect ratio */
.kx-embed-video--16x9 .kx-embed-video__frame { aspect-ratio: 16 / 9; }
.kx-embed-video--9x16 .kx-embed-video__frame { aspect-ratio: 9 / 16; }
.kx-embed-video--1x1  .kx-embed-video__frame { aspect-ratio: 1 / 1; }
.kx-embed-video--4x3  .kx-embed-video__frame { aspect-ratio: 4 / 3; }
/* Width — contained (max-width) vs full-bleed */
.kx-embed-video--contained .kx-embed-video__frame { max-width: 880px; }
.kx-embed-video--contained.kx-embed-video--9x16 .kx-embed-video__frame,
.kx-embed-video--contained.kx-embed-video--1x1  .kx-embed-video__frame { max-width: 480px; }
.kx-embed-video--full .kx-embed-video__frame { max-width: none; border-radius: 0; }
/* Alignment (only meaningful when contained) */
.kx-embed-video--left   .kx-embed-video__frame { margin-right: auto; }
.kx-embed-video--center .kx-embed-video__frame { margin-left: auto; margin-right: auto; }
.kx-embed-video--right  .kx-embed-video__frame { margin-left: auto; }
/* Empty state — builder preview before a source is set */
.kx-embed-video__frame--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.kx-embed-video__frame--empty span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  letter-spacing: 0.02em;
}