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

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

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

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

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

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

/* on a bold band the list marker needs to read against purple */
.cc-sec[data-bg="indigo-fade"] .cc-list li::before,
.cc-sec[data-bg="purple-taro"] .cc-list li::before,
.cc-sec[data-bg="purple-lavender"] .cc-list li::before,
.cc-sec[data-bg="deep-indigo"] .cc-list li::before,
.cc-sec[data-bg="vertical-purple"] .cc-list li::before,
.cc-sec[data-bg="purple-corner"] .cc-list li::before,
.cc-sec[data-bg="gradient-hero"] .cc-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. */
.cc-hero {
  position: relative;
  padding: 72px 0 64px;
  background: var(--color-draft-white);
}
.cc-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;
}
.cc-hero__inner { position: relative; z-index: 2; }
/* Copy left, graphic right. Keeps the hero shorter than a stacked layout
   and gives the visual a portrait column, so it does not repeat the
   full-width horizontal bar used on the Risk & Review Coverage hero. */
.cc-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.cc-hero__copy { min-width: 0; }
.cc-hero__viz { min-width: 0; }
.cc-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;
}
.cc-hero__title .accent { color: var(--color-arch-purple); font-weight: 400; }
.cc-hero__lede {
  font-size: 17px;
  line-height: 1.62;
  color: var(--fg-secondary);
  margin: 0;
  max-width: 54ch;
}

/* ---------- hero graphic: shared shell ---------- */
.cc-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);
}
.cc-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);
}
.cc-viz-card__head b { color: var(--color-arch-purple); font-weight: 500; }
.cc-viz-card__foot strong { color: var(--color-data-black); font-weight: 600; }

/* ---------- A · cadence: a vertical revision ladder ---------- */
.cc-cad::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--purple-100, #E2E2FA);
}
.cc-cad li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: baseline; }
.cc-cad li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--color-draft-white);
  border: 2px solid var(--color-arch-purple);
}
.cc-cad li.is-hit::before { background: var(--color-arch-purple); }
.cc-cad li.is-hit .cc-cad__rev { color: var(--color-arch-purple); }
.cc-cad li.is-hit .cc-cad__what { color: var(--color-data-black); font-weight: 500; }

/* ---------- B · position: the live compliance breakdown ---------- */
.cc-pos { display: grid; gap: 24px; }
/* Intra-row spacing (label to its own meter) stays well under the gap
   between rows, so each bar reads as belonging to the line above it. */
.cc-pos__row { display: grid; grid-template-columns: 1fr 34px; column-gap: 14px; row-gap: 8px; align-items: center; }
.cc-pos__label { margin: 0; font-size: 13.5px; color: var(--color-data-black); }
.cc-pos__label span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary, #8B8B8B);
  margin-top: 3px;
}
.cc-pos__n {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--color-data-black);
  text-align: right;
}
.cc-pos__meter { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--color-light-gray); overflow: hidden; }
.cc-pos__meter i { display: block; height: 100%; border-radius: 3px; background: var(--color-arch-purple); }
.cc-pos__row--warn .cc-pos__meter i { background: var(--state-warning-fg); }
.cc-pos__row--sky .cc-pos__meter i { background: var(--color-taro); }
.cc-pos__row--wait .cc-pos__meter i { background: var(--gray-400, #D4D4D4); }

/* ---------- C · clause: one requirement, in full ---------- */
.cc-cl__row dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  padding-top: 2px;
}
.cc-cl__row dd { margin: 0; }

.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.cc-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;
}

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

.cc-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);
}
.cc-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);
}
.cc-panel__foot strong { color: var(--color-data-black); font-weight: 600; }
/* the panel label is 10.5px mono, so the emphasis is weight and colour rather
   than size, which would break the tracked-caps rhythm */
.cc-panel__label b { font-weight: 600; color: var(--color-arch-purple); }

/* Cost of a late finding. Three treatments switchable from Tweaks; the ramp
   uses the design system's data-viz palette (green through orange), which is
   sanctioned for charts, so escalation is carried by colour as well as length.
   Arch Purple stays the UI accent. */
.cc-cost { display: grid; gap: 10px; }
.cc-cost__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 168px;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  color: var(--color-data-black);
}
.cc-cost__when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.cc-cost__bar { height: 26px; border-radius: 3px; background: var(--step, var(--purple-100, #E2E2FA)); }
.cc-cost__row--late .cc-cost__when { color: var(--color-data-black); }
.cc-cost__amt {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-secondary);
}

/* B · steps: the same five stages read as a rising column chart */
.cc-cost[data-viz="steps"] {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 8px;
  height: 240px;
}
.cc-cost[data-viz="steps"] .cc-cost__row {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto;
  gap: 8px;
  height: 100%;
  text-align: center;
}
.cc-cost[data-viz="steps"] .cc-cost__bar {
  grid-row: 1;
  align-self: end;
  width: 100%;
  height: var(--h);
  border-radius: 3px 3px 0 0;
}
.cc-cost[data-viz="steps"] .cc-cost__amt { grid-row: 2; font-size: 10px; line-height: 1.35; }
.cc-cost[data-viz="steps"] .cc-cost__when { grid-row: 3; }

/* C · zones: the threshold where change stops being cheap is drawn */
.cc-cost[data-viz="zones"] .cc-cost__row:not(.cc-cost__row--late) + .cc-cost__row--late {
  position: relative;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1.5px dashed var(--color-warning);
}
.cc-cost[data-viz="zones"] .cc-cost__row:not(.cc-cost__row--late) + .cc-cost__row--late::before {
  content: "The design is committed";
  position: absolute;
  top: -7px;
  left: 0;
  padding-right: 10px;
  background: var(--color-draft-white);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-data-black);
}
.cc-cost[data-viz="zones"] .cc-cost__bar { border-radius: 0 3px 3px 0; }

/* ---------- 3. THE COMPLIANCE POSITION ---------- */
.cc-dash thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  padding: 15px 20px;
  background: var(--color-light-gray);
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
  white-space: nowrap;
}
.cc-dash tbody td {
  padding: 17px 20px;
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
  color: var(--fg-secondary);
  line-height: 1.5;
  vertical-align: top;
}
.cc-dash tbody tr:last-child td { border-bottom: 0; }
.cc-dash tbody tr.is-flagged td { background: var(--purple-50); }

.cc-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;
}
.cc-st::before { content: ""; width: 7px; height: 7px; border-radius: 999px; flex: none; }
.cc-st--ok        { background: var(--purple-100, #E2E2FA); color: var(--purple-700); }
.cc-st--ok::before { background: var(--color-arch-purple); }
.cc-st--no::before { background: var(--state-warning-fg); }
.cc-st--person    { background: var(--color-sky-100); color: var(--color-data-black); }
.cc-st--person::before { background: var(--color-arch-purple); }
.cc-st--wait      { background: var(--color-light-gray); color: var(--fg-secondary); }
.cc-st--wait::before { background: var(--gray-400, #D4D4D4); }

/* ============================================================
   3b. LAYERED KEY VISUAL
   Three compositions of the compliance 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.
   ============================================================ */
.cc-comp { position: relative; }
.cc-comp__pad { padding: 0; }

.cc-win {
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
}
.cc-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);
}
.cc-win__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-data-black); }
.cc-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;
}
.cc-win__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.cc-win__body { padding: 20px 22px 24px; }
.cc-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);
}
.cc-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);
}
.cc-win__foot b { font-family: var(--font-mono); font-size: 11px; color: var(--color-arch-purple); }

/* submission pack rows */
.cc-pack { display: grid; gap: 7px; }
.cc-pack__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 128px;
  gap: 14px;
  align-items: center;
  background: var(--color-light-gray);
  border-radius: var(--radius-md, 6px);
  padding: 11px 14px;
  font-size: 13px;
  color: var(--color-data-black);
}
.cc-pack__n { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-arch-purple); }
.cc-pack__row > .cc-st { justify-self: start; }

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

/* count tiles inside a float */
.cc-quad__cell--warn .cc-quad__n { color: var(--state-warning-fg); }

/* document chip */
.cc-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;
}
.cc-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;
}
.cc-chip__t { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--color-data-black); line-height: 1.3; }
.cc-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 list reserves a right gutter so the default placement never cuts a
     pill; dragging is free to go anywhere */
  .cc-comp--clause .cc-win__body,
  .cc-comp--pack .cc-win__body { padding-right: 250px; }

  .cc-comp--pack .cc-comp__pad { padding: 0 118px 96px 0; }
  .cc-comp--pack .cc-comp__f1 { position: absolute; right: -18px; top: 40px; width: 330px; }
  .cc-comp--pack .cc-comp__f2 { position: absolute; right: 46px; top: 244px; width: 310px; }
  .cc-comp--pack .cc-comp__f3 { position: absolute; left: -22px; bottom: 74px; width: 262px; }

}
@media (max-width: 1150px) {
  .cc-comp__pad { padding: 0; }
  .cc-comp__f1, .cc-comp__f2, .cc-comp__f3 { position: static; width: auto; margin-top: 16px; }
  .cc-pack__row { grid-template-columns: 30px minmax(0, 1fr); }
  .cc-pack__row > .cc-st { grid-column: 2; }
}

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

/* ---------- output graphics ---------- */
.cc-viz {
  background: var(--color-light-gray);
  border-radius: var(--radius-lg, 8px);
  padding: 20px 20px 22px;
}
.cc-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 · extracted requirements */
.cc-reqs { display: grid; gap: 8px; }
.cc-reqs__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: 13.5px;
  color: var(--color-data-black);
}
.cc-reqs__row i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  white-space: nowrap;
}
.cc-reqs__foot {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin: 12px 0 0;
}

/* 2 · document tracking table */
.cc-docs { display: grid; gap: 6px; }
.cc-docs__row {
  display: grid;
  grid-template-columns: 1fr 74px 74px;
  gap: 10px;
  align-items: center;
  background: var(--color-draft-white);
  border-radius: var(--radius-md, 6px);
  padding: 10px 13px;
  font-size: 13px;
  color: var(--color-data-black);
}
.cc-docs__row--head {
  background: none;
  padding: 0 13px 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.cc-tick {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--color-arch-purple);
  color: var(--color-draft-white);
  font-size: 9px;
}
.cc-tick--off { background: var(--gray-300, #D9D9D9); }

/* 3 · formats */
.cc-fmt { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.cc-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);
}
.cc-fmt__col p svg { width: 15px; height: 15px; flex: none; }
.cc-fmt__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cc-fmt__col li { font-size: 12.5px; line-height: 1.42; color: var(--fg-secondary); }

/* 4 · dashboard summary, as a share of the register. Three treatments
   switchable from Tweaks; all four states use the design system's data-viz
   palette so the slices are distinguishable, and every slice is named in a
   legend rather than relying on colour alone. */
.cc-share { display: grid; gap: 16px; }
.cc-share__plot {
  --a: 274.2deg;   /* compliant */
  --b: 304.5deg;   /* + not compliant */
  --c: 339.8deg;   /* + referred */
  display: block;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  background: conic-gradient(
    var(--color-success) 0 calc(var(--a) - 1.2deg),
    var(--color-light-gray) calc(var(--a) - 1.2deg) var(--a),
    var(--color-warning) var(--a) calc(var(--b) - 1.2deg),
    var(--color-light-gray) calc(var(--b) - 1.2deg) var(--b),
    var(--color-accent-purple) var(--b) calc(var(--c) - 1.2deg),
    var(--color-light-gray) calc(var(--c) - 1.2deg) var(--c),
    var(--color-teal) var(--c) calc(360deg - 1.2deg),
    var(--color-light-gray) calc(360deg - 1.2deg) 360deg);
  box-shadow: 0 0 0 1.5px var(--color-light-gray);
}
.cc-share__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cc-share__legend li {
  display: grid;
  grid-template-columns: 11px 34px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-secondary);
}
.cc-share__key { width: 11px; height: 11px; border-radius: 2px; align-self: center; }
.cc-share__n { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-data-black); text-align: right; }

/* A · pie beside its legend */
.cc-share--pie .cc-share__plot { width: 108px; height: 108px; }

/* B · donut, total in the middle, legend beneath */
.cc-share--donut .cc-share__plot { position: relative; margin: 0 auto; }
.cc-share--donut .cc-share__plot::after {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 999px;
  background: var(--color-draft-white);
}
.cc-share__total b { font-size: 24px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; color: var(--color-data-black); }
.cc-share__total span {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}
.cc-share--donut .cc-share__legend { grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }

/* C · pie with the share stated per row */
.cc-share--split { grid-template-columns: 116px minmax(0, 1fr); gap: 22px; align-items: center; }
.cc-share--split .cc-share__plot { width: 116px; height: 116px; }
.cc-share--split .cc-share__legend li { grid-template-columns: 11px 34px minmax(0, 1fr) 42px; }
.cc-share__pct { font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary, #8B8B8B); text-align: right; }

/* by-source breakdown beneath the split chart. The mask fades the last rows
   so the list reads as continuing rather than stopping at the panel edge. */
.cc-share__more {
  /* the share layouts are two-column grids, so the block has to be told to
     span both tracks; auto-placement drops it into the narrow plot column */
  grid-column: 1 / -1;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-300, #D9D9D9);
}
.cc-share__more-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);
}
.cc-source {
  display: grid;
  gap: 8px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}
.cc-source__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 34px;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--color-data-black);
}
.cc-source__bar { display: block; height: 8px; border-radius: 2px; background: var(--color-light-gray); overflow: hidden; }
.cc-source__bar i { display: block; height: 100%; border-radius: 2px; background: var(--color-teal); }
/* each row is tinted by the status its open items sit in */
.cc-source__bar i.is-open { background: var(--color-warning); }
.cc-source__bar i.is-ref { background: var(--color-accent-purple); }
.cc-source__bar i.is-wait { background: var(--color-teal); }
.cc-source__bar i.is-wait--soft { background: var(--color-teal); opacity: 0.55; }
/* the waiting rows are the lowest-priority group, so their labels recede */
.cc-source__row--soft > span:first-child { color: var(--fg-tertiary, #8B8B8B); }
.cc-source__row--soft .cc-source__n { color: var(--fg-tertiary, #8B8B8B); }

/* the status key above the bars */
.cc-source__key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.cc-source__key li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-secondary); }
.cc-source__key i { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.cc-source__n { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-tertiary, #8B8B8B); text-align: right; }

/* 5 · generated outputs */
.cc-out { display: grid; gap: 9px; }
.cc-out__row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  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);
}
.cc-out__row svg { width: 16px; height: 16px; color: var(--color-arch-purple); }
.cc-out__row 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;
}

/* 6 · audit thread */
.cc-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. */
.cc-trail::before {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: var(--color-lavender);
}
.cc-trail li { position: relative; }
.cc-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);
}
.cc-trail p { margin: 0 0 4px; font-size: 13.5px; font-weight: 500; color: var(--color-data-black); line-height: 1.4; }
.cc-trail span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--fg-tertiary, #8B8B8B); }

/* "View the full output" control on each output card. Quiet by design: a
   text link with a rule, not a second call to action competing with the CTA.
   The loupe signals a modal rather than navigation. */
.cc-more:hover { color: var(--purple-700); border-bottom-color: var(--color-arch-purple); }
.cc-more:focus-visible { outline: 3px solid var(--purple-100, #E2E2FA); outline-offset: 3px; }
.cc-more svg { width: 12px; height: 12px; display: block; }

/* Output example overlay */
/* Output example overlay. Built in assets/js/pages/compliance-code-review.js
   and appended to <body>, so these classes never appear in the template. */
.cc-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 32px; }
.cc-modal[hidden] { display: none; }
.cc-modal__scrim { position: absolute; inset: 0; background: rgba(16, 16, 16, 0.4); }
.cc-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 */
.cc-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);
}
.cc-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);
}
.cc-modal__title { grid-column: 2; margin: 0; font-size: 15px; font-weight: 600; color: var(--color-data-black); }
.cc-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;
}
.cc-modal__body { padding: 16px; overflow: auto; background: var(--color-light-gray); }
.cc-modal__shot { position: relative; width: 100%; }

.cc-modal__close:hover { background: var(--color-light-gray); }
.cc-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 */
.cc-modal__close::after { content: ""; position: absolute; inset: -4px; }
.cc-modal__shot[hidden] { display: none; }
.cc-modal__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-draft-white);
}

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

.cc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cc-card {
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  padding: 28px 28px 30px;
  display: grid;
  gap: 16px;
  align-content: start;
}
.cc-card__t { font-size: 17px; font-weight: 600; color: var(--color-data-black); margin: 0; line-height: 1.35; }
.cc-card__pair { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-secondary); }
.cc-card__pair span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin-bottom: 5px;
}
.cc-card__pair em { font-style: normal; color: var(--color-arch-purple); font-weight: 500; }

/* Sourced figures. Each figure gets its own chart type and its own colour
   from the design system's data-viz palette (sanctioned for categorical
   charts); Arch Purple stays the single UI accent. Three treatments,
   switchable from Tweaks via data-treatment on the wrapper. */
.cc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.cc-stat {
  display: flex;
  flex-direction: column;
  padding: 26px 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);
}
/* the numeral stays Arch Purple: the data-viz palette is for chart series,
   not for chrome, and a 40px figure in teal or orange fails AA on white */
.cc-stat__n { font-size: 40px; font-weight: 300; letter-spacing: -0.02em; color: var(--color-arch-purple); margin: 0 0 12px; line-height: 1; }
.cc-stat__t { flex: 1; font-size: 14.5px; line-height: 1.55; color: var(--color-data-black); margin: 0 0 12px; }
.cc-stat__s {
  min-height: 62px;
  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);
}

/* ---- figure shells: one chart kind shows per treatment ---- */
.cc-fig {
  height: 112px;
  margin: 0 0 20px;
  display: flex;
  align-items: flex-end;
}
.cc-fig > span { width: 100%; }
.cc-fig > span { display: none; }
.cc-stats[data-treatment="charts"] .cc-fig > .is-charts,
.cc-stats[data-treatment="dials"]  .cc-fig > .is-dials,
.cc-stats[data-treatment="blocks"] .cc-fig > .is-blocks { display: block; }

.cc-donut {
  display: block;
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 999px;
  background: conic-gradient(var(--viz) calc(var(--pct) * 3.6deg), var(--color-light-gray) 0);
}
.cc-donut::after { content: ""; position: absolute; inset: 15px; border-radius: 999px; background: var(--color-draft-white); }

.cc-gauge i {
  position: absolute;
  top: 0;
  left: 0;
  width: 128px;
  height: 128px;
  border-radius: 999px;
  background: conic-gradient(from 270deg, var(--viz) calc(var(--pct) * 1.8deg), var(--color-light-gray) 0 180deg, transparent 0);
}
.cc-gauge i::after { content: ""; position: absolute; inset: 17px; border-radius: 999px; background: var(--color-draft-white); }

.cc-pair { display: grid; gap: 9px; }
.cc-pair__row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: center; }
.cc-pair__lab { margin: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--fg-tertiary, #8B8B8B); }
.cc-pair__bar { display: block; height: 16px; border-radius: 2px; background: var(--color-light-gray); }
.cc-pair__bar i { display: block; height: 100%; border-radius: 2px; background: var(--viz); }
.cc-pair__row--target .cc-pair__bar i { background: var(--color-lavender); }
/* a range, not a measured figure, so it is hatched rather than filled */
.cc-pair__row--over .cc-pair__bar i {
  background: repeating-linear-gradient(135deg, var(--viz) 0 3px, transparent 3px 7px);
  box-shadow: inset 0 0 0 1px var(--viz);
}

.cc-splitbar i { border-radius: 2px; }
.cc-figkey li { display: flex; align-items: center; gap: 6px; }
.cc-figkey i { width: 10px; height: 7px; border-radius: 2px; flex: none; }

.cc-steps { display: grid; grid-auto-flow: column; gap: 3px; align-items: end; height: 80px; }
.cc-steps i { border-radius: 2px 2px 0 0; background: var(--viz); }
.cc-figaxis {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
}

.cc-waffle i { aspect-ratio: 1 / 1; border-radius: 2px; background: var(--color-light-gray); }
.cc-waffle i.is-on { background: var(--viz); }

.cc-ticks i { width: 9px; height: 24px; border-radius: 2px; background: var(--viz); }
.cc-ticks i.is-target { background: var(--color-lavender); }

.cc-stack i { height: 7px; border-radius: 2px; background: var(--viz); }

/* ---------- 6. WHY TEKTOME ---------- */
.cc-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.cc-vs__col {
  background: var(--color-draft-white);
  border: 1px solid var(--border-subtle, #EAEAEA);
  border-radius: var(--radius-lg, 8px);
  padding: 30px 30px 32px;
}
.cc-vs__col--them { background: var(--color-light-gray); border-color: transparent; }
.cc-vs__col--us { border-color: var(--color-arch-purple); }
.cc-vs__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-tertiary, #8B8B8B);
  margin: 0 0 14px;
}
.cc-vs__tag::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--gray-400, #D4D4D4); }
.cc-vs__col--us .cc-vs__tag { color: var(--color-arch-purple); }
.cc-vs__col--us .cc-vs__tag::before { background: var(--color-arch-purple); }
.cc-vs__title { font-size: 19px; font-weight: 600; color: var(--color-data-black); margin: 0 0 20px; line-height: 1.32; text-wrap: pretty; }
.cc-vs__col--them .cc-vs__title { color: var(--fg-secondary); font-weight: 500; }
.cc-vs__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.cc-vs__items li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-secondary);
}
.cc-vs__items svg { width: 16px; height: 16px; margin-top: 2px; color: var(--gray-400, #D4D4D4); }
.cc-vs__col--us .cc-vs__items svg { 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. */
.cc-roles__lede { max-width: 74ch; margin: 0 0 34px; font-size: 16.5px; line-height: 1.7; color: var(--fg-secondary); }
.cc-roles__lede strong { color: var(--color-data-black); font-weight: 600; }

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

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

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

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

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

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

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .cc-roles[data-layout="ladder"], .cc-roles[data-layout="tiers"] { grid-template-columns: repeat(2, 1fr); }
  .cc-stats { grid-template-columns: 1fr; }
  /* Between 900 and 1080px the two fixed columns squeeze the bar track to a
     sliver. Drop the amount under the bar so it keeps the full width. */
  .cc-cost:not([data-viz="steps"]) .cc-cost__row { grid-template-columns: 78px minmax(0, 1fr); row-gap: 4px; }
  .cc-cost:not([data-viz="steps"]) .cc-cost__amt { grid-column: 2; }
  .cc-cost[data-viz="steps"] { height: 200px; }
  .cc-cost[data-viz="steps"] .cc-cost__amt { display: none; }
}
@media (max-width: 900px) {
  .cc-hero { padding: 76px 0 64px; }
  .cc-sec { padding: 68px 0; }
  .cc-inner, .cc-hero__inner { padding: 0 24px; }
  .cc-dash__scroll { margin: 0 -24px; padding: 0 24px; }
  .cc-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .cc-split { grid-template-columns: 1fr; gap: 40px; }
  .cc-cards, .cc-vs { grid-template-columns: 1fr; }
  .cc-get { grid-template-columns: 1fr; gap: 26px; padding: 26px; }
  .cc-get:nth-child(even) .cc-get__copy { order: 0; }
  .cc-get:nth-child(even) .cc-get__viz { order: 0; }
  .cc-fmt { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cc-roles[data-layout="ladder"], .cc-roles[data-layout="tiers"] { grid-template-columns: 1fr; }
  .cc-roles[data-layout="table"] .cc-role { grid-template-columns: 1fr; gap: 10px; }
  .cc-roles[data-layout="table"] .cc-role__who,
  .cc-roles[data-layout="table"] .cc-role__t,
  .cc-roles[data-layout="table"] .cc-role__x { grid-column: 1; }
  .cc-roles__foot { grid-template-columns: 1fr; gap: 10px; }
  .cc-share--pie, .cc-share--split { grid-template-columns: 1fr; }
  .cc-source__row { grid-template-columns: minmax(0, 1fr) 74px 34px; }
  .cc-share--donut .cc-share__legend { grid-template-columns: 1fr; }
}