/* ============================================================
   Use Cases — Risk & Review Coverage
   Per-page CSS, brand tokens only. Light mode; Arch Purple is the
   single accent. Maps to a future page-risk-review-coverage.php.
   ============================================================ */

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

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

.rc-sec { padding: 96px 0; }
.rc-sec__head { max-width: 800px; margin: 0 0 52px; }

/* Standard brand background set for the "Why Tektome" band. Cards stay
   white with dark text on every option; only the purple band flips copy. */
/* Standard brand background set, shared by every section that exposes a
   background choice. Solid light fills and soft washes keep dark copy; the
   bold purple bands flip heading and body copy to white. */
.rc-sec[data-bg="light-grey"]     { background: var(--color-light-gray); }
.rc-sec[data-bg="light-blue"]     { background: var(--bg-section-alt); }
.rc-sec[data-bg="light-lavender"] { background: var(--purple-50); }
.rc-sec[data-bg="white"]          { background: var(--color-draft-white); }

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

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

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

/* ---------- 1. HERO ---------- */
/* The photograph sits behind the whole hero, visible from the very top; the
   brand gradient rides over it and fades to transparent rather than to
   white, so the lower half of the hero is the image alone. Both layers are
   driven by variables so they can be tuned from Tweaks. */
.rc-hero {
  position: relative;
  padding: 104px 0 84px;
  background: var(--color-draft-white);
}
.rc-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;
}
.rc-hero__inner { position: relative; z-index: 2; }
.rc-hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.rc-hero__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--color-data-black);
  margin: 0 0 24px;
  max-width: 19ch;
  text-wrap: pretty;
}
.rc-hero__title .accent { color: var(--color-arch-purple); font-weight: 400; }
.rc-hero__lede {
  font-size: 19px;
  line-height: 1.62;
  color: var(--fg-secondary);
  margin: 0;
  max-width: 62ch;
}

/* coverage bar: the page's core idea, stated once at the top */
.rc-bar { margin-top: 56px; }
.rc-bar__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin: 0 0 14px;
}
.rc-bar__track {
  display: grid;
  grid-template-columns: 47fr 18fr 14fr 21fr;
  gap: 4px;
  height: 56px;
}
.rc-bar__seg {
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* the narrow segments wrap, and wrapped lines follow text-align, not
     justify-content, so they need centring in their own right */
  text-align: center;
  line-height: 1.3;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.rc-bar__seg--met     { background: var(--color-arch-purple); color: var(--color-draft-white); }
.rc-bar__seg--unmet   { background: var(--color-taro); color: var(--color-data-black); }
.rc-bar__seg--pending { background: var(--color-lavender); color: var(--color-data-black); }
.rc-bar__seg--blind {
  background: repeating-linear-gradient(135deg, rgba(16,16,16,0.05) 0 6px, rgba(16,16,16,0) 6px 12px), var(--color-draft-white);
  border: 1.5px dashed var(--color-arch-purple);
  color: var(--color-arch-purple);
}
.rc-bar__key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.rc-bar__key li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--fg-secondary);
}
.rc-bar__key i {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  flex: none;
}

/* ---- hero layout variants (Tweak: heroLayout) ----
   Driven by a data attribute on .rc-hero so the copy stays in one place in
   the markup and every heroViz option works under all three arrangements. */

/* B · split — copy left, coverage visual right */
.rc-hero[data-hero-layout="split"] .rc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}
.rc-hero[data-hero-layout="split"] .rc-eyebrow { grid-column: 1; grid-row: 1; }
.rc-hero[data-hero-layout="split"] .rc-hero__title { grid-column: 1; grid-row: 2; }
.rc-hero[data-hero-layout="split"] .rc-hero__lede { grid-column: 1; grid-row: 3; max-width: none; }
.rc-hero[data-hero-layout="split"] .rc-bar {
  grid-column: 2;
  grid-row: 1 / 4;
  margin-top: 6px;
  align-self: center;
}
.rc-hero[data-hero-layout="split"] .rc-bar__label { flex-wrap: wrap; gap: 4px 16px; }

/* C · centred — copy centred, visual centred beneath it */
.rc-hero[data-hero-layout="centred"] .rc-hero__inner { text-align: center; }
.rc-hero[data-hero-layout="centred"] .rc-hero__title { max-width: 20ch; margin-left: auto; margin-right: auto; }
.rc-hero[data-hero-layout="centred"] .rc-hero__lede { margin-left: auto; margin-right: auto; }
.rc-hero[data-hero-layout="centred"] .rc-bar { max-width: 860px; margin-left: auto; margin-right: auto; }
.rc-hero[data-hero-layout="centred"] .rc-bar__label { justify-content: space-between; text-align: left; }
.rc-hero[data-hero-layout="centred"] .rc-bar__key { justify-content: center; }

@media (max-width: 900px) {
  .rc-hero[data-hero-layout="split"] .rc-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .rc-hero[data-hero-layout="split"] .rc-eyebrow,
  .rc-hero[data-hero-layout="split"] .rc-hero__title,
  .rc-hero[data-hero-layout="split"] .rc-hero__lede,
  .rc-hero[data-hero-layout="split"] .rc-bar { grid-column: 1; grid-row: auto; }
  .rc-hero[data-hero-layout="split"] .rc-bar { margin-top: 40px; }
}

@property --rc-sweep {
  syntax: "<number>";
  /* inherited so one animation on the dial drives both the wedge layer and
     the hatch layer above it */
  inherits: true;
  initial-value: 100;
}

/* ---------- hero donut: entrance ----------
   Gated behind prefers-reduced-motion, and every rule sets the finished state
   as the default so the chart is correct with motion disabled or if @property
   is unsupported. Brand easing throughout; fades and small slides only. */
@media (prefers-reduced-motion: no-preference) {
  /* i · sweep — the donut draws clockwise, then the key cascades behind it */
  .rc-pie[data-anim="sweep"] .rc-pie__dial { animation: rc-sweep 820ms var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) both; }
  .rc-pie[data-anim="sweep"] .rc-pie__dial::before,
  .rc-pie[data-anim="sweep"] .rc-pie__hatch {
    -webkit-mask-image: conic-gradient(#000 0 calc(var(--rc-sweep) * 1%), transparent 0);
    mask-image: conic-gradient(#000 0 calc(var(--rc-sweep) * 1%), transparent 0);
  }
  /* the hatch also keeps its own wedge mask, so the two intersect */
  .rc-pie[data-anim="sweep"] .rc-pie__hatch {
    -webkit-mask-image: conic-gradient(transparent 0 79.6%, #000 79.6% 100%), conic-gradient(#000 0 calc(var(--rc-sweep) * 1%), transparent 0);
    mask-image: conic-gradient(transparent 0 79.6%, #000 79.6% 100%), conic-gradient(#000 0 calc(var(--rc-sweep) * 1%), transparent 0);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  /* ii · reveal — the measured wedges draw, then the blind spot lands last,
     which is the point the chart is making */
  .rc-pie[data-anim="reveal"] .rc-pie__dial { animation: rc-reveal 1180ms var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) both; }
  .rc-pie[data-anim="reveal"] .rc-pie__dial::before {
    -webkit-mask-image: conic-gradient(#000 0 calc(var(--rc-sweep) * 1%), transparent 0);
    mask-image: conic-gradient(#000 0 calc(var(--rc-sweep) * 1%), transparent 0);
  }
  .rc-pie[data-anim="reveal"] .rc-pie__hatch {
    -webkit-mask-image: conic-gradient(transparent 0 79.6%, #000 79.6% 100%), conic-gradient(#000 0 calc(var(--rc-sweep) * 1%), transparent 0);
    mask-image: conic-gradient(transparent 0 79.6%, #000 79.6% 100%), conic-gradient(#000 0 calc(var(--rc-sweep) * 1%), transparent 0);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  /* iii · cascade — the dial arrives whole and the key builds row by row */
  .rc-pie[data-anim="cascade"] .rc-pie__dial { animation: rc-rise 320ms var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) both; }
  .rc-pie[data-anim="cascade"] .rc-pie__key i { animation: rc-draw 260ms var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) both; }
  .rc-pie[data-anim="cascade"] .rc-pie__key li:nth-child(1) i { animation-delay: 300ms; }
  .rc-pie[data-anim="cascade"] .rc-pie__key li:nth-child(2) i { animation-delay: 400ms; }
  .rc-pie[data-anim="cascade"] .rc-pie__key li:nth-child(3) i { animation-delay: 500ms; }
  .rc-pie[data-anim="cascade"] .rc-pie__key li:nth-child(4) i { animation-delay: 600ms; }

  /* the key cascades in all three treatments */
  .rc-pie[data-anim] .rc-pie__key li { animation: rc-rise 320ms var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) both; }
  /* the sweep finishes at 820ms; the key starts after it and cascades */
  .rc-pie[data-anim="sweep"] .rc-pie__key li:nth-child(1) { animation-delay: 840ms; }
  .rc-pie[data-anim="sweep"] .rc-pie__key li:nth-child(2) { animation-delay: 950ms; }
  .rc-pie[data-anim="sweep"] .rc-pie__key li:nth-child(3) { animation-delay: 1060ms; }
  .rc-pie[data-anim="sweep"] .rc-pie__key li:nth-child(4) { animation-delay: 1170ms; }
  .rc-pie[data-anim="sweep"] .rc-pie__key i { animation: rc-draw 260ms var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) both; }
  .rc-pie[data-anim="sweep"] .rc-pie__key li:nth-child(1) i { animation-delay: 900ms; }
  .rc-pie[data-anim="sweep"] .rc-pie__key li:nth-child(2) i { animation-delay: 1010ms; }
  .rc-pie[data-anim="sweep"] .rc-pie__key li:nth-child(3) i { animation-delay: 1120ms; }
  .rc-pie[data-anim="sweep"] .rc-pie__key li:nth-child(4) i { animation-delay: 1230ms; }
  /* reveal keeps its key alongside the draw, with the blind-spot row last */
  .rc-pie[data-anim="reveal"] .rc-pie__key li:nth-child(1) { animation-delay: 300ms; }
  .rc-pie[data-anim="reveal"] .rc-pie__key li:nth-child(2) { animation-delay: 440ms; }
  .rc-pie[data-anim="reveal"] .rc-pie__key li:nth-child(3) { animation-delay: 580ms; }
  .rc-pie[data-anim="reveal"] .rc-pie__key li:nth-child(4) { animation-delay: 900ms; }
  .rc-pie[data-anim="cascade"] .rc-pie__key li:nth-child(1) { animation-delay: 240ms; }
  .rc-pie[data-anim="cascade"] .rc-pie__key li:nth-child(2) { animation-delay: 340ms; }
  .rc-pie[data-anim="cascade"] .rc-pie__key li:nth-child(3) { animation-delay: 440ms; }
  .rc-pie[data-anim="cascade"] .rc-pie__key li:nth-child(4) { animation-delay: 540ms; }
}

@keyframes rc-sweep { from { --rc-sweep: 0; } to { --rc-sweep: 100; } }
/* the hold at 79.6 is the three measured wedges finishing before the
   never-reviewed wedge arrives */
@keyframes rc-reveal {
  0%   { --rc-sweep: 0; }
  56%  { --rc-sweep: 79.6; }
  72%  { --rc-sweep: 79.6; }
  100% { --rc-sweep: 100; }
}
@keyframes rc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rc-draw { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* Coverage as a centred donut. The never-reviewed wedge is hatched rather
   than filled: it is an absence, not a measured quantity. */
.rc-pie { display: grid; justify-items: center; gap: 28px; }
.rc-pie__dial {
  position: relative;
  display: block;
  width: 296px;
  height: 296px;
  border-radius: 999px;
}
/* the wedges live in ::before so the sweep can mask them without clipping the
   hole, which is a child of the dial */
.rc-pie__dial::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: conic-gradient(
    var(--color-arch-purple) 0 47.4%,
    var(--color-taro) 47.4% 65.6%,
    var(--color-lavender) 65.6% 79.6%,
    var(--color-draft-white) 79.6% 100%);
}
/* the hatch is masked to the final wedge only */
.rc-pie__hatch {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: repeating-linear-gradient(135deg, var(--color-arch-purple) 0 4px, transparent 4px 9px);
  -webkit-mask-image: conic-gradient(transparent 0 79.6%, #000 79.6% 100%);
  mask-image: conic-gradient(transparent 0 79.6%, #000 79.6% 100%);
  opacity: 0.5;
}
.rc-pie__hole {
  position: absolute;
  inset: 90px;
  border-radius: 999px;
  background: var(--color-draft-white);
  display: grid;
  place-content: center;
  text-align: center;
}
.rc-pie__hole b {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 37px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-data-black);
}
.rc-pie__hole span {
  display: block;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}
/* the key runs the full width beneath the dial: swatch and label left, count
   hard right, so the four figures align on one edge */
.rc-pie__key { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 14px; }
.rc-pie__key li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  font-size: 15px;
  color: var(--color-data-black);
}
.rc-pie__key i { width: 18px; height: 18px; border-radius: 3px; }
.rc-pie__key b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--color-data-black);
  text-align: right;
}

@media (max-width: 900px) {
  .rc-pie__dial { width: 300px; height: 300px; }
  .rc-pie__hole { inset: 92px; }
  .rc-pie__hole b { font-size: 36px; }
  .rc-pie__key li { font-size: 15px; gap: 12px; }
}

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

.rc-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);
}
.rc-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);
}

.rc-find { display: grid; gap: 9px; }
.rc-find__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 11px 14px;
  border-radius: var(--radius-md, 6px);
  background: var(--color-light-gray);
  font-size: 13.5px;
  color: var(--color-data-black);
}
.rc-find__row--void {
  background: var(--color-draft-white);
  border: 1.5px dashed var(--gray-300, #D9D9D9);
  color: var(--fg-tertiary, #8B8B8B);
}
.rc-find__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  white-space: nowrap;
}
.rc-find__row--void .rc-find__tag { color: var(--color-arch-purple); }

.rc-st {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rc-st::before { content: ""; width: 7px; height: 7px; border-radius: 999px; flex: none; }
/* Met carries the solid fill so a satisfied requirement reads first; never
   reviewed takes the dashed outline, which also matches how the hero bar
   draws that segment — an absence rather than a measured quantity. */
.rc-st--met       { background: var(--color-arch-purple); color: var(--color-draft-white); }
.rc-st--met::before { background: var(--color-draft-white); }
.rc-st--unmet     { background: var(--state-warning-bg); color: var(--state-warning-fg); }
.rc-st--unmet::before { background: var(--state-warning-fg); }
.rc-st--pending   { background: var(--color-light-gray); color: var(--fg-secondary); }
.rc-st--pending::before { background: var(--gray-400, #D4D4D4); }
.rc-st--blind {
  background: repeating-linear-gradient(135deg, rgba(16, 16, 16, 0.05) 0 6px, rgba(16, 16, 16, 0) 6px 12px), var(--color-draft-white);
  box-shadow: inset 0 0 0 1.5px var(--color-arch-purple);
  color: var(--purple-700);
}
.rc-st--blind::before { background: var(--color-arch-purple); }

/* ============================================================
   3b. LAYERED KEY VISUAL
   Three compositions of the coverage statement, switchable from
   Tweaks. All light mode; floating cards carry a shadow only (never
   shadow + border), overlaps use offset absolute positioning, and
   below 900px every overlay reflows into the normal flow.
   ============================================================ */
.rc-comp { position: relative; }
.rc-comp__pad { padding: 0 0 96px 0; }

/* the base window */
.rc-win {
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
}
.rc-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);
}
.rc-win__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-data-black); }
.rc-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;
}
.rc-win__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}

/* compact requirement rows used inside the base window */
.rc-rows { display: grid; gap: 7px; }
/* Fixed status column, so every pill's left edge lines up. Without it the
   pill starts at a different x per row and an overlay lands mid-pill. */
.rc-rows__row {
  display: grid;
  grid-template-columns: 1fr auto 138px;
  gap: 14px;
  align-items: center;
  background: var(--color-light-gray);
  border-radius: var(--radius-md, 6px);
  padding: 11px 14px;
}
.rc-rows__row > .rc-st { justify-self: start; }
.rc-rows__row--focus { background: var(--purple-50); }
/* the console and register lists are a third container: one explicit template
   shared with the column header, so head and rows cannot size independently */
.rc-console__main .rc-rows__row {
  /* 168px is the width of the longest status pill, "Not yet reviewable";
     narrower and it spills into the row padding. Importance moved into the
     requirement cell so the owner column fits without starving the label. */
  grid-template-columns: minmax(0, 1fr) 92px 168px;
  align-items: start;
}
.rc-console__main .rc-rows__req { font-size: 12.5px; line-height: 1.45; }
.rc-rows__crit-inline {
  display: inline-block;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--gray-300, #D9D9D9);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.rc-rows__crit-inline.is-crit { color: var(--color-arch-purple); }

/* owner cell: initials plus surname, so responsibility is on every row */
.rc-owner { display: inline-flex; align-items: center; gap: 7px; margin-top: 1px; }
.rc-owner i {
  width: 21px;
  height: 21px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--purple-100, #E2E2FA);
  color: #3D3EC9;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 8.5px;
  flex: none;
}
.rc-owner span { font-size: 11.5px; color: var(--color-data-black); white-space: nowrap; }
.rc-owner--none i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-arch-purple); color: var(--color-arch-purple); }
.rc-owner--none span { color: var(--color-arch-purple); }

/* overview metrics: what the freed row space is for */
.rc-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 16px;
}
.rc-metric {
  background: var(--color-light-gray);
  border-radius: var(--radius-md, 6px);
  padding: 11px 12px 12px;
}
.rc-metric--urgent { background: var(--purple-50); box-shadow: inset 0 0 0 1.5px var(--color-arch-purple); }
.rc-metric__n {
  margin: 0 0 3px;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-arch-purple);
}
.rc-metric__t {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  line-height: 1.4;
}
.rc-metric__split {
  display: flex;
  gap: 8px;
  margin: 7px 0 0;
  padding-top: 7px;
  border-top: 1px solid var(--gray-300, #D9D9D9);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--fg-secondary);
}
.rc-metric__split b { color: var(--color-data-black); font-weight: 500; }
/* the pills and the importance label sit on the first line of the label,
   whatever the label wraps to */
.rc-console__main .rc-rows__crit,
.rc-console__main .rc-rows__row > .rc-st { margin-top: 1px; }
.rc-console__main .rc-rows__row > .rc-st { justify-self: start; }
.rc-float .rc-rows__row { grid-template-columns: 1fr; row-gap: 8px; }
.rc-float .rc-rows__row > .rc-st { justify-self: start; }

.rc-rows__req { margin: 0; font-size: 13px; line-height: 1.4; color: var(--color-data-black); }
.rc-rows__req span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary, #8B8B8B);
  margin-top: 4px;
}

/* floating overlay cards */
.rc-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;
}
.rc-float__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 14px;
}
.rc-float__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-data-black); line-height: 1.3; }
.rc-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;
}
.rc-float__x { color: var(--fg-tertiary, #8B8B8B); display: block; }
.rc-float__x svg { width: 15px; height: 15px; display: block; }
.rc-float__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-secondary); }
.rc-float__text strong { color: var(--color-data-black); font-weight: 600; }
.rc-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);
}
.rc-float__act {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}

/* counts panel inside a floating card (register composite, f2) */
.rc-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rc-tile { background: var(--color-light-gray); border-radius: var(--radius-md, 6px); padding: 12px 13px 13px; }
.rc-tile--void { background: var(--purple-50); box-shadow: inset 0 0 0 1.5px var(--color-arch-purple); }
.rc-tile__n { margin: 0 0 4px; font-size: 22px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; color: var(--color-arch-purple); }
.rc-tile__t { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--fg-secondary); }

/* document chip */
.rc-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;
}
.rc-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;
}
.rc-chip__t { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--color-data-black); line-height: 1.3; }
.rc-chip__s {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary, #8B8B8B);
}

/* console: sidebar + main */
.rc-console { display: grid; grid-template-columns: 210px 1fr; }
.rc-console__side {
  padding: 20px 18px 24px;
  background: var(--color-light-gray);
  border-right: 1px solid var(--border-subtle, #EAEAEA);
}
.rc-console__lab {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.rc-console__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rc-console__nav li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border-radius: var(--radius-md, 6px);
  font-size: 12.5px;
  color: var(--fg-secondary);
}
.rc-console__nav li.is-on { background: var(--color-draft-white); color: var(--color-data-black); font-weight: 600; }
.rc-console__nav i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-tertiary, #8B8B8B);
}
.rc-console__nav li.is-on i { color: var(--color-arch-purple); }
.rc-console__main { padding: 20px 22px 24px; }
.rc-mini-bar { display: grid; grid-auto-flow: column; gap: 3px; height: 34px; margin: 0 0 8px; }
.rc-mini-bar i { border-radius: 3px; }
/* Register coverage bar: segment values sit inside the fill, as the hero bar
   does, so the panel does not depend on the legend to be read. */
.rc-mini-bar { position: relative; }
.rc-mini-bar i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1;
  overflow: hidden;
}
.rc-mini-bar i.is-met     { color: var(--color-draft-white); }
.rc-mini-bar i.is-unmet,
.rc-mini-bar i.is-pending { color: var(--color-data-black); }
.rc-mini-bar i.is-blind   { color: var(--color-arch-purple); }

.rc-mini-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  color: var(--fg-secondary);
}
.rc-mini-key li { display: flex; align-items: center; gap: 7px; }
.rc-mini-key i { width: 11px; height: 8px; border-radius: 2px; flex: none; }

/* register variant: the console shell, but the main area is the requirement
   list running to the foot of the window rather than a summary. */
.rc-list__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 168px;
  gap: 14px;
  padding: 0 14px 9px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
}
.rc-list__head span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.rc-list__more {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  margin: 12px 0 0;
  padding: 12px 14px 0;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
}
.rc-list__more p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.rc-list__more b { font-family: var(--font-mono); font-size: 11px; color: var(--color-arch-purple); }

/* ---- placement per variation (wide screens only) ---- */
/* Overlays are absolutely placed only where there is room for the gutter
   that keeps them off row content. Below that they rejoin the flow. */
@media (min-width: 1151px) {

  /* console and register: the main column reserves a right gutter, so every
     overlay lands on panel surface rather than through a pill or a label */
  .rc-comp--console .rc-console__main,
  .rc-comp--register .rc-console__main { padding-right: 156px; }

  .rc-comp--register .rc-comp__pad { padding-right: 120px; padding-bottom: 74px; }
  .rc-comp--register .rc-comp__f1 { position: absolute; right: -20px; top: 62px; width: 366px; }
  .rc-comp--register .rc-comp__f2 { position: absolute; right: 40px; top: 236px; width: 288px; }
  .rc-comp--register .rc-comp__f3 { position: absolute; left: -20px; bottom: 20px; width: 276px; }

}
@media (max-width: 1150px) {
  /* no gutter, so the importance column is shed to keep the label readable */
  .rc-console__main .rc-rows__row,
  .rc-list__head { grid-template-columns: minmax(0, 1fr) 168px; }
  .rc-console__main .rc-rows__row > .rc-owner,
  .rc-list__head span:nth-child(2) { display: none; }
  .rc-metrics { grid-template-columns: repeat(2, 1fr); }
  .rc-console__main .rc-rows__crit,
  .rc-list__head span:nth-child(2) { display: none; }
}
@media (max-width: 1150px) {
  /* overlays rejoin the flow rather than covering the base */
  .rc-comp__pad { padding: 0; }
  .rc-comp__f1, .rc-comp__f2, .rc-comp__f3 { position: static; width: auto; margin-top: 16px; }
  .rc-console { grid-template-columns: 1fr; }
  .rc-console__side { border-right: 0; border-bottom: 1px solid var(--border-subtle, #EAEAEA); }
}

/* The register sidebar carries three source groups, and the longest runs to
   ten items. Left at the console's default density it stood 964px against
   570px of content in the main column, so the grid stretched the main area
   and left a large void under the pagination row. Condensed here only: the
   groups sit tighter, and the long source list runs in two columns so ten
   items take five rows. */
.rc-comp--register .rc-console__side { padding: 16px 14px 18px; }
.rc-comp--register .rc-console__lab { margin-bottom: 7px; font-size: 9px; }
.rc-comp--register .rc-console__lab + .rc-console__nav { margin-bottom: 14px; }
.rc-comp--register .rc-console__nav { gap: 2px; }
.rc-comp--register .rc-console__nav li {
  padding: 5px 8px;
  font-size: 11.5px;
  gap: 8px;
}
.rc-comp--register .rc-console__nav i { font-size: 9.5px; }

/* the third group is the long source list: two columns, count under label */
.rc-comp--register .rc-console__nav--sources {
  grid-template-columns: 1fr 1fr;
  column-gap: 4px;
}
.rc-comp--register .rc-console__nav--sources li {
  grid-template-columns: 1fr;
  align-content: start;
  padding: 4px 8px;
  line-height: 1.35;
}
.rc-comp--register .rc-console__nav--sources li i { display: none; }

@media (max-width: 1150px) {
  .rc-comp--register .rc-console__nav--sources { grid-template-columns: 1fr; }
}

/* Mini key visual, for the graphic slot of an output card. Same composition
   as the section-3 register, scaled to the card and without overlays. */
.rc-mini-viz .rc-win { border-radius: var(--radius-md, 6px); }
.rc-mini-viz .rc-win__bar { padding: 10px 14px; }
.rc-mini-viz .rc-win__title { font-size: 12.5px; }
.rc-mini-viz .rc-win__title span { font-size: 8.5px; padding: 2px 7px; margin-left: 8px; }
.rc-mini-viz .rc-win__meta { font-size: 9px; letter-spacing: 0.08em; }
.rc-mini-viz .rc-rows { gap: 5px; }
/* The mini console's main column is ~222px, so a nowrap pill in an auto
   track leaves as little as 53px for the label. Stack instead, as the
   narrow floats already do. */
.rc-mini-viz .rc-console__main .rc-rows__row {
  grid-template-columns: 1fr;
  row-gap: 6px;
  padding: 8px 11px;
}
.rc-mini-viz .rc-console__main .rc-rows__row > .rc-st { justify-self: start; }
.rc-mini-viz .rc-rows__req { font-size: 11.5px; line-height: 1.35; }
.rc-mini-viz .rc-rows__req span { font-size: 8.5px; margin-top: 3px; }
.rc-mini-viz .rc-st { font-size: 9px; padding: 3px 9px 3px 7px; gap: 6px; }
.rc-mini-viz .rc-st::before { width: 6px; height: 6px; }
.rc-mini-viz .rc-mini-bar { height: 20px; gap: 2px; margin-bottom: 7px; }
.rc-mini-viz .rc-mini-key { font-size: 10px; gap: 4px 12px; margin-bottom: 13px; }
.rc-mini-viz .rc-mini-key i { width: 9px; height: 7px; }
/* The card is only ~366px wide, so a fixed sidebar starves the main pane.
   Share the width instead: the sidebar takes 40%, capped, and the main pane
   keeps enough room for a requirement label to sit on one or two lines. */
.rc-mini-viz .rc-console { grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); }
.rc-mini-viz .rc-console__side { padding: 12px 12px 14px; }
.rc-mini-viz .rc-console__lab { font-size: 8.5px; margin-bottom: 8px; }
.rc-mini-viz .rc-console__nav { gap: 1px; }
.rc-mini-viz .rc-console__nav li { padding: 4px 8px; font-size: 10px; gap: 8px; }
.rc-mini-viz .rc-console__nav i { font-size: 9px; }
.rc-mini-viz .rc-console__main { padding: 13px 14px 15px; }
.rc-mini-viz .rc-list__head { display: none; }
.rc-mini-viz .rc-list__more { margin-top: 10px; padding: 9px 11px 0; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
.rc-mini-viz .rc-list__more p { font-size: 8.5px; }
.rc-mini-viz .rc-list__more b { font-size: 9.5px; }

/* ---------- 4. WHAT YOU GET ---------- */
/* Every output is a full-width row: copy one side, a graphic the other,
   alternating. No item outranks another. */
.rc-gets { display: grid; gap: 20px; }
.rc-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;
}
.rc-get__copy { min-width: 0; }
.rc-get__viz { min-width: 0; }
.rc-get:nth-child(even) .rc-get__copy { order: 2; }
.rc-get:nth-child(even) .rc-get__viz { order: 1; }
.rc-get__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-data-black);
  margin: 0 0 10px;
  line-height: 1.3;
}
.rc-get__text {
  font-size: 15.5px;
  line-height: 1.64;
  color: var(--fg-secondary);
  margin: 0;
  text-wrap: pretty;
}
.rc-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);
}
.rc-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;
}

/* wide output card: spans the grid, copy beside a product mock */
.rc-get--wide {
  grid-column: 1 / -1;
}

/* ---------- output graphics ---------- */
.rc-viz {
  background: var(--color-light-gray);
  border-radius: var(--radius-lg, 8px);
  padding: 20px 20px 22px;
}
.rc-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);
}

/* 2 · one requirement, fully stated */
.rc-one__req {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-data-black);
  margin: 0 0 16px;
  line-height: 1.35;
}
.rc-one { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.rc-one > div {
  background: var(--color-draft-white);
  border-radius: var(--radius-md, 6px);
  padding: 12px 14px 13px;
}
.rc-one dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin-bottom: 7px;
}
.rc-one dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-data-black); }

/* 3 · blind spots, ranked */
.rc-blind { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: bs; }
.rc-blind li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--color-draft-white);
  border-left: 2px solid var(--color-arch-purple);
  border-radius: var(--radius-md, 6px);
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--color-data-black);
}
.rc-blind b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  color: var(--color-arch-purple);
}
.rc-blind i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  white-space: nowrap;
}
.rc-blind i.is-crit { color: var(--color-arch-purple); }

/* 4 · audit trail */
.rc-trail { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 16px; position: relative; }
/* The rail sat at 1px of grey on a grey panel, so the steps did not read as
   connected. Tinted and doubled, and centred under the markers. */
.rc-trail::before {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: var(--color-lavender);
}
.rc-trail li { position: relative; }
.rc-trail li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-draft-white);
  border: 2px solid var(--color-arch-purple);
}
.rc-trail p { margin: 0 0 4px; font-size: 13.5px; font-weight: 500; color: var(--color-data-black); line-height: 1.4; }
.rc-trail span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary, #8B8B8B);
}

/* 5 · cross-format grid */
.rc-fmt { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.rc-fmt__col p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  margin: 0 0 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--purple-100, #E2E2FA);
}
.rc-fmt__col p svg { width: 15px; height: 15px; flex: none; }
.rc-fmt__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rc-fmt__col li { font-size: 12.5px; line-height: 1.42; color: var(--fg-secondary); }

/* 6 · review streams merging into one position */
.rc-merge { display: grid; gap: 8px; }
.rc-merge__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: 12px 14px;
  font-size: 13.5px;
  color: var(--color-data-black);
}
.rc-merge__row i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-tertiary, #8B8B8B);
  white-space: nowrap;
}
.rc-merge__sum {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--radius-md, 6px);
  background: var(--color-arch-purple);
  color: var(--color-draft-white);
  font-size: 13.5px;
  font-weight: 600;
}
.rc-merge__sum i { font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 400; opacity: 0.85; }

/* 7 · portfolio roll-up: a scheme list with a thumbnail per project, so the
   roll-up reads as a portfolio rather than four anonymous bars. Images are
   squared per the brand's imagery rule; the coverage bar keeps the hero's
   four-part colour language. */
.rc-port { display: grid; gap: 14px; }
.rc-port__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.rc-port__thumb {
  width: 96px;
  height: 72px;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-draft-white);
  /* purpose-drawn scheme tiles, so no corrective filter is needed; the frame
     defines the edge against the panel. Border only, never border + shadow. */
  border: 1px solid var(--border-subtle, #EAEAEA);
}
.rc-port__name { margin: 0 0 7px; font-size: 13px; line-height: 1.35; color: var(--color-data-black); }
.rc-port__name b { color: var(--color-arch-purple); font-weight: 500; }
.rc-port__name span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin-top: 4px;
}
.rc-port__bar { display: grid; grid-auto-flow: column; gap: 2px; height: 8px; }
.rc-port__bar i { border-radius: 2px; }
.rc-port__foot {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--gray-300, #D9D9D9);
}

.rc-chat {
  background: var(--color-light-gray);
  border-radius: var(--radius-lg, 8px);
  padding: 20px;
  display: grid;
  gap: 12px;
}
.rc-chat__ask {
  background: var(--color-arch-purple);
  color: var(--color-draft-white);
  border-radius: var(--radius-md, 6px);
  padding: 13px 16px;
  font-size: 14px;
  line-height: 1.5;
  justify-self: end;
  max-width: 88%;
}
.rc-chat__say {
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-md, 6px);
  padding: 14px 16px 15px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 94%;
}
.rc-chat__say b { color: var(--color-data-black); font-weight: 600; }
.rc-chat__out {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
}
.rc-chat__out span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  background: var(--purple-50);
  border-radius: 999px;
  padding: 5px 11px;
}

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

/* Worked example, "when coverage fails". Three compositions switchable from
   Tweaks; all share the same copy set and the same purple-edged card. */
.rc-eg {
  margin-top: 24px;
  background: var(--color-draft-white);
  border: 1px solid var(--color-arch-purple);
  border-radius: var(--radius-lg, 8px);
  padding: 32px 34px 34px;
}
.rc-eg__eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
}
.rc-eg__close {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle, #EAEAEA);
  font-size: 15px;
  line-height: 1.62;
  color: var(--fg-secondary);
}
.rc-eg__close strong { color: var(--color-data-black); font-weight: 600; }

/* C · the failure chain. Three treatments switched by data-eg; the story is
   an escalation, so each treatment makes that structural rather than laying
   four equal boxes side by side. */
.rc-eg--chain { display: grid; }
.rc-eg__steps, .rc-eg__ramp, .rc-eg__spine { display: none; }
.rc-eg--chain[data-eg="cards"] .rc-eg__steps { display: grid; }

/* i · cards — the four steps, weighted: each one heavier than the last */
.rc-eg__steps { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rc-eg__steps li {
  position: relative;
  background: var(--color-light-gray);
  border-radius: var(--radius-md, 6px);
  border-top: 3px solid var(--color-lavender);
  padding: 16px 16px 18px;
}
/* the connector: a hairline running behind the row, broken by each card */
.rc-eg__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 12px;
  border-top: 1.5px dashed var(--color-lavender);
}
/* ordered by measured luminance so the ramp darkens monotonically:
   lavender .634 → taro .421 → purple-300 .303 */
.rc-eg__steps li:nth-child(2) { border-top-color: var(--color-taro); }
.rc-eg__steps li:nth-child(3) { border-top-color: var(--purple-300); }
.rc-eg__steps li.is-cost {
  background: var(--purple-50);
  border-top-color: var(--color-arch-purple);
}
.rc-eg__steps p {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* the tertiary token measures 3.9:1 on the light-grey card ground */
  color: var(--fg-secondary);
}
.rc-eg__steps li.is-cost p { color: var(--color-arch-purple); }
.rc-eg__steps span { font-size: 13.5px; line-height: 1.5; color: var(--color-data-black); }
.rc-eg__steps li.is-cost span { color: var(--color-data-black); font-weight: 500; }

@media (max-width: 900px) {
  .rc-eg__steps, .rc-eg__ramp { grid-template-columns: 1fr; }
  .rc-eg__steps li:not(:last-child)::after { display: none; }
}

/* Treatments for the sourced figures, switchable from Tweaks. Charts use
   the design system's data-viz palette (teal, orange, data-viz purple),
   which is sanctioned for categorical charts; Arch Purple stays the single
   UI accent. */
.rc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

/* ---- chart primitives, shared by the chart treatments ---- */
.rc-chart { display: none; margin: 0 0 18px; }
.rc-chart__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  background: conic-gradient(var(--viz) calc(var(--pct) * 3.6deg), var(--color-light-gray) 0);
}
.rc-chart__ring::after {
  content: "";
  position: absolute;
  inset: 17px;
  border-radius: 999px;
  background: var(--color-draft-white);
}
.rc-chart__ring b {
  position: relative;
  z-index: 1;
  font-size: 25px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--color-data-black);
}
.rc-chart__gauge { display: block; position: relative; width: 168px; height: 88px; overflow: hidden; }
.rc-chart__gauge i {
  position: absolute;
  top: 0;
  left: 0;
  width: 168px;
  height: 168px;
  border-radius: 999px;
  background: conic-gradient(from 270deg, var(--viz) calc(var(--pct) * 1.8deg), var(--color-light-gray) 0 180deg, transparent 0);
}
.rc-chart__gauge i::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 999px;
  background: var(--color-draft-white);
}
.rc-chart__gauge b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  text-align: center;
  font-size: 25px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--color-data-black);
}
.rc-chart__bar { display: block; }
.rc-chart__bar i {
  display: block;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--viz) calc(var(--pct) * 1%), var(--color-light-gray) 0);
}
.rc-chart__bar u {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.rc-chart__bar u em { font-style: normal; color: var(--viz); font-weight: 500; }

/* A · donut: proportion as a ring, figure in the middle */
.rc-stats[data-stat="donut"] .rc-chart { display: block; }
.rc-stats[data-stat="donut"] .rc-chart__gauge,
.rc-stats[data-stat="donut"] .rc-chart__bar { display: none; }
.rc-stats[data-stat="donut"] .rc-stat__n { display: none; }
.rc-stats[data-stat="donut"] .rc-stat { border-top-color: var(--viz); }
.rc-stat {
  padding: 26px 26px 24px;
  border-radius: var(--radius-lg, 8px);
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
}
.rc-stat__n {
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--color-arch-purple);
  margin: 0 0 8px;
  line-height: 1;
}
.rc-stat__t { font-size: 14.5px; line-height: 1.55; color: var(--color-data-black); margin: 0 0 12px; }

/* Citations behind a disclosure, matching the homepage: a native <details>, so
   it needs no JS and survives the runtime re-rendering the template. */
.rc-src { border-top: 1px solid var(--border-subtle, #EAEAEA); margin-top: 14px; padding-top: 12px; }
.rc-src__cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--color-arch-purple);
  transition: color var(--duration-fast, 120ms) var(--ease-out);
}
.rc-src__cue::-webkit-details-marker { display: none; }
.rc-src__cue:hover { color: var(--purple-700); }
.rc-src__cue:focus-visible { outline: 3px solid var(--purple-100, #E2E2FA); outline-offset: 3px; border-radius: 3px; }
.rc-src__i {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: italic;
  line-height: 1;
  flex: none;
}
.rc-src__cue::after {
  content: "Source";
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rc-src[open] .rc-src__cue::after { content: "Hide source"; }
.rc-src__body {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary, #8B8B8B);
}
.rc-src__body em { font-style: normal; color: var(--fg-secondary); }

/* ---------- 6. WHY TEKTOME ---------- */
/* comparison treatments, switched by data-vs on .rc-vs */
.rc-vs__panels, .rc-vs__table, .rc-vs__stack { display: none; }
.rc-vs[data-vs="table"] .rc-vs__table { display: block; }

/* i · table — the dimension named, the two answers side by side */
.rc-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;
}
.rc-vs__table th, .rc-vs__table td { text-align: left; vertical-align: top; padding: 18px 22px; }
.rc-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;
  /* the tertiary token is 3.9:1 on the grey header ground */
  color: var(--fg-secondary);
  padding-top: 15px;
  padding-bottom: 15px;
}
.rc-vs__table thead th:first-child { width: 22%; }
.rc-vs__table thead th.is-us { color: var(--color-arch-purple); }
.rc-vs__table thead th.is-us img { display: block; height: 19px; width: auto; }
.rc-vs__table tbody tr + tr th, .rc-vs__table tbody tr + tr td { border-top: 1px solid var(--border-subtle, #EAEAEA); }
.rc-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);
}
.rc-vs__table td { font-size: 14.5px; line-height: 1.55; color: var(--fg-secondary); }
/* The section ground is light-lavender (the same value as --purple-50), so a
   lavender tint would vanish. Our column keeps the white table ground and is
   marked by an Arch Purple edge; the rule-based column takes the grey fill,
   matching .rc-vs__col--them / --us and .rc-ledger__row--key. */
.rc-vs__table th:nth-child(2), .rc-vs__table td:nth-child(2) { background: var(--color-light-gray); }
.rc-vs__table .is-us { background: var(--color-draft-white); box-shadow: inset 3px 0 0 var(--color-arch-purple); }
.rc-vs__table td.is-us { color: var(--color-data-black); }
.rc-vs__cell { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 11px; align-items: start; }
/* --gray-400 measures 1.35:1 on the grey cell ground, under the 3:1 floor for
   meaningful non-text, so the negative glyph steps up a token */
.rc-vs__cell svg { width: 15px; height: 15px; margin-top: 3px; color: var(--fg-tertiary, #8B8B8B); }
.rc-vs__cell--us svg { color: var(--color-arch-purple); }

@media (max-width: 900px) {
  .rc-vs__table thead th:first-child { width: auto; }
  .rc-vs__table th, .rc-vs__table td { padding: 13px 14px; }
}
/* Below 700px three columns leave ~76px of text box against a 110px longest
   word, so the rows stack: the dimension heading labels each block and the two
   answers sit beneath it. */
@media (max-width: 700px) {
  .rc-vs__table, .rc-vs__table tbody, .rc-vs__table tr, .rc-vs__table th, .rc-vs__table td { display: block; }
  .rc-vs__table thead { display: none; }
  .rc-vs__table tbody tr { padding: 4px 0 14px; }
  .rc-vs__table tbody tr + tr { border-top: 1px solid var(--border-subtle, #EAEAEA); }
  .rc-vs__table tbody tr + tr th, .rc-vs__table tbody tr + tr td { border-top: 0; }
  .rc-vs__table tbody th { padding-bottom: 10px; }
  .rc-vs__table td { margin: 0 14px 8px; padding: 12px 14px; border-radius: var(--radius-md, 6px); }
  .rc-vs__table td:last-child { margin-bottom: 0; }
  /* the column headings are gone, so each answer names its own side */
  .rc-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);
  }
  .rc-vs__table td.is-us::before { content: "Tektome"; color: var(--color-arch-purple); }
}

.rc-vs { display: block; }

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

.rc-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);
}
.rc-role__buy::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--color-arch-purple); flex: none; }
.rc-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;
}

/* the duty ladder: the budget owner leads full width, the rest sit beneath */
.rc-roles[data-layout="ladder"] { grid-template-columns: repeat(3, 1fr); }
.rc-roles[data-layout="ladder"] .rc-role:first-child { grid-column: 1 / -1; }
.rc-roles[data-layout="ladder"] .rc-role:first-child .rc-role__t { font-size: 22px; }
.rc-roles[data-layout="ladder"] .rc-role:first-child .rc-role__x { max-width: 62ch; }

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

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

/* the daily user, subordinate by design */
.rc-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);
}
.rc-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);
}
.rc-roles__foot-x { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg-secondary); max-width: 78ch; }
.rc-roles__foot-x strong { color: var(--color-data-black); font-weight: 600; }

/* One markup, four layouts, switched by data-layout so the copy stays a
   single editable set: cards (4-up), rows (full-width), tiles (2x2 with a
   watermark) and list (editorial, no card chrome). */
.rc-roles { display: grid; gap: 20px; }
.rc-role {
  position: relative;
  background-color: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  padding: 26px 24px 28px;
  overflow: hidden;
}
.rc-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 12px;
  line-height: 1.5;
}
.rc-role__t { font-size: 16px; font-weight: 600; color: var(--color-data-black); margin: 0 0 10px; line-height: 1.35; }
.rc-role__x { font-size: 14px; line-height: 1.6; color: var(--fg-secondary); margin: 0; text-wrap: pretty; }

/* Card backgrounds. The four architecture images sit behind a white veil so
   body copy keeps its contrast; the image reads as texture, not subject. */
.rc-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;
}
.rc-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%);
}
.rc-role[data-card="1"] { --card-img: url("../backgrounds/card-facade-curve-card.png"); }
.rc-role[data-card="2"] { --card-img: url("../backgrounds/card-apex-card.png"); }
.rc-role[data-card="3"] { --card-img: url("../backgrounds/card-corridor-card.png"); }
.rc-role[data-card="4"] { --card-img: url("../backgrounds/card-lattice-card.png"); }

/* C · tiles, with the icon enlarged behind the copy */
.rc-roles[data-layout="tiles"] { grid-template-columns: repeat(2, 1fr); }
.rc-roles[data-layout="tiles"] .rc-role { padding: 32px 34px 34px; }
  position: absolute;
  top: 18px;
  right: 18px;
  width: 108px;
  height: 108px;
  background: none;
  color: var(--purple-100, #E2E2FA);
  margin: 0;
}
.rc-roles[data-layout="tiles"] .rc-role__who,
.rc-roles[data-layout="tiles"] .rc-role__t,
.rc-roles[data-layout="tiles"] .rc-role__x { position: relative; }
.rc-roles[data-layout="tiles"] .rc-role__t { font-size: 19px; }
.rc-roles[data-layout="tiles"] .rc-role__x { max-width: 46ch; }
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-draft-white);
  box-shadow: inset 0 0 0 1px var(--purple-100, #E2E2FA);
  margin-bottom: 0;
}
.rc-roles[data-layout="list"] .rc-role__who { margin: 0 0 8px; }

/* ---------- responsive ---------- */
/* "View the full output" control on each output card. Deliberately quiet:
   a text link with a rule, not a second call to action competing with the
   page's CTA. */
.rc-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--purple-100, #E2E2FA);
  border-radius: 0;
  background: none;
  color: var(--color-arch-purple);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--duration-fast, 120ms) var(--ease-out),
              color var(--duration-fast, 120ms) var(--ease-out);
}
.rc-more:hover { color: var(--purple-700); border-bottom-color: var(--color-arch-purple); }
.rc-more:focus-visible { outline: 3px solid var(--purple-100, #E2E2FA); outline-offset: 3px; }
.rc-more svg { width: 12px; height: 12px; display: block; }

/* Dashboard example overlay */
.rc-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 32px; }
.rc-modal[hidden] { display: none; }
.rc-modal__scrim { position: absolute; inset: 0; background: rgba(16, 16, 16, 0.4); }
.rc-modal__panel {
  position: relative;
  width: min(1180px, 100%);
  max-height: calc(100vh - 64px);
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--color-draft-white);
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 24px 64px rgba(16, 16, 16, 0.28);
  overflow: hidden;
}
/* one line rather than a stacked pair: the panel is height-capped, so the
   bar's height comes straight out of the screenshot below it */
.rc-modal__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 14px;
  /* the close button sets the row height, so the padding is what is left to
     trim: 8 + 36 + 8 + 1px border = 53px */
  padding: 8px 14px 8px 20px;
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
}
.rc-modal__eyebrow {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
}.rc-modal__title { grid-column: 2; margin: 0; font-size: 15px; font-weight: 600; color: var(--color-data-black); }
.rc-modal__close {
  grid-column: 3;
  align-self: center;
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-md, 6px);
  background: var(--color-draft-white);
  color: var(--color-data-black);
  cursor: pointer;
}
.rc-modal__close:hover { background: var(--color-light-gray); }
.rc-modal__close svg { width: 16px; height: 16px; }
/* 36px visual box, 44px hit target: the design system's floor is met without
   growing the bar, whose row height the button would otherwise set */
.rc-modal__close::after { content: ""; position: absolute; inset: -4px; }
.rc-modal__body { padding: 16px; overflow: auto; background: var(--color-light-gray); }
.rc-modal__shot { position: relative; width: 100%; }
.rc-modal__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-draft-white);
}
.rc-modal__shot[hidden] { display: none; }

@media (max-width: 700px) {
  .rc-modal { padding: 14px; }
  .rc-modal__body { padding: 12px; }
}
/* the eyebrow and title no longer fit side by side */
@media (max-width: 560px) {
  .rc-modal__bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; align-items: center; }
  .rc-modal__eyebrow { grid-column: 1; }
  .rc-modal__title { grid-column: 1; grid-row: 2; }
  .rc-modal__close { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 1080px) {
  .rc-stats { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .rc-hero { padding: 76px 0 64px; }
  .rc-sec { padding: 68px 0; }
  .rc-inner, .rc-hero__inner { padding: 0 24px; }
  .rc-split { grid-template-columns: 1fr; gap: 40px; }
  .rc-gets, .rc-cards, .rc-vs__panels { grid-template-columns: 1fr; }
  .rc-ledger__row { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .rc-eg { padding: 26px; }
  .rc-eg__cost, .rc-eg__steps { grid-template-columns: 1fr; }
  .rc-get { grid-template-columns: 1fr; gap: 26px; padding: 26px; }
  .rc-get:nth-child(even) .rc-get__copy { order: 0; }
  .rc-get:nth-child(even) .rc-get__viz { order: 0; }
  .rc-get--wide { grid-template-columns: 1fr; gap: 26px; }
  .rc-fmt { grid-template-columns: 1fr; }
  .rc-ledger__head { display: none; }
  .rc-one { grid-template-columns: 1fr; }
  .rc-bar__track { grid-template-columns: 1fr; grid-auto-rows: 44px; height: auto; }
}
@media (max-width: 560px) {
  .rc-roles[data-layout="ladder"], .rc-roles[data-layout="tiers"] { grid-template-columns: 1fr; }
  .rc-roles[data-layout="table"] .rc-role { grid-template-columns: 1fr; gap: 10px; }
  .rc-roles[data-layout="table"] .rc-role__t,
  .rc-roles[data-layout="table"] .rc-role__who,
  .rc-roles[data-layout="table"] .rc-role__x { grid-column: 1; }
  .rc-roles__foot { grid-template-columns: 1fr; gap: 10px; }
}