/*!
 * KX embed module stylesheet - v4  (KTWD-2448, the KX USA builder layouts)
 *
 * WHAT THIS IS. v3 (`kx-embed-modules.v3.css`, itself a copy of the HQ Hub's
 * `public/styles/kx-style-reference.css` at Hub commit 423f0d05) with ONE
 * appended block for the five KX USA builder layouts (L1-L5), delimited by
 *   / * === KX USA layouts L1–L5 (v4) === * /  …  / * === end KX USA layouts === * /
 *
 * PROVENANCE - do not edit this file by hand.
 *   base   : kx-embed-modules.v3.css, every byte after its provenance header
 *            unchanged (tests/unit/kx-embed-modules.test.ts proves it)
 *   block  : authored in this repo first (KTWD-2448, 2026-10-31) to the shared
 *            USA layouts contract, styled from the /us and /us/roadshow canvas
 *            designs, then reconciled with the Hub's markup (KTWD-2446/2447,
 *            31 Oct): the block is byte-identical in the Hub's reference CSS.
 *   sha256 : a7c09fb2737aed57 (first 16 of the Hub SOURCE file after the
 *            reconciliation; CRLF form, as v1-v3 record it)
 *   classes: 179 distinct .kx-* selectors (v3's 151 + 28 new)
 *   change : additions only. No v3 rule is edited, so no existing entry
 *            restyles; the new rules only match markup that carries a new class.
 *
 * BRAND, in the block. No black: dark surfaces are Cool Grey #565F5F. White
 * text sits on the ACCESSIBLE teal #017F87 (4.9:1), never on #02B2BA (2.5:1,
 * which fails even the 3:1 large-text bar). Teal text on white is #017F87.
 *
 * WHY @font-face IS GONE. As v1-v3: `src/app/globals.css` declares the faces.
 *
 * THE FILENAME IS VERSIONED, AND THAT IS THE WHOLE SAFETY MECHANISM.
 * NEVER revise this file in place once it is deployed. Ship `...v5.css`, point
 * KX_EMBED_STYLESHEET at it, and let v4, v3, v2 and v1 keep serving whatever
 * still depends on them. See v3's header and docs/architecture/GOTCHAS.md #18.
 *
 * The class manifest is pinned by tests/unit/kx-embed-modules.test.ts.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   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:      #565F5F;
}

/* ─── 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;
}

/* ── Video Grid (KTWD-1926) ─────────────────────────────────────────────────────
   Up to 12 videos in a grid. Each tile reuses the .kx-embed-video frame + aspect
   classes above. The column counts are custom-property hooks the builder sets on
   the grid as plain integers (desktop 2-5, tablet min(desktop, 3), phone 1-2), so a
   later column change needs no website release (the KTWD-1473 lesson). Additions
   only: no existing rule changes. */
.kx-video-grid { display: grid; grid-template-columns: repeat(var(--kx-video-cols, 2), minmax(0, 1fr)); align-items: start; gap: 32px 24px; margin-top: 56px; }
.kx-video-tile { display: flex; flex-direction: column; min-width: 0; }
.kx-video-title { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 22px; line-height: 1; margin: 14px 0 4px; }
.kx-video-caption { font-size: 14px; line-height: 1.45; opacity: 0.75; margin: 0; }
@media (max-width: 900px) { .kx-video-grid { grid-template-columns: repeat(var(--kx-video-cols-tablet, 2), minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .kx-video-grid { grid-template-columns: repeat(var(--kx-video-cols-mobile, 2), minmax(0, 1fr)); gap: 20px 12px; margin-top: 32px; }
  .kx-video-title { font-size: 16px; margin-top: 8px; }
  .kx-video-caption { font-size: 12px; }
}

/* === KX USA layouts L1–L5 (v4) === */
/* KTWD-2448 (website v4) reconciled with KTWD-2446 / KTWD-2447 (HQ Hub builder).
   This block is byte-identical in the Hub's kx-style-reference.css and the
   website's kx-embed-modules.v4.css, and every selector matches the markup the
   Hub's buildSection emits. The five KX USA builder layouts: cards-media (L1),
   cards-number (L2), event-cards (L3), event-list-form (L4) and split-form (L5).
   Section chrome (section, container, headings, buttons, backgrounds) is reused
   from the rules above; this block adds only what those cannot express.
   data-kx-* attributes are structure, never style hooks, so nothing here
   selects on them. Brand: no black (dark = Cool Grey #565F5F); white text only
   on the accessible teal #017F87 (4.9:1, never #02B2BA at 2.5:1); small teal
   text #017F87. 28 classes. */
:root {
  --kx-teal-a11y: #017F87;
  --kx-line:      #C8C9C4;
  --kx-stone:     #F0F0EF;
}

/* Phone gutters: 16px for containers holding a USA layout. Scoped with :has()
   so v3 entries keep their 24px container padding. */
@media (max-width: 600px) {
  .kx-container:has(.kx-media-cards, .kx-number-cards, .kx-event-cards, .kx-event-list-form, .kx-split-form) { padding: 0 16px; }
}

/* ── L1 Media Cards (cards · grid · media) ──────────────────────────────── */
.kx-media-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; margin-top: 40px; }
.kx-media-card { display: flex; flex-direction: column; min-width: 0; border-radius: 24px; overflow: hidden; background: var(--kx-teal-a11y); color: var(--kx-white); }
.kx-media-card-image { position: relative; aspect-ratio: 4 / 3; background: #E2E2E0; overflow: hidden; }
.kx-media-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kx-media-card-body { display: flex; flex-direction: column; gap: 16px; flex: 1; padding: 32px; }
.kx-media-card-body > * { margin: 0; }
.kx-media-card-body .kx-eyebrow { color: var(--kx-white); font-size: 13px; }
.kx-media-card-body h3, .kx-media-card-body .kx-card-heading { color: var(--kx-white); }
.kx-media-card-body p { font-size: 17px; line-height: 1.3; font-weight: 500; opacity: 1; }
.kx-media-card-meta { font-size: 15px; font-weight: 700; line-height: 1.3; }
.kx-media-card-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 8px; }
.kx-media-card-ctas .kx-button-primary { background-color: var(--kx-white); border-color: var(--kx-white); color: var(--kx-teal-a11y); }
.kx-media-card-ctas .kx-button-secondary-light,
.kx-media-card-ctas .kx-button-secondary-dark { background-color: transparent; border-color: var(--kx-white); color: var(--kx-white); }

/* ── L2 Numbered Cards (cards · grid · number) ──────────────────────────── */
/* The emitter sets each card's tone with an existing card-background class
   (teal, grey or soft). Teal is repointed to the accessible teal, because that
   class paints #02B2BA under white text; soft becomes the stone surface. */
.kx-number-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-top: 40px; }
.kx-number-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 220px; border-radius: 24px; padding: 32px; background: var(--kx-teal-a11y); color: var(--kx-white); }
.kx-number-card.kx-card-bg-teal { background: var(--kx-teal-a11y) !important; color: var(--kx-white); }
.kx-number-card.kx-card-bg-grey { color: var(--kx-white); }
.kx-number-card.kx-card-bg-soft { background: var(--kx-stone) !important; color: var(--kx-grey); }
.kx-number-card > * { margin: 0; }
.kx-number-card h3, .kx-number-card .kx-card-heading { color: inherit; font-size: 24px; }
.kx-number-card p { font-size: 16px; line-height: 1.3; }
.kx-number-card-number { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; font-size: 48px; line-height: 0.9; letter-spacing: -0.01em; }
.kx-number-card.kx-card-bg-soft .kx-number-card-number { color: var(--kx-teal-a11y); }

/* ── L3 Event Cards (cards · row · event) ───────────────────────────────── */
.kx-event-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-top: 40px; }
.kx-event-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 280px; box-sizing: border-box; border-radius: 24px; padding: 28px; background: var(--kx-white); border: 2px solid var(--kx-line); color: var(--kx-grey); }
.kx-event-card > * { margin: 0; }
.kx-event-card-pending { background: #F7F7F6; border-style: dashed; }
.kx-event-card-date { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kx-event-card-day { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; font-size: 64px; line-height: 0.85; text-transform: uppercase; color: var(--kx-teal-a11y); }
.kx-event-card-pending .kx-event-card-day { color: var(--kx-grey); }
.kx-event-card-when { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kx-teal-a11y); }
.kx-event-card-pending .kx-event-card-when { color: var(--kx-grey); }
.kx-event-card-where { font-size: 15px; line-height: 1.3; }
.kx-event-card-where strong, .kx-event-card-where b { display: block; font-size: 20px; font-weight: 700; }
.kx-event-card-meta { font-size: 15px; font-weight: 700; line-height: 1.3; }
.kx-event-card-pending .kx-event-card-meta:last-child { margin-top: auto; font-family: 'National 2 Condensed', sans-serif; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.kx-event-card-badge { flex: none; font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; border-radius: 4px; padding: 6px 10px; background: var(--kx-teal-a11y); color: var(--kx-white); }
.kx-event-card .kx-button { margin-top: auto; align-self: stretch; }
.kx-event-card .kx-button-primary { background-color: var(--kx-teal-a11y); border-color: var(--kx-teal-a11y); color: var(--kx-white); }

/* ── L4 Event List + Form (cards · row · event-list, + embed · grow) ────── */
/* Two columns: copy + GROW slot, then the schedule label + .kx-event-list. */
.kx-event-list-form { display: flex; flex-wrap: wrap; border-radius: 24px; overflow: hidden; background: var(--kx-grey); color: var(--kx-white); }
.kx-event-list-form > * { flex: 1 1 460px; min-width: 0; box-sizing: border-box; padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 20px; }
.kx-event-list-form > * > * { margin: 0; }
.kx-event-list-form > :last-child { box-shadow: inset 0 0 0 1.5px var(--kx-line); }
.kx-event-list-form h2, .kx-event-list-form h3 { color: var(--kx-white); }
.kx-event-list-form .kx-eyebrow:not([class*="kx-text-"]) { color: var(--kx-white); font-size: 13px; }
.kx-event-list { display: flex; flex-direction: column; gap: 12px; }
.kx-event-list > * { margin: 0; }
.kx-event-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-height: 44px; border: 1.5px solid var(--kx-white); background: rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 14px 16px 14px 20px; }
.kx-event-row-pending { border-style: dashed; border-color: var(--kx-line); background: transparent; }
.kx-event-row-date { flex: 0 0 120px; font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; font-size: 26px; line-height: 0.9; text-transform: uppercase; }
.kx-event-row-pending .kx-event-row-date { color: var(--kx-line); }
.kx-event-row-where { flex: 1 1 160px; font-size: 14px; line-height: 1.3; }
.kx-event-row-where strong, .kx-event-row-where b { display: block; font-size: 16px; font-weight: 600; }
.kx-event-row-status { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.kx-event-row .kx-button { padding: 12px 18px; }
.kx-event-row .kx-button-primary { background-color: var(--kx-white); border-color: var(--kx-white); color: var(--kx-teal-a11y); }

/* ── L5 Copy + Form (content-block · two-column · form, + embed · grow) ─── */
.kx-split-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: start; }
.kx-split-form > * { min-width: 0; }
.kx-split-form img { display: block; width: 100%; height: auto; border-radius: 24px; margin-top: 24px; }

/* ── Shared GROW slot (div.kx-form-card > iframe.kx-grow-frame) ─────────── */
/* The Hub's sanitiser drops the iframe's inline sizing, so the class carries it. */
.kx-form-card { box-sizing: border-box; border-radius: 24px; padding: clamp(16px, 3vw, 40px); background: var(--kx-white); color: var(--kx-grey); }
.kx-grow-frame { display: block; width: 100%; min-height: 480px; border: 0; }

/* Focus: visible on every surface these layouts use (white ring, grey halo). */
.kx-media-card a:focus-visible, .kx-number-card a:focus-visible, .kx-event-card a:focus-visible,
.kx-event-list-form a:focus-visible, .kx-split-form a:focus-visible {
  outline: 3px solid var(--kx-white); outline-offset: 2px; box-shadow: 0 0 0 6px var(--kx-grey);
}

@media (max-width: 900px) {
  .kx-split-form { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 600px) {
  .kx-media-cards, .kx-number-cards, .kx-event-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
  .kx-media-card-body, .kx-number-card { padding: 24px; }
  .kx-event-card { padding: 24px; min-height: 0; }
  .kx-event-list-form > * { flex-basis: 100%; padding: 24px 16px; }
  .kx-event-row-date { flex-basis: 100%; }
  .kx-media-card-ctas .kx-button, .kx-event-row .kx-button { width: 100%; }
}
/* The v3 button hover lifts by 1px; hold it still inside these layouts. */
@media (prefers-reduced-motion: reduce) {
  .kx-media-card .kx-button, .kx-event-card .kx-button, .kx-event-row .kx-button { transition: none; }
  .kx-media-card .kx-button:hover, .kx-event-card .kx-button:hover, .kx-event-row .kx-button:hover { transform: none; }
}
/* === end KX USA layouts === */