/* ============================================================
   Multi Intelligence Platform — hero, three layout variations.
   Light mode, Tektome tokens only. Display type is the brand's
   Light (300) weight (the upload's heavy bold is converted to it).
   Scoped under .mph so the three artboards never collide.
   ============================================================ */

.mph, .mph * { box-sizing: border-box; }
.mph {
  font-family: var(--font-sans);
  color: var(--color-data-black);
  width: 100%;
  height: 100%;
}

/* ---- shared atoms ---- */
.mph-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  margin: 0;
}
.mph-title {
  font-weight: var(--fw-light);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-data-black);
  margin: 0;
  text-wrap: balance;
}
.mph-title .accent { color: var(--color-arch-purple); }
.mph-lede {
  color: var(--fg-secondary);
  line-height: 1.65;
  margin: 0;
  text-wrap: pretty;
}
.mph-caption {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-tertiary);
  margin: 0;
  text-wrap: pretty;
}
.mph-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================================================
   Variation A — Editorial (single column, left-aligned).
   The upload's layout, rebuilt on the brand's Light display type
   and lavender hero wash. Lineage as an inline mono row.
   ============================================================ */
.mph--editorial {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 84px;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--purple-50) 0%, rgba(236,236,252,0) 60%),
    var(--color-draft-white);
}
.mph--editorial .mph-eyebrow { margin-bottom: 24px; }
.mph--editorial .mph-title { font-size: 62px; max-width: 15ch; }
.mph--editorial .mph-lede { font-size: 18px; max-width: 64ch; margin-top: 30px; }
.mph--editorial .mph-lineage { margin-top: 40px; }
.mph--editorial .mph-caption { margin-top: 14px; max-width: 86ch; }
.mph--editorial .mph-actions { margin-top: 36px; }

.mph-lineage { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.mph-lineage__step {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--color-data-black);
}
.mph-lineage__step.is-active { color: var(--color-arch-purple); }
.mph-lineage__sep { color: var(--border-strong); display: inline-flex; }
.mph-lineage__sep svg { width: 18px; height: 12px; display: block; }

/* ============================================================
   Variation B — Split (copy left, generation ladder right).
   The lineage becomes a vertical stack of cards on a light-blue
   panel, with the fourth generation as a solid purple card.
   ============================================================ */
.mph--split {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 60px;
  align-items: center;
  padding: 60px 72px;
  background: var(--color-draft-white);
}
.mph--split .mph-eyebrow { margin-bottom: 22px; }
.mph--split .mph-title { font-size: 54px; max-width: 13ch; }
.mph--split .mph-actions { margin-top: 38px; }

.mph--split__panel {
  background: var(--bg-section-alt);
  border-radius: var(--radius-lg);
  padding: 40px 40px 34px;
}
.mph--split__panel .mph-lede { font-size: 16px; }
.mph-ladder { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mph-ladder__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.mph-ladder__num { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); color: var(--fg-tertiary); width: 24px; flex: 0 0 auto; }
.mph-ladder__name { font-size: 15px; font-weight: var(--fw-semibold); color: var(--color-data-black); letter-spacing: -0.01em; }
.mph-ladder__tag { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-tertiary); }
.mph-ladder__item.is-active { background: var(--color-arch-purple); border-color: var(--color-arch-purple); box-shadow: 0 14px 32px -16px rgba(81,86,219,0.7); }
.mph-ladder__item.is-active .mph-ladder__name { color: var(--color-draft-white); }
.mph-ladder__item.is-active .mph-ladder__num { color: rgba(255,255,255,0.7); }
.mph-ladder__item.is-active .mph-ladder__tag { color: rgba(255,255,255,0.82); }
.mph--split__panel .mph-caption { margin-top: 20px; }

/* ============================================================
   Variation C — Timeline (centered copy + generation band).
   Centered hero with a full-width light-blue band beneath that
   lays the four generations on a connected horizontal timeline.
   ============================================================ */
.mph--timeline { display: flex; flex-direction: column; background: var(--color-draft-white); }
.mph--timeline__top {
  /* Same light gradient at the top as the home page hero (opt2). */
  background:
    radial-gradient(120% 90% at 50% -10%, var(--purple-50) 0%, rgba(236,236,252,0) 60%),
    var(--color-draft-white);
  text-align: center;
  padding: clamp(64px, 8vw, 116px) 80px clamp(48px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mph--timeline__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.mph--timeline .mph-eyebrow { margin-bottom: 22px; }
.mph--timeline .mph-title { font-size: 56px; max-width: 19ch; }
.mph--timeline .mph-lede { font-size: 17.5px; max-width: 74ch; margin-top: 24px; }
.mph--timeline .mph-actions { margin-top: 32px; justify-content: center; }

.mph--timeline__band {
  /* Baked default (from the background tweak): Lavender → sky.
     --band-bg still overrides it live when the tweak is used. */
  background: var(--band-bg, linear-gradient(135deg, var(--purple-50), var(--color-sky-50)));
  padding: 40px 80px 44px;
  flex: 1;
}
/* On a bold purple band the gen cards stay white (dark text), only the
   caption flips to white for legibility. */
.mph--timeline__band.is-dark .mph-caption { color: rgba(255, 255, 255, 0.88); }

/* Centered call-to-action button beneath a section (Architecture, Graph). */
.mip-sectioncta { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 56px); }
.mph-gens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1040px; margin: 0 auto; }
.mph-gen {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px 20px;
}
.mph-gen::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='%23B9B9C6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  z-index: 2;
}
.mph-gen:last-child::after { display: none; }
.mph-gen__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); }
.mph-gen__name { font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--color-data-black); margin-top: 8px; line-height: 1.2; }
.mph-gen__note { font-size: 13px; line-height: 1.5; color: var(--fg-secondary); margin: 8px 0 0; text-wrap: pretty; }
.mph-gen--active { background: var(--color-arch-purple); border-color: var(--color-arch-purple); box-shadow: 0 16px 36px -18px rgba(81,86,219,0.75); }
.mph-gen--active .mph-gen__num { color: rgba(255,255,255,0.72); }
.mph-gen--active .mph-gen__name { color: var(--color-draft-white); }
.mph-gen--active .mph-gen__note { color: rgba(255,255,255,0.86); }
.mph--timeline__band .mph-caption { text-align: center; max-width: 86ch; margin: 26px auto 0; }