/* ============================================================
   Use Cases — Deliverables & Information Delivery
   Per-page CSS, brand tokens only. Light mode; Arch Purple is the
   single accent. Maps to a future page-deliverables.php.

   Visual language for this page is TIME and OWNERSHIP: dated bars,
   a today line, forecast deltas and named owners. Deliberately not
   the registers, matrices or status tables used on the sibling
   use-case pages.
   ============================================================ */

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

.de-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;
}
.de-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;
}
.de-h2 .accent { color: var(--color-arch-purple); font-weight: 400; }
.de-body {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--fg-secondary);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.de-body:last-child { margin-bottom: 0; }
.de-body strong { color: var(--color-data-black); font-weight: 600; }
.de-body a { color: var(--color-arch-purple); text-decoration: underline; text-underline-offset: 3px; }
.de-body a:hover { color: var(--purple-700); }

.de-sec { padding: 96px 0; }
.de-sec--alt { background: var(--bg-section-alt); }
.de-sec--grey { background: var(--color-light-gray); }
.de-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. */
.de-sec[data-bg="light-grey"]     { background: var(--color-light-gray); }
.de-sec[data-bg="light-blue"]     { background: var(--bg-section-alt); }
.de-sec[data-bg="light-lavender"] { background: var(--purple-50); }
.de-sec[data-bg="white"]          { background: var(--color-draft-white); }

.de-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);
}
.de-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);
}
.de-sec[data-bg="lavender-white"] { background: linear-gradient(180deg, var(--purple-50), var(--color-draft-white)); }
.de-sec[data-bg="sky-white"]      { background: linear-gradient(180deg, var(--color-sky-100), var(--color-draft-white)); }
.de-sec[data-bg="lavender-sky"]   { background: linear-gradient(135deg, var(--purple-50), var(--color-sky-50)); }
.de-sec[data-bg="periwinkle-soft"]{ background: linear-gradient(180deg, var(--purple-100), var(--color-draft-white)); }
.de-sec[data-bg="sky-lavender"]   { background: linear-gradient(135deg, var(--color-sky-100), var(--purple-50)); }
.de-sec[data-bg="lavender-glow"]  { background: radial-gradient(70% 60% at 50% 45%, var(--purple-50) 0%, var(--color-draft-white) 75%); }
.de-sec[data-bg="cool-mist"]      { background: linear-gradient(135deg, var(--color-sky-50), var(--purple-50)); }
.de-sec[data-bg="gray-fade"]      { background: linear-gradient(180deg, var(--color-light-gray), var(--color-draft-white)); }
.de-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. */
.de-sec[data-bg="indigo-fade"]     { background: linear-gradient(135deg, var(--purple-700), color-mix(in oklab, var(--color-taro) 20%, var(--color-arch-purple))); }
.de-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))); }
.de-sec[data-bg="purple-lavender"] { background: linear-gradient(135deg, var(--purple-700), color-mix(in oklab, var(--color-lavender) 12%, var(--color-arch-purple))); }
.de-sec[data-bg="deep-indigo"]     { background: linear-gradient(135deg, var(--purple-700), var(--color-arch-purple)); }
.de-sec[data-bg="vertical-purple"] { background: linear-gradient(180deg, var(--purple-700), color-mix(in oklab, var(--color-taro) 20%, var(--color-arch-purple))); }
.de-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%); }
.de-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%); }

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

/* on a bold band the list marker needs to read against purple */
.de-sec[data-bg="indigo-fade"] .de-list li::before,
.de-sec[data-bg="purple-taro"] .de-list li::before,
.de-sec[data-bg="purple-lavender"] .de-list li::before,
.de-sec[data-bg="deep-indigo"] .de-list li::before,
.de-sec[data-bg="vertical-purple"] .de-list li::before,
.de-sec[data-bg="purple-corner"] .de-list li::before,
.de-sec[data-bg="gradient-hero"] .de-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. */
.de-hero {
  position: relative;
  padding: 72px 0 64px;
  background: var(--color-draft-white);
}
.de-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;
}
.de-hero__inner { position: relative; z-index: 2; }
.de-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.de-hero__copy { min-width: 0; }
.de-hero__viz { min-width: 0; }
.de-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;
}
.de-hero__title .accent { color: var(--color-arch-purple); font-weight: 400; }
.de-hero__lede { font-size: 17px; line-height: 1.62; color: var(--fg-secondary); margin: 0; max-width: 54ch; }
.de-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.de-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;
}

.de-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);
}
.de-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);
}
.de-viz-card__head b { color: var(--color-arch-purple); font-weight: 500; }
.de-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);
}
.de-viz-card__foot strong { color: var(--color-data-black); font-weight: 600; }

/* Hero · the false finish line. A delivery log stops at "received". */
.de-stage__item { margin: 0 0 18px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-data-black); }
.de-stage { display: grid; gap: 10px; }
.de-stage__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  align-items: center;
}
.de-stage__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.de-stage__mark {
  min-height: 30px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: var(--radius-md, 6px);
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12.5px;
  background: var(--purple-100, #E2E2FA);
  color: var(--purple-700);
}
.de-stage__row--fail .de-stage__mark { background: var(--state-warning-bg); color: var(--state-warning-fg); }
.de-stage__row--fail .de-stage__label { color: var(--state-warning-fg); }
.de-stage__cut {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  align-items: center;
  margin: 2px 0;
}
.de-stage__cutline {
  border-top: 1.5px dashed var(--color-arch-purple);
  position: relative;
}
.de-stage__cuttag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  text-align: right;
}

/* ---------- 2. PROBLEM · programme impact ---------- */
.de-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.de-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.de-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);
}
.de-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--color-arch-purple);
}

.de-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);
}
.de-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 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
}
.de-panel__foot {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
}
.de-panel__foot strong { color: var(--color-data-black); font-weight: 600; }

/* dated bars against a shared week scale, with a today line */
.de-gantt { position: relative; }
.de-gantt__scale {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  margin-bottom: 30px;
}
.de-gantt__weeks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.de-gantt__rows { position: relative; display: grid; gap: 9px; }
.de-gantt__row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.de-gantt__name { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--color-data-black); }
.de-gantt__track {
  position: relative;
  height: 24px;
  background: var(--color-light-gray);
  border-radius: 3px;
  background-image: linear-gradient(90deg, var(--gray-300, #D9D9D9) 1px, transparent 1px);
  background-size: 16.666% 100%;
}
.de-gantt__bar {
  position: absolute;
  top: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--color-arch-purple);
}
.de-gantt__bar--late { background: var(--state-warning-bg); border: 1px solid var(--state-warning-fg); }
.de-gantt__bar--knock { background: repeating-linear-gradient(135deg, var(--state-warning-fg) 0 3px, transparent 3px 7px); }
.de-gantt__today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--color-data-black);
}
.de-gantt__today span {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-data-black);
  background: var(--color-draft-white);
  padding: 0 5px;
  white-space: nowrap;
}
.de-gantt__key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.de-gantt__key li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-secondary); }
.de-gantt__key i { width: 14px; height: 9px; border-radius: 2px; flex: none; }

/* The trackers a project already runs, listed under the chart as examples.
   Henry's point: the gate is served by many parallel registers, not one
   schedule. Kept as a footnote so the chart itself stays unchanged. */
.de-trackers {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
}
.de-trackers__lab {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.de-trackers__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.de-trackers__list li {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--fg-secondary);
  background: var(--color-light-gray);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ---------- 3. THE DELIVERY POSITION ---------- */
/* Owner avatars and status flags, shared by the composite key visual and
   the What you get graphics. The old flat board this section used was
   replaced by the layered composite below. */
.de-owner { display: inline-flex; align-items: center; gap: 8px; }
.de-owner i {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--purple-100, #E2E2FA);
  color: var(--purple-700);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-style: normal;
  flex: none;
}
.de-owner span { font-size: 12.5px; color: var(--color-data-black); }
.de-owner--none i { background: transparent; border: 1.5px dashed var(--state-warning-fg); color: var(--state-warning-fg); }
.de-owner--none span { color: var(--state-warning-fg); }

.de-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.de-flag::before { content: ""; width: 7px; height: 7px; border-radius: 999px; flex: none; }
.de-flag--ok    { background: var(--purple-100, #E2E2FA); color: var(--purple-700); }
.de-flag--ok::before { background: var(--color-arch-purple); }
.de-flag--late  { background: var(--state-warning-bg); color: var(--state-warning-fg); }
.de-flag--late::before { background: var(--state-warning-fg); }
.de-flag--part  { background: var(--color-sky-100); color: var(--color-data-black); }
.de-flag--part::before { background: var(--color-arch-purple); }
.de-flag--wait  { background: var(--color-light-gray); color: var(--fg-secondary); }
.de-flag--wait::before { background: var(--gray-400, #D4D4D4); }

/* ============================================================
   3b. LAYERED KEY VISUAL
   Three compositions of the delivery position, switchable from Tweaks
   and draggable at wide widths. Light mode; floating cards carry a
   shadow only (never shadow + border). Below 1151px the overlays
   rejoin the flow.
   ============================================================ */
.de-comp { position: relative; }
.de-comp__pad { padding: 0; }

.de-win {
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
}
.de-win__bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 15px 22px;
  background: var(--color-light-gray);
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
}
.de-win__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-data-black); }
.de-win__title span {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  background: var(--purple-50);
  border-radius: 999px;
  padding: 3px 9px;
  vertical-align: 2px;
}
.de-win__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.de-win__body { padding: 20px 22px 24px; }
.de-win__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
}
.de-win__foot p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.de-win__foot b { font-family: var(--font-mono); font-size: 11px; color: var(--color-arch-purple); }

/* schedule rows: due and forecast are the anchors on this page */
.de-sched { display: grid; gap: 7px; }
.de-sched__head,
.de-sched__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 58px 124px 186px;
  gap: 14px;
  align-items: center;
}
.de-sched__head {
  padding: 0 14px 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
}
.de-sched__head span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.de-sched__row {
  background: var(--color-light-gray);
  border-radius: var(--radius-md, 6px);
  padding: 11px 14px;
}
.de-sched__row--risk { background: var(--purple-50); }
.de-sched__what { margin: 0; font-size: 13px; line-height: 1.4; color: var(--color-data-black); }
.de-sched__what span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary, #8B8B8B);
  margin-top: 4px;
}
.de-sched__d { margin: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--color-data-black); }
.de-sched__d--slip { color: var(--state-warning-fg); }
.de-sched__row > .de-flag { justify-self: start; }

/* floating overlay cards */
.de-float {
  background: var(--color-draft-white);
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 20px 48px rgba(16, 16, 16, 0.16);
  padding: 18px 20px 20px;
}
.de-float--tint { background: var(--purple-50); }
.de-float__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 14px;
}
.de-float__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-data-black); line-height: 1.3; }
.de-float__title 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: 5px;
}
.de-float__x { color: var(--fg-tertiary, #8B8B8B); display: block; }
.de-float__x svg { width: 15px; height: 15px; display: block; }
.de-float__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-secondary); }
.de-float__text strong { color: var(--color-data-black); font-weight: 600; }
.de-float__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
}
.de-float__act {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.de-float__rows { display: grid; gap: 9px; }
.de-float__rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
  color: var(--color-data-black);
}
.de-float__rows 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);
}
.de-float__rows i.is-no { color: var(--state-warning-fg); }

/* count tiles inside a float */
.de-trio { display: grid; gap: 8px; }
.de-trio__cell {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  background: var(--color-light-gray);
  border-radius: var(--radius-md, 6px);
  padding: 11px 13px;
}
.de-float--tint .de-trio__cell { background: var(--color-draft-white); }
.de-trio__cell--warn { background: var(--state-warning-bg); }
.de-float--tint .de-trio__cell--warn { background: var(--state-warning-bg); }
.de-trio__n { margin: 0; font-family: var(--font-mono); font-size: 17px; color: var(--color-arch-purple); text-align: right; }
.de-trio__cell--warn .de-trio__n { color: var(--state-warning-fg); }
.de-trio__t { margin: 0; font-size: 12px; line-height: 1.4; color: var(--fg-secondary); }

/* owner chip, floated */
.de-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: center;
  background: var(--color-draft-white);
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 20px 48px rgba(16, 16, 16, 0.16);
  padding: 13px 18px 13px 14px;
}
.de-chip__ico {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md, 6px);
  display: grid;
  place-items: center;
  background: var(--color-arch-purple);
  color: var(--color-draft-white);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
}
.de-chip__ico--open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--state-warning-fg); color: var(--state-warning-fg); }
.de-chip__t { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--color-data-black); line-height: 1.3; }
.de-chip__s {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary, #8B8B8B);
}

@media (min-width: 1151px) {
  /* the body reserves a right gutter so the resting placement never cuts a
     status flag; dragging is free to go anywhere */
  .de-comp--schedule .de-win__body,
  .de-comp--eir .de-win__body { padding-right: 254px; }

  .de-comp--schedule .de-comp__pad { padding: 0 112px 76px 0; }
  .de-comp--schedule .de-comp__f1 { position: absolute; right: -16px; top: 58px; width: 352px; }
  /* overlaps f1’s lower edge so the pair reads as a stack, not two boxes */
  .de-comp--schedule .de-comp__f2 { position: absolute; right: 52px; top: 236px; width: 304px; }
  .de-comp--schedule .de-comp__f3 { position: absolute; left: -24px; bottom: 0; width: 258px; }

}
@media (max-width: 1150px) {
  .de-comp__pad { padding: 0; }
  .de-comp__f1, .de-comp__f2, .de-comp__f3 { position: static; width: auto; margin-top: 16px; }
  /* The head is the only place the Due / Forecast names exist, so once it is
     hidden each date cell renders its own label from data-label. */
  .de-sched__head { display: none; }
  .de-sched__row { grid-template-columns: minmax(0, 1fr) 58px 58px; row-gap: 10px; }
  .de-sched__row > [data-label] { display: grid; justify-items: start; gap: 3px; }
  .de-sched__row > [data-label]::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-tertiary, #8B8B8B);
  }
  .de-sched__row > .de-owner-cell { grid-column: 1 / -1; }
  .de-sched__row > .de-flag { grid-column: 1 / -1; }
}

/* ---------- 4. WHAT YOU GET ---------- */
.de-gets { display: grid; gap: 20px; }
.de-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;
}
.de-get__copy { min-width: 0; }
.de-get__viz { min-width: 0; }
.de-get:nth-child(even) .de-get__copy { order: 2; }
.de-get:nth-child(even) .de-get__viz { order: 1; }
.de-get__title { font-size: 20px; font-weight: 600; color: var(--color-data-black); margin: 0 0 10px; line-height: 1.3; }
.de-get__text { font-size: 15.5px; line-height: 1.64; color: var(--fg-secondary); margin: 0; text-wrap: pretty; }
.de-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);
}
.de-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;
}

.de-viz { background: var(--color-light-gray); border-radius: var(--radius-lg, 8px); padding: 20px 20px 22px; }
/* white panel variant: the inner rows and tracks flip to grey so they stay
   distinguishable from the panel they sit on */
.de-sec[data-viz="white"] .de-viz {
  background: var(--color-draft-white);
  box-shadow: inset 0 0 0 1px var(--border-subtle, #EAEAEA);
}
.de-sec[data-viz="white"] .de-viz__label { border-bottom-color: var(--border-subtle, #EAEAEA); }
.de-sec[data-viz="white"] .de-burn__plan { background: var(--purple-100, #E2E2FA); }
.de-sec[data-viz="white"] .de-own__row,
.de-sec[data-viz="white"] .de-min__src,
.de-sec[data-viz="white"] .de-min__row,
.de-sec[data-viz="white"] .de-prom__row { background: var(--color-light-gray); }
.de-sec[data-viz="white"] .de-fore__track { background: var(--color-light-gray); }
.de-sec[data-viz="white"] .de-prom__sum { background: var(--purple-50); }
.de-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 · outstanding against plan, week by week */
.de-burn { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; align-items: end; height: 132px; }
.de-burn__col { display: grid; align-content: end; gap: 5px; justify-items: center; }
.de-burn__stack { width: 100%; display: grid; align-content: end; gap: 2px; }
.de-burn__plan { border-radius: 2px 2px 0 0; background: var(--purple-100, #E2E2FA); }
.de-burn__over { border-radius: 2px 2px 0 0; background: var(--state-warning-fg); }
.de-burn__wk {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary, #8B8B8B);
}
.de-burn__key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.de-burn__key li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-secondary); }
.de-burn__key i { width: 12px; height: 8px; border-radius: 2px; flex: none; }

/* 2 · ownership, including the item nobody owns */
.de-own { display: grid; gap: 8px; }
.de-own__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: 13px;
  color: var(--color-data-black);
}
.de-own__row--none { box-shadow: inset 2px 0 0 var(--state-warning-fg); }

/* 3 · minutes, with the spans that became tracked items */
.de-min__src {
  background: var(--color-draft-white);
  border-radius: var(--radius-md, 6px);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.66;
  color: var(--fg-secondary);
}
.de-min__cap {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin-bottom: 9px;
}
.de-min__hit {
  display: inline;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-data-black);
  background: var(--purple-100, #E2E2FA);
  color: var(--color-data-black);
  border-radius: 3px;
  padding: 1px 4px;
  box-shadow: 0 1px 0 var(--color-arch-purple);
}
.de-min__out { display: grid; gap: 7px; margin-top: 12px; }
.de-min__row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  background: var(--color-draft-white);
  border-left: 3px solid var(--color-arch-purple);
  border-radius: var(--radius-md, 6px);
  padding: 10px 13px;
  font-size: 12.5px;
  color: var(--color-data-black);
}
.de-min__row dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  padding-top: 1px;
}
.de-min__row dd { margin: 0; line-height: 1.4; }

/* 4 · due against forecast, with the slip named */
.de-fore { display: grid; gap: 14px; }
.de-fore__row { display: grid; gap: 7px; }
.de-fore__name { margin: 0; font-size: 13px; color: var(--color-data-black); }
.de-fore__track { position: relative; height: 22px; background: var(--color-draft-white); border-radius: 3px; }
.de-fore__due {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px 0 0 3px;
  background: var(--purple-100, #E2E2FA);
}
.de-fore__slip {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(135deg, var(--state-warning-fg) 0 3px, transparent 3px 7px);
  border-radius: 0 3px 3px 0;
}
.de-fore__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary, #8B8B8B);
}
.de-fore__meta b { color: var(--state-warning-fg); font-weight: 500; }

/* 5 · the promise history behind one deliverable */
.de-prom { display: grid; gap: 0; }
.de-prom__row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: baseline;
  background: var(--color-draft-white);
  border-radius: var(--radius-md, 6px);
  padding: 11px 14px;
}
.de-prom__row--done { border: 1px solid var(--color-arch-purple); }
.de-prom__when {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary, #8B8B8B);
}
.de-prom__what { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-data-black); }
.de-prom__what em { font-style: normal; color: var(--fg-tertiary, #8B8B8B); }
.de-prom__gap { justify-self: center; width: 2px; height: 12px; background: var(--gray-300, #D9D9D9); }
.de-prom__sum {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-md, 6px);
  background: var(--purple-50);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-data-black);
}

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

.de-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
/* "Rule" treatment, matching the sourced figures on Risk & Review Coverage:
   purple cap, heavier numeral, attribution below a divider on white so the
   date and caveat stay legible. */
.de-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);
}
.de-stat__n { font-size: 54px; font-weight: 300; letter-spacing: -0.02em; color: var(--color-arch-purple); margin: 0 0 14px; line-height: 1; }
.de-stat__t { font-size: 15px; line-height: 1.55; color: var(--color-data-black); margin: 0 0 12px; }
.de-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. */
.de-vs { display: block; }
.de-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;
}
.de-vs__table th, .de-vs__table td { text-align: left; vertical-align: top; padding: 18px 22px; }
.de-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;
}
.de-vs__table thead th:first-child { width: 22%; }
.de-vs__table thead th.is-us { color: var(--color-arch-purple); }
.de-vs__table thead th.is-us img { display: block; height: 19px; width: auto; }
.de-vs__table tbody tr + tr th, .de-vs__table tbody tr + tr td { border-top: 1px solid var(--border-subtle, #EAEAEA); }
.de-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);
}
.de-vs__table td { font-size: 14.5px; line-height: 1.55; color: var(--fg-secondary); }
.de-vs__table th:nth-child(2), .de-vs__table td:nth-child(2) { background: var(--color-light-gray); }
.de-vs__table .is-us { background: var(--color-draft-white); box-shadow: inset 3px 0 0 var(--color-arch-purple); }
.de-vs__table td.is-us { color: var(--color-data-black); }
.de-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 */
.de-vs__cell svg { width: 15px; height: 15px; margin-top: 3px; color: var(--fg-tertiary, #8B8B8B); }
.de-vs__cell--us svg { color: var(--color-arch-purple); }

@media (max-width: 900px) {
  .de-vs__table thead th:first-child { width: auto; }
  .de-vs__table th, .de-vs__table td { padding: 13px 14px; }
}
/* below 700px three columns starve the text box, so the rows stack */
@media (max-width: 700px) {
  .de-vs__table, .de-vs__table tbody, .de-vs__table tr, .de-vs__table th, .de-vs__table td { display: block; }
  .de-vs__table thead { display: none; }
  .de-vs__table tbody tr { padding: 4px 0 14px; }
  .de-vs__table tbody tr + tr { border-top: 1px solid var(--border-subtle, #EAEAEA); }
  .de-vs__table tbody tr + tr th, .de-vs__table tbody tr + tr td { border-top: 0; }
  .de-vs__table tbody th { padding-bottom: 10px; }
  .de-vs__table td { margin: 0 14px 8px; padding: 12px 14px; border-radius: var(--radius-md, 6px); }
  .de-vs__table td:last-child { margin-bottom: 0; }
  .de-vs__table td::before {
    content: "A deliverables schedule";
    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);
  }
  .de-vs__table td.is-us::before { content: "Tektome"; color: var(--color-arch-purple); }
}

/* ---------- 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. */
.de-roles__lede { max-width: 74ch; margin: 0 0 34px; font-size: 16.5px; line-height: 1.7; color: var(--fg-secondary); }
.de-roles__lede strong { color: var(--color-data-black); font-weight: 600; }

.de-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);
}
.de-role__buy::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--color-arch-purple); flex: none; }
.de-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. */
.de-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;
}
.de-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%);
}
.de-role[data-card="1"] { --card-img: url("../backgrounds/card-facade-curve-card.png"); }
.de-role[data-card="2"] { --card-img: url("../backgrounds/card-apex-card.png"); }
.de-role[data-card="3"] { --card-img: url("../backgrounds/card-corridor-card.png"); }
.de-role[data-card="4"] { --card-img: url("../backgrounds/card-lattice-card.png"); }
/* the table layout has no card surface, so no image behind it */
.de-roles[data-layout="table"] .de-role::before { display: none; }
.de-roles[data-layout="table"] .de-role { background-image: none; }

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

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

.de-roles[data-layout="table"] { gap: 0; }
.de-roles[data-layout="table"] .de-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;
}
.de-roles[data-layout="table"] .de-role:last-child { border-bottom: 1px solid var(--border-subtle, #EAEAEA); }
.de-roles[data-layout="table"] .de-role__buy,
.de-roles[data-layout="table"] .de-role__who,
.de-roles[data-layout="table"] .de-role__t { margin: 0; }
.de-roles[data-layout="table"] .de-role__who { grid-column: 2; margin-bottom: 8px; }
.de-roles[data-layout="table"] .de-role__t { grid-column: 2; font-size: 15px; }
.de-roles[data-layout="table"] .de-role__x { grid-column: 3; }

.de-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);
}
.de-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);
}
.de-roles__foot-x { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg-secondary); max-width: 78ch; }
.de-roles__foot-x strong { color: var(--color-data-black); font-weight: 600; }

.de-roles { display: grid; gap: 20px; }
.de-role {
  background-color: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  padding: 26px 24px 28px;
}
.de-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;
}
.de-role__t { font-size: 16px; font-weight: 600; color: var(--color-data-black); margin: 0 0 10px; line-height: 1.35; }
.de-role__x { font-size: 14px; line-height: 1.6; color: var(--fg-secondary); margin: 0; text-wrap: pretty; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .de-roles[data-layout="ladder"], .de-roles[data-layout="tiers"] { grid-template-columns: repeat(2, 1fr); }
  .de-stats { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .de-hero { padding: 60px 0 52px; }
  .de-sec { padding: 68px 0; }
  .de-inner, .de-hero__inner { padding: 0 24px; }
  .de-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .de-split { grid-template-columns: 1fr; gap: 40px; }
  .de-ledger__head { display: none; }
  .de-ledger__row { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .de-get { grid-template-columns: 1fr; gap: 26px; padding: 26px; }
  .de-get:nth-child(even) .de-get__copy { order: 0; }
  .de-get:nth-child(even) .de-get__viz { order: 0; }
  .de-gantt__scale, .de-gantt__row { grid-template-columns: 92px 1fr; }
}
@media (max-width: 560px) {
  .de-roles[data-layout="ladder"], .de-roles[data-layout="tiers"] { grid-template-columns: 1fr; }
  .de-roles[data-layout="table"] .de-role { grid-template-columns: 1fr; gap: 10px; }
  .de-roles[data-layout="table"] .de-role__who,
  .de-roles[data-layout="table"] .de-role__t,
  .de-roles[data-layout="table"] .de-role__x { grid-column: 1; }
  .de-roles__foot { grid-template-columns: 1fr; gap: 10px; }
  .de-stage__row, .de-stage__cut { grid-template-columns: 1fr; gap: 4px; }
}