/*!
 * KX embed module stylesheet - v9  (KTWD-2552, brand teal everywhere)
 *
 * WHAT THIS IS. v8 (`kx-embed-modules.v8.css`), every byte after its header
 * unchanged, plus ONE delimited block appended at the end:
 *   Brand teal everywhere (v9) ... end Brand teal everywhere
 *
 * WHY. Warren (5 Nov 2026): the darker accessible teal #017F87 is replaced by
 * the brand teal #02B2BA everywhere on the site. That extends Design's
 * KTWD-1168 call (brand teal for CTAs) to small teal text and white-on-teal,
 * knowingly: #02B2BA is about 2.5:1 on white. v8 is live in production, so it
 * is frozen.
 *
 * PROVENANCE - do not edit this file by hand.
 *   base   : kx-embed-modules.v8.css, every byte after its provenance header
 *            unchanged (tests/unit/kx-embed-modules.test.ts proves it)
 *   source : the block is byte-identical to the same block at the end of
 *            kx-hq-hub public/styles/kx-style-reference.css
 *   classes: v8's set exactly; unlike earlier blocks this one deliberately
 *            restyles v8 rules, so every override names the v8 rule it replaces.
 *
 * BRAND. No black; teal is #02B2BA.
 *
 * WHY @font-face IS GONE. As v1-v8: `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 `...v10.css`, point
 * KX_EMBED_STYLESHEET at it, and let v9 and older 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%, 280px), 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 === */

/* === KX USA event rows, condensed (v6) === */
/* A row: [date | where | button], the live spots line (the span the spots filler
   adds after the Book link) under the where column. The date spans both lines. */
.kx-event-row { display: grid; grid-template-columns: minmax(64px, max-content) minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 14px; min-height: 0; padding: 10px 12px 10px 16px; }
.kx-event-row > .kx-event-row-date { grid-column: 1; grid-row: 1 / span 2; flex: none; font-size: 22px; line-height: 0.95; }
.kx-event-row-date > span:first-child:not(:last-child) { display: block; font-size: 32px; line-height: 0.9; }
.kx-event-row-date > span:last-child:not(:first-child) { display: block; margin-top: 5px; font-size: 15px; line-height: 1.1; letter-spacing: 0.02em; white-space: nowrap; }
.kx-event-row > .kx-event-row-where { grid-column: 2; grid-row: 1; align-self: end; font-size: 13px; line-height: 1.25; }
.kx-event-row > .kx-event-row-where:nth-last-child(-n + 2) { grid-row: 1 / span 2; align-self: center; }
.kx-event-row-where strong, .kx-event-row-where b { font-size: 15px; }
.kx-event-row > .kx-button, .kx-event-row > .kx-event-row-status { grid-column: 3; grid-row: 1 / span 2; justify-self: end; white-space: nowrap; }
.kx-event-row > .kx-button + span { grid-column: 2; grid-row: 2; align-self: start; font-size: 12px; line-height: 1.2; }
.kx-event-row .kx-button { padding: 9px 14px; font-size: 12px; }
/* An on-sale row can carry a status line too ("19 seats left"): the status sits above the
   button in the right-hand column instead of on top of it. */
.kx-event-row > .kx-event-row-status:not(:last-child) { grid-row: 1; align-self: end; }
.kx-event-row > .kx-event-row-status + .kx-button { grid-row: 2; align-self: start; }
@media (max-width: 600px) {
  .kx-event-row { grid-template-columns: minmax(56px, max-content) minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 4px; }
  .kx-event-row > .kx-button, .kx-event-row > .kx-event-row-status { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; margin-top: 8px; }
  .kx-event-row > .kx-event-row-status { justify-self: start; }
  .kx-event-row > .kx-event-row-status:not(:last-child) { grid-row: 3; }
  .kx-event-row > .kx-event-row-status + .kx-button { grid-row: 4; margin-top: 2px; }
}
/* === end condensed event rows === */

/* === KX @ Home layouts (v7) === */
/* KTWD-2527/2528/2531: the Arketa Library layout, the promo-code callout, a link per step on
   Steps, and an optional icon on a section button. Additions only: every selector below names a
   class this block introduces. Brand: no black; small teal text and white-on-teal use #017F87. */

/* Promo-code callout (Call-to-Action Strip). Colour follows the text around it (currentColor),
   so it reads on white, teal and Cool Grey alike. The copy button is wired by the website. */
.kx-promo-code { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; padding: 10px 12px 10px 18px; border: 2px dashed currentColor; border-radius: 14px; }
.kx-promo-code-label { font-family: 'Simplon Norm', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.kx-promo-code-value { font-family: 'National 2 Condensed', sans-serif; font-weight: 700; font-style: italic; font-size: 26px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; user-select: all; }
.kx-promo-code-copy { font: inherit; font-family: 'Simplon Norm', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: inherit; background: transparent; border: 1.5px solid currentColor; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.kx-promo-code-copy:hover { opacity: 0.82; }
.kx-promo-code-copy:focus-visible, .kx-chip:focus-visible, .kx-arketa-search input:focus-visible { outline: 2px solid #017F87; outline-offset: 2px; }

/* Arketa Library: one Arketa video frame, a chip bar and an optional search, all aimed at the
   frame by its name (link and form `target`), so they work without JavaScript. */
.kx-arketa-library { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.kx-chip-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.kx-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1.5px solid #017F87; border-radius: 999px; background: #ffffff; color: #017F87; font-family: 'Simplon Norm', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; }
.kx-chip:hover { background: #f4f5f5; }
.kx-chip[aria-current="true"] { background: #017F87; color: #ffffff; }
.kx-arketa-search { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; margin: 0; }
.kx-arketa-search input { flex: 1 1 220px; min-height: 44px; padding: 10px 16px; border: 1.5px solid #c8c9c4; border-radius: 999px; background: #ffffff; color: #565F5F; font-family: 'Simplon Norm', sans-serif; font-size: 15px; }
.kx-arketa-search .kx-button { padding: 12px 22px; }
.kx-arketa-frame { display: block; width: 100%; min-height: var(--kx-arketa-height, 1100px); border: 0; border-radius: 16px; background: #ffffff; }
@media (max-width: 600px) {
  .kx-chip-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .kx-arketa-frame { min-height: var(--kx-arketa-height-mobile, 1400px); border-radius: 12px; }
}

/* Steps: an optional link under a step's copy. */
.kx-pathway-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: 'Simplon Norm', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #017F87; text-decoration: underline; text-underline-offset: 3px; }
.kx-pathway-cta.kx-text-white { color: #ffffff; }

/* A section button's icon (the hero's KTWD-2449 set plus Apple, for an App Store button): a
   mask in the label's colour, 1em square, before or after the label. Decorative (aria-hidden). */
.kx-button-icon { display: inline-block; flex: none; width: 1.15em; height: 1.15em; background-color: currentColor; -webkit-mask: var(--kx-icon) no-repeat center / contain; mask: var(--kx-icon) no-repeat center / contain; }
.kx-button-icon-start { margin-right: 0.55em; }
.kx-button-icon-end { margin-left: 0.55em; }
.kx-icon-arrow-right { --kx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.kx-icon-arrow-down { --kx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.kx-icon-arrow-up-right { --kx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.kx-icon-play { --kx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13L18.5 12z' fill='%23fff'/%3E%3C/svg%3E"); }
.kx-icon-calendar { --kx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.kx-icon-chevron-right { --kx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
.kx-icon-apple { --kx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M16.4 1.4c0 1.1-.4 2.2-1.2 3.1-.9.9-2 1.5-3.2 1.4V5.5c0-1.1.5-2.3 1.3-3.1.4-.4 1-.8 1.6-1.1.6-.3 1.2-.5 1.8-.5v.6zM20.9 17.2c-.3.8-.8 1.6-1.2 2.3-.7.9-1.2 1.6-1.6 1.9-.6.6-1.4.9-2.1.9-.5 0-1.2-.2-1.9-.5-.8-.3-1.4-.5-2.1-.5s-1.4.2-2.1.5c-.8.3-1.4.5-1.8.5-.7 0-1.4-.3-2.1-1-.5-.4-1-1.1-1.7-2-.7-1-1.3-2.2-1.8-3.6-.5-1.4-.7-2.9-.7-4.2 0-1.6.3-2.9 1-4.1.5-.9 1.3-1.6 2.1-2.1.9-.5 1.8-.8 2.9-.8.6 0 1.3.2 2.2.5.9.3 1.5.5 1.8.5.2 0 .9-.2 2-.6 1.1-.4 2-.5 2.7-.5 2 .2 3.5.9 4.5 2.3-1.8 1.1-2.7 2.6-2.6 4.5 0 1.5.6 2.8 1.6 3.8.5.5 1 .8 1.6 1.1-.1.4-.3.7-.4 1.1z'/%3E%3C/svg%3E"); }
.kx-icon-lock { --kx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E"); }

/* A solid white section button ("Solid White"), for teal or grey strips: accessible-teal label.
   Added on staging 5 Nov with the lock icon, before any production page used v7. */
.kx-button-white { background-color: #ffffff; border-color: #ffffff; color: #017F87; }
/* === end KX @ Home layouts === */

/* === Numbered Cards tones and compact (v8) === */
/* KTWD-2544/2545: two more Numbered Cards tones and a compact card size, for /us/own-a-studio.
   White: a white card (it also carries kx-card-bg-white, so it is white on v7 too).
   Outline: no fill, a light grey border; for white or light sections. */
.kx-number-card.kx-number-card-white { color: var(--kx-grey); }
.kx-number-card.kx-number-card-outline { background: transparent !important; border: 1.5px solid #C8C9C4; color: var(--kx-grey); }
.kx-number-card.kx-number-card-white .kx-number-card-number, .kx-number-card.kx-number-card-outline .kx-number-card-number { color: #017F87; }
/* Compact: small tiles, number above a short title, as many across as fit. */
.kx-number-cards.kx-number-cards-compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.kx-number-cards-compact .kx-number-card { min-height: 0; gap: 8px; padding: 18px 20px; border-radius: 16px; }
.kx-number-cards-compact .kx-number-card-number { font-size: 34px; }
.kx-number-cards-compact .kx-number-card h3, .kx-number-cards-compact .kx-number-card .kx-card-heading { font-family: 'Simplon Norm', sans-serif; font-size: 16px; font-weight: 600; font-style: normal; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.kx-number-cards-compact .kx-number-card p { font-size: 15px; }
@media (max-width: 767px) {
  .kx-number-cards.kx-number-cards-compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; margin-top: 28px; }
  .kx-number-cards-compact .kx-number-card { padding: 16px; }
}
/* === end Numbered Cards tones and compact === */

/* === Brand teal everywhere (v9) === */
/* KTWD-2552. Every #017F87 in v8, switched to brand #02B2BA. Same selectors,
   later in the file, so each override wins at equal specificity. The token
   covers the USA block (media, number and event cards); the rest are the KX @
   Home and Numbered Cards literals. */
:root { --kx-teal-a11y: #02B2BA; }
.kx-promo-code-copy:focus-visible, .kx-chip:focus-visible, .kx-arketa-search input:focus-visible { outline-color: #02B2BA; }
.kx-chip { border-color: #02B2BA; color: #02B2BA; }
.kx-chip[aria-current="true"] { background: #02B2BA; color: #ffffff; }
.kx-pathway-cta { color: #02B2BA; }
.kx-button-white { color: #02B2BA; }
.kx-number-card.kx-number-card-white .kx-number-card-number, .kx-number-card.kx-number-card-outline .kx-number-card-number { color: #02B2BA; }
/* === end Brand teal everywhere === */