/* prose molecule (KAN-251, marketing/SaaS pack) — generic rich-text wrapper. */
.kl-prose {
  max-width: 44rem;
  color: var(--kl-ink, #0a0a0a);
  line-height: 1.7;
}
/* A prose block HOSTING the seeded nav or footer is a structural wrapper, not
   reading copy — the 44rem reading cap would strangle their full-width band
   breakouts (atoms.css), so lift it for exactly those two shapes. */
.kl-prose:has(> .kl-nav),
.kl-prose:has(> .kl-footer__grid) {
  max-width: none;
}
.kl-prose > :first-child { margin-top: 0; }
.kl-prose > :last-child { margin-bottom: 0; }
.kl-prose h2,
.kl-prose h3 { color: var(--kl-ink, #0a0a0a); line-height: 1.3; }
.kl-prose a { color: var(--kl-accent, #0a0a0a); }
.kl-prose ul,
.kl-prose ol { padding-left: 1.4rem; }


/* hero molecule (KAN-251, shared core; design-system v2). */
.kl-hero { display: grid; gap: 1.5rem; padding: var(--kl-section-pad, 2.5rem) 0; }
.kl-hero__copy { max-width: 46rem; }
.kl-hero .kl-heading { font-size: var(--kl-text-hero, clamp(2.4rem, 5.5vw, 4rem)); line-height: 1.05; }
.kl-hero__lede {
  margin: 1.1rem 0 1.6rem;
  font-size: var(--kl-text-lede, 1.15rem);
  line-height: 1.55;
  color: var(--kl-muted, #5c5c66);
  max-width: 38rem;
}
.kl-hero__actions { display: inline-flex; gap: 0.75rem; flex-wrap: wrap; }
.kl-hero__media .kl-img { width: 100%; }

/* full-bleed variant — scanned background image + directional scrim + copy over.
   Escapes the theme's .container (atoms.css band math) so the photo runs
   edge-to-edge; the copy re-aligns to the shared content column. */
.kl-hero--fullbleed {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: clamp(26rem, 68vh, 44rem);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 0;
  padding: var(--kl-band-pad, 3.5rem) max(1.5rem, calc(50vw - var(--kl-maxw, 72rem) / 2));
}
.kl-hero__scrim { position: absolute; inset: 0; z-index: 1; }
.kl-hero__copy--over {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 0;
  max-width: 42rem;
}
.kl-hero__copy--over .kl-heading,
.kl-hero__copy--over .kl-eyebrow,
.kl-hero__copy--over .kl-hero__lede { color: #fff; }
.kl-hero__copy--over .kl-hero__lede { color: rgba(255, 255, 255, 0.88); }
.kl-hero__copy--over .kl-heading em { color: color-mix(in srgb, var(--kl-accent, #6d5efc) 45%, #ffffff); }
/* over a photo the primary action must pop — white chip, ink label */
.kl-hero__copy--over .kl-btn--primary { background: #fff; color: var(--kl-ink, #0f0f12); }
.kl-hero__copy--over .kl-btn--secondary { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85); }

@media (max-width: 40rem) {
  .kl-hero__copy--over { padding: 0; }
  .kl-hero--fullbleed { min-height: clamp(20rem, 72vh, 32rem); }
}


/* section container (grid row of feature cells; design-system v2). The cells
   themselves are .kl-feature articles styled by kahu_feature/view.css; this
   file lays them out + paints the section's surface band. Column count is
   data-driven via the inline --kl-cols custom prop. */
.kl-section { padding: var(--kl-section-pad, 2.5rem) 0; }
.kl-section > .kl-heading {
  margin: 0 0 2rem;
  font-size: var(--kl-text-h2, clamp(1.75rem, 3.2vw, 2.5rem));
}
.kl-section__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(var(--kl-cols, 3), minmax(0, 1fr));
  align-items: start;
}

/* surface bands (tint/dark) escape the container per atoms.css band math */
.kl-section--tint, .kl-section--dark {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--kl-band-pad, 3.5rem) max(1.5rem, calc(50vw - var(--kl-maxw, 72rem) / 2));
}

/* Cells already render their own image/icon + copy; give the media a consistent
   frame inside the grid so mixed image/icon rows line up. */
.kl-section__grid .kl-feature { height: 100%; }
.kl-section__grid .kl-feature__media .kl-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--kl-radius, 12px);
}
@media (max-width: 900px) {
  .kl-section__grid { grid-template-columns: repeat(min(2, var(--kl-cols, 3)), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kl-section__grid { grid-template-columns: 1fr; }
}


/* image_text_split molecule (KAN-251, shared core; design-system v2). */
.kl-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: var(--kl-section-pad, 2.5rem) 0;
}
.kl-split--right .kl-split__media { order: 2; }
.kl-split__media .kl-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--kl-radius, 12px);
}
.kl-split__copy .kl-heading { font-size: var(--kl-text-h2, clamp(1.75rem, 3.2vw, 2.5rem)); }
.kl-split__copy .kl-split__body {
  margin: 0.85rem 0 1.4rem;
  color: var(--kl-muted, #5c5c66);
  line-height: 1.65;
  max-width: 60ch;
}

/* surface bands (tint/dark) escape the container per atoms.css band math */
.kl-split--tint, .kl-split--dark {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--kl-band-pad, 3.5rem) max(1.5rem, calc(50vw - var(--kl-maxw, 72rem) / 2));
}

/* no-image variant: a deliberate centered statement band, not a half-empty grid */
.kl-split--noimage {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.kl-split--noimage .kl-split__copy { max-width: 46rem; }
.kl-split--noimage .kl-split__copy .kl-split__body { margin-inline: auto; }
/* a light no-image split still reads as a band — give it the soft surface */
.kl-split--noimage:not(.kl-split--dark):not(.kl-split--tint) {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--kl-band-pad, 3.5rem) max(1.5rem, calc(50vw - var(--kl-maxw, 72rem) / 2));
  background: var(--kl-surface, #f6f6f8);
}

@media (max-width: 640px) {
  .kl-split { grid-template-columns: 1fr; }
  .kl-split--right .kl-split__media { order: 0; }
}


/* cta_band molecule (KAN-251, shared core; design-system v2). Always a full-width
   band (it closes a page) — escapes the theme container per atoms.css band math. */
.kl-cta {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--kl-band-pad, 3.5rem) max(1.5rem, calc(50vw - var(--kl-maxw, 72rem) / 2));
  text-align: center;
  border-radius: 0;
}
.kl-cta .kl-heading { font-size: var(--kl-text-h2, clamp(1.75rem, 3.2vw, 2.5rem)); }
.kl-cta--default { background: var(--kl-surface, #f6f6f8); }
/* accent variant: soft brand wash by default; the committed colour strategy
   (buildBrandCss) overrides --kl-cta-accent-* to a solid brand drench. */
.kl-cta--accent {
  background: var(--kl-cta-accent-bg, var(--kl-accent-tint, #f5f3ff));
  color: var(--kl-cta-accent-ink, inherit);
}
.kl-cta--accent .kl-heading,
.kl-cta--accent .kl-heading em,
.kl-cta--accent .kl-eyebrow,
.kl-cta--accent .kl-cta__body,
.kl-cta--accent .kl-cta__reassure { color: var(--kl-cta-accent-ink, inherit); }
.kl-cta--accent .kl-btn--primary {
  background: var(--kl-cta-btn-bg, var(--kl-ink, #0f0f12));
  color: var(--kl-cta-btn-ink, #fff);
}
.kl-cta--accent .kl-btn--secondary {
  color: var(--kl-cta-accent-ink, var(--kl-ink, #0f0f12));
  box-shadow: inset 0 0 0 1.5px currentColor;
}
/* dark variant colours come from the shared dark-context rules in atoms.css */
.kl-cta__body { margin: 0.85rem auto 1.5rem; max-width: 44rem; line-height: 1.6; }
.kl-cta__actions { display: inline-flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.kl-cta__reassure { margin-top: 1rem; font-size: 0.85rem; color: var(--kl-muted, #5c5c66); }