/* ============================================================
   Tektome — Requirements Management solution page
   Light mode, brand tokens only. Headings use the Light (300)
   display weight per the design system (the upload shows bold —
   the design system wins). Sections alternate white / light-gray.
   ============================================================ */

.rm-page {
  flex: 1;
  background: var(--color-draft-white);
  font-family: var(--font-sans);
  color: var(--fg-primary);
}

/* ---- shared section pieces ---- */
.rm-inner {
  max-width: var(--site-width, 1300px);
  margin: 0 auto;
  padding: 0 40px;
}
.rm-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 0 20px;
}
.rm-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-data-black);
  margin: 0;
  text-wrap: balance;
}
.rm-h2 .accent { color: var(--color-arch-purple); }
.rm-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 20px 0 0;
  text-wrap: pretty;
}
.rm-head--center { text-align: center; max-width: 760px; margin: 0 auto clamp(44px, 5vw, 64px); }
.rm-head--center .rm-sub { margin-left: auto; margin-right: auto; }

/* ===================== 1. HERO ===================== */
.rm-hero { background: var(--color-draft-white); }

/* ===================== HERO ENTRANCE ANIMATION =====================
   "Populate": copy fades in, then the requirement rows fill into the
   mock one by one. Baked in as the only hero animation. Gated on
   prefers-reduced-motion so reduced-motion shows the final state. */
@media (prefers-reduced-motion: no-preference) {
  .rm-hero .rm-hero__copy > * { animation: rmFade 0.5s var(--ease-out) backwards; }
  .rm-hero .rm-hero__badges { animation-delay: 40ms; }
  .rm-hero .rm-hero__title { animation-delay: 110ms; }
  .rm-hero .rm-hero__lede { animation-delay: 190ms; }
  .rm-hero .rm-mock { animation: rmFade 0.5s var(--ease-out) 0.2s backwards; }
  .rm-hero .rm-mock__list > * { animation: rmRise 0.5s var(--ease-out) backwards; }
  .rm-hero .rm-mock__list > *:nth-child(1) { animation-delay: 0.55s; }
  .rm-hero .rm-mock__list > *:nth-child(2) { animation-delay: 0.85s; }
  .rm-hero .rm-mock__list > *:nth-child(3) { animation-delay: 1.15s; }
  .rm-hero .rm-mock__list > *:nth-child(4) { animation-delay: 1.45s; }
  .rm-hero .rm-mock__list > *:nth-child(5) { animation-delay: 1.75s; }
  @keyframes rmFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rmRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
}
.rm-hero__inner {
  max-width: var(--site-width, 1300px);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) 40px clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}
.rm-hero__copy { max-width: 600px; }
.rm-hero__badges {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.rm-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rm-badge--primary {
  background: var(--purple-50);
  color: var(--color-arch-purple);
}
.rm-badge--primary .rm-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-arch-purple);
}
.rm-hero__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-data-black);
  margin: 0;
  text-wrap: balance;
}
.rm-hero__title .accent { color: var(--color-arch-purple); }
.rm-hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 24px 0 0;
  max-width: 50ch;
  text-wrap: pretty;
}

/* hero mock — requirements dashboard window */
.rm-mock {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.rm-mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--gray-50);
}
.rm-mock__dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.rm-mock__dot.r { background: #FF5F57; }
.rm-mock__dot.y { background: #FEBC2E; }
.rm-mock__dot.g { background: #28C840; }
.rm-mock__title {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-tertiary);
}
.rm-mock__body { display: grid; grid-template-columns: 130px 1fr; gap: 0; }
.rm-mock__nav {
  border-right: 1px solid var(--border-subtle);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rm-mock__nav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: 8px 0 2px;
}
.rm-mock__nav-label:first-child { margin-top: 0; }
.rm-mock__nav-item {
  font-size: 13px;
  color: var(--fg-secondary);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
}
.rm-mock__nav-item.is-active { background: var(--purple-50); color: var(--color-arch-purple); font-weight: var(--fw-medium); }
.rm-mock__list { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rm-req {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.rm-req__id { font-family: var(--font-mono); font-size: 11px; color: var(--color-arch-purple); font-weight: var(--fw-semibold); }
.rm-req__title { display: block; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--color-data-black); }
.rm-req__meta { display: block; font-size: 12px; color: var(--fg-tertiary); margin-top: 3px; line-height: 1.4; }
.rm-req__status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.rm-req__status--ok { background: var(--state-success-bg); color: var(--state-success-fg); }
.rm-req__status--pending { background: var(--state-warning-bg); color: var(--state-warning-fg); }
.rm-knowhow {
  background: var(--purple-50);
  border: 1px solid var(--purple-200);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-secondary);
  display: flex;
  gap: 10px;
}
.rm-knowhow__chip { width: 14px; height: 14px; border-radius: 3px; background: var(--color-arch-purple); flex: 0 0 auto; margin-top: 2px; }
.rm-knowhow strong { color: var(--color-data-black); font-weight: var(--fw-semibold); }

/* core concept band */
.rm-concept {
  background: var(--purple-100);
}
.rm-concept__inner {
  max-width: var(--site-width, 1300px);
  margin: 0 auto;
  padding: 28px 40px;
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 24px;
}
.rm-concept__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
}
.rm-concept__quote {
  font-size: 18px;
  line-height: 1.5;
  font-style: italic;
  color: var(--purple-900);
  margin: 0;
  text-wrap: pretty;
}

/* ---- Core concept variant switcher ---- */
.rm-cv { display: none; }
.rm-concept-switch[data-concept="a"] .rm-cv--a,
.rm-concept-switch[data-concept="b"] .rm-cv--b,
.rm-concept-switch[data-concept="c"] .rm-cv--c,
.rm-concept-switch[data-concept="d"] .rm-cv--d,
.rm-concept-switch[data-concept="e"] .rm-cv--e,
.rm-concept-switch[data-concept="f"] .rm-cv--f { display: block; }

/* Design A — Flow: sources stream through engine into BIM */
.rm-cv--a { background: var(--purple-50); }
.rm-cflow { max-width: var(--site-width, 1300px); margin: 0 auto; padding: clamp(48px, 6vw, 80px) 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.rm-cflow__label { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-arch-purple); margin: 0 0 18px; }
.rm-cflow__quote { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -0.01em; color: var(--color-data-black); margin: 0; text-wrap: balance; }
.rm-cflow__diagram { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rm-cflow__sources { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rm-cflow__src { background: var(--bg-surface); border: 1px solid var(--purple-200); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-data-black); }
.rm-cflow__line { position: relative; width: 2px; height: 30px; background: var(--purple-200); overflow: hidden; border-radius: 2px; }
.rm-cflow__pulse { position: absolute; left: 0; top: -45%; width: 100%; height: 40%; background: var(--color-arch-purple); border-radius: 2px; }
.rm-cflow__hub { display: inline-flex; align-items: center; justify-content: center; color: var(--color-arch-purple); padding: 4px; }
.rm-cflow__hub svg { width: 40px; height: 52px; display: block; }
.rm-cflow__outputs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rm-cflow__out { background: var(--bg-surface); border: 1.5px solid var(--purple-300); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-arch-purple); }(--color-arch-purple); }
@media (prefers-reduced-motion: no-preference) {
  .rm-cflow__pulse { animation: rmcFlow 1.8s var(--ease-out) infinite; }
  .rm-cflow__pulse--2 { animation-delay: 0.9s; }
  @keyframes rmcFlow { from { top: -45%; } to { top: 110%; } }
}

/* Design B — Editorial: large light statement with accent rule */
.rm-cv--b { background: var(--color-draft-white); }
.rm-cedit { max-width: 1000px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) 40px; }
.rm-cedit__eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-arch-purple); margin: 0 0 20px; }
.rm-cedit__rule { display: block; width: 56px; height: 3px; background: var(--color-arch-purple); border-radius: 2px; margin: 0 0 28px; }
.rm-cedit__quote { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(28px, 4vw, 52px); line-height: 1.12; letter-spacing: -0.02em; color: var(--color-data-black); margin: 0; text-wrap: balance; }
.rm-cedit__quote .accent { color: var(--color-arch-purple); }

/* Design C — Card with compact node diagram */
.rm-cv--c { background: var(--bg-section-alt); }
.rm-ccard { max-width: var(--site-width, 1300px); margin: 0 auto; padding: clamp(40px, 5vw, 64px) 40px; display: grid; }
.rm-ccard > * { grid-column: 1; }
.rm-ccard__text, .rm-ccard__diagram { max-width: 960px; margin: 0 auto; width: 100%; }
.rm-ccard__eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-arch-purple); margin: 0 0 16px; }
.rm-ccard__quote { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -0.01em; color: var(--color-data-black); margin: 0 0 32px; text-wrap: balance; }
.rm-ccard__diagram { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; background: var(--bg-surface); border: 1px solid var(--purple-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 24px; }
.rm-cnode { border-radius: var(--radius-md); padding: 12px 18px; font-size: 14px; font-weight: var(--fw-semibold); }
.rm-cnode--src { background: var(--purple-50); border: 1px solid var(--purple-200); color: var(--color-data-black); }
.rm-cnode--hub { background: var(--color-arch-purple); color: var(--color-draft-white); }
.rm-cnode--out { background: var(--bg-surface); border: 1.5px solid var(--purple-300); color: var(--color-arch-purple); }
.rm-ccard__arrow { display: inline-flex; color: var(--purple-400); }
.rm-ccard__arrow svg { width: 22px; height: 22px; }
@media (max-width: 860px) {
  .rm-cflow { grid-template-columns: 1fr; gap: 32px; }
}

/* Design D — Triptych */
.rm-cv--d { background: var(--bg-section-alt); }
.rm-ctri { max-width: var(--site-width, 1300px); margin: 0 auto; padding: clamp(44px, 5vw, 72px) 40px; }
.rm-ctri__head { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); }
.rm-ctri__label { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-arch-purple); margin: 0 0 16px; }
.rm-ctri__quote { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(24px, 3vw, 38px); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-data-black); margin: 0; text-wrap: balance; }
.rm-ctri__grid { display: flex; align-items: stretch; justify-content: center; gap: clamp(8px, 1.4vw, 18px); }
.rm-ctri__panel { flex: 1 1 0; max-width: 280px; background: var(--bg-surface); border: 1px solid var(--purple-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.rm-ctri__panel--hub { align-items: center; justify-content: center; text-align: center; gap: 6px; border-color: var(--purple-300); background: var(--purple-50); }
.rm-ctri__cap { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-tertiary); margin: 0 0 4px; }
.rm-ctri__item { border: 1px solid var(--purple-200); border-radius: var(--radius-md); padding: 11px 14px; font-size: 14px; font-weight: var(--fw-semibold); color: var(--color-data-black); background: var(--color-draft-white); }
.rm-ctri__item--out { border-color: var(--purple-300); color: var(--color-arch-purple); }
.rm-ctri__mark { color: var(--color-arch-purple); display: inline-flex; }
.rm-ctri__mark svg { width: 40px; height: 52px; }
.rm-ctri__hubname { font-size: 17px; font-weight: var(--fw-semibold); color: var(--color-data-black); margin: 6px 0 0; }
.rm-ctri__hubdesc { font-size: 13px; color: var(--fg-secondary); margin: 0; }
.rm-ctri__arrow { display: flex; align-items: center; color: var(--purple-400); }
.rm-ctri__arrow svg { width: 24px; height: 24px; }

/* Design E — Hub (inputs · mark · outputs) */
.rm-cv--e { background: var(--rm-concept-bg, var(--color-draft-white)); }
.rm-chub { max-width: var(--rm-concept-w, 1100px); margin: 0 auto; padding: clamp(48px, 6vw, 80px) 40px; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; }
.rm-chub__col { display: flex; flex-direction: column; gap: 12px; }
.rm-chub__col--out { align-items: flex-end; }
.rm-chub__cap { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-tertiary); margin: 0 0 2px; }
.rm-chub__chip { background: var(--bg-surface); border: 1px solid var(--purple-200); border-radius: var(--radius-pill); padding: 10px 18px; font-size: 14px; font-weight: var(--fw-semibold); color: var(--color-data-black); }
.rm-chub__chip--out { border-color: var(--purple-300); color: var(--color-arch-purple); }
.rm-chub__center { text-align: center; padding: 0 8px; border-left: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); }
.rm-chub__mark { color: var(--color-arch-purple); display: inline-flex; }
.rm-chub__mark svg { width: 48px; height: 62px; }
.rm-chub__title { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.01em; color: var(--color-data-black); margin: 12px 0 8px; }
.rm-chub__sub { font-size: 14px; line-height: 1.55; color: var(--fg-secondary); margin: 0; text-wrap: pretty; }

/* Design F — Banner (statement + vertical flow card) */
.rm-cv--f { background: var(--bg-section-alt); }
.rm-cbanner { max-width: 1100px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.rm-cbanner__eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-arch-purple); margin: 0 0 16px; }
.rm-cbanner__quote { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(24px, 3vw, 38px); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-data-black); margin: 0; text-wrap: balance; }
.rm-cbanner__flow { background: var(--bg-surface); border: 1px solid var(--purple-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rm-cbanner__row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rm-cbanner__chip { background: var(--color-draft-white); border: 1px solid var(--purple-200); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-data-black); }
.rm-cbanner__chip--out { border-color: var(--purple-300); color: var(--color-arch-purple); }
.rm-cbanner__mark { color: var(--color-arch-purple); display: inline-flex; }
.rm-cbanner__mark svg { width: 38px; height: 50px; }

@media (max-width: 860px) {
  .rm-ctri__grid { flex-direction: column; align-items: stretch; }
  .rm-ctri__panel { max-width: none; }
  .rm-ctri__arrow svg { transform: rotate(90deg); }
  .rm-chub { grid-template-columns: 1fr; }
  .rm-chub__col--out { align-items: flex-start; }
  .rm-chub__center { border: 0; padding: 0; }
  .rm-cbanner { grid-template-columns: 1fr; }
}

/* ===================== 2. CHALLENGE ===================== */
.rm-challenge { background: var(--color-light-gray); padding: clamp(56px, 7vw, 96px) 0; }
.rm-challenge__panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.rm-challenge__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.rm-chal {
  padding: 32px 34px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  align-items: start;
  column-gap: 16px;
  row-gap: 0;
  grid-template-columns: 1fr;
  grid-template-areas: "n" "i" "t" "d";
}
.rm-chal__num { grid-area: n; }
.rm-chal__icon { grid-area: i; }
.rm-chal__title { grid-area: t; }
.rm-chal__desc { grid-area: d; }
.rm-challenge__grid > .rm-chal:nth-child(3n) { border-right: none; }
.rm-challenge__grid > .rm-chal:nth-child(n+4) { border-bottom: none; }
.rm-chal__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  color: var(--color-arch-purple);
}
.rm-chal__icon {
  width: var(--rm-chal-icon-size, 34px);
  height: var(--rm-chal-icon-size, 34px);
  padding: var(--rm-chal-icon-pad, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 16px;
  border-radius: var(--radius-sm);
  background: var(--purple-50);
  color: var(--color-arch-purple);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.rm-chal__icon svg { width: 100%; height: 100%; }
.rm-chal__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  color: var(--color-data-black);
  margin: 0 0 10px;
}
.rm-chal__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-tertiary);
  margin: 0;
  text-wrap: pretty;
}

/* ---- Challenge card variants (driven by the Tweaks panel) ---- */
/* a = stacked (default, defined above) */

/* b = step + icon + title in one row, desc below */
.rm-challenge[data-chal-variant="b"] .rm-chal {
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "n i t" "d d d";
  align-items: center;
  column-gap: 12px;
}
.rm-challenge[data-chal-variant="b"] .rm-chal__icon { margin: 0; }
.rm-challenge[data-chal-variant="b"] .rm-chal__title { margin: 0; }
.rm-challenge[data-chal-variant="b"] .rm-chal__desc { margin-top: 14px; }

/* c = large icon on the left, text stacked on the right */
.rm-challenge[data-chal-variant="c"] .rm-chal {
  grid-template-columns: auto 1fr;
  grid-template-areas: "i n" "i t" "i d";
  column-gap: 18px;
  --rm-chal-icon-size: 48px;
}
.rm-challenge[data-chal-variant="c"] .rm-chal__icon { margin: 2px 0 0; align-self: start; }
.rm-challenge[data-chal-variant="c"] .rm-chal__title { margin: 8px 0 8px; }

/* d = centered: icon on top, everything centered */
.rm-challenge[data-chal-variant="d"] .rm-chal {
  justify-items: center;
  text-align: center;
  grid-template-areas: "i" "n" "t" "d";
}
.rm-challenge[data-chal-variant="d"] .rm-chal__icon { margin: 0 0 14px; }
.rm-challenge[data-chal-variant="d"] .rm-chal__num { margin-bottom: 8px; }

/* ===================== 3. FOUR RESOURCES ===================== */
.rm-res { background: var(--color-draft-white); padding: clamp(56px, 7vw, 96px) 0; }
.rm-res__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.rm-res__head { margin-bottom: 36px; max-width: 520px; }
.rm-res__list { display: flex; flex-direction: column; gap: 26px; }
.rm-resitem { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.rm-resitem__tag {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-arch-purple);
  padding-top: 1px;
}
.rm-resitem__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  color: var(--color-data-black);
  margin: 0 0 7px;
}
.rm-resitem__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-tertiary);
  margin: 0 0 10px;
  text-wrap: pretty;
}
.rm-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
}
.rm-pill--green { background: var(--state-success-bg); color: var(--state-success-fg); }
.rm-pill--purple { background: var(--purple-50); color: var(--color-arch-purple); }

/* distillation diagram */
.rm-distill__src svg { width: 16px; height: 16px; margin-bottom: 8px; color: var(--color-arch-purple); display: block; margin-left: auto; margin-right: auto; }

/* ---- diagram variant switcher ---- */
.rm-distill-switch {
  background: var(--color-light-gray);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.rm-dv { display: none; }
.rm-distill-switch[data-distill="a"] .rm-dv--a,
.rm-distill-switch[data-distill="b"] .rm-dv--b,
.rm-distill-switch[data-distill="c"] .rm-dv--c,
.rm-distill-switch[data-distill="d"] .rm-dv--d { display: block; }

/* Variant B — vertical flow */
.rm-flow { position: relative; }
.rm-flow__stage { position: relative; display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 14px; min-height: 150px; }
.rm-flow__node { justify-self: center; }
.rm-flow__stage + .rm-flow__stage { margin-top: 16px; }
/* one continuous line from node 1 to node 4 (last stage is 124px tall,
   so the last node centre sits 109px from the container bottom); the
   line + dot sit at 22px to line up with the centred node circles. */
.rm-flow::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 15px;
  bottom: 147px;
  width: 2px;
  background: linear-gradient(var(--purple-300), var(--color-arch-purple));
  z-index: 0;
}
/* a single dot travelling 01 → 04 */
.rm-flow::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-arch-purple);
  box-shadow: 0 0 0 4px rgba(81,86,219,0.18);
  z-index: 0;
  animation: rm-flow-pulse 3.4s ease-in-out infinite;
}
@keyframes rm-flow-pulse {
  0% { top: 15px; opacity: 0; }
  12% { opacity: 1; }
  86% { opacity: 1; }
  100% { top: calc(100% - 147px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rm-flow::after { display: none; } }
.rm-flow__node {
  position: relative;
  z-index: 1;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--purple-300);
  color: var(--color-arch-purple);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-semibold);
  margin-left: 8px;
}
.rm-flow__node--accent { background: var(--color-arch-purple); border-color: var(--color-arch-purple); color: var(--color-draft-white); }
.rm-flow__body {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.rm-flow__body--accent { background: var(--color-arch-purple); border-color: transparent; }
.rm-flow__body--out { background: var(--purple-50); border-color: var(--purple-200); }
.rm-flow__title { font-size: 14px; font-weight: var(--fw-semibold); color: var(--color-data-black); margin: 0; }
.rm-flow__title--inv { color: var(--color-draft-white); }
.rm-flow__text { font-size: 12.5px; line-height: 1.5; color: var(--fg-secondary); margin: 6px 0 0; }
.rm-flow__pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.rm-flow__pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.rm-flow__pill--green { background: var(--state-success-bg); color: var(--state-success-fg); }
.rm-flow__pill--blue { background: var(--color-sky-100); color: #2A3B8F; }
.rm-flow__pill--purple { background: var(--purple-100); color: var(--purple-800); }
.rm-flow__pill--teal { background: #DBF3F7; color: var(--color-teal); }
.rm-flow__body--out .rm-flow__text { margin-top: 10px; color: var(--fg-tertiary); }
/* step 4 — link card to AI BIM Checker */
.rm-flow__link {
  display: block;
  text-decoration: none;
  border: 1px solid var(--purple-200);
  background: var(--purple-50);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.rm-flow__link:hover { border-color: var(--color-arch-purple); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* optional-step cues: dashed node, dashed connector to it, and a tag */
.rm-flow__node--optional {
  background: var(--bg-surface);
  border: 2px dashed var(--purple-300);
  color: var(--color-arch-purple);
}
.rm-flow__optional {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  background: var(--bg-surface);
  border: 1px dashed var(--gray-400);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  margin-bottom: 10px;
}
.rm-flow__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-arch-purple);
}
.rm-flow__cta svg { width: 13px; height: 13px; }
.rm-flow__body--accent .rm-flow__text { color: rgba(255,255,255,0.9); }
.rm-flow__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rm-flow__chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--gray-100); color: var(--fg-secondary);
  padding: 4px 10px 4px 8px; border-radius: var(--radius-pill);
}
.rm-flow__chips span svg { width: 13px; height: 13px; color: var(--color-arch-purple); flex: 0 0 auto; }

/* Variant C — converge / funnel */
.rm-funnel__sources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rm-funnel__sources span {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 6px;
  text-align: center;
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  color: var(--fg-secondary);
}
.rm-funnel__converge { display: block; width: 100%; height: 36px; }
.rm-funnel__engine {
  background: var(--color-arch-purple);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  text-align: center;
  color: var(--color-draft-white);
  width: 70%;
  margin: 0 auto;
}
.rm-funnel__engine .rm-distill__engine-title { color: var(--color-draft-white); }
.rm-funnel__engine .rm-distill__engine-text { color: rgba(255,255,255,0.92); }

/* Variant D — numbered stepped pipeline */
.rm-pipe { display: flex; flex-direction: column; gap: 0; }
.rm-pipe__step {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  position: relative;
}
.rm-pipe__step + .rm-pipe__step { margin-top: 26px; }
.rm-pipe__step + .rm-pipe__step::before {
  content: "";
  position: absolute;
  top: -20px; left: 31px;
  width: 2px; height: 14px;
  background: var(--purple-300);
}
.rm-pipe__step + .rm-pipe__step::after {
  content: "";
  position: absolute;
  top: -10px; left: 27px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--purple-300);
  border-bottom: 2px solid var(--purple-300);
  transform: rotate(45deg);
}
.rm-pipe__step--accent { background: var(--color-arch-purple); border-color: transparent; }
.rm-pipe__num {
  font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--color-arch-purple);
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--purple-50);
  display: flex; align-items: center; justify-content: center;
}
.rm-pipe__step--accent .rm-pipe__num { background: rgba(255,255,255,0.2); color: var(--color-draft-white); }
.rm-pipe__title { font-size: 14px; font-weight: var(--fw-semibold); color: var(--color-data-black); margin: 4px 0 0; }
.rm-pipe__title--inv { color: var(--color-draft-white); }
.rm-pipe__text { font-size: 12.5px; line-height: 1.5; color: var(--fg-tertiary); margin: 6px 0 0; }
.rm-pipe__text--inv { color: rgba(255,255,255,0.9); }

/* legacy single-block styles (used inside variant A) */
.rm-distill {
  background: var(--color-light-gray);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.rm-distill__label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: 0 0 18px;
}
.rm-distill__sources { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm-distill__src {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--fg-secondary);
}
.rm-distill__arrow { display: flex; justify-content: center; color: var(--gray-400); margin: 12px 0; }
.rm-distill__arrow svg { width: 18px; height: 18px; }
.rm-distill__engine {
  background: var(--color-arch-purple);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  text-align: center;
  color: var(--color-draft-white);
}
.rm-distill__engine-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.rm-distill__engine-text { font-size: 13px; line-height: 1.5; margin: 0; color: rgba(255,255,255,0.92); }
.rm-distill__out {
  background: var(--purple-50);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.rm-distill__out-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  margin: 0 0 7px;
}
.rm-distill__out-text { font-size: 13px; line-height: 1.5; color: var(--fg-secondary); margin: 0; }

/* ===================== 4. HOW IT WORKS ===================== */
.rm-how { background: var(--color-light-gray); padding: clamp(56px, 7vw, 96px) 0; }

/* Scroll-triggered fade-in for the 3 steps (whichever variant is active).
   Hidden pre-state gated on .rm-how.is-armed (added by JS) so steps are
   never stuck hidden without JS and never animate on page load. */
@media (prefers-reduced-motion: no-preference) {
  .rm-how.is-armed .rm-howcard,
  .rm-how.is-armed .rm-hstep,
  .rm-how.is-armed .rm-hrow {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-out);
  }
  .rm-how.is-armed .rm-howcard.is-in,
  .rm-how.is-armed .rm-hstep.is-in,
  .rm-how.is-armed .rm-hrow.is-in {
    opacity: 1;
    transform: none;
  }
}
.rm-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.rm-howcard {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.rm-howcard--accent { background: var(--color-arch-purple); border-color: transparent; }
.rm-howcard__step {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  margin: 0 0 20px;
}
.rm-howcard--accent .rm-howcard__step { color: rgba(255,255,255,0.85); }
.rm-howcard__visual {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  margin-bottom: 20px;
}
.rm-howcard__desc { font-size: 14px; line-height: 1.6; color: var(--fg-tertiary); margin: 0; text-wrap: pretty; }
.rm-howcard--accent .rm-howcard__desc { color: rgba(255,255,255,0.92); }
/* drop-in file glyph */
.rm-file {
  width: 64px; height: 78px; border-radius: 6px;
  border: 1.5px solid var(--gray-300); background: var(--bg-surface);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; gap: 3px;
}
.rm-file::before { content: ""; position: absolute; }
.rm-file span { display: block; width: 26px; height: 2px; background: var(--gray-300); border-radius: 2px; }
.rm-file__lines { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.rm-file__cap { font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); margin-top: 12px; }
/* approve rows */
.rm-approve { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.rm-approve__row {
  height: 12px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
}
.rm-approve__row.is-done { background: rgba(255,255,255,0.55); }
.rm-approve__check { color: var(--color-draft-white); font-size: 11px; }
/* track versions */
.rm-track { width: 100%; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 13px; }
.rm-track__v { display: flex; align-items: center; gap: 8px; color: var(--fg-tertiary); }
.rm-track__v.is-active { color: var(--color-arch-purple); font-weight: var(--fw-semibold); }
.rm-track__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300); }
.rm-track__v.is-active .rm-track__dot { background: var(--color-arch-purple); }

/* ---- How-it-works variant switcher ---- */
.rm-hv { display: none; }
.rm-how-switch[data-how="a"] .rm-hv--a,
.rm-how-switch[data-how="b"] .rm-hv--b,
.rm-how-switch[data-how="c"] .rm-hv--c,
.rm-how-switch[data-how="d"] .rm-hv--d { display: block; }

/* shared: approve rows need a visible track on light surfaces (variant A
   places them on the purple card; B/C/D place them on white) */
.rm-hstep .rm-approve__row,
.rm-stage .rm-approve__row { background: var(--gray-200); }
.rm-hstep .rm-approve__row.is-done,
.rm-stage .rm-approve__row.is-done { background: var(--purple-100); }
.rm-hstep .rm-approve__check,
.rm-stage .rm-approve__check { color: var(--color-arch-purple); }

/* ===== Variant B — connected horizontal flow ===== */
.rm-hflow { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rm-hflow__rail { position: absolute; top: 50px; left: 18%; right: 18%; height: 2px; background: var(--purple-200); border-radius: 2px; }
.rm-hflow__pulse {
  position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--color-arch-purple); box-shadow: 0 0 0 4px rgba(81,86,219,0.18);
  animation: rm-hflow-travel 3.6s ease-in-out infinite;
}
@keyframes rm-hflow-travel {
  0% { left: 0; opacity: 0; } 10% { opacity: 1; }
  90% { opacity: 1; } 100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rm-hflow__pulse { display: none; } }
.rm-hstep {
  position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); padding: 26px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.rm-hstep__node {
  width: 44px; height: 44px; border-radius: 50%; background: var(--bg-surface);
  border: 1.5px solid var(--purple-200); color: var(--color-arch-purple);
  font-family: var(--font-mono); font-size: 14px; font-weight: var(--fw-semibold);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.rm-hstep--accent .rm-hstep__node { background: var(--color-arch-purple); border-color: var(--color-arch-purple); color: var(--color-draft-white); }
.rm-hstep__step {
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-arch-purple); margin: 14px 0 0;
}
.rm-hstep__visual { width: 100%; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 16px 0; }
.rm-hstep__visual .rm-approve, .rm-hstep__visual .rm-track { max-width: 180px; }
.rm-hstep__title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 16px; color: var(--color-data-black); margin: 0 0 8px; }
.rm-hstep__desc { font-size: 13.5px; line-height: 1.6; color: var(--fg-tertiary); margin: 0 0 18px; text-wrap: pretty; }
.rm-hstep__auto {
  margin-top: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em;
  color: var(--purple-700); background: var(--purple-50); border-radius: var(--radius-pill); padding: 5px 12px;
}
.rm-hstep__auto--inv { color: var(--color-draft-white); background: var(--color-arch-purple); }

/* ===== Variant C — alternating editorial rows ===== */
.rm-hrows { display: flex; flex-direction: column; gap: 18px; }
.rm-hrow {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); padding: 36px 40px;
}
.rm-hrow--reverse .rm-hrow__text { order: 2; }
.rm-hrow__text { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.rm-hrow__index {
  font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--color-arch-purple); width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--purple-200); display: flex; align-items: center; justify-content: center;
}
.rm-hrow__step {
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-arch-purple); margin: 6px 0 8px;
}
.rm-hrow__title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 21px; line-height: 1.25; color: var(--color-data-black); margin: 0 0 12px; text-wrap: balance; }
.rm-hrow__desc { font-size: 15px; line-height: 1.65; color: var(--fg-tertiary); margin: 0 0 16px; text-wrap: pretty; }
.rm-hrow__auto {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--purple-700); background: var(--purple-50); border-radius: var(--radius-pill); padding: 6px 14px;
}
.rm-hrow__visual { display: flex; align-items: center; justify-content: center; min-height: 150px; }
/* step 1 visual — drop → extract */
.rm-drop { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 340px; }
.rm-drop__arrow { color: var(--purple-300); flex: 0 0 auto; }
.rm-drop__arrow svg { width: 26px; height: 26px; }
.rm-drop__out { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.rm-drop__req {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-secondary); line-height: 1.4;
  background: var(--gray-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-drop__req b { color: var(--color-arch-purple); font-weight: var(--fw-semibold); margin-right: 4px; }
.rm-drop__req--new { background: var(--purple-50); border-color: var(--purple-200); color: var(--purple-800); animation: rm-drop-in 3.2s ease-in-out infinite; }
@keyframes rm-drop-in { 0%,40% { opacity: 0.35; transform: translateX(-4px); } 55%,100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rm-drop__req--new { animation: none; opacity: 1; transform: none; } }
/* step 2 visual — review list */
.rm-review { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 8px; }
.rm-review__row {
  display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 10px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 9px 12px;
}
.rm-review__name { font-size: 12.5px; color: var(--color-data-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-review__diff { font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); }
.rm-review__ok {
  width: 18px; height: 18px; border-radius: 50%; background: var(--state-success-bg); color: var(--state-success-fg);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.rm-review__ok--pending { background: transparent; border: 1.5px dashed var(--purple-300); }
.rm-review__btn {
  margin-top: 4px; appearance: none; border: 0; cursor: default; align-self: flex-start;
  background: var(--color-arch-purple); color: var(--color-draft-white);
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.04em; border-radius: var(--radius-md); padding: 8px 16px;
}
/* step 3 visual — lineage */
.rm-lineage { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 0; font-family: var(--font-mono); font-size: 13px; }
.rm-lineage__v {
  position: relative; display: flex; align-items: center; gap: 10px; color: var(--fg-tertiary);
  padding: 9px 0 9px 4px;
}
.rm-lineage__v em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--gray-500); }
.rm-lineage__v + .rm-lineage__v::before {
  content: ""; position: absolute; left: 7px; top: -9px; height: 18px; width: 2px; background: var(--purple-100);
}
.rm-lineage__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); flex: 0 0 auto; }
.rm-lineage__v.is-active { color: var(--color-arch-purple); font-weight: var(--fw-semibold); }
.rm-lineage__v.is-active .rm-lineage__dot { background: var(--color-arch-purple); box-shadow: 0 0 0 4px rgba(81,86,219,0.16); }
.rm-lineage__v.is-active em { color: var(--purple-700); }

/* ===== Variant D — live product console (auto-cycling) ===== */
.rm-console {
  max-width: 880px; margin: 0 auto; background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.rm-console__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--gray-100); }
.rm-console__dot { width: 10px; height: 10px; border-radius: 50%; }
.rm-console__dot.r { background: #ED6A5E; } .rm-console__dot.y { background: #F4BF50; } .rm-console__dot.g { background: #61C454; }
.rm-console__title { font-family: var(--font-mono); font-size: 12px; color: var(--fg-tertiary); margin-left: 8px; }
.rm-console__tabs { display: flex; gap: 4px; padding: 12px 16px 0; }
.rm-console__tab {
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.04em;
  color: var(--fg-tertiary); padding: 9px 16px; border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid transparent; border-bottom: 0;
}
.rm-console__stage { position: relative; min-height: 280px; border-top: 1px solid var(--border-subtle); margin-top: -1px; padding: 36px 40px; }
.rm-stage {
  position: absolute; inset: 0; padding: 36px 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
  opacity: 0; visibility: hidden;
}
.rm-stage__copy { align-self: center; }
.rm-stage__head { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 20px; color: var(--color-data-black); margin: 0 0 10px; }
.rm-stage__body { font-size: 14.5px; line-height: 1.65; color: var(--fg-tertiary); margin: 0 0 16px; text-wrap: pretty; }
.rm-stage__chip {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--purple-700); background: var(--purple-50); border-radius: var(--radius-pill); padding: 6px 14px;
}
.rm-stage__chip--accent { color: var(--color-draft-white); background: var(--color-arch-purple); }
.rm-stage__dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed var(--purple-200); border-radius: var(--radius-lg); padding: 28px; background: var(--gray-100);
}
.rm-stage__review { display: flex; flex-direction: column; gap: 8px; }
.rm-stage__lineage { display: flex; justify-content: center; }
/* auto-cycle: 3 stages × ~3.3s each ≈ 10s loop */
.rm-stage--0 { animation: rm-stage-cycle 10s infinite; }
.rm-stage--1 { animation: rm-stage-cycle 10s infinite; animation-delay: -6.667s; }
.rm-stage--2 { animation: rm-stage-cycle 10s infinite; animation-delay: -3.333s; }
@keyframes rm-stage-cycle {
  0% { opacity: 0; visibility: hidden; }
  3% { opacity: 1; visibility: visible; }
  30% { opacity: 1; visibility: visible; }
  34% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
/* tab highlight follows the same cadence */
.rm-console__tab { animation: rm-tab-cycle 10s infinite; }
.rm-console__tab[data-stage="1"] { animation-delay: -6.667s; }
.rm-console__tab[data-stage="2"] { animation-delay: -3.333s; }
@keyframes rm-tab-cycle {
  0%, 34%, 100% { background: transparent; border-color: transparent; color: var(--fg-tertiary); }
  3%, 30% { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--color-arch-purple); }
}
@media (prefers-reduced-motion: reduce) {
  .rm-stage--0 { opacity: 1; visibility: visible; animation: none; }
  .rm-stage--1, .rm-stage--2 { animation: none; }
  .rm-console__tab { animation: none; }
  .rm-console__tab[data-stage="0"] { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--color-arch-purple); }
}

/* ===================== 5. DELIVERS ===================== */
.rm-deliver { background: var(--bg-surface); padding: clamp(56px, 7vw, 96px) 0; }

/* Scroll-triggered fade-in for the showcase block (one-shot), triggered
   when it becomes visible — never on page load. Gated on .is-armed
   (added by JS) + prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .rm-deliver.is-armed .rm-showcase {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-out);
  }
  .rm-deliver.is-armed .rm-showcase.is-in {
    opacity: 1;
    transform: none;
  }
}
.rm-deliver__panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.rm-del {
  padding: 32px 34px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.rm-deliver__panel > .rm-del:nth-child(2n) { border-right: none; }
.rm-deliver__panel > .rm-del:nth-child(n+3) { border-bottom: none; }
.rm-del__title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 17px; color: var(--color-data-black); margin: 0 0 10px; }
.rm-del__desc { font-size: 14px; line-height: 1.6; color: var(--fg-tertiary); margin: 0 0 18px; text-wrap: pretty; }
.rm-del__visual {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-secondary);
  line-height: 1.6;
}
.rm-del__visual .k { color: var(--color-arch-purple); }
/* timeline */
.rm-timeline { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--fg-tertiary); }
.rm-timeline__node { display: flex; align-items: center; gap: 6px; position: relative; }
.rm-timeline__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-arch-purple); }
.rm-timeline__line { flex: 1; height: 1.5px; background: var(--purple-200); margin: 0 4px; }
.rm-timeline__now { color: var(--color-arch-purple); font-weight: var(--fw-semibold); }
/* stat boxes */
.rm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rm-stat { border-radius: var(--radius-md); padding: 14px 8px; text-align: center; }
.rm-stat__num { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: 30px; line-height: 1; }
.rm-stat__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 7px; }
.rm-stat--1 { background: var(--color-arch-purple); }
.rm-stat--1 .rm-stat__num, .rm-stat--1 .rm-stat__label { color: var(--color-draft-white); }
.rm-stat--2 { background: var(--purple-300); }
.rm-stat--2 .rm-stat__num, .rm-stat--2 .rm-stat__label { color: var(--color-draft-white); }
.rm-stat--3 { background: var(--purple-100); }
.rm-stat--3 .rm-stat__num { color: var(--color-arch-purple); }
.rm-stat--3 .rm-stat__label { color: var(--purple-700); }

/* ---- Delivers variant switcher ---- */
.rm-dl { display: none; }
.rm-deliver-switch[data-deliver="a"] .rm-dl--a,
.rm-deliver-switch[data-deliver="b"] .rm-dl--b,
.rm-deliver-switch[data-deliver="c"] .rm-dl--c,
.rm-deliver-switch[data-deliver="d"] .rm-dl--d { display: block; }

/* ===== Variant B — numbered ledger rows ===== */
.rm-ledger { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.rm-lrow { display: grid; grid-template-columns: 50px 1fr minmax(0, 300px); gap: 28px; align-items: center; padding: 28px 34px; }
.rm-lrow + .rm-lrow { border-top: 1px solid var(--border-subtle); }
.rm-lrow__num { font-family: var(--font-mono); font-size: 22px; font-weight: var(--fw-light); color: var(--purple-300); }
.rm-lrow__title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 18px; color: var(--color-data-black); margin: 0 0 6px; }
.rm-lrow__desc { font-size: 14.5px; line-height: 1.6; color: var(--fg-tertiary); margin: 0; text-wrap: pretty; max-width: 50ch; }
.rm-lrow__visual { width: 100%; }
.rm-lrow__visual .rm-del__visual, .rm-lrow__visual .rm-stats { margin: 0; }

/* ===== Variant C — auto-cycling showcase ===== */
.rm-showcase { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 18px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 16px; }
.rm-showcase__tabs { display: flex; flex-direction: column; gap: 4px; }
.rm-showcase__tab {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 16px 18px; border-radius: var(--radius-md); font-size: 15px; font-weight: var(--fw-semibold);
  color: var(--fg-tertiary); line-height: 1.35; text-wrap: pretty;
}
.rm-showcase__i { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); color: var(--purple-300); padding-top: 2px; }
.rm-showcase__stage { position: relative; background: var(--gray-100); border-radius: var(--radius-lg); min-height: 300px; overflow: hidden; }
.rm-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px; opacity: 0; visibility: hidden; }
.rm-scene__visual { width: 100%; max-width: 380px; display: flex; justify-content: center; }
.rm-scene__visual .rm-del__visual, .rm-scene__visual .rm-stats { width: 100%; margin: 0; }
.rm-scene__visual .rm-del__visual { background: var(--bg-surface); }
.rm-scene__copy { text-align: center; max-width: 46ch; }
.rm-scene__head { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 19px; color: var(--color-data-black); margin: 0 0 8px; text-wrap: balance; }
.rm-scene__body { font-size: 14.5px; line-height: 1.6; color: var(--fg-tertiary); margin: 0; text-wrap: pretty; }
.rm-scene { animation: rm-scene-cycle 13s infinite; }
.rm-scene--1 { animation-delay: -9.75s; }
.rm-scene--2 { animation-delay: -6.5s; }
.rm-scene--3 { animation-delay: -3.25s; }
@keyframes rm-scene-cycle {
  0% { opacity: 0; visibility: hidden; }
  2% { opacity: 1; visibility: visible; }
  25% { opacity: 1; visibility: visible; }
  27% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.rm-showcase__tab { animation: rm-tab4-cycle 13s infinite; }
.rm-showcase__tab[data-i="1"] { animation-delay: -9.75s; }
.rm-showcase__tab[data-i="2"] { animation-delay: -6.5s; }
.rm-showcase__tab[data-i="3"] { animation-delay: -3.25s; }
@keyframes rm-tab4-cycle {
  0%, 27%, 100% { background: transparent; color: var(--fg-tertiary); }
  2%, 25% { background: var(--purple-50); color: var(--color-arch-purple); }
}
@media (prefers-reduced-motion: reduce) {
  .rm-scene { animation: none; }
  .rm-scene--0 { opacity: 1; visibility: visible; }
  .rm-showcase__tab { animation: none; }
  .rm-showcase__tab[data-i="0"] { background: var(--purple-50); color: var(--color-arch-purple); }
}

/* ===== Variant D — visual-forward cards ===== */
.rm-vgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.rm-vcard { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 22px; }
.rm-vcard__well {
  background: var(--gray-100); border-radius: var(--radius-lg); padding: 22px; min-height: 124px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.rm-vcard__well .rm-del__visual { background: var(--bg-surface); width: 100%; margin: 0; }
.rm-vcard__well .rm-stats { width: 100%; }
.rm-vcard__title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 17px; color: var(--color-data-black); margin: 0 0 8px; }
.rm-vcard__desc { font-size: 14px; line-height: 1.6; color: var(--fg-tertiary); margin: 0; text-wrap: pretty; }

/* ===================== 6. ROLES ===================== */
.rm-roles { background: var(--color-light-gray); padding: clamp(56px, 7vw, 96px) 0; }
.rm-roles__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.rm-role {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: 28px 30px;
}
.rm-role__title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 17px; color: var(--color-data-black); margin: 0 0 10px; }
.rm-role__desc { font-size: 15px; line-height: 1.6; color: var(--fg-tertiary); margin: 0; text-wrap: pretty; }

/* ---- Roles variant switcher ---- */
.rm-rv { display: none; }
.rm-roles-switch[data-roles="a"] .rm-rv--a,
.rm-roles-switch[data-roles="b"] .rm-rv--b,
.rm-roles-switch[data-roles="c"] .rm-rv--c,
.rm-roles-switch[data-roles="d"] .rm-rv--d { display: block; }

/* ===== Variant B — initial-badge cards ===== */
.rm-rgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.rm-rcard {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); padding: 28px 30px;
}
.rm-rcard__badge {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  background: var(--purple-50); color: var(--color-arch-purple);
  font-family: var(--font-mono); font-size: 15px; font-weight: var(--fw-semibold);
  display: flex; align-items: center; justify-content: center;
}
.rm-rcard__title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 17px; color: var(--color-data-black); margin: 6px 0 8px; }
.rm-rcard__desc { font-size: 14.5px; line-height: 1.6; color: var(--fg-tertiary); margin: 0; text-wrap: pretty; }

/* ===== Variant C — spec-sheet ledger ===== */
.rm-rledger { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.rm-rrow { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: 32px; align-items: center; padding: 26px 34px; }
.rm-rrow + .rm-rrow { border-top: 1px solid var(--border-subtle); }
.rm-rrow__role { display: flex; align-items: center; gap: 14px; }
.rm-rrow__i { font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-semibold); color: var(--purple-300); }
.rm-rrow__title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 18px; color: var(--color-data-black); margin: 0; }
.rm-rrow__desc { font-size: 15px; line-height: 1.6; color: var(--fg-tertiary); margin: 0; text-wrap: pretty; }

/* ===== Variant D — persona columns with tinted header ===== */
.rm-rcols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rm-rcol {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
}
.rm-rcol__head {
  background: var(--purple-50); padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--border-subtle);
}
.rm-rcol__tag {
  width: 40px; height: 40px; border-radius: 50%; background: var(--bg-surface);
  color: var(--color-arch-purple); font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-semibold);
  display: flex; align-items: center; justify-content: center;
}
.rm-rcol__title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 16px; line-height: 1.25; color: var(--color-data-black); margin: 0; text-wrap: balance; min-height: 2.5em; }
.rm-rcol__desc { font-size: 14px; line-height: 1.6; color: var(--fg-tertiary); margin: 0; padding: 20px 22px; text-wrap: pretty; }

/* ===================== 7. UNIQUE ===================== */
.rm-unique { background: var(--color-draft-white); padding: clamp(56px, 7vw, 96px) 0; }
.rm-unique__panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.rm-uniq {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 32px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.rm-unique__panel > .rm-uniq:nth-child(2n) { border-right: none; }
.rm-unique__panel > .rm-uniq:nth-child(n+3) { border-bottom: none; }
.rm-uniq__check {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-teal);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-draft-white);
}
.rm-uniq__check svg { width: 16px; height: 16px; }
.rm-uniq__text { font-size: 15px; font-weight: var(--fw-semibold); color: var(--color-data-black); }

/* ===================== CTA (copied from AI BIM Checker — Centered) ===================== */
.bim-final { padding: clamp(64px, 8vw, 104px) 0; background: var(--bg-section-alt); }
.bim-final__inner {
  max-width: 720px; margin: 0 auto;
  background: var(--color-draft-white);
  border: 1px solid var(--purple-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.bim-final__media { height: 200px; }
.bim-final__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bim-final__head { padding: clamp(32px, 4vw, 48px) clamp(32px, 4vw, 52px) 0; text-align: center; }
.bim-final__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 0 16px;
}
.bim-final__title {
  font-family: var(--font-sans); font-weight: var(--fw-light);
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--color-data-black); margin: 0; text-wrap: balance;
}
.bim-final__sub { font-size: 17px; line-height: 1.6; color: var(--fg-tertiary); margin: 16px auto 0; max-width: 44ch; text-wrap: pretty; }
.bim-final__form { padding: 22px clamp(32px, 4vw, 52px) clamp(32px, 4vw, 52px); }
.bim-final__form .hs-form-frame { width: 100%; min-height: 160px; }

/* ===================== Responsive ===================== */
@media (max-width: 960px) {
  .rm-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .rm-res__grid { grid-template-columns: 1fr; }
  .rm-how__grid { grid-template-columns: 1fr; }
  .rm-hflow { grid-template-columns: 1fr; }
  .rm-hflow__rail { display: none; }
  .rm-hrow, .rm-hrow--reverse { grid-template-columns: 1fr; gap: 28px; }
  .rm-hrow--reverse .rm-hrow__text { order: 0; }
  .rm-stage { grid-template-columns: 1fr; gap: 22px; }
  .rm-console__stage { min-height: 380px; }
  .rm-challenge__grid { grid-template-columns: 1fr 1fr; }
  .rm-challenge__grid > .rm-chal { border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
  .rm-challenge__grid > .rm-chal:nth-child(2n) { border-right: none; }
}
@media (max-width: 760px) {
  .rm-deliver__panel, .rm-roles__grid, .rm-unique__panel, .rm-challenge__grid { grid-template-columns: 1fr; }
  .rm-deliver__panel > .rm-del, .rm-unique__panel > .rm-uniq { border-right: none; }
  .rm-lrow { grid-template-columns: 1fr; gap: 16px; }
  .rm-lrow__num { font-size: 18px; }
  .rm-showcase { grid-template-columns: 1fr; }
  .rm-vgrid { grid-template-columns: 1fr; }
  .rm-rgrid { grid-template-columns: 1fr; }
  .rm-rcols { grid-template-columns: repeat(2, 1fr); }
  .rm-rrow { grid-template-columns: 1fr; gap: 10px; }
  .rm-concept__inner { grid-template-columns: 1fr; gap: 10px; }
  .rm-distill__sources { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rm-inner, .rm-hero__inner, .rm-concept__inner { padding-left: 24px; padding-right: 24px; }
  .rm-hero__title { font-size: 34px; }
  .bim-final__inner { border-radius: var(--radius-lg); }
  .rm-rcols { grid-template-columns: 1fr; }
}

/* Baked edits from edits-requirements-management.css */
.rm-hero__actions { margin: 40px 0 0; }
.rm-concept-switch > [data-v="a"] { margin: 40px 0 0; }