/* ==========================================================================
   Master case-study system (introduced with Case Study 01, Global Research Coverage Platform).
   The portfolio shell stays the same on every case: type, grid, spacing, buttons, tokens, themes.
   These components carry the shared story spine:
     Quick peek  Hero → Challenge → Role → Insight → Decisions → Product → Moments → Prototype → Outcome
     Deep dive   Context → Challenge → Complexity → Role → Evidence → Insights → Decisions → Product model
                 → Evolution → Moments → Prototype → Constraints → Outcomes → Reflection
   Shared pieces: classification badge, compact metadata, design-question callout, role split,
   decision cards, screen captions (Problem · Decision · Why), outcome labels, next-case navigation.
   The product UI inside each case brings its own theme (see css/northstar-ls.css).
   ========================================================================== */

/* Classification: real project vs concept, always stated up front */
.cx-class {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: var(--fs-small);
  font-weight: 700;
}
.cx-class svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  flex: none;
}

/* Hero with a product composition beside the text on wide screens */
.cx-hero__grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  align-items: center;
}
.cx-hero__art {
  margin: 0;
}
.cx-hero__art img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-image);
}
@media (min-width: 1000px) {
  .cx-hero__grid {
    grid-template-columns: 1.05fr 1fr;
  }
}

/* Compact metadata: five short answers, no paragraphs */
.cx-meta {
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap: 1.1rem var(--gutter, 1.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.cx-meta dt {
  margin-bottom: 0.2rem;
}
.cx-meta dd {
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
}

/* Section rhythm for the long-form story */
.cx-section .section-head {
  max-width: 46rem;
}
.cx-lede {
  font-size: var(--fs-lede);
  color: var(--color-text-muted);
  max-width: 44rem;
}
.cx-stack {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.cx-stack > .section-head {
  margin-bottom: 0;
}

/* The design question: one large callout per case */
.cx-question {
  margin: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
}
.cx-question p:first-child {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}
.cx-question blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.cx-not {
  margin-bottom: 1rem;
  color: var(--color-text-muted);
}
.cx-not s {
  text-decoration-thickness: 1px;
}

/* Role: what was collaborative vs. what was my design work */
.cx-role {
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-role .card {
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
}
.cx-role h3 {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}
.cx-role ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.cx-role li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
}
.cx-role li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.cx-role .cx-role__mine {
  border-color: var(--color-accent);
}
.cx-role .cx-role__mine li::before {
  background: var(--brand-orange);
}
@media (min-width: 760px) {
  .cx-role {
    grid-template-columns: 1fr 1.25fr;
  }
}

/* Actors + cross-cutting complexity */
.cx-actors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--gutter, 1.5rem);
}
.cx-actors li {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-actors b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.cx-actors span {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.cx-across {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
}
.cx-across dt {
  margin-right: 0.35rem;
}
.cx-across dd {
  margin: 0;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  font-weight: 700;
  font-size: var(--fs-small);
}

/* Lifecycle: four stages, each a list of steps with an owner */
.cx-life {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter, 1.5rem);
  counter-reset: cx-step;
}
.cx-life > li {
  position: relative;
  padding: 1.1rem 1.1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-life h3 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}
.cx-life h3 span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent);
}
.cx-life ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.cx-life ol li {
  counter-increment: cx-step;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0 0.5rem;
  line-height: 1.35;
}
.cx-life ol li::before {
  content: counter(cx-step, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  padding-top: 0.2em;
}
.cx-life ol li small {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.cx-life .is-loop {
  border-style: dashed;
}
@media (min-width: 640px) {
  .cx-life {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .cx-life {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cx-life > li:not(:last-child)::after { /* the arrow between stages */
    content: "→";
    position: absolute;
    right: calc(var(--gutter, 1.5rem) * -0.5 - 0.45rem);
    top: 1.05rem;
    color: var(--color-accent);
    font-weight: 700;
  }
}

/* Key insight: two information moments side by side */
.cx-moments2 {
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-moments2 .card {
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
}
.cx-moments2 h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.35rem;
}
.cx-moments2 p {
  color: var(--color-text-muted);
}
.cx-moments2 ul {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cx-moments2 li {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  font-size: var(--fs-small);
}
@media (min-width: 760px) {
  .cx-moments2 {
    grid-template-columns: 1fr 1fr;
  }
}
.cx-principle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-band);
  border: 1px solid var(--color-border);
}
.cx-principle span {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.cx-principle strong {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.2;
}

/* Decision cards */
.cx-decisions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-decisions > li {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-decisions .cx-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-accent);
}
.cx-decisions h3 {
  font-size: var(--fs-h3);
}
.cx-decisions p {
  color: var(--color-text-muted);
}
.cx-decisions ul {
  list-style: disc;
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
  display: grid;
  gap: 0.25rem;
}
@media (min-width: 900px) {
  .cx-decisions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.cx-callout {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) 1rem;
}
.cx-callout::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: var(--brand-orange);
}

/* Key design moments: a recreated product screen + Problem · Decision · Why */
.cx-shots {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.cx-shot {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
.cx-shot__head h3 {
  font-size: var(--fs-h2);
  margin: 0.35rem 0 0;
}
.cx-shot__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-accent);
}
.cx-cap {
  display: grid;
  gap: 0.9rem;
  margin: 1.1rem 0 0;
}
.cx-cap div {
  display: grid;
  gap: 0.15rem;
}
.cx-cap dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.cx-cap dd {
  margin: 0;
  color: var(--color-text-muted);
}
.cx-frame {
  margin: 0;
}
.cx-frame figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
@media (min-width: 1000px) {
  .cx-shot {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: 3rem;
  }
  .cx-shot--flip .cx-shot__text {
    order: 2;
  }
  .cx-shot--flip {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  }
}

/* Prototype band */
.cx-proto {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  justify-self: start;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px dashed var(--color-border-strong);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.cx-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}
.cx-proto h2,
.cx-proto h3 {
  font-size: var(--fs-h2);
}
.cx-proto p {
  color: var(--color-text-muted);
  max-width: 40rem;
}
.cx-proto__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.cx-proto__actions small {
  color: var(--color-text-muted);
}

/* Outcomes: standardized labels across the portfolio */
.cx-outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--gutter, 1.5rem);
}
.cx-outcomes > li {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-outcomes h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-family: var(--font-body);
}
.cx-outcomes p {
  color: var(--color-text);
}
.cx-established {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}
.cx-established li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
}
.cx-established li::before {
  content: "";
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg) translateY(-0.15rem);
}
.cx-honest {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* Product model: account → study record → countries → quotes → policy */
.cx-model {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.cx-model li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 1rem;
  align-items: baseline;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-left: calc(var(--d, 0) * clamp(0.5rem, 0.2rem + 2vw, 2rem));
}
.cx-model b {
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.cx-model em {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}
.cx-model span {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* Roadmap phases with explicit status labels (pattern + word, never color alone) */
.cx-phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-phases > li {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.35rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1.5px solid var(--color-accent);
}
.cx-phases > li.is-planned {
  border-style: dashed;
  border-color: var(--color-border-strong);
}
.cx-phases > li.is-future {
  border-style: dotted;
  border-color: var(--color-border-strong);
  background: transparent;
}
.cx-phases h3 {
  font-size: var(--fs-h3);
}
.cx-phases .cx-phase-n {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.cx-phases ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}
.cx-phases ul li {
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: var(--fs-small);
}
.cx-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.cx-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.cx-status--planned {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
}
.cx-status--planned::before {
  background: transparent;
  border: 1.5px solid currentColor;
}
.cx-status--future {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px dotted var(--color-border-strong);
}
.cx-status--future::before {
  background: transparent;
  border: 1.5px dotted currentColor;
}
@media (min-width: 900px) {
  .cx-phases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Design evolution: four steps, each with a small illustration */
.cx-evo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-evo > li {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}
.cx-evo__art {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
  position: relative;
}
.cx-evo h3 {
  font-size: 1.1rem;
}
.cx-evo h3 span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: 0.2rem;
}
.cx-evo p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
@media (min-width: 640px) {
  .cx-evo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .cx-evo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Evolution illustrations (decorative; the text beside them carries the meaning) */
.evo-stickies {
  position: absolute;
  inset: 12% 8%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8%;
}
.evo-stickies i {
  border-radius: 3px;
  background: #ffe69a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.evo-stickies i:nth-child(3n) {
  background: #bfe3ff;
}
.evo-stickies i:nth-child(4n) {
  background: #d9d2ff;
}
.evo-stickies i:nth-child(5n) {
  visibility: hidden;
}
.evo-wire,
.evo-flow,
.evo-ui {
  position: absolute;
  inset: 12% 10%;
  display: grid;
  gap: 7%;
  align-content: start;
}
.evo-wire i {
  height: 0.55rem;
  border-radius: 3px;
  background: var(--color-border);
}
.evo-wire i:nth-child(1) {
  width: 55%;
  height: 0.8rem;
  background: var(--color-border-strong);
}
.evo-wire i:nth-child(4) {
  width: 70%;
}
.evo-wire b {
  justify-self: end;
  width: 30%;
  height: 1rem;
  border-radius: 4px;
  border: 1.5px dashed var(--color-border-strong);
}
.evo-flow {
  grid-template-columns: repeat(3, 1fr);
  align-content: center;
  gap: 10% 8%;
}
.evo-flow i {
  height: 1.6rem;
  border-radius: 5px;
  border: 1.5px solid var(--color-accent);
  background: var(--color-accent-soft);
  position: relative;
}
.evo-flow i:nth-child(3n)::after {
  display: none;
}
.evo-flow i::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 34%;
  height: 1.5px;
  background: var(--color-accent);
}
.evo-ui {
  inset: 10% 8%;
  border-radius: 6px;
  overflow: hidden;
  background: #f4f6fb;
  border: 1px solid #c9d0e2;
  gap: 0;
}
.evo-ui > b {
  height: 14%;
  min-height: 0.8rem;
  background: #18205a;
}
.evo-ui > span {
  display: grid;
  gap: 0.35rem;
  padding: 9% 9%;
}
.evo-ui > span i {
  height: 0.5rem;
  border-radius: 3px;
  background: #dde2ee;
}
.evo-ui > span i:first-child {
  width: 50%;
  height: 0.7rem;
  background: #141b3d;
}
.evo-ui > span i.c {
  width: 40%;
  background: #e4ebfb;
  border: 1px solid #2754c5;
}
.evo-ui > span em {
  justify-self: end;
  width: 32%;
  height: 0.9rem;
  border-radius: 3px;
  background: #18205a;
}

/* Change loop */
.cx-loop {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  counter-reset: cx-loop;
}
.cx-loop li {
  counter-increment: cx-loop;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-weight: 500;
}
.cx-loop li::before {
  content: counter(cx-loop);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
}
.cx-loop__back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.cx-loop__back svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex: none;
}
@media (min-width: 900px) {
  .cx-loop {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Two columns: what was designed vs. what stayed future-state */
.cx-split {
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-split .card {
  padding: 1.35rem 1.5rem;
}
.cx-split h3 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}
.cx-split ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--color-text-muted);
}
@media (min-width: 760px) {
  .cx-split {
    grid-template-columns: 1fr 1fr;
  }
}

/* Operating model: who does what today */
.cx-ops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--gutter, 1.5rem);
}
.cx-ops li {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-ops b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 0.2rem;
}
.cx-ops span {
  color: var(--color-text-muted);
}
.cx-ops li.is-country {
  border-style: dashed;
  border-color: var(--color-accent);
}

/* Evidence → what it changed */
.cx-evidence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-evidence li {
  display: grid;
  gap: 0.4rem;
  padding: 1.2rem 1.35rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-evidence b {
  font-size: 1.02rem;
}
.cx-evidence span {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.cx-evidence span strong {
  color: var(--color-text);
}
@media (min-width: 760px) {
  .cx-evidence {
    grid-template-columns: 1fr 1fr;
  }
}
.cx-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cx-sources li {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  font-size: var(--fs-small);
  font-weight: 500;
}

/* Constraints and edge cases */
.cx-edges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--gutter, 1.5rem);
}
.cx-edges li {
  padding: 1.2rem 1.35rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-edges h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.cx-edges p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* Reflection */
.cx-reflect {
  margin: 0;
  max-width: 48rem;
}
.cx-reflect blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.15rem + 1.5vw, 2.3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.cx-reflect p {
  margin-top: 1.25rem;
  color: var(--color-text-muted);
  font-size: var(--fs-lede);
}

/* Next-case navigation: same on every case */
.cx-next {
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-next a {
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.cx-next a:hover,
.cx-next a:focus-visible {
  border-color: var(--color-accent);
}
.cx-next small {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.cx-next b {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.cx-next .cx-next__n {
  text-align: right;
}
@media (min-width: 760px) {
  .cx-next {
    grid-template-columns: 1fr 1fr;
  }
  .cx-next .cx-next__n:only-child {
    grid-column: 2;
  }
}

/* Homepage: three featured cases in one row on wide screens, then a quiet "more work" strip */
@media (min-width: 760px) and (max-width: 1079px) {
  .cs-grid--3 .cs-card {
    grid-column: span 4;
  }
  .cs-grid--3 .cs-card:first-child { /* the featured case sits side by side: image left, story right */
    grid-column: span 8;
    flex-direction: row;
  }
  .cs-grid--3 .cs-card:first-child .cs-card__link {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    background: #f6f8fc; /* the composition's own background, so the full image shows uncropped */
    border-bottom: 0;
    border-right: 1px solid var(--color-border);
  }
}
@media (min-width: 1080px) {
  .cs-grid--3 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .cs-grid--3 .cs-card {
    grid-column: span 4;
  }
}
.cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cs-more {
  list-style: none;
  margin: var(--gutter, 1.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cs-more > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
}
.cs-more__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cs-more b {
  font-weight: 700;
}
.cs-more p {
  flex: 1 1 18rem;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.cs-more svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
}
@media (min-width: 900px) {
  .cs-more {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-next a {
    transition: none;
  }
}

/* ==========================================================================
   Added for Case Study 02 (Enterprise Tool Governance). Additive only: no existing rule changes.
   ========================================================================== */

/* Questions the operating model had to answer, as a compact two-column list */
.cx-asks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem 1.5rem;
}
.cx-asks li {
  position: relative;
  padding-left: 1.6rem;
  font-weight: 500;
  line-height: 1.4;
}
.cx-asks li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}
@media (min-width: 760px) {
  .cx-asks {
    grid-template-columns: 1fr 1fr;
  }
}

/* Governance lifecycle: six stages that loop back (Reuse feeds the next Request) */
.cx-cycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  counter-reset: cx-cycle;
}
.cx-cycle > li {
  counter-increment: cx-cycle;
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-cycle h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.02rem;
}
.cx-cycle h3::before {
  content: counter(cx-cycle);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
}
.cx-cycle p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.cx-cycle > li.is-loop {
  border-style: dashed;
  border-color: var(--color-accent);
}
@media (min-width: 640px) {
  .cx-cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .cx-cycle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cx-cycle > li:not(:nth-child(3n))::after { /* a quiet arrow to the next stage, on one row of three */
    content: "";
    position: absolute;
    right: -0.62rem;
    top: 1.5rem;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid var(--color-border-strong);
    border-right: 2px solid var(--color-border-strong);
    transform: rotate(45deg);
  }
}

/* Agent modes: Suggest → Ask → Act, each with what triggers it and how much the agent may do */
.cx-modes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-modes > li {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1.1rem, 1rem + 0.8vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-modes h3 {
  font-size: 1.25rem;
}
.cx-modes__level { /* autonomy shown as a word and a three-step meter, never color alone */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-text-muted);
}
.cx-modes__level i {
  display: inline-flex;
  gap: 3px;
}
.cx-modes__level i b {
  width: 16px;
  height: 6px;
  border-radius: 2px;
  background: var(--color-border-strong);
}
.cx-modes__level i b.on {
  background: var(--color-accent);
}
.cx-modes p {
  color: var(--color-text-muted);
}
.cx-modes ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  font-size: var(--fs-small);
}
.cx-modes ul li {
  position: relative;
  padding-left: 1rem;
}
.cx-modes ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}
.cx-modes .meta-label {
  margin-top: 0.2rem;
}
@media (min-width: 900px) {
  .cx-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Added for Case Study 03 (Claims Adjuster Copilot). Additive only: no existing rule changes.
   ========================================================================== */

/* What the reviewer must be able to do: a two-column checklist */
.cx-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem 1.5rem;
}
.cx-checks li {
  position: relative;
  padding-left: 1.75rem;
  font-weight: 500;
  line-height: 1.4;
}
.cx-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
}
.cx-checks li::after {
  content: "";
  position: absolute;
  left: 0.33rem;
  top: 0.38em;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}
@media (min-width: 760px) {
  .cx-checks {
    grid-template-columns: 1fr 1fr;
  }
}

/* Human-in-the-loop lifecycle: eight stages in four lanes, by who acts, with the approval gate
   before anything executes. Each lane differs in words and in shape: AI work is dashed (provisional),
   the human lane is solid and strong, execution sits behind the gate, the audit record persists. */
.cx-hitl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  counter-reset: cx-hitl;
}
.cx-hitl__lane {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 1rem 1.1rem 1.15rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-hitl__lane.is-ai {
  border-style: dashed;
  border-color: var(--color-border-strong);
}
.cx-hitl__lane.is-human {
  border: 2px solid var(--color-accent);
}
.cx-hitl__lane.is-audit {
  border-width: 3px;
  border-style: double;
  border-color: var(--color-border-strong);
}
.cx-hitl__who {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
}
.cx-hitl__who svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--color-accent);
}
.cx-hitl__who b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
}
.cx-hitl__who small {
  display: block;
  margin-top: 0.2rem;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.cx-hitl__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cx-hitl__steps li {
  counter-increment: cx-hitl;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg, transparent);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.3;
}
.cx-hitl__steps li::before {
  content: counter(cx-hitl, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.is-human .cx-hitl__steps li {
  border-color: var(--color-accent);
}
.cx-hitl__gate { /* the approval gate, in words, at the top of the execution lane */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
  margin: 0;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg, #fff);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cx-hitl__gate svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.cx-hitl__lane.is-system {
  border-top: 4px solid var(--color-text);
}
@media (min-width: 640px) {
  .cx-hitl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .cx-hitl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cx-hitl__steps {
    flex-direction: column;
    align-items: flex-start;
  }
  .cx-hitl__lane.is-system {
    border-top-width: 1px;
    border-left: 4px solid var(--color-text);
  }
  .cx-hitl__lane:not(:last-child)::after { /* the arrow between lanes */
    content: "→";
    position: absolute;
    right: -0.72rem;
    top: 1.1rem;
    color: var(--color-accent);
    font-weight: 700;
  }
}

/* Trust model: four ideas, each with a small mark */
.cx-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-trust li {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 1.2rem 1.3rem 1.3rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-trust svg {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
}
.cx-trust h3 {
  font-size: 1.05rem;
}
.cx-trust p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
@media (min-width: 640px) {
  .cx-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .cx-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Scrutiny ramp: more uncertainty or consequence → more human scrutiny (a word and a 4-step meter) */
.cx-ramp {
  display: grid;
  gap: 1rem;
}
.cx-ramp ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.cx-ramp li {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-ramp li:last-child {
  border: 2px solid var(--color-accent);
}
.cx-ramp__level {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.cx-ramp__level i {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
}
.cx-ramp__level i b {
  width: 7px;
  border-radius: 2px;
  background: var(--color-border-strong);
}
.cx-ramp__level i b:nth-child(1) { height: 6px; }
.cx-ramp__level i b:nth-child(2) { height: 10px; }
.cx-ramp__level i b:nth-child(3) { height: 14px; }
.cx-ramp__level i b:nth-child(4) { height: 18px; }
.cx-ramp__level i b.on {
  background: var(--color-accent);
}
.cx-ramp h3 {
  font-size: 1.05rem;
}
.cx-ramp li p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.cx-ramp__axis {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-weight: 700;
}
.cx-ramp__axis::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--color-border-strong), var(--color-accent));
}
@media (min-width: 640px) {
  .cx-ramp ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .cx-ramp ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Case 03 visual polish: layout, type and hierarchy. New components, plus overrides scoped to the
   Claims pages (.cx--claims), so Global Research Coverage and Enterprise Tool Governance render as before.
   ========================================================================== */
.cx--claims h1,
.cx--claims h2,
.cx--claims h3 {
  text-wrap: balance;
}
.cx--claims p,
.cx--claims li,
.cx--claims dd {
  text-wrap: pretty;
}

/* Sub-section kickers: small and quiet (inside a section head a plain label would take the lede size) */
.cx-kicker,
.cx--claims .section-head p.cx-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-accent);
}
.cx--claims .section-head .cx-kicker + h2 {
  margin-top: -0.35rem;
}
.cx-kicker + ul,
.cx-kicker + ol {
  margin-top: 0.85rem;
}

/* Compact left-aligned statements (replace centered callouts and full-width bands on this case) */
.cx-line {
  margin: 0;
  max-width: 46rem;
  padding: 0.1rem 0 0.15rem 1.1rem;
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.cx-line__label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.cx-reframe {
  display: grid;
  gap: 0.9rem;
}
.cx-reframe .cx-not {
  margin: 0;
}
.cx-question .cx-question__thesis {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}
.cx-question__thesis b {
  margin-right: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Case comparison: two equal cards, label → principle → two aligned rows (rows share one grid) */
.cx-compare {
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-compare__card {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 1.3rem 1.5rem 1.35rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-compare__card.is-this {
  border-color: var(--color-accent);
  box-shadow: inset 0 3px 0 var(--color-accent);
}
.cx-compare__case {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cx-compare h3 {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.25;
}
.cx-compare__rows {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
}
.cx-compare__rows li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.7rem 0;
  border-top: 1px solid var(--color-border);
  line-height: 1.4;
}
.cx-compare__rows li:last-child {
  padding-bottom: 0;
}
.cx-compare__rows svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.05rem;
  color: var(--color-accent);
}
@media (min-width: 700px) {
  .cx-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }
  .cx-compare__card {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0.55rem;
  }
}

/* The interaction model as a designed process: AI prepares → Human decides → System executes → Audit
   records. Four equal steps with arrows; one line when there is room, a fixed two-line label (actor
   over verb) when narrow, 2×2 only when very narrow. The step a screen serves is filled. */
.cx-flow-wrap {
  container-type: inline-size;
}
.cx-flow {
  --g: 1.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--g);
}
.cx-flow li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 3.2rem;
  padding: 0.45rem 0.3rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  text-align: center;
  line-height: 1.15;
}
.cx-flow b {
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}
.cx-flow span:not(.visually-hidden) {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.cx-flow li:not(:last-child)::after {
  content: "→";
  content: "→" / "";
  position: absolute;
  top: 50%;
  right: calc(var(--g) / -2);
  transform: translate(50%, -50%);
  color: var(--color-accent);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}
.cx-flow li.is-on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
}
.cx-flow li.is-on span:not(.visually-hidden) {
  color: inherit;
}
@container (min-width: 560px) {
  .cx-flow {
    --g: 2.1rem;
  }
  .cx-flow li {
    flex-direction: row;
    gap: 0.35rem;
    min-height: 2.8rem;
  }
  .cx-flow b,
  .cx-flow span:not(.visually-hidden) {
    font-size: 0.95rem;
  }
  .cx-flow li:not(:last-child)::after {
    font-size: 1.15rem;
  }
}
.cx-shot__text .cx-flow-wrap {
  margin-top: 1.25rem;
}
.cx--claims .section-head .cx-flow-wrap {
  margin-top: 0.5rem;
}

/* A product rule that belongs to a screen: full content width under it, two lines on desktop */
.cx-rule {
  order: 3;
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(1.05rem, 0.9rem + 0.8vw, 1.4rem) clamp(1.2rem, 1rem + 1.4vw, 1.9rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
}
.cx-rule__label {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.cx-rule__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (max-width: 599px) {
  .cx-rule__text br {
    display: none;
  }
}

/* Outcome lists: a check for what the concept showed, an open circle for what stays unvalidated */
.cx--claims .cx-split .cx-status {
  margin-bottom: 0.6rem;
}
.cx--claims .cx-split h3 {
  font-size: 1.15rem;
}
.cx--claims .cx-split ul.cx-marks {
  list-style: none;
  padding-left: 0;
  gap: 0.5rem;
}
.cx-marks li {
  position: relative;
  padding-left: 1.7rem;
  line-height: 1.45;
}
.cx-marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
}
.cx-marks--done li::before {
  background: var(--color-accent-soft);
}
.cx-marks--done li::after {
  content: "";
  position: absolute;
  left: 0.31rem;
  top: 0.45em;
  width: 0.48rem;
  height: 0.26rem;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}
.cx-marks--open li::before {
  border: 2px dashed var(--color-border-strong);
}

/* Lifecycle lanes: stage pills share a bottom line, so short lanes don't read as empty cards */
@media (min-width: 1000px) {
  .cx--claims .cx-hitl__lane {
    display: flex;
    flex-direction: column;
  }
  .cx--claims .cx-hitl__steps {
    margin-top: auto;
  }
}

@media (min-width: 1000px) {
  .cx--claims .cx-hitl__gate {
    align-self: flex-start;
  }
}
/* Propose → Review → Commit: cards keep their own height; Commit carries the approval gate */
.cx--claims .cx-decisions {
  align-items: start;
}
.cx--claims .cx-decisions > li.is-gate {
  border: 2px solid var(--color-accent);
}
.cx--claims .cx-decisions .cx-hitl__gate {
  color: var(--color-bg, #fff);
}
/* Trust model on phones: icon beside the text, so four short ideas don't become four tall cards */
@media (max-width: 639px) {
  .cx--claims .cx-trust li {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 0.85rem;
    row-gap: 0.25rem;
    padding: 1rem 1.1rem;
  }
  .cx--claims .cx-trust svg {
    grid-row: span 2;
  }
}

/* ==========================================================================
   Added for Case Study 04 (AI Insurance Quote). Additive only; overrides are scoped to .cx--quote.
   ========================================================================== */
.cx--quote h1,
.cx--quote h2,
.cx--quote h3 {
  text-wrap: balance;
}
.cx--quote p,
.cx--quote li,
.cx--quote dd {
  text-wrap: pretty;
}
.cx--quote .section-head p.cx-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-accent);
}
.cx--quote .section-head .cx-kicker + h2 {
  margin-top: -0.35rem;
}
.cx--quote .cx-split .cx-status {
  margin-bottom: 0.6rem;
}
.cx--quote .cx-split h3 {
  font-size: 1.15rem;
}
.cx--quote .cx-split ul.cx-marks {
  list-style: none;
  padding-left: 0;
  gap: 0.5rem;
}

/* The AI-native quote journey: nine stages on one track. One row on wide screens, a vertical
   timeline below. Verification, the human fallback and binding are marked in words and by shape. */
.cx-track {
  --node: 2.1rem;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  counter-reset: cx-track;
}
.cx-track::before { /* the line through the nodes */
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 1px);
  top: calc(var(--node) / 2);
  bottom: calc(var(--node) / 2);
  width: 2px;
  background: var(--color-border-strong);
}
.cx-track li {
  counter-increment: cx-track;
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  align-items: center;
  column-gap: 0.85rem;
}
.cx-track li::before {
  content: counter(cx-track, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: var(--color-bg, #fff);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}
.cx-track b {
  font-weight: 700;
  line-height: 1.25;
}
.cx-track small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cx-track li.is-secure::before {
  background: var(--color-accent);
  color: var(--color-bg, #fff);
}
.cx-track li.is-human::before {
  border-style: dashed;
}
.cx-track li.is-bind::before {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg, #fff);
}
.cx-track__note {
  margin: 1rem 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
@media (min-width: 1000px) {
  .cx-track {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0 0.4rem;
  }
  .cx-track::before {
    left: calc(100% / 18);
    right: calc(100% / 18);
    top: calc(var(--node) / 2 - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .cx-track li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    row-gap: 0.6rem;
    text-align: center;
  }
  .cx-track b {
    font-size: 0.88rem;
  }
}

/* Homepage "more work" strip: when one item is taller, the other's content stays centred as a group */
.cs-more > li {
  align-content: center;
}

/* Homepage "More case studies": secondary cards in the featured cards' visual system, slightly more compact,
   three to a row on wide screens (aligned under the featured three), two on tablets, one on phones */
.cs-subhead {
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 1.1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cs-card--compact .cs-card__main {
  gap: 0.5rem;
  padding: clamp(1.1rem, 0.95rem + 1vw, 1.4rem);
}
.cs-card--compact h4 {
  margin: 0;
  font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.25rem);
  line-height: 1.25;
}
.cs-card--compact .cs-card__main > p {
  font-size: var(--fs-small);
}
@media (min-width: 1080px) {
  .cs-grid--more {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .cs-grid--more .cs-card {
    grid-column: span 4;
  }
}
/* A single "more work" note spans the row */
.cs-more > li:only-child {
  grid-column: 1 / -1;
}

/* ==========================================================================
   Added for Case Study 05 (Design Operations Hub). Additive only; overrides are scoped to .cx--ops.
   ========================================================================== */
.cx--ops h1,
.cx--ops h2,
.cx--ops h3 {
  text-wrap: balance;
}
.cx--ops p,
.cx--ops li,
.cx--ops dd {
  text-wrap: pretty;
}
.cx--ops .section-head p.cx-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-accent);
}
.cx--ops .section-head .cx-kicker + h2 {
  margin-top: -0.35rem;
}
.cx--ops .cx-split .cx-status {
  margin-bottom: 0.6rem;
}
.cx--ops .cx-split h3 {
  font-size: 1.15rem;
}
.cx--ops .cx-split ul.cx-marks {
  list-style: none;
  padding-left: 0;
  gap: 0.5rem;
}

/* System map: seven connected parts of the organization, all feeding one operating view.
   Each entity carries the question it answers; the hub below names what connects them. */
.cx-system {
  display: grid;
  gap: 0.9rem;
}
.cx-system ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.cx-system li {
  position: relative;
  display: grid;
  gap: 0.2rem;
  align-content: start;
  padding: 0.85rem 0.9rem 0.95rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-system li b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
}
.cx-system li span {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: 1.35;
}
.cx-system__hub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-accent);
  background: var(--color-accent-soft);
}
.cx-system__hub b {
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.cx-system__hub span {
  color: var(--color-text-muted);
}
@media (min-width: 640px) {
  .cx-system ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .cx-system ol {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .cx-system li::after { /* a connector from every entity down to the one operating view */
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-0.9rem - 2px);
    width: 2px;
    height: 0.9rem;
    background: var(--color-accent);
  }
  .cx-system__hub {
    justify-content: center;
    text-align: center;
  }
}

/* Workflow cadence: Plan → Staff → Assign → Monitor → Review → Renew, with Renew feeding the next Plan */
.cx-cadence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  counter-reset: cx-cadence;
}
.cx-cadence li {
  counter-increment: cx-cadence;
  position: relative;
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding: 0.9rem 1rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-cadence li::before {
  content: counter(cx-cadence, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent);
}
.cx-cadence b {
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.cx-cadence span {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: 1.35;
}
.cx-cadence li.is-loop {
  border-style: dashed;
  border-color: var(--color-accent);
}
.cx-cadence__back {
  margin: 0.7rem 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
@media (min-width: 640px) {
  .cx-cadence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .cx-cadence {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
  }
}

/* Information architecture: six product areas, each with what it holds */
.cx-modules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter, 1.5rem);
}
.cx-modules > li {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.2rem 1.3rem 1.3rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cx-modules h3 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.1rem;
}
.cx-modules h3 span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent);
}
.cx-modules ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.25rem;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
@media (min-width: 640px) {
  .cx-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .cx-modules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Homepage secondary cards: the case number as a small circular badge on the thumbnail */
.cs-card--compact .cs-card__link {
  position: relative;
}
.cs-card__badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(10, 15, 26, 0.18);
}

/* Homepage layout placeholder (Case Study 06): not a link and no page, so no hover response; a neutral thumbnail
   in the site's own system (dot grid, an empty frame, the orange brand dot) carries the 06 badge */
.cs-card--placeholder:hover {
  border-color: var(--color-border);
}
.cs-card__ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(circle, var(--color-border-strong) 1px, transparent 1.4px) 0 0 / 18px 18px,
    var(--color-surface-2);
}
.cs-card__ph-frame {
  display: grid;
  gap: 0.55rem;
  width: 52%;
  padding: 1rem 1.1rem 1.25rem;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.cs-card__ph-frame::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  margin-bottom: 0.15rem;
  border-radius: 50%;
  background: var(--brand-orange);
}
.cs-card__ph-frame i {
  display: block;
  width: 70%;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-border);
}
.cs-card__ph-frame i:nth-child(2) {
  width: 100%;
}
.cs-card__ph-frame i:nth-child(3) {
  width: 45%;
}
/* A homepage card marked hidden stays hidden (.cs-card's display: flex would otherwise win over the attribute).
   Case Study 06 is hidden this way since 2026-10-12; remove `hidden` from its <li> in index.html to show it again */
.cs-grid > .cs-card[hidden] {
  display: none;
}

/* Visual QA fixes (Nova, 2026-10-07) */
/* Autonomy meter: aligned with the first line of a level label that wraps, like its sibling cards */
.cx-modes__level {
  align-items: flex-start;
}
.cx-modes__level i {
  margin-top: 0.45em;
}
/* Stage chips on Enterprise Tool Governance: the 0.6rem chip → heading rhythm the other cases use */
.cx:not(.cx--claims):not(.cx--quote):not(.cx--ops) .cx-split .cx-status {
  margin-bottom: 0.6rem;
}
/* Claims quick peek: the mockup → prototype junction gets the tight top padding, like the other short joins */
body[data-page="quick-peek"] .cx--claims > section[aria-labelledby="proto-title"] {
  padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
/* Human-in-the-loop flow: 2×2 on the narrowest phones (320px), where four columns leave no room to spare */
@container (max-width: 300px) {
  .cx-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.6rem;
  }
  .cx-flow li:nth-child(2)::after {
    display: none;
  }
}

/* Homepage cards (Option 1): title → status → summary → one plain metadata line → one Quick peek action. The card
   body is a column so the action sits on the card's bottom edge and cards in a row line up whatever the text length */
.cs-grid .cs-card__main {
  display: flex;
  flex-direction: column;
}
.cs-grid .cs-card__links {
  margin-top: auto;
  padding-top: 0.5rem;
}
.cs-meta {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.cs-card__main .cs-meta {
  margin-top: 0.1rem;
}
.cs-card--compact .cs-type {
  font-size: var(--fs-small);
}
.cs-card--placeholder .cs-type strong {
  color: var(--color-text-muted);
}

/* Confidential-work disclosure, homepage "More client work" (2026-10-15): the same pattern as the lock note
   (.on-request in style.css). A 20px muted lock aligned with the first line and 12px from the text, a semibold label,
   then a regular muted sentence below it. No border, background or padding, so the text lines up with the cards */
.cs-more > li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0;
  align-items: start;
  align-content: start;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.cs-more > li > svg {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  margin-top: 0.25rem;
}
.cs-more > li > b {
  grid-column: 2;
  font-weight: 600;
  color: var(--color-text);
}
.cs-more > li > p {
  grid-column: 2;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Added for Case Study 02's future-state architecture (2026-10-16). Additive only; scoped to #future-integration,
   whose figure has no class. The diagram uses the full text column: the browser's default figure margins (40px a
   side) would shrink it to 270px on a 390px phone, and its labels to about 7px. The caption matches the deep dive's
   other captions (.cx-frame figcaption) instead of rendering as body text.
   ========================================================================== */
#future-integration figure {
  margin-inline: 0;
}
#future-integration figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   P0 visual QA (2026-10-19, from Venu's screenshot evidence). Presentation fixes for shared case-study components,
   additive only: every rule above stays byte-identical, and no HTML, copy, asset, metric or prototype changes.
   ========================================================================== */

/* VQ1. Principle callouts ("So", "Autonomy principle", "Product principle"). The small label shared a baseline with a
   statement three times its size, so it read as dropped below the line. It now sits above the statement, the eyebrow
   pattern every other case-study label uses. */
.cx-principle {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

/* VQ2. Pull-quote callouts. The orange dot is centred, but the sentence ran across the full measure, so the dot looked
   detached from it. The sentence keeps a pull-quote measure and balances its lines under the dot. */
.cx-callout {
  max-width: 20em;
  margin-inline: auto;
  text-wrap: balance;
}

/* VQ3. Pill links (scenario and source chips). The site's text-link underline was drawn inside the pill. The pill
   shape already marks the link, so the underline goes; the whole pill becomes the target, with a tinted hover and the
   site's focus ring. Plain-text pills are unchanged. */
.cx-sources a {
  display: block;
  margin: -0.3rem -0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
}
.cx-sources a:hover {
  background: var(--color-accent-soft);
}

/* VQ4. Status pills. The "future" marker was an 8px circle with a dotted border, which renders as a few loose dots;
   it is now a light solid ring (the dotted pill border still marks the state). The pill was inline-flex, so every
   inline span of a label became its own flex item with a gap ("Designed · in development" spaced unevenly) and a
   wrapped label became a stretched capsule. It now flows as text: the marker sits inline before the first word, and a
   wrapped label is a rounded rectangle. */
.cx-status {
  display: inline-block;
  line-height: 1.4;
  border-radius: 0.8rem;
}
.cx-status::before {
  display: inline-block;
  vertical-align: 0.05em;
  margin-right: 0.45rem;
}
.cx-status--future::before {
  border-style: solid;
  opacity: 0.7;
}

/* VQ5. "Across" rows (a label followed by chips). The label shared the wrapping row with the chips, so rows broke
   unevenly and left single chips stranded. The label now heads the box; the chips wrap beneath it. */
.cx-across dt {
  flex-basis: 100%;
  margin: 0 0 0.1rem;
}

/* VQ6. Human-in-the-loop lanes. Each lane's arrow was positioned from its own edge into a 12px gap with a ~16px glyph,
   so it overlapped the card borders; the lanes' different border widths (1, 2 and 3px) also shifted their content and
   stage pills. Padding now absorbs each border, and the arrow is centred in a wider gap. */
.cx-hitl__lane {
  --bw: 1px;
  padding: calc(1rem + 1px - var(--bw)) calc(1.1rem + 1px - var(--bw)) calc(1.15rem + 1px - var(--bw));
}
.cx-hitl__lane.is-human {
  --bw: 2px;
}
.cx-hitl__lane.is-audit {
  --bw: 3px;
}
.cx-hitl__lane.is-system {
  padding-top: calc(1rem - 3px); /* its 4px top rule */
}
@media (min-width: 1000px) {
  .cx-hitl {
    column-gap: 1.75rem;
  }
  .cx-hitl__lane.is-system {
    padding-top: 1rem;
    padding-left: calc(1.1rem - 3px); /* its 4px left rule */
  }
  .cx-hitl__lane:not(:last-child)::after {
    right: calc(-1.75rem - var(--bw));
    width: 1.75rem;
    text-align: center;
    line-height: 1;
    top: calc(1rem + 3px);
  }
}

/* VQ7. Narrow phones (320px): every case-study hero scrolled sideways. The hero's ghost button ("Short on time? The
   2-minute quick peek →" and the prototype links) never wraps (.btn is nowrap), and grid items default to their
   min-content width, so that one label widened the hero's single column past the screen. Research Coverage's product
   model did the same to its section. Hero and section items may now shrink, hero buttons wrap their label onto a
   second centred line, and the product model's tag moves under its label. */
@media (max-width: 479px) {
  .cx-hero__grid > *,
  .cx-stack > * {
    min-width: 0;
  }
  .cx-model li { /* Research Coverage's product model: the label and its unbreakable "Many users" tag no longer share a row */
    grid-template-columns: minmax(0, 1fr);
  }
  .cs-hero__cta .btn {
    white-space: normal;
    text-align: center;
    text-wrap: pretty; /* "Short on time? The 2-minute / quick peek →": balance split "2-minute" at its hyphen */
  }
}

/* VQ8. Hero classification pills ("Real operational problem · Agentic AI concept"). The pill was an inline-flex box, so
   each inline span of its label became a separate flex item: the label could not wrap as text, and on phones (and for
   the longer labels at 1024px) its pieces wrapped inside themselves, stretched the 999px capsule and, at 320px, pushed
   "Human-in-the-loop" past the screen. The pill now flows as text with its icon inline, stays a pill on one line and
   becomes a rounded rectangle on two. */
.cx-class {
  display: inline-block;
  max-width: 100%;
  border-radius: 1rem;
  line-height: 1.5;
}
/* p.cx-class: the case-scoped ".cx--ops p { text-wrap: pretty }" (and its Claims and Quote twins) outrank a bare class. */
@media (max-width: 599px) {
  p.cx-class {
    text-wrap: pretty; /* phones: the first line fills the pill */
  }
}
@media (min-width: 600px) {
  p.cx-class {
    text-wrap: balance; /* wider columns: no lone "/ POC" on a second line */
  }
}
.cx-class svg {
  display: inline-block;
  vertical-align: -0.2em;
  margin-right: 0.5rem;
}

/* VQ9. Module headings (Design Operations Hub): a two-line heading left a single word on its last line. */
.cx-modules h3 {
  text-wrap: balance;
}

/* VQ10. Evidence cards (.cx-evidence) sit two to a row; each card is a grid whose rows stretched to the row height, so
   the shorter card's title drifted away from its text. Rows now pack to the top. */
.cx-evidence li {
  align-content: start;
}

/* VQ11. Chips that can wrap on narrow phones (moment-card chips, "across" chips, source and scenario chips) used a
   999px radius, so a two-line chip became a stretched capsule. A 1rem radius is still a full pill on one line and a
   rounded rectangle on two. */
.cx-moments2 li,
.cx-across dd,
.cx-sources li,
.cx-sources a {
  border-radius: 1rem;
}

/* VQ12. Small alignment fixes from the full review:
   - Research Coverage loop note: the ↻ icon was centred on a three-line note on phones; it now sits on the first line.
   - Claims "Reasoning transparency": the honesty caption sat flush against the flow strip above it.
   - Claims lanes at tablet widths (two per row): the stage pills now share a bottom line, as they do on desktop. */
.cx-loop__back {
  align-items: flex-start;
}
.cx-loop__back svg {
  margin-top: 0.12em;
}
.cx-flow-wrap + .cx-honest {
  margin-top: 0.75rem;
}
@media (min-width: 640px) {
  .cx--claims .cx-hitl__lane {
    display: flex;
    flex-direction: column;
  }
  .cx--claims .cx-hitl__steps {
    margin-top: auto;
  }
  .cx--claims .cx-hitl__gate {
    align-self: flex-start; /* keeps the approval-gate badge compact in the flex lane */
  }
}