/* ============================================================
   Use Cases — Design Maturity & Stage Readiness
   Per-page CSS, brand tokens only. Light mode; Arch Purple is the
   single accent. Maps to a future page-design-maturity.php.

   Visual language for this page is THRESHOLDS and GATES: readiness
   bars measured against a required line, a closing window of cheap
   change, per-gate small multiples, and an explicit split between
   what is asserted and what is proposed for human confirmation.
   Deliberately not the registers, matrices, gantts, ledgers or
   status boards used on the sibling use-case pages.
   ============================================================ */

.dm-page { background: var(--color-draft-white); }
.dm-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

.dm-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  color: var(--color-arch-purple);
  margin: 0 0 20px;
}
.dm-h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--color-data-black);
  margin: 0 0 18px;
  text-wrap: balance;
}
.dm-h2 .accent { color: var(--color-arch-purple); font-weight: 400; }
.dm-body {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--fg-secondary);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.dm-body:last-child { margin-bottom: 0; }
.dm-body strong { color: var(--color-data-black); font-weight: 600; }
.dm-body a { color: var(--color-arch-purple); text-decoration: underline; text-underline-offset: 3px; }
.dm-body a:hover { color: var(--purple-700); }

.dm-sec { padding: 96px 0; }
.dm-sec--alt { background: var(--bg-section-alt); }
.dm-sec--grey { background: var(--color-light-gray); }
.dm-sec__head { max-width: 800px; margin: 0 0 52px; }

/* Standard brand background set, shared by every section that exposes a
   background choice. Light fills and washes keep dark copy; the bold purple
   bands flip copy to white and hold Arch Purple through the first 40% of the
   ramp, so a tall section's heading still clears AA contrast. */
.dm-sec[data-bg="light-grey"]     { background: var(--color-light-gray); }
.dm-sec[data-bg="light-blue"]     { background: var(--bg-section-alt); }
.dm-sec[data-bg="light-lavender"] { background: var(--purple-50); }
.dm-sec[data-bg="white"]          { background: var(--color-draft-white); }

.dm-sec[data-bg="lavender-wash"] {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--purple-50) 0%, rgba(236, 236, 252, 0) 60%),
    var(--color-draft-white);
}
.dm-sec[data-bg="sky-wash"] {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--color-sky-100) 0%, rgba(236, 236, 252, 0) 60%),
    var(--color-draft-white);
}
.dm-sec[data-bg="lavender-white"] { background: linear-gradient(180deg, var(--purple-50), var(--color-draft-white)); }
.dm-sec[data-bg="sky-white"]      { background: linear-gradient(180deg, var(--color-sky-100), var(--color-draft-white)); }
.dm-sec[data-bg="lavender-sky"]   { background: linear-gradient(135deg, var(--purple-50), var(--color-sky-50)); }
.dm-sec[data-bg="periwinkle-soft"]{ background: linear-gradient(180deg, var(--purple-100), var(--color-draft-white)); }
.dm-sec[data-bg="sky-lavender"]   { background: linear-gradient(135deg, var(--color-sky-100), var(--purple-50)); }
.dm-sec[data-bg="lavender-glow"]  { background: radial-gradient(70% 60% at 50% 45%, var(--purple-50) 0%, var(--color-draft-white) 75%); }
.dm-sec[data-bg="cool-mist"]      { background: linear-gradient(135deg, var(--color-sky-50), var(--purple-50)); }
.dm-sec[data-bg="gray-fade"]      { background: linear-gradient(180deg, var(--color-light-gray), var(--color-draft-white)); }
.dm-sec[data-bg="lilac-wash"] {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--color-lavender) 0%, rgba(255, 255, 255, 0) 62%),
    var(--color-draft-white);
}

/* Bold purple bands. The ramps run dark to bright so white body copy stays
   legible at every point: --purple-700 (7.69:1) through Arch Purple /
   --purple-500 (5.67:1) to a light end at ~4.6:1. The light end is a token
   mix rather than a scale step because no step between --purple-500 and
   --purple-400 clears 4.5:1 (--purple-400 measures 4.11:1); raw Taro and
   Lavender are 2.23:1 and 2.03:1. */
.dm-sec[data-bg="indigo-fade"]     { background: linear-gradient(135deg, var(--purple-700), color-mix(in oklab, var(--color-taro) 20%, var(--color-arch-purple))); }
.dm-sec[data-bg="purple-taro"]     { background: linear-gradient(135deg, var(--color-arch-purple), color-mix(in oklab, var(--color-taro) 20%, var(--color-arch-purple))); }
.dm-sec[data-bg="purple-lavender"] { background: linear-gradient(135deg, var(--purple-700), color-mix(in oklab, var(--color-lavender) 12%, var(--color-arch-purple))); }
.dm-sec[data-bg="deep-indigo"]     { background: linear-gradient(135deg, var(--purple-700), var(--color-arch-purple)); }
.dm-sec[data-bg="vertical-purple"] { background: linear-gradient(180deg, var(--purple-700), color-mix(in oklab, var(--color-taro) 20%, var(--color-arch-purple))); }
.dm-sec[data-bg="purple-corner"]   { background: radial-gradient(115% 135% at 18% 25%, color-mix(in oklab, var(--color-taro) 20%, var(--color-arch-purple)) 0%, var(--purple-700) 100%); }
.dm-sec[data-bg="gradient-hero"]   { background: linear-gradient(115deg, var(--purple-700) 0%, var(--color-arch-purple) 50%, color-mix(in oklab, var(--color-taro) 20%, var(--color-arch-purple)) 100%); }

.dm-sec[data-bg="indigo-fade"] .dm-eyebrow,
.dm-sec[data-bg="purple-taro"] .dm-eyebrow,
.dm-sec[data-bg="purple-lavender"] .dm-eyebrow,
.dm-sec[data-bg="deep-indigo"] .dm-eyebrow,
.dm-sec[data-bg="vertical-purple"] .dm-eyebrow,
.dm-sec[data-bg="purple-corner"] .dm-eyebrow,
.dm-sec[data-bg="gradient-hero"] .dm-eyebrow,
.dm-sec[data-bg="indigo-fade"] .dm-h2,
.dm-sec[data-bg="purple-taro"] .dm-h2,
.dm-sec[data-bg="purple-lavender"] .dm-h2,
.dm-sec[data-bg="deep-indigo"] .dm-h2,
.dm-sec[data-bg="vertical-purple"] .dm-h2,
.dm-sec[data-bg="purple-corner"] .dm-h2,
.dm-sec[data-bg="gradient-hero"] .dm-h2,
.dm-sec[data-bg="indigo-fade"] .dm-h2 .accent,
.dm-sec[data-bg="purple-taro"] .dm-h2 .accent,
.dm-sec[data-bg="purple-lavender"] .dm-h2 .accent,
.dm-sec[data-bg="deep-indigo"] .dm-h2 .accent,
.dm-sec[data-bg="vertical-purple"] .dm-h2 .accent,
.dm-sec[data-bg="purple-corner"] .dm-h2 .accent,
.dm-sec[data-bg="gradient-hero"] .dm-h2 .accent,
.dm-sec[data-bg="indigo-fade"] .dm-body,
.dm-sec[data-bg="purple-taro"] .dm-body,
.dm-sec[data-bg="purple-lavender"] .dm-body,
.dm-sec[data-bg="deep-indigo"] .dm-body,
.dm-sec[data-bg="vertical-purple"] .dm-body,
.dm-sec[data-bg="purple-corner"] .dm-body,
.dm-sec[data-bg="gradient-hero"] .dm-body,
.dm-sec[data-bg="indigo-fade"] .dm-list li,
.dm-sec[data-bg="purple-taro"] .dm-list li,
.dm-sec[data-bg="purple-lavender"] .dm-list li,
.dm-sec[data-bg="deep-indigo"] .dm-list li,
.dm-sec[data-bg="vertical-purple"] .dm-list li,
.dm-sec[data-bg="purple-corner"] .dm-list li,
.dm-sec[data-bg="gradient-hero"] .dm-list li,
.dm-sec[data-bg="indigo-fade"] .dm-body strong,
.dm-sec[data-bg="purple-taro"] .dm-body strong,
.dm-sec[data-bg="purple-lavender"] .dm-body strong,
.dm-sec[data-bg="deep-indigo"] .dm-body strong,
.dm-sec[data-bg="vertical-purple"] .dm-body strong,
.dm-sec[data-bg="purple-corner"] .dm-body strong,
.dm-sec[data-bg="gradient-hero"] .dm-body strong { color: var(--color-draft-white); }

/* on a bold band the list marker needs to read against purple */
.dm-sec[data-bg="indigo-fade"] .dm-list li::before,
.dm-sec[data-bg="purple-taro"] .dm-list li::before,
.dm-sec[data-bg="purple-lavender"] .dm-list li::before,
.dm-sec[data-bg="deep-indigo"] .dm-list li::before,
.dm-sec[data-bg="vertical-purple"] .dm-list li::before,
.dm-sec[data-bg="purple-corner"] .dm-list li::before,
.dm-sec[data-bg="gradient-hero"] .dm-list li::before { background: var(--color-draft-white); }

/* ---------- 1. HERO ---------- */
/* The architecture photograph sits behind the whole hero, visible from the
   very top. Values baked from the Tweaks panel: full opacity, 34% vertical
   position, no wash over it. */
.dm-hero {
  position: relative;
  padding: 72px 0 64px;
  background: var(--color-draft-white);
}
.dm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* url() resolves against this stylesheet, not the document */
  background-image: url("../backgrounds/hero-architecture.jpg");
  background-size: cover;
  background-position: center 34%;
  background-repeat: no-repeat;
}
.dm-hero__inner { position: relative; z-index: 2; }
.dm-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.dm-hero__copy { min-width: 0; }
.dm-hero__viz { min-width: 0; }
.dm-hero__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(34px, 3.7vw, 52px);
  line-height: 1.07;
  letter-spacing: -0.022em;
  color: var(--color-data-black);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.dm-hero__title .accent { color: var(--color-arch-purple); font-weight: 400; }
.dm-hero__lede { font-size: 17px; line-height: 1.62; color: var(--fg-secondary); margin: 0; max-width: 54ch; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.dm-chips li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  background: var(--color-draft-white);
  border: 1px solid var(--purple-100, #E2E2FA);
  border-radius: 999px;
  padding: 6px 13px;
}

.dm-viz-card {
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  padding: 24px 26px 26px;
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 10px 30px rgba(16, 16, 16, 0.05);
}
.dm-viz-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
}
.dm-viz-card__head b { color: var(--color-arch-purple); font-weight: 500; }
.dm-viz-card__foot {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-tertiary, #8B8B8B);
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
}
.dm-viz-card__foot strong { color: var(--color-data-black); font-weight: 600; }

/* Hero · resolution measured against what the gate requires */
.dm-gate__q { margin: 0 0 22px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-data-black); }
.dm-gate__meter { position: relative; padding-top: 26px; }
.dm-gate__track {
  display: grid;
  grid-template-columns: 62fr 22fr 16fr;
  gap: 3px;
  height: 46px;
}
.dm-gate__seg {
  border-radius: 3px;
  display: grid;
  place-items: center start;
  text-align: left;
  line-height: 1.25;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}
.dm-gate__seg--settled { background: var(--color-arch-purple); color: var(--color-draft-white); }
.dm-gate__seg--open    { background: var(--state-warning-bg); color: var(--state-warning-fg); }
.dm-gate__seg--early   {
  background: repeating-linear-gradient(135deg, var(--color-lavender) 0 4px, transparent 4px 9px), var(--color-draft-white);
  box-shadow: inset 0 0 0 1px var(--color-lavender);
  color: var(--fg-secondary);
}
.dm-gate__req {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-data-black);
  box-shadow: 0 0 0 1.5px var(--color-draft-white);
}
.dm-gate__req span {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-data-black);
  background: var(--color-draft-white);
  padding: 0 6px;
}
.dm-gate__key { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 16px 0 0; padding: 0; list-style: none; }
.dm-gate__key li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-secondary); }
.dm-gate__key i { width: 13px; height: 9px; border-radius: 2px; flex: none; }
.dm-gate__verdict {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md, 6px);
  background: var(--state-warning-bg);
}
.dm-gate__verdict p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--state-warning-fg); }
.dm-gate__verdict b {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--state-warning-fg);
  white-space: nowrap;
}

/* ---------- 2. CURRENT PRACTICE ---------- */
.dm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.dm-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.dm-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
}
.dm-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--color-arch-purple);
}

.dm-panel {
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  padding: 26px 28px 28px;
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04);
}
.dm-panel__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin: 0 0 30px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
}

/* the closing window: how cheaply the design can still change.
   The chart reserves its own band for the marker labels, so they cannot
   print over the axis caption above it. */
.dm-win {
  position: relative;
  padding-top: 26px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px;
}
/* the y caption runs up the vertical scale so the axes cannot be read the
   wrong way round */
.dm-win__yaxis {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
  white-space: nowrap;
}
.dm-win__cols, .dm-win__axis, .dm-win__cap { grid-column: 2; }
.dm-win__cap { grid-column: 1 / -1; }
.dm-win__cols {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  align-items: end;
  height: 138px;
}
.dm-win__col { display: block; border-radius: 2px 2px 0 0; background: var(--purple-100, #E2E2FA); }
.dm-win__col--past { background: var(--color-light-gray); }
.dm-win__mark { position: absolute; top: 0; bottom: 0; width: 2px; }
.dm-win__mark--commit { background: var(--color-arch-purple); }
.dm-win__mark--found { background: var(--state-warning-fg); }
.dm-win__mark span {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-draft-white);
  padding: 0 6px;
}
.dm-win__mark--commit span { color: var(--color-arch-purple); }
.dm-win__mark--found span { color: var(--state-warning-fg); }
.dm-win__axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.dm-win__cap {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-secondary);
}
.dm-win__cap strong { color: var(--color-data-black); font-weight: 600; }
.dm-win__yaxis {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}

/* ---------- 3. WITH TEKTOME · per-gate small multiples ---------- */
.dm-gates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dm-card {
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  padding: 24px 22px 26px;
  display: grid;
  align-content: start;
  gap: 16px;
}
.dm-card--ready { border-color: var(--color-arch-purple); }
/* the card is a grid, so an inline-flex badge would blockify to the track */
.dm-card > .dm-verdict { justify-self: start; }
.dm-card__name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--color-data-black); }
.dm-card__name span {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin-top: 6px;
}
.dm-mini { display: grid; gap: 7px; }
.dm-mini__bar { display: grid; grid-auto-flow: column; gap: 2px; height: 12px; }
.dm-mini__bar i { border-radius: 2px; }
.dm-mini__legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary, #8B8B8B);
}
.dm-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dm-verdict::before { content: ""; width: 7px; height: 7px; border-radius: 999px; flex: none; }
.dm-verdict--go { background: var(--purple-100, #E2E2FA); color: var(--purple-700); }
.dm-verdict--go::before { background: var(--color-arch-purple); }
.dm-verdict--hold { background: var(--state-warning-bg); color: var(--state-warning-fg); }
.dm-verdict--hold::before { background: var(--state-warning-fg); }
.dm-verdict--early { background: var(--color-light-gray); color: var(--fg-secondary); }
.dm-verdict--early::before { background: var(--gray-400, #D4D4D4); }
.dm-card__why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg-secondary); }
.dm-gates__note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-tertiary, #8B8B8B);
  margin: 22px 0 0;
  max-width: 78ch;
}

/* ---------- 4. WHAT YOU GET ---------- */
.dm-gets { display: grid; gap: 20px; }
.dm-get {
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  padding: 34px 36px;
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  gap: 48px;
  align-items: center;
}
.dm-get__copy { min-width: 0; }
.dm-get__viz { min-width: 0; }
.dm-get:nth-child(even) .dm-get__copy { order: 2; }
.dm-get:nth-child(even) .dm-get__viz { order: 1; }
.dm-get__title { font-size: 20px; font-weight: 600; color: var(--color-data-black); margin: 0 0 10px; line-height: 1.3; }
.dm-get__text { font-size: 15.5px; line-height: 1.64; color: var(--fg-secondary); margin: 0; text-wrap: pretty; }
.dm-get__eg {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-tertiary, #8B8B8B);
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
}
.dm-get__eg b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  display: block;
  margin-bottom: 6px;
}

.dm-viz { background: var(--color-light-gray); border-radius: var(--radius-lg, 8px); padding: 20px 20px 22px; }
.dm-viz__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-300, #D9D9D9);
}

/* 1 · gate ladder: four gates, and where the design stands against each */
.dm-ladder { display: grid; gap: 8px; }
.dm-ladder__row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 96px;
  gap: 12px;
  align-items: center;
  background: var(--color-draft-white);
  border-radius: var(--radius-md, 6px);
  padding: 11px 13px;
}
.dm-ladder__name { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--color-data-black); }
.dm-ladder__bar { display: grid; grid-auto-flow: column; gap: 2px; height: 12px; }
.dm-ladder__bar i { border-radius: 2px; }
.dm-ladder__state {
  margin: 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dm-ladder__state--go { color: var(--color-arch-purple); }
.dm-ladder__state--hold { color: var(--state-warning-fg); }
.dm-ladder__state--early { color: var(--fg-tertiary, #8B8B8B); }

/* 2 · presence check: what this stage expects, and where the expectation came from */
.dm-pres { display: grid; gap: 7px; }
.dm-pres__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: var(--color-draft-white);
  border-radius: var(--radius-md, 6px);
  padding: 10px 13px;
  font-size: 12.5px;
  color: var(--color-data-black);
}
.dm-pres__row--absent { box-shadow: inset 2px 0 0 var(--state-warning-fg); }
.dm-pres__what { margin: 0; line-height: 1.4; }
.dm-src {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
  background: var(--purple-50);
  color: var(--color-arch-purple);
}
.dm-src--contract { background: var(--color-sky-100); color: var(--color-data-black); }
.dm-src--exemplar { background: var(--color-light-gray); color: var(--fg-secondary); }
.dm-pres__state {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-arch-purple);
}
.dm-pres__row--absent .dm-pres__state { color: var(--state-warning-fg); }
.dm-pres__key { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }

/* 3 · proposed then confirmed: the honest-scope split */
.dm-conf { display: grid; gap: 10px; }
.dm-conf__col {
  background: var(--color-draft-white);
  border-radius: var(--radius-md, 6px);
  padding: 13px 15px 15px;
}
.dm-conf__col--human { border: 1px solid var(--color-arch-purple); }
.dm-conf__tag {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.dm-conf__col--human .dm-conf__tag { color: var(--color-arch-purple); }
.dm-conf__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dm-conf__items li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-data-black);
}
.dm-conf__items i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-tertiary, #8B8B8B);
}
.dm-conf__items i.is-yes { color: var(--color-arch-purple); }
.dm-conf__items i.is-wait { color: var(--state-warning-fg); }
.dm-conf__arrow { justify-self: center; color: var(--color-arch-purple); font-size: 14px; line-height: 1; }
.dm-conf__note {
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: var(--radius-md, 6px);
  background: var(--purple-50);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-data-black);
}

/* 4 · the commit summary: the blunt list */
.dm-commit { display: grid; gap: 8px; }
.dm-commit__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--color-draft-white);
  border-radius: var(--radius-md, 6px);
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--color-data-black);
}
.dm-commit__row--no { background: var(--state-warning-bg); }
.dm-commit__row p { margin: 0; line-height: 1.42; }
.dm-commit__row i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-arch-purple);
}
.dm-commit__row--no i { color: var(--state-warning-fg); }
.dm-commit__sum {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: var(--radius-md, 6px);
  background: var(--purple-50);
}
.dm-commit__sum p { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--color-data-black); }
.dm-commit__sum b { font-family: var(--font-mono); font-size: 14px; color: var(--color-arch-purple); }

/* ---------- 5. WHERE IT LANDS ---------- */
.dm-ledger {
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
}
.dm-ledger__head,
.dm-ledger__row { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 28px; }
.dm-ledger__head {
  padding: 15px 28px;
  background: var(--color-light-gray);
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
}
.dm-ledger__head span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.dm-ledger__row {
  padding: 26px 28px;
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-secondary);
}
.dm-ledger__row:last-child { border-bottom: 0; }
.dm-ledger__row b { display: block; color: var(--color-data-black); font-weight: 600; }
.dm-ledger__row em { font-style: normal; color: var(--color-arch-purple); font-weight: 500; }
/* the load-bearing row, matching .rc-ledger__row--key */
.dm-ledger__row--key {
  background: var(--purple-50);
  box-shadow: inset 3px 0 0 var(--color-arch-purple);
}
.dm-ledger__row--key > div:first-child b { color: var(--color-arch-purple); }

/* Sourced figures, "rule" treatment as on the sibling use-case pages. */
.dm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.dm-stat {
  padding: 28px 26px 26px;
  border-radius: 0 0 var(--radius-lg, 8px) var(--radius-lg, 8px);
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-top: 4px solid var(--viz, var(--color-arch-purple));
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 10px 26px rgba(16, 16, 16, 0.06);
}
.dm-stat__n { font-size: 54px; font-weight: 300; letter-spacing: -0.02em; color: var(--color-arch-purple); margin: 0 0 14px; line-height: 1; }
.dm-stat__t { font-size: 15px; line-height: 1.55; color: var(--color-data-black); margin: 0 0 12px; }
.dm-stat__s {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary, #8B8B8B);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
}

/* ---------- 6. WHY TEKTOME ---------- */
/* Comparison as a table, matching the Risk & Review Coverage page. Our column
   keeps the white table ground with an Arch Purple edge; theirs takes the grey
   fill, so the three surfaces stay distinct whatever the section behind. */
.dm-vs { display: block; }
.dm-vs__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  table-layout: fixed;
}
.dm-vs__table th, .dm-vs__table td { text-align: left; vertical-align: top; padding: 18px 22px; }
.dm-vs__table thead th {
  background: var(--color-light-gray);
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  padding-top: 15px;
  padding-bottom: 15px;
}
.dm-vs__table thead th:first-child { width: 22%; }
.dm-vs__table thead th.is-us { color: var(--color-arch-purple); }
.dm-vs__table thead th.is-us img { display: block; height: 19px; width: auto; }
.dm-vs__table tbody tr + tr th, .dm-vs__table tbody tr + tr td { border-top: 1px solid var(--border-subtle, #EAEAEA); }
.dm-vs__table tbody th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-data-black);
}
.dm-vs__table td { font-size: 14.5px; line-height: 1.55; color: var(--fg-secondary); }
.dm-vs__table th:nth-child(2), .dm-vs__table td:nth-child(2) { background: var(--color-light-gray); }
.dm-vs__table .is-us { background: var(--color-draft-white); box-shadow: inset 3px 0 0 var(--color-arch-purple); }
.dm-vs__table td.is-us { color: var(--color-data-black); }
.dm-vs__cell { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 11px; align-items: start; }
/* --gray-400 is 1.35:1 on the grey cell ground, under the 3:1 floor */
.dm-vs__cell svg { width: 15px; height: 15px; margin-top: 3px; color: var(--fg-tertiary, #8B8B8B); }
.dm-vs__cell--us svg { color: var(--color-arch-purple); }

@media (max-width: 900px) {
  .dm-vs__table thead th:first-child { width: auto; }
  .dm-vs__table th, .dm-vs__table td { padding: 13px 14px; }
}
/* below 700px three columns starve the text box, so the rows stack */
@media (max-width: 700px) {
  .dm-vs__table, .dm-vs__table tbody, .dm-vs__table tr, .dm-vs__table th, .dm-vs__table td { display: block; }
  .dm-vs__table thead { display: none; }
  .dm-vs__table tbody tr { padding: 4px 0 14px; }
  .dm-vs__table tbody tr + tr { border-top: 1px solid var(--border-subtle, #EAEAEA); }
  .dm-vs__table tbody tr + tr th, .dm-vs__table tbody tr + tr td { border-top: 0; }
  .dm-vs__table tbody th { padding-bottom: 10px; }
  .dm-vs__table td { margin: 0 14px 8px; padding: 12px 14px; border-radius: var(--radius-md, 6px); }
  .dm-vs__table td:last-child { margin-bottom: 0; }
  .dm-vs__table td::before {
    content: "A rule-based tool";
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-secondary);
  }
  .dm-vs__table td.is-us::before { content: "Tektome"; color: var(--color-arch-purple); }
}

.dm-scope {
  margin: 20px 0 0;
  padding: 22px 26px;
  border: 1px dashed var(--gray-300, #D9D9D9);
  border-radius: var(--radius-lg, 8px);
  background: var(--color-draft-white);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
.dm-scope__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-light-gray);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  white-space: nowrap;
}
.dm-scope__tag::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--color-taro); }
.dm-scope p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--fg-secondary); }
.dm-scope p strong { color: var(--color-data-black); font-weight: 600; }

/* ---------- 7. WHO IT'S FOR ---------- */
/* Executive first, per the marketing foundation: the consequence leads, the
   roles sit underneath, and each carries its buying role so a Champion never
   reads as a peer of the Budget owner. The daily user is deliberately last
   and smallest, so the section cannot drift back to productivity. */
.dm-roles__lede { max-width: 74ch; margin: 0 0 34px; font-size: 16.5px; line-height: 1.7; color: var(--fg-secondary); }
.dm-roles__lede strong { color: var(--color-data-black); font-weight: 600; }

.dm-role__buy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: var(--purple-50);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
}
.dm-role__buy::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--color-arch-purple); flex: none; }
.dm-role__who em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-tertiary, #8B8B8B);
  line-height: 1.45;
}

/* Card backgrounds. The four architecture images sit behind a white veil so
   body copy keeps its contrast; the image reads as texture, not subject. */
.dm-role {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-draft-white);
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dm-role::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.684) 100%);
}
.dm-role[data-card="1"] { --card-img: url("../backgrounds/card-facade-curve-card.png"); }
.dm-role[data-card="2"] { --card-img: url("../backgrounds/card-apex-card.png"); }
.dm-role[data-card="3"] { --card-img: url("../backgrounds/card-corridor-card.png"); }
.dm-role[data-card="4"] { --card-img: url("../backgrounds/card-lattice-card.png"); }
/* the table layout has no card surface, so no image behind it */
.dm-roles[data-layout="table"] .dm-role::before { display: none; }
.dm-roles[data-layout="table"] .dm-role { background-image: none; }

.dm-roles[data-layout="ladder"] { grid-template-columns: repeat(3, 1fr); }
.dm-roles[data-layout="ladder"] .dm-role:first-child { grid-column: 1 / -1; }
.dm-roles[data-layout="ladder"] .dm-role:first-child .dm-role__t { font-size: 22px; }
.dm-roles[data-layout="ladder"] .dm-role:first-child .dm-role__x { max-width: 62ch; }

.dm-roles[data-layout="tiers"] { grid-template-columns: repeat(2, 1fr); counter-reset: tier; }
.dm-roles[data-layout="tiers"] .dm-role { counter-increment: tier; }
.dm-roles[data-layout="tiers"] .dm-role__buy::before {
  content: counter(tier, decimal-leading-zero);
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--color-arch-purple);
}

.dm-roles[data-layout="table"] { gap: 0; }
.dm-roles[data-layout="table"] .dm-role {
  display: grid;
  grid-template-columns: 168px 232px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  background: none;
  border: 0;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: 0;
  padding: 26px 4px;
}
.dm-roles[data-layout="table"] .dm-role:last-child { border-bottom: 1px solid var(--border-subtle, #EAEAEA); }
.dm-roles[data-layout="table"] .dm-role__buy,
.dm-roles[data-layout="table"] .dm-role__who,
.dm-roles[data-layout="table"] .dm-role__t { margin: 0; }
.dm-roles[data-layout="table"] .dm-role__who { grid-column: 2; margin-bottom: 8px; }
.dm-roles[data-layout="table"] .dm-role__t { grid-column: 2; font-size: 15px; }
.dm-roles[data-layout="table"] .dm-role__x { grid-column: 3; }

.dm-roles__foot {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 28px;
  align-items: baseline;
  margin-top: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
}
.dm-roles__foot-buy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.dm-roles__foot-x { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg-secondary); max-width: 78ch; }
.dm-roles__foot-x strong { color: var(--color-data-black); font-weight: 600; }

.dm-roles { display: grid; gap: 20px; }
.dm-role {
  background-color: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  padding: 26px 24px 28px;
}
.dm-role__who {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  margin: 0 0 14px;
  line-height: 1.5;
}
.dm-role__t { font-size: 16px; font-weight: 600; color: var(--color-data-black); margin: 0 0 10px; line-height: 1.35; }
.dm-role__x { font-size: 14px; line-height: 1.6; color: var(--fg-secondary); margin: 0; text-wrap: pretty; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .dm-roles[data-layout="ladder"], .dm-roles[data-layout="tiers"] { grid-template-columns: repeat(2, 1fr); }
  .dm-gates { grid-template-columns: repeat(2, 1fr); }
  .dm-stats { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dm-hero { padding: 60px 0 52px; }
  .dm-sec { padding: 68px 0; }
  .dm-inner, .dm-hero__inner { padding: 0 24px; }
  .dm-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .dm-split { grid-template-columns: 1fr; gap: 40px; }
  .dm-vs { grid-template-columns: 1fr; }
  .dm-ledger__head { display: none; }
  .dm-ledger__row { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .dm-get { grid-template-columns: 1fr; gap: 26px; padding: 26px; }
  .dm-get:nth-child(even) .dm-get__copy { order: 0; }
  .dm-get:nth-child(even) .dm-get__viz { order: 0; }
  .dm-scope { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  .dm-roles, .dm-gates { grid-template-columns: 1fr; }
  .dm-ladder__row { grid-template-columns: 92px minmax(0, 1fr); }
  .dm-ladder__state { grid-column: 1 / -1; text-align: left; }
  .dm-pres__row { grid-template-columns: 1fr auto; }
  .dm-pres__state { grid-column: 1 / -1; }
}