/* ============================================================================
   Kairos One — Marketing design system (public site: /platform /advisory /about
   /approach /contact /for/* /demo /advisory/*).

   This is the public site's design-token / source stylesheet, so it can use
   gradients, clamp display type, and brand color freely. The public pages reference
   these `mk-*` classes and stay clean of hardcoded font-sizes/hex.

   Visual language: a premium B2B look — deep navy brand-gradient heroes with a soft
   glow + grid, light content sections with hover-lift cards and a gradient icon chip,
   and a brand-gradient closing CTA. Brand color = --brand-ink (#15406b) /
   --brand-accent (#2e86d6); everything else flows from theme tokens (light/dark aware).
   ============================================================================ */

:root {
  --mk-ink: var(--brand-ink);
  --mk-accent: var(--brand-accent);
  /* literal navy — safe to use where --brand-ink is locally overridden (e.g. the
     transparent header re-points --brand-ink to white to flip the wordmark). */
  --mk-navy: #15406b;
  --mk-grad: linear-gradient(120deg, var(--brand-ink) 0%, #1d5d8f 45%, var(--brand-accent) 100%);
  --mk-grad-soft: linear-gradient(120deg, color-mix(in srgb, var(--brand-ink) 14%, transparent), color-mix(in srgb, var(--brand-accent) 14%, transparent));
  --mk-container: 76rem;
  --mk-radius: 1.1rem;
  --mk-shadow: 0 1px 2px rgba(7, 26, 47, 0.06), 0 12px 30px -12px rgba(7, 26, 47, 0.18);
  --mk-shadow-lift: 0 2px 4px rgba(7, 26, 47, 0.08), 0 26px 50px -18px rgba(21, 64, 107, 0.36);
}

.mk-page {
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
}

.mk-container {
  width: min(100%, var(--mk-container));
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.75rem);
}

/* ---- Buttons --------------------------------------------------------------- */
.mk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  padding: 0.72rem 1.3rem;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.mk-btn--solid {
  background: var(--brand-ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(21, 64, 107, 0.16);
}

.mk-btn--solid:hover {
  background: color-mix(in srgb, var(--brand-ink) 90%, #000);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -6px rgba(21, 64, 107, 0.5);
}

.mk-btn--ghost {
  border-color: var(--border);
  color: var(--foreground);
  background: transparent;
}

.mk-btn--ghost:hover {
  background: var(--muted);
  transform: translateY(-2px);
}

.mk-btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.mk-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.mk-btn--lg {
  padding: 0.85rem 1.6rem;
  font-size: 1.05rem;
}

/* ---- Hero (dark, brand gradient) ------------------------------------------ */
.mk-hero {
  position: relative;
  overflow: hidden;
  background: var(--mk-grad);
  color: #fff;
  isolation: isolate;
}

.mk-hero::before { /* soft radial glow */
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 120%;
  background: radial-gradient(60% 60% at 75% 10%, rgba(120, 190, 255, 0.45), transparent 60%),
              radial-gradient(50% 50% at 10% 90%, rgba(46, 134, 214, 0.4), transparent 60%);
  z-index: -1;
}

.mk-hero::after { /* faint grid */
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 80% at 50% 30%, #000 30%, transparent 75%);
  z-index: -1;
}

.mk-hero__inner {
  width: min(100%, var(--mk-container));
  margin-inline: auto;
  /* extra top padding clears the now-fixed PublicSiteHeader overlaying the hero */
  padding: clamp(6rem, 9vw, 9rem) clamp(1.25rem, 4vw, 2.75rem) clamp(3rem, 7vw, 6rem);
}

/* Light gradient keyword accent — pops on the dark hero (a navy gradient would vanish). */
.mk-grad-text {
  background: linear-gradient(120deg, #ffffff 0%, #a8d1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mk-hero--center .mk-hero__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mk-hero__title {
  margin: 1.1rem 0 0;
  max-width: 20ch;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.mk-hero--center .mk-hero__title { max-width: 18ch; }

.mk-hero__lede {
  margin-top: 1.4rem;
  max-width: 46rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.65;
}

.mk-hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.mk-hero--center .mk-hero__actions { justify-content: center; }

/* eyebrow pill */
.mk-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* hero sector/credential tag row */
.mk-hero__meta {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mk-hero--center .mk-hero__meta { justify-content: center; }

.mk-hero__meta-tag {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
}

/* ---- Sections -------------------------------------------------------------- */
.mk-section {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.mk-section--tint {
  background:
    radial-gradient(60% 80% at 100% 0, color-mix(in srgb, var(--brand-accent) 7%, transparent), transparent 70%),
    color-mix(in srgb, var(--brand-ink) 4%, var(--background));
}

.mk-head { max-width: 44rem; }
.mk-head--center { margin-inline: auto; text-align: center; }

.mk-eyebrow {
  color: var(--brand-accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mk-title {
  margin-top: 0.7rem;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--foreground);
}

.mk-lede {
  margin-top: 1rem;
  color: var(--muted-foreground);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
}

/* ---- Card grid ------------------------------------------------------------- */
.mk-grid {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.mk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.mk-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--mk-radius);
  background: var(--card);
  padding: 1.6rem;
  box-shadow: var(--mk-shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.mk-card::before { /* top accent line, reveals on hover */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--mk-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.mk-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--mk-shadow-lift);
  border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border));
}

.mk-card:hover::before { transform: scaleX(1); }

.mk-card__icon {
  display: inline-flex;
  width: 2.9rem;
  height: 2.9rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  background: var(--mk-grad);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(46, 134, 214, 0.7);
}

.mk-card__icon svg { width: 1.5rem; height: 1.5rem; }

.mk-card__title {
  margin: 1rem 0 0.45rem;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--foreground);
}

.mk-card__copy {
  color: var(--muted-foreground);
  font-size: 0.96rem;
  line-height: 1.65;
}

.mk-card__tag {
  color: var(--brand-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mk-card__meta {
  display: block;
  margin-top: 1rem;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 600;
}

.mk-card__link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--brand-accent);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.mk-card__link:hover { text-decoration: underline; text-underline-offset: 0.18rem; }

/* ---- Feature bands (numbered "how it fits together") ----------------------- */
.mk-features {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.mk-feature__num {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: var(--mk-grad-soft);
  color: var(--brand-ink);
  font-size: 1.05rem;
  font-weight: 800;
}

.mk-feature__title {
  margin: 0.9rem 0 0.45rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--foreground);
}

.mk-feature__copy {
  color: var(--muted-foreground);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* ---- Split band (text + side card) ----------------------------------------- */
.mk-split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .mk-split { grid-template-columns: 1.1fr 0.9fr; }
}

.mk-panel {
  border: 1px solid var(--border);
  border-radius: var(--mk-radius);
  background: var(--card);
  padding: 1.8rem;
  box-shadow: var(--mk-shadow);
}

.mk-panel__title { margin: 0 0 0.6rem; font-size: 1.2rem; font-weight: 700; color: var(--foreground); }
.mk-panel__copy { color: var(--muted-foreground); font-size: 0.98rem; line-height: 1.7; }

/* ---- Tags / badges --------------------------------------------------------- */
.mk-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }

.mk-tag {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  background: var(--card);
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 600;
}

.mk-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }

.mk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, var(--border));
  border-radius: 0.7rem;
  padding: 0.55rem 0.9rem;
  background: var(--mk-grad-soft);
  color: var(--brand-ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.mk-badge svg { width: 1.05rem; height: 1.05rem; }

/* ---- Long-form article (about / approach) ---------------------------------- */
.mk-article {
  width: min(100%, 52rem);
  margin-inline: auto;
}

.mk-article__block { margin-top: 2.5rem; }

.mk-article__block h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.mk-article__block h2 + p { margin-top: 0.8rem; }

.mk-article__block p {
  margin-top: 0.9rem;
  color: var(--muted-foreground);
  font-size: 1.05rem;
  line-height: 1.8;
}

.mk-article__lead {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
  line-height: 1.6 !important;
  color: var(--foreground) !important;
}

/* ---- CTA band -------------------------------------------------------------- */
.mk-cta {
  position: relative;
  overflow: hidden;
  background: var(--mk-grad);
  color: #fff;
}

.mk-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 120% at 80% 0, rgba(120, 190, 255, 0.5), transparent 60%);
}

.mk-cta__inner {
  position: relative;
  width: min(100%, var(--mk-container));
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.mk-cta__title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.mk-cta__sub {
  max-width: 40rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

/* ---- Split hero with product preview --------------------------------------- */
.mk-hero--split .mk-hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .mk-hero--split .mk-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}

.mk-hero__visual { perspective: 1400px; }

/* Abstract product preview — a "screenshot" built in CSS (no asset needed): dark
   window chrome over a light app body with KPI tiles + a mini chart. */
.mk-mock {
  border-radius: 0.9rem;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.2);
  transform: rotateY(-9deg) rotateX(3deg);
  animation: mk-float 7s ease-in-out infinite;
}

.mk-mock__bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: #0f3354;
}

.mk-mock__bar span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.mk-mock__body { padding: 1.2rem; }

.mk-mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mk-mock__eyebrow {
  color: #1d5d8f;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mk-mock__grade {
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  background: var(--mk-grad-soft);
  color: #15406b;
  font-size: 0.72rem;
  font-weight: 800;
}

.mk-mock__kpis {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.mk-mock__kpi {
  border: 1px solid #e7e2dc;
  border-radius: 0.6rem;
  padding: 0.6rem 0.7rem;
  background: #f7faff;
}

.mk-mock__kpi b { display: block; color: #102a43; font-size: 1.15rem; font-weight: 800; }
.mk-mock__kpi i { color: #6f6a64; font-size: 0.66rem; font-style: normal; }
.mk-mock__kpi--warn { background: #fff5ec; border-color: #f4d6b8; }
.mk-mock__kpi--warn b { color: #b5651d; }

.mk-mock__chart {
  margin-top: 1rem;
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  height: 5.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #eef1f4;
}

.mk-mock__chart span {
  flex: 1;
  border-radius: 0.3rem 0.3rem 0 0;
  background: linear-gradient(180deg, #2e86d6, #15406b);
  opacity: 0.85;
}

.mk-mock__chart span.is-flag { background: linear-gradient(180deg, #f0a35e, #c9772e); }

@keyframes mk-float {
  0%, 100% { transform: rotateY(-9deg) rotateX(3deg) translateY(0); }
  50% { transform: rotateY(-9deg) rotateX(3deg) translateY(-12px); }
}

/* ---- Proof strip (logo-free social proof: credentials + sectors) ----------- */
.mk-proofstrip {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-ink) 3%, var(--background));
}

.mk-proofstrip__inner {
  width: min(100%, var(--mk-container));
  margin-inline: auto;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.4rem;
}

.mk-proofstrip__label {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 700;
}

.mk-proofstrip__creds { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.mk-proofstrip__cred {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, var(--border));
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  background: var(--mk-grad-soft);
  color: var(--brand-ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.mk-proofstrip__cred svg { width: 0.85rem; height: 0.85rem; }

.mk-proofstrip__sectors {
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: 0.82rem;
}

/* ---- Review-themed product preview (Advisory hero) ------------------------- */
.mk-mock__rev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mk-mock__rev-title { color: #102a43; font-size: 0.92rem; font-weight: 800; }

.mk-mock__pill {
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  background: #e7f5ec;
  color: #1f7a44;
  font-size: 0.7rem;
  font-weight: 800;
}

.mk-mock__checks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }

.mk-mock__check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #eef1f4;
  border-radius: 0.55rem;
  padding: 0.5rem 0.7rem;
  color: #334e68;
  font-size: 0.82rem;
  font-weight: 600;
}

.mk-mock__check em { font-style: normal; font-weight: 800; }
.mk-mock__check--ok em { color: #1f7a44; }
.mk-mock__check--bad em { color: #b5651d; }

.mk-mock__flag {
  margin-top: 0.9rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: #fff5ec;
  color: #b5651d;
  font-size: 0.76rem;
  font-weight: 700;
}

/* neutral note line inside a mock (e.g. About credentials panel) */
.mk-mock__note {
  margin-top: 0.9rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 600;
}

/* ---- Two-path fork (landing: Platform vs Advisory) ------------------------- */
.mk-fork { padding-block: clamp(3rem, 6vw, 5rem); }

.mk-fork__grid {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .mk-fork__grid { grid-template-columns: repeat(2, 1fr); }
}

.mk-fork__card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--mk-radius);
  background: var(--card);
  padding: 1.9rem;
  box-shadow: var(--mk-shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.mk-fork__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--mk-grad);
}

.mk-fork__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--mk-shadow-lift);
  border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border));
}

.mk-fork__eyebrow {
  color: var(--brand-accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mk-fork__title { margin: 0.5rem 0 0.5rem; font-size: 1.4rem; font-weight: 800; color: var(--foreground); }
.mk-fork__copy { color: var(--muted-foreground); font-size: 0.98rem; line-height: 1.65; }
.mk-fork__actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---- Dark footer ----------------------------------------------------------- */
.mk-footer {
  position: relative;
  background: linear-gradient(180deg, #0b223a 0%, #15406b 100%);
  color: rgba(255, 255, 255, 0.82);
}

.mk-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--mk-grad);
}

.mk-footer__inner {
  width: min(100%, var(--mk-container));
  margin-inline: auto;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 2.75rem) 2.5rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 880px) {
  .mk-footer__inner { grid-template-columns: 1.1fr 2fr; }
}

.mk-footer__eyebrow {
  color: #9ecbff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Footer brand: static wordmark on the dark band. The footer doesn't re-tint the
   brand tokens (it's a fixed navy gradient), so re-point them here — ink flips to
   white, accent to the footer's light blue — same trick the transparent header uses. */
.mk-footer__wordmark {
  display: block;
  width: 158px;
  height: auto;
  margin-bottom: 0.55rem;
  --brand-ink: #ffffff;
  --brand-accent: #9ecbff;
}

.mk-footer__title {
  margin-top: 0.9rem;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.15;
}

.mk-footer__copy {
  margin-top: 0.9rem;
  max-width: 26rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  line-height: 1.7;
}

.mk-footer__cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.mk-footer__label {
  color: #9ecbff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mk-footer__links { margin-top: 1rem; display: grid; gap: 0.65rem; }

.mk-footer__links a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.mk-footer__links a:hover { color: #fff; }

.mk-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.15);
}

.mk-footer__bottom-inner {
  width: min(100%, var(--mk-container));
  margin-inline: auto;
  padding: 1.2rem clamp(1.25rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1rem;
  text-align: center;
}

.mk-footer__bottom-inner span { color: rgba(255, 255, 255, 0.55); font-size: 0.7rem; }
.mk-footer__bottom-inner a { color: rgba(255, 255, 255, 0.75); font-size: 0.7rem; text-decoration: none; }
.mk-footer__bottom-inner a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.15rem; }

/* ---- Micro-interactions ---------------------------------------------------- */
.mk-card:hover .mk-card__icon { transform: scale(1.07) rotate(-3deg); }
.mk-card__icon { transition: transform 0.22s ease; }

/* ---- Accessibility --------------------------------------------------------- */
/* Visible keyboard focus across all marketing interactive elements (the header and
   footer live inside .mk-page, so this covers nav, CTAs, cards, and footer links). */
.mk-page a:focus-visible,
.mk-page button:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip-to-content link — hidden until focused (first tab stop). */
.mk-skip {
  position: fixed;
  top: 0.6rem;
  left: 0.75rem;
  z-index: 200;
  transform: translateY(-160%);
  transition: transform 0.18s ease;
  background: #fff;
  color: #15406b;
  border-radius: 0.5rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px -10px rgba(7, 26, 47, 0.5);
}

.mk-skip:focus { transform: translateY(0); }

/* ---- Scroll reveal --------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--mk-d, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .mk-btn, .mk-card { transition: none; }
  .mk-mock { animation: none; }
}

/* ============================================================================
   Landing below-hero bands (2026): value -> trust -> action. Three premium
   sections built on the mk-* kit; reveal is driven by the landing page's own
   IntersectionObserver (data-reveal + --lp-delay). Being a design-source stylesheet,
   gradients + clamp display type are fine. These animations are INTENTIONALLY not motion-reduced
   (the landing's deliberate, on-scroll choreography) — matching the hero scroll.
   ============================================================================ */

/* Navy gradient keyword clip — the on-LIGHT sibling of mk-grad-text (which is for
   dark heroes). */
.lp-grad-ink {
  background: var(--mk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-sweep { background-size: 220% 100%; animation: lpSweep 1.25s ease-out 1 both; }
@keyframes lpSweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---- Band 1: value — count-up stat row + self-running review mock --------- */
.lp-statrow {
  margin-top: 1.7rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.lp-stat__num {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.lp-stat__label {
  display: block;
  margin-top: 0.4rem;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}
.lp-statnote { margin-top: 0.95rem; color: var(--muted-foreground); font-size: 0.74rem; font-style: italic; }
.lp-band__actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* the review mock fills its checklist in sequence, then the overrun flag drops */
.lp-reviewmock.is-visible .mk-mock__check { animation: lpRowIn 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.lp-reviewmock.is-visible .mk-mock__check:nth-child(1) { animation-delay: 0.2s; }
.lp-reviewmock.is-visible .mk-mock__check:nth-child(2) { animation-delay: 0.32s; }
.lp-reviewmock.is-visible .mk-mock__check:nth-child(3) { animation-delay: 0.48s; }
.lp-reviewmock.is-visible .mk-mock__flag { animation: lpRowIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 0.68s; }
@keyframes lpRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* sr-only text equivalent for the aria-hidden mock */
.lp-mock-equiv {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---- Band 2: trust — credential "wax-seal" stamp + service grid ---------- */
.lp-cred-reveal.is-visible .mk-proofstrip__cred { animation: lpStamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.lp-cred-reveal.is-visible .mk-proofstrip__cred:nth-child(1) { animation-delay: 0.18s; }
.lp-cred-reveal.is-visible .mk-proofstrip__cred:nth-child(2) { animation-delay: 0.3s; }
.lp-cred-reveal.is-visible .mk-proofstrip__cred:nth-child(3) { animation-delay: 0.42s; }
@keyframes lpStamp { 0% { transform: scale(0.62); } 100% { transform: scale(1); } }
/* proofstrip inside a content band: drop its full-bleed strip chrome, center it */
.lp-cred-reveal .mk-proofstrip { border-bottom: 0; background: transparent; }
.lp-cred-reveal .mk-proofstrip__inner { justify-content: center; padding-block: 0.6rem; }
.lp-cred-reveal .mk-proofstrip__sectors { display: none; } /* replaced by the .lp-sectors icon strip */
.lp-cred-note { margin-top: 1.4rem; text-align: center; color: var(--muted-foreground); font-size: 0.78rem; }

/* ---- Band 3: action — fork gradient bars draw inward, then lock ----------- */
.lp-fork-grid .mk-fork__card:nth-child(1)::before { transform: scaleX(0); transform-origin: left; }
.lp-fork-grid .mk-fork__card:nth-child(2)::before { transform: scaleX(0); transform-origin: right; }
.lp-fork-grid .mk-fork__card.is-visible::before { animation: lpBarIn 0.6s ease-out 0.1s forwards; }
@keyframes lpBarIn { to { transform: scaleX(1); } }

/* ---- Landing buttons: flat & minimalist (no gradient fills) -------------- */
/* Primary buttons are a single flat brand-navy fill — premium and high-contrast
   on the light header and bands. No gradient, no glow; just a hairline shadow and
   a small lift on hover. The hero sits on a blue field, so its primary button
   flips to an inverse white fill below for readability. */
.homepage-shell .pointer-btn--solid {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(21, 64, 107, 0.16);
}
.homepage-shell .pointer-btn--solid:hover {
  background: color-mix(in srgb, var(--brand-ink) 90%, #000);
  border-color: color-mix(in srgb, var(--brand-ink) 90%, #000);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -6px rgba(21, 64, 107, 0.5);
}
/* Hero primary: inverse white button reads cleanly on the blue hero field. */
.homepage-shell .pointer-hero__actions .pointer-btn--solid {
  background: #fff;
  border-color: #fff;
  color: var(--brand-ink);
  box-shadow: 0 1px 2px rgba(7, 26, 47, 0.18);
}
.homepage-shell .pointer-hero__actions .pointer-btn--solid:hover {
  background: #eef5fb;
  border-color: #eef5fb;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(7, 26, 47, 0.34);
}

/* ---- Band 2: sector "logo" strip (icon marks for the sectors served) ----- */
.lp-sectors {
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.6rem;
}
.lp-sector {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted-foreground);
  transition: color 0.2s ease, transform 0.2s ease;
}
.lp-sector:hover { color: var(--brand-ink); transform: translateY(-3px); }
.lp-sector__icon { display: inline-flex; width: 2.1rem; height: 2.1rem; color: var(--brand-accent); }
.lp-sector__icon svg { width: 100%; height: 100%; }
.lp-sector__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; }

/* ============================================================================
   Landing — workflow map. Light section: a flipping
   source cluster (left) feeds the Kairos review-&-compliance engine (center),
   which fans decision-ready outputs to the right. Dotted connectors flow.
   ========================================================================== */
.lp-flow-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 2.75rem;
  background:
    radial-gradient(70% 60% at 50% -8%, color-mix(in srgb, var(--brand-accent) 7%, transparent), transparent 62%),
    var(--background);
}

.lp-flow-head {
  max-width: 44rem;
  margin: 0 auto 1.25rem;
  text-align: center;
}
.lp-flow-eyebrow {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent);
}
.lp-flow-title {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.lp-flow-title span { color: var(--brand-accent); }
.lp-flow-lede {
  margin: 0 auto;
  max-width: 41rem;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* Break the diagram out of the centered container, page-centered at EVERY width.
   Margin-based (not transform) so the [data-reveal] translateY animation still works.
   Both the width and the centering offset clamp together (min()), so when the 1400px
   cap kicks in on wide screens the figure stays centered instead of spilling right. */
.lp-flow-figure { width: min(70vw, 1400px); margin-left: calc(50% - min(35vw, 700px)); }
.lp-flow-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-flow-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* connectors — dotted, with a continuous left-to-right flow */
.lp-flow-link {
  fill: none;
  stroke: color-mix(in srgb, var(--brand-accent) 55%, transparent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 0.5 8;
  opacity: 0;
  animation: lpFlowDash 1s linear infinite;
}
@keyframes lpFlowDash { to { stroke-dashoffset: -17; } }
.lp-flow-figure.is-visible .lp-flow-link {
  opacity: 1;
  transition: opacity 0.7s ease 0.25s;
}

/* small uppercase branch label */
.lp-flow-branchlabel {
  fill: var(--muted-foreground);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-anchor: middle;
}

/* branch 1 — flipping file-type tiles (app-icon style, colored) */
.lp-flow-tile {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.23s ease;
}
.lp-flow-ftile {
  filter: drop-shadow(0 3px 8px rgba(7, 26, 47, 0.16));
}
.lp-flow-ftile-bg {
  fill: #fff;
  stroke: var(--border);
  stroke-width: 1;
  filter: drop-shadow(0 3px 8px rgba(7, 26, 47, 0.1));
}
/* Kairos mark used on the in-house review-forms branch */
.lp-flow-kmark-ink { fill: var(--brand-ink); }
.lp-flow-kmark-accent { fill: var(--brand-accent); }
.lp-flow-ftile__label {
  fill: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-anchor: middle;
}

/* branch 2 & 3 — in-app forms / email node pills */
.lp-flow-innode__card {
  fill: var(--card);
  stroke: var(--border);
  stroke-width: 1;
  filter: drop-shadow(0 2px 6px rgba(7, 26, 47, 0.06));
}
.lp-flow-innode__icon path {
  fill: none;
  stroke: var(--brand-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-flow-innode__label {
  fill: var(--foreground);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-anchor: start;
}

/* exports destination pill (below the Data-out node) */
.lp-flow-dest {
  fill: var(--muted);
  stroke: var(--border);
  stroke-width: 1;
}
.lp-flow-dest__label {
  fill: var(--muted-foreground);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-anchor: middle;
}

/* orchestration sub-step chips (top row) */
.lp-flow-substep__card {
  fill: var(--card);
  stroke: var(--border);
  stroke-width: 1;
  filter: drop-shadow(0 2px 6px rgba(7, 26, 47, 0.06));
}
.lp-flow-substep__label {
  fill: var(--foreground);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
}

/* data-engineering stage node (accent-bordered) */
.lp-flow-de {
  fill: var(--card);
  stroke: var(--brand-accent);
  stroke-width: 1.5;
  filter: drop-shadow(0 4px 12px rgba(46, 134, 214, 0.14));
}
.lp-flow-de__icon path {
  fill: none;
  stroke: var(--brand-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-flow-de__label {
  fill: var(--foreground);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}
.lp-flow-de__sub {
  fill: var(--muted-foreground);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-anchor: middle;
}

/* central Kairos hub */
.lp-flow-hub {
  fill: var(--brand-ink);
  stroke: none;
  filter: drop-shadow(0 14px 30px rgba(21, 64, 107, 0.28));
}
.lp-flow-hub__name {
  fill: #fff;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-anchor: middle;
}
.lp-flow-hub__sub {
  fill: color-mix(in srgb, #6ec1e4 92%, #fff);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-anchor: middle;
}
/* expert-review icon inside the dark hub — light stroke to match the sub-caption */
.lp-flow-hub__icon path {
  fill: none;
  stroke: color-mix(in srgb, #6ec1e4 92%, #fff);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* output chips */
.lp-flow-out__card {
  fill: var(--card);
  stroke: var(--border);
  stroke-width: 1;
  filter: drop-shadow(0 2px 6px rgba(7, 26, 47, 0.06));
}
.lp-flow-out__icon path {
  fill: none;
  stroke: var(--brand-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-flow-out__label {
  fill: var(--foreground);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-anchor: start;
}

/* ── animated data flow: glowing dots riding each connector + glowing engine nodes ── */
/* Group-level reveal gate (the per-dot opacity is driven by SMIL inside the SVG). */
.lp-flow-dots { opacity: 0; }
.lp-flow-figure.is-visible .lp-flow-dots {
  opacity: 1;
  transition: opacity 0.6s ease 0.4s;
}
.lp-flow-dot {
  fill: var(--brand-accent);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--brand-accent) 90%, transparent));
}

/* Pulsing border glow on the three active engine nodes. Both keyframe stops carry
   two drop-shadows (the glow one starts at 0 blur/alpha) so the filter interpolates
   smoothly instead of snapping. Staggered delays keep them from pulsing in unison. */
@keyframes lpFlowNodeGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 0 color-mix(in srgb, var(--brand-accent) 0%, transparent))
      drop-shadow(0 4px 12px rgba(46, 134, 214, 0.14));
  }
  50% {
    filter:
      drop-shadow(0 0 8px color-mix(in srgb, var(--brand-accent) 75%, transparent))
      drop-shadow(0 4px 12px rgba(46, 134, 214, 0.18));
  }
}
@keyframes lpFlowCardGlow {
  0%, 100% {
    stroke: var(--border);
    filter:
      drop-shadow(0 0 0 color-mix(in srgb, var(--brand-accent) 0%, transparent))
      drop-shadow(0 2px 6px rgba(7, 26, 47, 0.06));
  }
  50% {
    stroke: var(--brand-accent);
    filter:
      drop-shadow(0 0 7px color-mix(in srgb, var(--brand-accent) 70%, transparent))
      drop-shadow(0 2px 6px rgba(7, 26, 47, 0.06));
  }
}
.lp-flow-figure.is-visible .lp-flow-de {
  animation: lpFlowNodeGlow 2.6s ease-in-out infinite;
}
.lp-flow-figure.is-visible .lp-flow-orch .lp-flow-innode__card {
  animation: lpFlowCardGlow 2.6s ease-in-out 0.8s infinite;
}
.lp-flow-figure.is-visible .lp-flow-dataout .lp-flow-innode__card {
  animation: lpFlowCardGlow 2.6s ease-in-out 1.6s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lp-flow-dots { display: none; }
  .lp-flow-de,
  .lp-flow-orch .lp-flow-innode__card,
  .lp-flow-dataout .lp-flow-innode__card { animation: none; }
}

@media (max-width: 720px) {
  .lp-flow-section { padding-block: 3.5rem; }
  .lp-flow-out__label,
  .lp-flow-innode__label { font-size: 17px; }
  .lp-flow-branchlabel { font-size: 14px; }
}

/* =====================================================================================
   "The team behind it" — dark Linear-style trust band.
   Three isometric wireframe figures draw in on scroll. Hardcoded hex + exact px are
   intentional (this is a token/style file, lint-exempt) so the SVG geometry and the dark
   navy palette — shared with the product-tour band directly above it — stay pixel-exact.
   ===================================================================================== */
.tf-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
  background: radial-gradient(120% 90% at 50% -10%, #12335f 0%, #0b1f3e 46%, #060e20 100%);
  color: #cfe0f5;
}

/* faint blue graph-paper grid, masked to a soft vignette (mirrors the product tour) */
.tf-band__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(91, 155, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 155, 255, 0.08) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 34%, #000, transparent 82%);
  mask-image: radial-gradient(72% 62% at 50% 34%, #000, transparent 82%);
}

.tf-band .mk-container { position: relative; z-index: 1; }
.tf-band .mk-eyebrow { color: #6fb2ec; }
.tf-band .mk-title { color: #eef4fc; }

.tf-grid {
  margin-top: clamp(2.5rem, 5vw, 4.25rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.tf-card {
  position: relative;
  isolation: isolate;   /* scope the beam's stacking to this card */
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 187, 233, 0.14);
  border-radius: 16px;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: rgba(12, 28, 56, 0.32);
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── hover: a glowing dot orbits the card border ──────────────────────────────────────
   The inner .tf-card__beam-dot holds a conic gradient with ONE bright spot; it's spun by a
   plain transform: rotate() (universally supported — no @property), and the parent's ring
   mask lets the spot show ONLY on the 2.5px border ring, so it reads as a dot orbiting. */
.tf-card__beam {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 2.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.tf-card__beam-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  aspect-ratio: 1;            /* big square so the spot reaches every edge as it turns */
  margin: -110% 0 0 -110%;    /* centre it on the card */
  background: conic-gradient(
    from 0deg,
    transparent 330deg,
    rgba(150, 205, 255, 0.35) 342deg,
    rgba(214, 238, 255, 0.95) 351deg,
    #ffffff 356deg,
    rgba(214, 238, 255, 0.95) 361deg,
    transparent 372deg
  );
  filter: drop-shadow(0 0 4px rgba(170, 214, 255, 0.95));
}
.tf-card:hover .tf-card__beam { opacity: 1; }

.tf-card:hover {
  border-color: rgba(120, 190, 255, 0.32);
  background: rgba(16, 36, 70, 0.42);
  box-shadow: 0 12px 44px -16px rgba(60, 130, 230, 0.5);
}

/* Not gated on reduced-motion — same deliberate landing exception as the loops above. */
.tf-card:hover { transform: translateY(-4px); }
.tf-card:hover .tf-card__beam-dot { animation: tfSpin 3.5s linear infinite; }
@keyframes tfSpin { to { transform: rotate(360deg); } }

.tf-fig {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
}
.tf-fig svg { width: 82%; height: auto; overflow: visible; }

/* base wireframe stroke for every shape in a figure */
.tf-fig path,
.tf-fig ellipse {
  fill: none;
  stroke: rgba(206, 224, 245, 0.6);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* faint filled faces give the solids enough occlusion to read in 3-D */
.tf-fig .tf-face { fill: rgba(9, 22, 46, 0.5); }
.tf-fig .tf-face--top { fill: rgba(24, 48, 84, 0.5); }
/* chip-dot grids on the cube tops, and the dashed lid→stack connectors */
.tf-fig circle { fill: rgba(150, 186, 232, 0.62); stroke: none; }
.tf-fig .tf-dash { stroke: rgba(206, 224, 245, 0.3); stroke-width: 0.8; stroke-dasharray: 2 3.5; }

/* ── continuous, content-matched motion ───────────────────────────────────────────────
   Each figure loops FOREVER (not gated on scroll or JS), so the motion is always visible.
   Deliberately NOT gated on prefers-reduced-motion: this marketing surface animates for
   everyone, matching the landing's existing scroll-reveal exception (see landing.css /
   a11y.css). Parts rest fully in place, so with no CSS-animation support they stay static —
   never hidden. Every loop echoes its card's point. */
/* Credentialed practitioners — the stack keeps building: each slab lifts + settles in a
   slow wave up the stack, and the credential seal pulses like a verified stamp. */
.tf-fig--stack .tf-part {
  animation: tfRise 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.3s);
}
.tf-fig--stack .tf-seal ellipse {
  animation: tfSealPulse 5s ease-in-out infinite;
}

/* Judgment, productized — a slow "check" runs through the cubes in turn: each lifts +
   brightens in sequence, like the automated checks sweeping the modules. */
.tf-fig--cubes .tf-part {
  animation: tfCheck 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.6s);
}

/* Hands-on advisory — the document on the table gently lifts, as if being worked on, and
   the review check pulses like a hands-on sign-off. */
.tf-fig--advisory .tf-doc { animation: tfLift 5s ease-in-out infinite; }
.tf-fig--advisory .tf-check { animation: tfSealPulse 5s ease-in-out infinite; }
@keyframes tfRise {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes tfSealPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@keyframes tfCheck {
  0%, 55%, 100% { transform: translateY(0); opacity: 0.82; }
  25%           { transform: translateY(-5px); opacity: 1; }
}
@keyframes tfLift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ============================================================================
   Band 3: supplier diversity — readable copy on the left + a retro pixel "poster"
   on the right (Claude Fable homage, re-skinned to Kairos navy/blue). Left column
   is plain mk-* copy (max contrast). The right panel is a dark-navy card (mirrors
   the team band's gradient) holding a "Now showing" marquee, flashing MWBE tiles,
   and a <canvas> dot-field + dotted ladder + climbing pixel-dog ("certification in
   progress").
   ============================================================================ */
.fable-sd__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.fable-sd__copy { max-width: 34rem; }

/* the three points, as a clean readable list */
.fable-points {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.15rem;
}

.fable-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
}

.fable-point__glyph {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  background: var(--mk-grad-soft);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, transparent);
}
.fable-point__glyph svg { width: 1.35rem; height: 1.35rem; overflow: visible; }
.fable-point__glyph rect { fill: var(--brand-accent); }

.fable-point__title {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--foreground);
}
.fable-point__copy {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted-foreground);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* ---- The pixel poster (right) ---------------------------------------------- */
.fable-sd__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(29rem, 48vw, 39rem);
  border-radius: 1.15rem;
  border: 1px solid rgba(120, 165, 225, 0.22);
  background: radial-gradient(120% 90% at 50% -10%, #12335f 0%, #0b1f3e 46%, #060e20 100%);
  box-shadow: 0 30px 60px -30px rgba(8, 22, 46, 0.75), inset 0 1px 0 rgba(150, 190, 245, 0.08);
}

/* faint blue graph-paper grid, masked to a soft vignette (mirrors the team band) */
.fable-panel__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(91, 155, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 155, 255, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 82%);
  mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 82%);
}

.fable-panel__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fable-panel__sign {
  position: absolute;
  inset: clamp(1.1rem, 3vw, 1.8rem) 0 auto 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  pointer-events: none;
}

/* ---- Marquee frame: "Eligible" with a chase of edge bulbs ------------------- */
.fable-marquee {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 1.05rem;
  border: 2px solid rgba(110, 178, 236, 0.5);
  border-radius: 0.5rem;
  background: rgba(8, 22, 44, 0.66);
  box-shadow: 0 0 0 4px rgba(8, 22, 44, 0.55), 0 0 34px -8px rgba(46, 134, 214, 0.7);
}

.fable-marquee__label {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #cfe6ff;
  padding-left: 0.4em; /* balance the trailing letter-spacing */
}

.fable-marquee__bulbs {
  position: absolute;
  inset: -0.5rem 0.5rem auto 0.5rem;
  display: flex;
  justify-content: space-between;
}

.fable-marquee__bulb {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: rgba(150, 205, 255, 0.3);
  box-shadow: 0 0 5px rgba(120, 190, 255, 0.2);
  animation: fableBulb 1.4s steps(1, end) infinite;
  animation-delay: calc(var(--b, 0) * -0.12s);
}

@keyframes fableBulb {
  0%, 100% { background: rgba(150, 205, 255, 0.28); box-shadow: 0 0 5px rgba(120, 190, 255, 0.18); }
  18%      { background: #eaf5ff; box-shadow: 0 0 10px rgba(170, 215, 255, 0.95); }
}

/* ---- Flashing MWBE tiles --------------------------------------------------- */
.fable-tiles {
  display: flex;
  justify-content: center;
  gap: clamp(0.3rem, 1vw, 0.55rem);
}

.fable-tile {
  position: relative;
  width: clamp(2.4rem, 7vw, 3.7rem);
  aspect-ratio: 5 / 7;
}

.fable-tile__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 0.28rem;
  border: 1px solid rgba(110, 178, 236, 0.28);
  background: linear-gradient(180deg, #10294a 0%, #0b1e39 50%, #08182e 50%, #0d2140 100%);
  box-shadow: inset 0 1px 0 rgba(150, 190, 245, 0.08), 0 5px 12px -7px rgba(0, 0, 0, 0.7);
}

.fable-tile__seam {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.5);
  transform: translateY(-0.5px);
  pointer-events: none;
}

.fable-tile__glyph {
  width: 64%;
  height: auto;
  overflow: visible;
  /* start dark so the very first thing you see is the M→W→B→E power-up */
  opacity: 0.12;
  animation: fableFlash 2.4s steps(1, end) infinite;
  animation-delay: calc(var(--t, 0) * 0.3s);
}

.fable-tile__glyph rect { fill: #d3e9ff; }

/* MWBE lights up LEFT → RIGHT: one shared on/off cycle, staggered 0.3s per tile, so
   the letters power on M, W, B, E in sequence, burn together, then sweep off the same
   way. steps(1, end) gives the hard neon ON/OFF cut — no soft fade, unmistakable.
   Deliberately NOT reduced-motion gated: same marketing-motion exception as the rest
   of the landing bands (see the tf-* note above) — a static frame here reads broken. */
@keyframes fableFlash {
  0%   { opacity: 1;    filter: drop-shadow(0 0 9px rgba(170, 220, 255, 1)) drop-shadow(0 0 24px rgba(90, 160, 240, 0.75)); }
  62%  { opacity: 0.12; filter: none; }
  100% { opacity: 0.12; filter: none; }
}

/* ---- Responsive: stack, poster below the copy ------------------------------ */
@media (max-width: 860px) {
  .fable-sd__layout { grid-template-columns: 1fr; gap: 2.25rem; }
  .fable-sd__copy { max-width: none; }
  .fable-sd__panel { min-height: 24rem; }
}

.tf-card__title {
  position: relative;
  z-index: 1;
  margin: 0 0 0.4rem;
  font-size: 1.14rem;
  font-weight: 700;
  color: #eef4fc;
}
.tf-card__copy {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 32ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(198, 214, 236, 0.72);
  transition: color 0.4s ease;
}

/* the wireframe brightens with the border on hover */
.tf-fig path,
.tf-fig ellipse { transition: stroke 0.4s ease, fill 0.4s ease; }
.tf-card:hover .tf-fig path,
.tf-card:hover .tf-fig ellipse { stroke: rgba(170, 214, 255, 0.92); }
.tf-card:hover .tf-fig .tf-face { fill: rgba(28, 62, 116, 0.5); }
.tf-card:hover .tf-card__copy { color: rgba(214, 228, 248, 0.9); }

@media (max-width: 860px) {
  .tf-grid { grid-template-columns: 1fr; gap: 2.25rem; max-width: 26rem; margin-inline: auto; }
  .tf-fig svg { width: 66%; }
}