/* ---------- Case study page ---------- */

/* the type system (Geist + Inter) is defined in styles.css so every page
   shares it; these are the case-study elements that take the display face */
.case-hero__title,
.case-section__label,
.carousel__title,
.solution-block__text h3,
.principle h3,
.stat strong,
.mini-card strong,
.next-project strong {
  font-family: var(--font-display);
}

/* reading progress bar */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
}

/* scroll reveals */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- hero ---------- */
/* the hero spans the full content column so its rule lines up with the
   visuals and stat band below; the text inside keeps its own measure */
.case-hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(24px, 3vw, 40px);
}

.case-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
}

.case-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1c3d6e;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #e0ded9;
  padding: 7px 14px;
  border-radius: 999px;
  margin: 0;
}

/* patent links under the hero subtitle */
.patents {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 48px;
}

/* the subtitle owns the gap down to the meta row; when patents follow it,
   they take over that job and the subtitle tightens up */
.case-hero__sub:has(+ .patents) { margin-bottom: 22px; }

.patent-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #f4f3f0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.patent-pill svg { color: var(--text-muted); transition: color 0.2s ease; }
.patent-pill__num { color: var(--text-muted); font-size: 0.85rem; }
/* hover lightens the pill; the icon stays grey */
.patent-pill:hover,
.patent-pill:focus-visible { background: #faf9f7; }

.case-hero__title {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  max-width: 900px;
  margin: 0 0 20px;
}

.case-hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.4;
  color: var(--text-muted);
  margin: 0 0 48px;
  max-width: 600px;
}

/* metadata row */
/* the rule spans the full content width, but the fields themselves sit packed
   to the left on evenly spaced columns rather than stretching to fill it */
.case-meta {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: start;
  gap: clamp(36px, 5vw, 64px);
  margin: 0;
  border-top: 1px solid #e2e0db;
  padding-top: 28px;
}
.case-meta dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.case-meta dd { margin: 0; font-weight: 600; font-size: 1rem; }

/* ---------- about page ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(24px, 4vw, 44px);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}
.back-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #f4f3f0;
  transition: background 0.2s ease;
}
.back-link:hover .back-link__icon { background: #ebe9e4; }

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 96px);
}

.about__greeting {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 28px;
}

.about__text p {
  max-width: 46ch;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 22px;
}

.about__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #f4f3f0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease;
}
.about__cta:hover,
.about__cta:focus-visible { background: #faf9f7; }

.about__media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #f2f0ec;
}
.about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 820px) {
  .about { grid-template-columns: 1fr; gap: 32px; }
  .about__media { aspect-ratio: 4 / 3; order: -1; }
}

/* ---------- visuals ---------- */
.case-visual {
  margin: clamp(32px, 5vw, 64px) 0;
  display: flex;
  flex-direction: column;   /* so a figcaption sits below, not beside, the image */
  align-items: center;
  justify-content: center;
}

/* round the image itself — a caption below then sits outside the rounded area,
   instead of the container's bottom corners landing under the caption */
.case-visual > img { border-radius: var(--radius); }

/* tinted variants are a padded panel, so the panel gets the rounding */
.case-visual--teal,
.case-visual--purple,
.case-visual--light,
.case-visual--journey {
  border-radius: var(--radius);
  overflow: hidden;
}
.case-visual--teal > img,
.case-visual--light > img,
.case-visual--journey > img { border-radius: 0; }

.case-visual figcaption {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 14px 4px 0;
  align-self: stretch;
}

/* default: fit the container so the rounded corners actually clip the image
   (variants below cap this further with max-width) */
.case-visual img { width: 100%; height: auto; display: block; }

.case-visual--teal {
  background: linear-gradient(150deg, #e3f4f2 0%, #f2faf9 45%, #cde9e6 100%);
  padding: clamp(28px, 5vw, 72px);
}
.case-visual--teal img { max-width: min(520px, 70%); height: auto; }

/* same gradient the Dollars to Impact tile uses on the home page */
.case-visual--purple {
  background: linear-gradient(150deg, #efeafd 0%, #f8f5ff 45%, #ded2f9 100%);
  padding: clamp(20px, 4vw, 56px);
}
.case-visual--purple img {
  max-width: min(1040px, 100%);
  height: auto;
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(46, 28, 92, 0.16);
}

.case-visual--light {
  background: linear-gradient(150deg, #eef3f9 0%, #f7fafd 50%, #dfe9f4 100%);
  padding: clamp(20px, 3vw, 40px);
}
.case-visual--light img { max-width: 88%; height: auto; }

.case-visual--journey {
  background: #eef2fb;
  padding: clamp(18px, 3vw, 44px);
}
.case-visual--journey img { width: 100%; height: auto; display: block; }

/* sit at natural size, centred, rather than stretching to fill the column
   (declared after the variants above so it wins at equal specificity) */
.case-visual--contain img { width: auto; max-width: 100%; height: auto; }

.case-visual--photo { display: block; padding: 0; }
.case-visual--photo img { width: 100%; height: auto; display: block; }
.case-visual--photo figcaption {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 14px 4px 0;
}

/* ---------- sections ---------- */
.case-section { padding: clamp(40px, 6vw, 88px) 0 0; }

.case-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  max-width: 1020px;
}

/* overview variant: body copy with a supporting image alongside */
.case-grid--aside {
  grid-template-columns: 280px minmax(0, 1fr) minmax(260px, 0.85fr);
  max-width: 1180px;
  align-items: start;
}

.case-aside {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.case-aside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-section__label {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--orange);
  margin: 0;
}

/* a label can carry a short subtitle. The pair spans the grid so the
   subtitle isn't squeezed into the 280px label column */
.case-section__heading { grid-column: 1 / -1; }
.case-section__sublabel {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.case-section__body { max-width: 640px; }
.case-section__body p { font-size: 1.125rem; line-height: 1.5; margin: 0 0 20px; }
.case-section__body .lede { font-size: 1.375rem; line-height: 1.35; }
/* with body copy beside it, the label and subtitle keep to the left column
   and the body sits on the right, top-aligned, like every other section */
.case-section__heading:has(+ .case-section__body) { grid-column: 1; }
.case-section__heading + .case-section__body { grid-column: 2; }

/* pull quote — a research or persona voice set off from the body copy */
.case-quote {
  margin: 28px 0 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid #ddd9d2;
}
.case-quote p {
  margin: 0 0 8px;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--text);
}
.case-quote p::before { content: "\201C"; }
.case-quote p::after { content: "\201D"; }
.case-quote cite {
  font-size: 1rem;
  font-style: normal;
  color: var(--text-muted);
}
.case-quote cite::before { content: "\2014\00a0"; }

/* "what I owned" list */
.owned__label {
  margin: 26px 0 12px !important;
  font-weight: 700;
  color: var(--text);
}

.owned {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.owned li {
  position: relative;
  padding-left: 20px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.owned li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

.owned li strong { color: var(--text); font-weight: 600; }

/* stat band */
.stat-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(24px, 3vw, 40px);
}

/* each stat is a cell divided from the next by a hairline, so the numbers and
   their labels align to a common left edge rather than floating centred */
.stat {
  text-align: left;
  padding: 4px clamp(20px, 2.5vw, 36px);
  border-left: 1px solid #e2e0db;
}
.stat:first-child { padding-left: 0; border-left: 0; }
.stat-band[hidden] { display: none; }

.stat strong {
  display: block;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.stat span {
  display: block;
  margin: 14px 0 0;
  max-width: 30ch;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.45;
}

/* HMW callout */
.hmw {
  margin: clamp(36px, 5vw, 60px) 0 0;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 860px;
  border-left: 4px solid var(--orange);
  padding-left: clamp(20px, 3vw, 36px);
}

/* looping horizontal marquee of exploration artifacts */
/* animatable edge-fade widths, so the fade eases out at either end */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }

.marquee {
  /* negative margin offsets the track's padding so the strip still lines up */
  margin: clamp(32px, 4.5vw, 56px) -24px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;

  /* edges fade into the page (after research.nvidia.com/labs/cosmos-lab/cosmos3).
     A mask on the scroll container stays put while the content scrolls under it;
     the fade on whichever side has nothing left to reveal is switched off. */
  --fade: clamp(20px, 3vw, 40px);
  --fade-l: var(--fade);
  --fade-r: var(--fade);
  /* eased ramp (same curve as Cosmos 3) rather than a straight line, which
     leaves a visible band where the gradient meets solid */
  --edge-mask: linear-gradient(90deg,
    transparent 0,
    rgba(0, 0, 0, 0.08) calc(var(--fade-l) * 0.10),
    rgba(0, 0, 0, 0.28) calc(var(--fade-l) * 0.28),
    rgba(0, 0, 0, 0.62) calc(var(--fade-l) * 0.58),
    rgba(0, 0, 0, 0.88) calc(var(--fade-l) * 0.82),
    #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),
    rgba(0, 0, 0, 0.88) calc(100% - var(--fade-r) * 0.82),
    rgba(0, 0, 0, 0.62) calc(100% - var(--fade-r) * 0.58),
    rgba(0, 0, 0, 0.28) calc(100% - var(--fade-r) * 0.28),
    rgba(0, 0, 0, 0.08) calc(100% - var(--fade-r) * 0.10),
    transparent 100%);
  -webkit-mask-image: var(--edge-mask);
          mask-image: var(--edge-mask);
  transition: --fade-l 0.2s ease, --fade-r 0.2s ease;
}
.marquee.is-at-start { --fade-l: 0px; }
.marquee.is-at-end { --fade-r: 0px; }
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-dragging { cursor: grabbing; }

/* generous padding so item shadows aren't clipped by the scroll container */
.marquee__track {
  display: flex;
  gap: clamp(14px, 1.8vw, 24px);
  width: max-content;
  padding: 22px 24px 34px;
}

.marquee__item {
  margin: 0;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #f2f4f8;
  box-shadow: 0 4px 18px rgba(24, 28, 34, 0.07);
  cursor: zoom-in;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .marquee { transition: none; }
}
.marquee__item:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(24, 28, 34, 0.13); }

.marquee__item img {
  display: block;
  height: clamp(200px, 26vw, 320px);
  width: auto;
  object-fit: cover;
}

/* research insights: centred image, cards below in a 3 + 2 grid */
/* photo on the left, the insight accordion alongside it on the right */
.insight-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin: clamp(32px, 5vw, 56px) 0 0;
}

.insight-split__media {
  margin: 0;
  position: sticky;
  top: 32px;
}
.insight-split__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* accordion — one row per insight, opened with a plus/minus toggle */
.accordion {
  border-top: 1px solid #e2e0db;
}

.accordion__item { border-bottom: 1px solid #e2e0db; }

.accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q:hover { color: var(--orange); }
.accordion__q:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* plus that loses its vertical stroke when the row is open */
.accordion__icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f4f3f0;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  background: var(--text);
  transform: translate(-50%, -50%);
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
[open] .accordion__icon::after { opacity: 0; }

.accordion__a {
  padding: 0 56px 24px 0;
  color: var(--text-muted);
}
.accordion__a p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .accordion__q { font-size: 1.0625rem; gap: 16px; }
  .accordion__a { padding-right: 36px; }
}

@media (max-width: 860px) {
  .insight { flex: 0 0 calc((100% - clamp(10px, 1.2vw, 14px)) / 2); }
}
@media (max-width: 560px) {
  .insight { flex: 0 0 100%; }
}

/* cursor hint over carousel images */
.cursor-hint {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(18, 20, 24, 0.92);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
}
.cursor-hint.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* the label replaces the pointer, so hide the native cursor over the images —
   only once JS has confirmed the hint is running, so zoom-in stays as fallback */
.has-cursor-hint .marquee__item,
.has-cursor-hint .marquee__item img { cursor: none; }

/* pointer-driven, so hide it on touch devices */
@media (hover: none), (pointer: coarse) {
  .cursor-hint { display: none; }
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 56px);
  background: rgba(12, 14, 18, 0.9);
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }

.lightbox__figure { margin: 0; min-width: 0; max-height: 100%; text-align: center; }
.lightbox__figure img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}
.lightbox__figure figcaption {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  padding-top: 14px;
  max-width: 720px;
  margin: 0 auto;
}

/* prev / next, flanking the image */
.lightbox__nav {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.06); }
.lightbox__nav--prev { margin-right: clamp(10px, 2vw, 28px); }
.lightbox__nav--next { margin-left: clamp(10px, 2vw, 28px); }

.lightbox__close {
  position: absolute;
  top: clamp(14px, 2.5vw, 28px);
  right: clamp(14px, 2.5vw, 28px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }

/* challenge carousel */
.carousel {
  margin: clamp(36px, 5vw, 60px) auto 0;
  max-width: 900px;
}

/* the card surface lives here, so its shadow isn't clipped by overflow */
.carousel__viewport {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(24, 28, 34, 0.055);
}

.carousel__track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* vertical padding is its own step so top and bottom read evenly on the
     shorter slides, which stretch to the tallest slide's height */
  padding: clamp(32px, 3.6vw, 44px) clamp(28px, 4vw, 52px);
}

.carousel__num {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}

.carousel__title {
  margin: 0 0 14px;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.carousel__body {
  margin: 0 0 28px;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.55;
}

/* the question is the payoff — anchored to the bottom of the card so the
   divider lands in the same place on every slide */
.carousel__hmw {
  margin: auto 0 0;
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--text);
  padding-top: 22px;
  border-top: 1px solid #ece9e4;
}

.carousel__hmw::before {
  content: "The opportunity";
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* controls */
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}

.carousel__btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9d6d0;
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.carousel__btn:hover { background: var(--text); border-color: var(--text); color: #fff; }
.carousel__btn:disabled { opacity: 0.35; cursor: default; }
.carousel__btn:disabled:hover { background: #fff; border-color: #d9d6d0; color: var(--text); }

.carousel__dots { display: flex; gap: 8px; }

.carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d3d0ca;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel__dot[aria-current="true"] { background: var(--text); transform: scale(1.25); }

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

/* research / principles cards */
.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
}

.mini-card {
  background: var(--surface, #fff);
  border: 1px solid #e2e0db;
  border-radius: var(--radius-sm, 12px);
  padding: 22px;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.mini-card strong {
  display: block;
  font-size: 2rem;
  color: var(--text);
  letter-spacing: -0.02em;
}

.card-row--2 { grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3.5vw, 48px); }

.principle { padding-top: 4px; }

.principle__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #fdece8;
  color: var(--orange);
  margin-bottom: 14px;
}
.principle__icon svg { width: 21px; height: 21px; }
.principle h3 { margin: 0 0 10px; font-size: 1.15rem; letter-spacing: -0.01em; }
.principle p { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.5; }

/* solution blocks: alternating text/media */
.solution-block {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(72px, 10vw, 148px);
}
/* mirror the columns too, so the media always gets the wide one */
.solution-block--flip { grid-template-columns: 1fr minmax(260px, 420px); }
.solution-block--flip .solution-block__text { order: 2; }
.solution-block--flip .solution-block__media { order: 1; }

.solution-block__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}

.solution-block__text h3 {
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.solution-block__text p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

/* screens sit on the page itself — no tinted frame, uniform width, rounded */
.solution-block__media {
  margin: 0;
  display: block;
  padding: 0;
}

.solution-block__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(24, 28, 34, 0.07);
}
/* embedded product demo */
.case-video { margin: clamp(44px, 6vw, 80px) 0 0; }

.case-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0d0f12;
  box-shadow: 0 4px 18px rgba(24, 28, 34, 0.07);
}

.case-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.case-video figcaption {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding-top: 14px;
}

/* testimonial */
.testimonial {
  margin: clamp(36px, 5vw, 60px) 0 0;
  background: var(--surface, #fff);
  border: 1px solid #e2e0db;
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 52px);
  max-width: 860px;
}
.testimonial p {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}
.testimonial cite { color: var(--text-muted); font-style: normal; font-size: 0.95rem; }

/* takeaways */
.takeaways {
  margin: 0;
  padding-left: 22px;
  font-size: 1.125rem;
  line-height: 1.5;
}
.takeaways li { margin-bottom: 18px; color: var(--text-muted); }
.takeaways strong { color: var(--text); font-weight: 600; }

/* horizontally scrollable research findings (uses the .marquee scroller) */
.findings { cursor: grab; }

/* the panel belongs with the cards above it, so it sits close underneath
   (the track already pads 26px below the cards) */
.findings + .gap-panel { margin-top: clamp(8px, 1.5vw, 18px); }
/* with the cards parked, the panel gets its normal breathing room back */
.findings[hidden] + .gap-panel { margin-top: clamp(36px, 5vw, 56px); }
.findings .marquee__track { align-items: stretch; padding-bottom: 26px; }

.finding-card {
  flex: 0 0 clamp(250px, 26vw, 330px);
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--surface, #fff);
  border: 1px solid #e2e0db;
  border-radius: var(--radius-sm, 12px);
}

.finding-card__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 12px;
}

.finding-card__body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* the gaps that matter most for the primary persona, pulled out of the list */
.gap-panel {
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 3vw, 36px);
  background: #faf9f7;
  border: 1px solid #e2e0db;
  border-radius: var(--radius-sm, 12px);
}

.gap-panel__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}

.gap-panel__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin: 0;
  padding: 0;
}
.gap-panel__list h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.gap-panel__list p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.gap-panel + .reqs__title,
.flow + .reqs__title,
.vision + .reqs__title { margin-top: clamp(48px, 6vw, 72px); }

/* ---------- outcome flow (after the Cosmos 3 modality diagram) ----------
   sources on the left feed the impact framework, which feeds the consumers
   on the right. A scenario lights up its path; everything else recedes. */
.flow {
  --flow-accent: #6b3fb0;
  --flow-tint: #f3effc;
  --flow-line: #d8ccf5;
  margin: clamp(32px, 4vw, 48px) 0 0;   /* sits with the section copy above */
}
/* the diagram's name, captioned underneath it */
.flow__caption {
  margin-top: 20px;
  text-align: center;
  font-size: 0.875rem;
  color: #9a9893;
}

.flow__map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
}

.flow__col {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.flow__item { display: flex; align-items: center; }

.flow__pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #e2e0db;
  border-radius: 12px;
  background: #fff;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.45;
  transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.flow__pill svg { flex: none; }
.flow__item.is-active .flow__pill {
  opacity: 1;
  background: var(--flow-tint);
  border-color: var(--flow-line);
  color: var(--text);
}
.flow__item.is-active .flow__pill svg { color: var(--flow-accent); }

/* arrow: a line with a head, drawn between a pill and the core */
.flow__arrow {
  position: relative;
  flex: 0 0 clamp(28px, 4vw, 52px);
  height: 2px;
  margin: 0 8px;
  background: #d9d6d0;
  opacity: 0.6;
  transition: background 0.3s ease, opacity 0.3s ease;
}
.flow__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  border: 5px solid transparent;
  border-left: 7px solid #d9d6d0;
  border-right: 0;
  transform: translateY(-50%);
  transition: border-color 0.3s ease;
}
.flow__item.is-active .flow__arrow { background: var(--flow-accent); opacity: 1; }
.flow__item.is-active .flow__arrow::after { border-left-color: var(--flow-accent); }

/* the core: the framework that turns values into a result */
.flow__core {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--flow-line);
  border-radius: 18px;
  background: linear-gradient(160deg, #f8f5ff 0%, #efe9fc 100%);
  text-align: center;
}
.flow__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flow-accent);
}
.flow__outcome {
  margin: 8px 0 22px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  min-height: 2.5em;   /* holds two lines, so switching scenario doesn't jump */
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow__stages {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  align-items: stretch;   /* both cards match the taller one */
}
.flow__stage:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flow__stage {
  padding: 16px 12px 12px;
  border: 1px solid var(--flow-line);
  border-radius: 12px;
  background: #fff;
}
.flow__stage-label {
  margin: 12px 0 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-muted);
}

.flow__chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.flow__chips i {
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--flow-line);
  background: #faf8ff;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.flow__chips i.is-hot { background: var(--flow-accent); border-color: var(--flow-accent); }

.flow__link {
  position: relative;
  align-self: center;
  height: 2px;
  margin: 0 4px;
  background: var(--flow-accent);
}
.flow__link::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  border: 5px solid transparent;
  border-left: 7px solid var(--flow-accent);
  border-right: 0;
  transform: translateY(-50%);
}

.flow__result {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--flow-accent);
}
.flow__bar {
  position: relative;
  height: 6px;
  margin: 12px 0 6px;
  border-radius: 3px;
  background: #ece7f8;
}
.flow__bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--flow-accent);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.flow__bar i {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: var(--text);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.flow__target { margin: 0; font-size: 0.75rem; color: var(--text-muted); }

/* outcome health view (Track an outcome): five outcome slices round a ring,
   coloured by status, with the overall score in the middle */
.flow__health {
  position: relative;
  width: min(132px, 100%);
  margin: 0 auto;
  aspect-ratio: 1;
}
.flow__health svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* first slice starts at 12 o'clock */
}
.flow__ring,
.flow__slice {
  fill: none;
  stroke-width: 11;
}
.flow__ring { stroke: #f1edf9; }
.flow__slice--on   { stroke: var(--flow-accent); }
.flow__slice--near { stroke: #b39ae6; }
.flow__slice--risk { stroke: #e8a33d; }

.flow__score {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-display);
  line-height: 1;
}
.flow__score span {
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--flow-accent);
}
.flow__score small {
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.flow__health-note {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--text);
}

/* funder report view: a one-page summary, headline metrics drawn and the
   rest of the page sketched in as stencils */
.flow__report { text-align: left; }
.flow__report-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid #ece7f8;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--flow-accent);
}
.flow__report-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.flow__report-kpis div {
  padding: 6px 4px;
  border-radius: 6px;
  background: #faf8ff;
  text-align: center;
}
.flow__report-kpis b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.flow__report-kpis small { font-size: 0.5625rem; color: var(--text-muted); }

.flow__report-stencil {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
  align-items: end;
}
.flow__report-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}
.flow__report-bars i { flex: 1; border-radius: 2px; background: #e9e5f2; }
.flow__report-bars i:last-child { background: #c9b8ef; }   /* the current period */
.flow__report-lines { display: grid; gap: 5px; }
.flow__report-lines i { display: block; width: 100%; height: 6px; border-radius: 3px; background: #ece9f2; }

/* program comparison view: one bar per program, a dashed line at the target,
   and the programs falling short picked out in amber */
.flow__compare-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 96px;
  margin: 18px 4px 0;
  padding-bottom: 16px;            /* room for the labels under the bars */
  border-bottom: 1px solid #e6e1f2;
}
.flow__compare-col {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.flow__compare-col i {
  position: relative;
  display: block;
  flex: none;                      /* never squeezed: the height is the data */
  width: 100%;
  max-width: 26px;
  border-radius: 4px 4px 0 0;
  background: var(--flow-accent);
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.flow__compare-col.is-below i { background: #e8a33d; }
/* value sits just above its bar, out of the flow so it can't shrink the bar */
.flow__compare-col span {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  /* sits above the target line; the backing keeps a value legible where the
     line crosses it, while the line stays visible either side */
  z-index: 2;
  padding: 0 2px;
  border-radius: 3px;
  background: #fff;
}
/* a stencil stands in for each program name */
.flow__compare-col .flow__stencil {
  position: absolute;
  bottom: -11px;
  width: 70%;
  max-width: 22px;
  height: 5px;
  border-radius: 3px;
  background: #e4e0ec;
}
.flow__compare-target {
  position: absolute;
  left: -4px;
  right: -4px;
  /* --t is the target %; measured up from the bar baseline (above the 16px
     label strip) so it lines up with a bar of the same value */
  bottom: calc(16px + (100% - 16px) * var(--t) / 100);
  height: 0;
  border-top: 1.5px dashed #4f466a;
  z-index: 1;
  pointer-events: none;
}
/* key under the chart, so the target label never collides with a bar value */
.flow__compare-key {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 0.6875rem;
  color: var(--text);
}
.flow__compare-key i {
  width: 18px;
  height: 0;
  border-top: 1.5px dashed #4f466a;
}

/* trend view (Monitor over time): stock-style line with a shaded area,
   the latest point marked, and the target as a dashed line */
.flow__trend { text-align: left; }
.flow__trend-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.flow__trend-head b {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--flow-accent);
}
.flow__trend-head span { font-size: 0.6875rem; font-weight: 600; color: #2e844a; }
.flow__trend-chart { display: block; width: 100%; height: auto; overflow: visible; }
.flow__trend-line {
  fill: none;
  stroke: var(--flow-accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.flow__trend-target {
  stroke: #4f466a;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.flow__trend-dot { fill: var(--flow-accent); stroke: #fff; stroke-width: 2; }
.flow__trend-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.5625rem;
  color: var(--text-muted);
}

/* the scenario picks which result view shows. Every view sits in the same
   grid cell and the hidden ones keep their space, so the stage is always as
   tall as its tallest view and switching scenario never changes the height */
.flow__stage--result {
  display: grid;
  align-items: center;
}
.flow__stage--result > * {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
}
.flow:not([data-view]) .flow__metric,
.flow[data-view="metric"] .flow__metric,
.flow[data-view="health"] .flow__health-view,
.flow[data-view="report"] .flow__report,
.flow[data-view="compare"] .flow__compare,
.flow[data-view="trend"] .flow__trend { visibility: visible; }

.flow__scenarios {
  margin-top: clamp(28px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.flow__scenario {
  padding: 13px 16px;
  border: 1px solid #e2e0db;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.flow__scenario:hover { border-color: var(--flow-line); background: var(--flow-tint); }
.flow__scenario:focus-visible { outline: 2px solid var(--flow-accent); outline-offset: 2px; }
.flow__scenario.is-active {
  background: var(--flow-accent);
  border-color: var(--flow-accent);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .flow__pill, .flow__arrow, .flow__arrow::after,
  .flow__bar span, .flow__bar i, .flow__chips i { transition: none; }
}

/* narrow: stack sources, core, consumers; the side arrows no longer point
   anywhere, so they go and the inactive pills stay readable */
@media (max-width: 900px) {
  .flow__map { grid-template-columns: 1fr; gap: 20px; }
  .flow__col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .flow__arrow { display: none; }
  .flow__scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: the longer questions wrap to three lines, so hold three */
@media (max-width: 520px) {
  .flow__outcome { min-height: 3.75em; }
}

/* second half of a heading, set back in a lighter grey */
.reqs__title-sub { color: #9a9893; }

/* ---------- design principles: four cards, one per research theme ---------- */
.dp {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}
.dp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 20px;
  border: 1px solid #e2e0db;
  border-radius: var(--radius-sm, 12px);
  background: #fff;
}
/* same icon tile as the Case Management principles, in this page's purple */
.dp-card__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  border-radius: 11px;
  background: #f0e9fb;
  color: #6b3fb0;
}
.dp-card__icon svg { width: 21px; height: 21px; }
.dp-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.dp-card__line {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .dp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dp { grid-template-columns: 1fr; }
}

/* requirements — numbered, two up */
.reqs__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.reqs {
  list-style: none;
  counter-reset: req;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
  padding: 0;
}

.reqs li {
  counter-increment: req;
  padding-top: 18px;
  border-top: 1px solid #e2e0db;
}
/* rules separate rows only — none sits directly under the heading */
.reqs li:nth-child(-n + 2) {
  padding-top: 0;
  border-top: 0;
}

/* the number sits above the requirement rather than beside it, so the
   titles keep a common left edge */
/* number in its own column beside the requirement, sized and set on the
   same line-height as the title so the two share a baseline */
.reqs li {
  display: grid;
  grid-template-columns: 1.25em minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  align-content: start;   /* a taller row-partner stretches the item; keep title and text together */
}
.reqs li::before {
  content: counter(req);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--orange);
}

.reqs h4 {
  grid-column: 2;
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.reqs p {
  grid-column: 2;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.flow + .vision { margin-top: clamp(64px, 8vw, 104px); }

/* vision statement — the north star the four research themes pointed to */
.vision { max-width: 860px; }
/* a longer statement gets the full page width, so it sits on two lines */
.vision--wide { max-width: none; }
.vision__eyebrow {
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}
.vision__statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}
.vision__support {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .reqs { grid-template-columns: 1fr; }
  /* one column: only the very first item opens the list */
  .reqs li:nth-child(2) { padding-top: 18px; border-top: 1px solid #e2e0db; }
}

@media (max-width: 700px) {
  .gap-panel__list { grid-template-columns: 1fr; }
}

/* industry icons, one line */
.industry-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 72px);
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
}
.industry-row li { display: flex; }
.industry-row img {
  width: 44px;
  height: 44px;
  display: block;
}

@media (max-width: 700px) {
  .industry-row { gap: 24px; }
  .industry-row img { width: 36px; height: 36px; }
}

/* Crawl schematic: how an outcome's result is auto calculated from the
   top goal on each participant's care plan. Drawn as inline SVG so the
   connectors stay exact; it scrolls sideways rather than shrink on phones */
.schematic {
  max-width: 1020px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid #e2e0db;
  border-radius: var(--radius);
  background: #fff;
}
.schematic__scroll { overflow-x: auto; }
.schematic__svg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
}
/* picking another industry fades only the labels whose wording changes */
.schematic__svg [data-k] { transition: fill-opacity 0.16s ease; }
.schematic__svg [data-k].is-fading { fill-opacity: 0; }

/* Framework shows the bare model: example lines fade away and the node
   names glide down to the middle of their cards. An industry brings the
   examples back in bold, and the shared node names step back to regular */
.schematic__svg .sc-ex { transition: fill-opacity 0.2s ease; }
.schematic__svg .sc-lift { transition: transform 0.3s ease, font-size 0.3s ease, fill 0.3s ease; }
.schematic[data-context="framework"] .sc-ex { fill-opacity: 0; }
/* node types sit on the card's lower line; the framework raises them to the middle */
.schematic[data-context="framework"] .sc-lift { transform: translateY(-8px); }
.schematic:not([data-context="framework"]) .sc-ex { font-weight: 600; fill: var(--text); }
.schematic:not([data-context="framework"]) .sc-ex-top { font-size: 12px; }
.schematic:not([data-context="framework"]) .sc-node { font-weight: 400; }
/* under an example, the node type reads as a small caption */
.schematic:not([data-context="framework"]) .sc-lift { font-size: 11px; fill: var(--text-muted); }
/* the framework is just the outcome and program columns, slid to the middle;
   an industry slides them back and brings in its related plan template */
.schematic__svg .sc-ab { transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.schematic[data-context="framework"] .sc-ab { transform: translateX(200px); }
.schematic__svg .sc-plans { transition: opacity 0.35s ease 0.15s, visibility 0s; }
.schematic[data-context="framework"] .sc-plans {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

/* the worked result (status chips, score) is example data as well. The
   framework clears it at once and the result box closes up around its title
   (case.js tweens the box); an industry opens the box first, then the
   chips fade in once there's room for them */
.schematic__svg .sc-fw-hide { transition: opacity 0.2s ease 0.22s; }
.schematic[data-context="framework"] .sc-fw-hide { opacity: 0; transition-delay: 0s; }
/* status boxes an industry doesn't use leave at once, before the box closes up */
.schematic__svg .sc-chip.is-off,
.schematic__svg .sc-chip-text.is-off { opacity: 0; transition-delay: 0s; }

/* a sub-header inside a section: black, smaller than the orange label,
   with its body copy in the usual right-hand column */
.case-subsection { margin-top: clamp(56px, 7vw, 88px); }
.case-subsection__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}

/* theory of change: five steps on a path that deepens from lilac to
   purple. When the section scrolls in, the path draws itself and the
   steps arrive one after another; on phones it runs downwards */
.change-path {
  --node: 44px;
  margin: 0 0 clamp(28px, 3.5vw, 40px);
}
.change-path__title {
  margin-bottom: 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #6b3fb0;
}
.change-path__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the path: a faint base, with the deepening fill drawn over it */
.change-path__steps::before,
.change-path__steps::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 1.5px);
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: 3px;
}
.change-path__steps::before { background: #eee8f9; }
.change-path__steps::after {
  background: linear-gradient(90deg, #d8ccf5, #6b3fb0);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.is-visible .change-path__steps::after { transform: scaleX(1); }

.change-path__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 6px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(0.2s + var(--i) * 0.16s);
}
.is-visible .change-path__step { opacity: 1; transform: none; }

/* nodes deepen step by step, so the path reads as a progression */
.change-path__node {
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  box-shadow: 0 0 0 4px #fff, 0 6px 16px rgba(60, 30, 120, 0.12);
}
.change-path__step:nth-child(1) { --fill: #f3effc; --ink: #6b3fb0; }
.change-path__step:nth-child(2) { --fill: #e4d9f8; --ink: #5a33a0; }
.change-path__step:nth-child(3) { --fill: #c9b6ef; --ink: #46268a; }
.change-path__step:nth-child(4) { --fill: #9c7ad6; --ink: #fff; }
.change-path__step:nth-child(5) { --fill: #6b3fb0; --ink: #fff; }
.change-path__name {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.change-path__note {
  margin-top: 4px;
  max-width: 17ch;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .change-path__steps { grid-template-columns: 1fr; gap: 14px; }
  .change-path__steps::before,
  .change-path__steps::after {
    top: calc(var(--node) / 2);
    bottom: calc(var(--node) / 2);
    left: calc(var(--node) / 2 - 1.5px);
    right: auto;
    width: 3px;
    height: auto;
  }
  .change-path__steps::after {
    background: linear-gradient(180deg, #d8ccf5, #6b3fb0);
    transform-origin: center top;
    transform: scaleY(0);
  }
  .is-visible .change-path__steps::after { transform: scaleY(1); }
  .change-path__step {
    display: grid;
    grid-template-columns: var(--node) 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 0;
    text-align: left;
  }
  .change-path__node { grid-row: span 2; }
  .change-path__name { margin-top: 0; align-self: end; }
  .change-path__note { max-width: none; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .change-path__steps::after { transition: none; transform: none; }
  .change-path__step { transition: none; opacity: 1; transform: none; }
}


/* the scenario for the picked industry, under the tabs in the body column.
   All four share one grid cell, so the block keeps the height of the longest
   and the schematic never moves; only the picked one is shown */
.industry-scenario { display: grid; }
/* the outgoing one fades first, then the picked one fades in */
.industry-scenario p {
  grid-area: 1 / 1;
  align-self: start;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}
.industry-scenario p.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.24s ease 0.14s, visibility 0s linear 0.14s;
}
@media (prefers-reduced-motion: reduce) {
  .industry-scenario p,
  .industry-scenario p.is-active,
  .schematic__svg [data-k],
  .schematic__svg .sc-ex,
  .schematic__svg .sc-lift,
  .schematic__svg .sc-fw-hide,
  .schematic__svg .sc-ab,
  .schematic__svg .sc-plans { transition: none; }
}

/* svg parts */
.schematic__svg text { text-anchor: middle; fill: var(--text); }
.schematic__svg .sc-col { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.schematic__svg .sc-q { font-size: 12px; fill: #8a8883; }
.schematic__svg .sc-gtitle { font-family: var(--font-display); font-size: 14px; font-weight: 600; fill: #6b3fb0; }
.schematic__svg .sc-name { font-size: 13px; font-weight: 600; }
.schematic__svg .sc-name--accent { fill: #6b3fb0; font-size: 15px; }
.schematic__svg .sc-num { font-weight: 500; fill: var(--text-muted); }
.schematic__svg .sc-name--accent .sc-num { fill: #6b3fb0; }
.schematic__svg .sc-note { font-size: 11px; fill: var(--text-muted); }
.sc-card { fill: #fff; stroke: #e2e0db; }
.sc-group { fill: #faf8ff; stroke: #d8ccf5; }
.sc-result { fill: #fff; stroke: #6b3fb0; stroke-width: 1.5; }
.sc-top { fill: #fff; stroke: #6b3fb0; stroke-width: 1.5; }
.sc-source { fill: #f0e9fb; stroke: #6b3fb0; stroke-width: 1.5; }
.sc-chip--done  { fill: #f0e9fb; }
.sc-chip--doing { fill: #fdf3e3; }
.sc-chip--todo  { fill: #fff; stroke: #e2e0db; }
.schematic__svg .sc-chip-text { font-size: 11.5px; font-weight: 600; }
.schematic__svg .sc-chip-text--done  { fill: #6b3fb0; }
.schematic__svg .sc-chip-text--doing { fill: #a86a12; }
.schematic__svg .sc-chip-text--todo  { fill: #8a8883; }
.sc-link { fill: none; stroke: #bdb9b1; stroke-width: 1.25; stroke-dasharray: 4 4; }
.sc-flow { fill: none; stroke: #6b3fb0; stroke-width: 1.5; }
.sc-head { fill: #6b3fb0; }
.schematic__svg .sc-flow-label { text-anchor: start; font-size: 11px; font-weight: 600; fill: #6b3fb0; }

.schematic__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.schematic__legend li { display: flex; align-items: center; gap: 8px; }
.schematic__key { width: 24px; height: 0; border-top: 1.5px dashed #bdb9b1; }
.schematic__key--flow { border-top: 1.5px solid #6b3fb0; }

/* industry tabs: a floating bar over the schematic. It rides along the
   bottom of the screen while the schematic is in view and comes to rest at
   the schematic's base. One is picked at a time; the picked tab opens out
   to show its name beside the icon */
.industry-tabs {
  position: sticky;
  bottom: 24px;
  z-index: 2;
  display: flex;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 6px;
  border: 1px solid #e2e0db;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(40, 24, 80, 0.07), 0 1px 3px rgba(40, 24, 80, 0.04);
}
.industry-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, padding 0.35s ease;
}
.industry-tab img { display: block; width: 36px; height: 36px; flex: none; }
.industry-tab:hover { background: #f6f4f0; }
.industry-tab:focus-visible { outline: 2px solid #6b3fb0; outline-offset: 2px; }
.industry-tab.is-active {
  padding-right: 18px;
  background: #f3effc;
  border-color: #d8ccf5;
}
/* the name stays in the accessibility tree; it's only collapsed visually */
.industry-tab__label {
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b3fb0;
  transition: max-width 0.35s ease, margin-left 0.35s ease, opacity 0.25s ease;
}
.industry-tab.is-active .industry-tab__label {
  max-width: 14em;
  margin-left: 10px;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .industry-tab, .industry-tab__label { transition: none; }
}
@media (max-width: 520px) {
  .industry-tabs { gap: 4px; padding: 4px; }
  .industry-tab,
  .industry-tab.is-active { padding: 6px; }
  .industry-tab img { width: 32px; height: 32px; }
  .industry-tab.is-active .industry-tab__label { max-width: 0; margin-left: 0; opacity: 0; }
}

/* partner logos — one line, optically levelled rather than uniformly scaled */
.logo-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
}
.logo-row li { display: flex; align-items: center; }
.logo-row img {
  height: auto;
  max-height: 38px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 700px) {
  .logo-row { justify-content: center; gap: 28px 36px; }
  .logo-row img { max-height: 30px; max-width: 110px; }
}

/* icon design — one tile per product, its square and circle variants together */
.icon-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin: clamp(28px, 4vw, 44px) 0 0;
}
.icon-tile { margin: 0; }
.icon-tile__art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(40px, 6vw, 72px) 24px;
  background: #fff;
  border: 1px solid #e2e0db;
  border-radius: var(--radius-sm, 12px);
}
.icon-tile__art img {
  width: clamp(88px, 11vw, 150px);
  height: auto;
  aspect-ratio: 1;
  display: block;
}
.icon-tile figcaption {
  margin-top: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

@media (max-width: 640px) {
  .icon-tiles { grid-template-columns: 1fr; }
}

/* numbered steps — a screenshot, a numbered title and a short caption */


/* all three screenshots are exported at the same 4:3 size, so they fill the
   frame identically with nothing cropped away by the browser */
.step__media {
  margin: 0 0 22px;
  border: 1px solid #e2e0db;
  border-radius: var(--radius-sm, 12px);
  overflow: hidden;
  background: #f2f0ec;
  aspect-ratio: 4 / 3;
}
.step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.step__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.step__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
}

.step__body {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .step__title { font-size: 1.25rem; }
}

/* customer stories: one logo per card, each opening that customer's story */
.customer-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  max-width: 1020px;
  margin: clamp(32px, 4vw, 48px) auto 0;     /* centred on the page, like the schematic */
  padding: 0;
  list-style: none;
}
.customer-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  padding: 20px;
  border: 1px solid #e2e0db;
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.customer-card img {
  display: block;
  max-width: 82%;
  max-height: 64px;
  width: auto;
  height: auto;
}
/* an arrow in the corner shows on hover: these lead off to the full story */
.customer-card__go {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  color: #6b3fb0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.customer-card:hover,
.customer-card:focus-visible {
  border-color: #d8ccf5;
  box-shadow: 0 6px 18px rgba(40, 24, 80, 0.08);
  transform: translateY(-2px);
}
.customer-card:hover .customer-card__go,
.customer-card:focus-visible .customer-card__go { opacity: 1; }
.customer-card:focus-visible { outline: 2px solid #6b3fb0; outline-offset: 2px; }

@media (max-width: 820px) {
  .customer-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .customer-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-card { height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-card { transition: none; }
  .customer-card:hover, .customer-card:focus-visible { transform: none; }
}

/* ---------- tile carousel (after Stripe's careers carousel) ----------
   The active tile is wide; the rest collapse to slivers that narrow with
   distance from it. The JS only sets --grow on each tile; flex-grow animates. */
.tile-carousel { margin: clamp(32px, 5vw, 52px) 0 0; }

/* arrows sit above the track, right-aligned */
.tile-carousel__head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.tile-carousel__controls {
  flex: none;
  display: flex;
  gap: 8px;
}
.tile-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: #f4f3f0;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.tile-carousel__btn:hover { background: #ebe9e4; }
.tile-carousel__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.tile-carousel__btn:disabled { opacity: 0.35; cursor: default; }

.tile-carousel__track {
  --tile-h: clamp(300px, 38vw, 500px);
  position: relative;          /* captions anchor here, not to their tile */
  list-style: none;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 0 var(--caption-h, 0px);   /* room for the tallest caption (set in JS) */
}

.tile {
  --grow: 1;
  flex: var(--grow) 1 0;
  min-width: 56px;
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.tile.is-active { cursor: default; }

.tile__media {
  height: var(--tile-h);
  border: 1px solid #e2e0db;
  border-radius: var(--radius-sm, 12px);
  overflow: hidden;
  background: #f2f0ec;
}
.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}

/* a collapsed tile is washed over with a soft fade and names its phase in
   the middle, so it reads as something to open rather than a cropped image */
.tile__media { position: relative; }
.tile__veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(246, 243, 252, 0.9) 50%,
    rgba(240, 233, 251, 0.97) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 0.35s ease;
}
/* hovering lifts the fade a little, a hint that the tile opens */
.tile:not(.is-active):hover .tile__veil { opacity: 0.82; }
.tile.is-active .tile__veil { opacity: 0; pointer-events: none; }
.tile__phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-size: 0.8125rem;
  color: #6b3fb0;
}
.tile__phase b {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #3d2470;
}

/* a screen shown whole: it sits inside the tile at its own ratio, and the
   page's purple gradient fills whatever space the ratio leaves */
.tile__media--fit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 24px);
  background: linear-gradient(150deg, #efeafd 0%, #f8f5ff 45%, #ded2f9 100%);
}
.tile__media--fit img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(40, 24, 80, 0.12);
}

/* tile 1 carries two screens, side by side */
.tile__media--pair { display: flex; }
.tile__media--pair img { width: 50%; flex: 1 1 50%; }
.tile__media--pair img + img { border-left: 1px solid #e2e0db; }

/* the caption is sized for the expanded tile, so collapsing doesn't reflow
   it into a narrow column; it just fades and gets clipped */
/* every caption is pinned to the carousel's left edge, so the text stays in
   the same place whichever tile is open. The track is the containing block,
   which also keeps the caption out of the collapsed tile's overflow clip. */
.tile__copy {
  position: absolute;
  left: 0;
  top: calc(var(--tile-h) + 20px);
  width: min(680px, 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.tile.is-active .tile__copy {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease 0.25s, visibility 0s;
}

.tile__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.tile__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}
.tile__body {
  margin: 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .tile, .tile__copy, .tile__veil { transition: none; }
}

/* narrow screens: no room for slivers, so every tile opens fully, stacked */
@media (max-width: 820px) {
  .tile-carousel__controls { display: none; }
  .tile-carousel__track { flex-direction: column; gap: 40px; }
  .tile { flex: none; cursor: default; }
  .tile__media { height: auto; aspect-ratio: 4 / 3; }
  .tile-carousel__track { padding-bottom: 0; }
  .tile__copy { position: static; width: auto; padding-top: 20px; opacity: 1; visibility: visible; }
  .tile__veil { display: none; }
}

/* photo row under the takeaways */
.photo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: clamp(36px, 5vw, 56px);
}
.photo-row__item { margin: 0; }
.photo-row__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm, 12px);
  background: #f2f0ec;
}
.photo-row__item figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .photo-row { grid-template-columns: 1fr; }
}

/* next project */
.next-project {
  display: block;
  margin-top: clamp(56px, 8vw, 104px);
  border-top: 1px solid #e2e0db;
  padding: clamp(32px, 5vw, 56px) 0 8px;
  transition: color 0.2s ease;
}
.next-project span {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.next-project strong {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}
.next-project:hover { color: var(--orange); }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  /* narrow screens: two columns that share the width, so nothing overflows */
  .case-meta { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .case-grid { grid-template-columns: 1fr; gap: 16px; }
  .case-section__heading + .case-section__body { grid-column: 1; }
  .case-grid--aside { grid-template-columns: 1fr; gap: 24px; }
  .case-aside { aspect-ratio: 16 / 10; }
  .card-row { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr; gap: 32px; }
  /* stacked: the vertical rules become meaningless, so drop them and the
     indent they were separating */
  .stat { padding: 0; border-left: 0; }
  /* stacked: photo above the insights, and it stops sticking */
  .insight-split { grid-template-columns: 1fr; gap: 24px; }
  .insight-split__media { position: static; }
  .solution-block { grid-template-columns: 1fr; }
  .solution-block--flip .solution-block__text { order: 1; }
  .solution-block--flip .solution-block__media { order: 2; }
}


/* product screens shown full width, stacked one under the other */
.screens {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  max-width: 1020px;
  margin: clamp(32px, 4vw, 48px) auto 0;
}
.screens__item { margin: 0; }
.screens__item img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e2e0db;
  border-radius: 12px;
}
.screens__item figcaption {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
/* a title above a screen names what it is */
.screens__item .screens__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* base layer map with example screens popped over it: each pop-over is
   pinned to the step in the flow it shows by a numbered dot and a leader */
.flowmap {
  max-width: 1020px;
  margin: clamp(40px, 5vw, 64px) auto 0;
}
.flowmap__canvas {
  position: relative;
  margin-bottom: clamp(56px, 7vw, 84px);   /* room for the lower pop-over hanging off the map */
}
.flowmap__map {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e2e0db;
  border-radius: 12px;
  cursor: zoom-in;
}
.flowmap__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.flowmap__leaders line {
  stroke: #6b3fb0;
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.flowmap__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #6b3fb0;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(107, 63, 176, 0.18);
  pointer-events: none;
}
.flowmap__pop {
  position: absolute;
  width: 25%;
  margin: 0;
  padding: 6px;
  border: 1px solid #e2e0db;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(40, 24, 80, 0.16), 0 2px 6px rgba(40, 24, 80, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.flowmap__pop:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(40, 24, 80, 0.2); }
.flowmap__pop img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
  cursor: zoom-in;
}
.flowmap__pop figcaption {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 4px 2px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-muted);
}
.flowmap__pop figcaption b {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6b3fb0;
  color: #fff;
  font-size: 0.625rem;
}
/* pop-over 1 sits in the quiet lower left, under its step;
   pop-over 2 in the open space above the indicator rows */
.flowmap__pop--a { left: 15%; top: 50%; }
.flowmap__pop--b { left: 63%; top: -8%; }
/* a note under a figure reads as body copy, in the body column */
.case-note .case-section__body { grid-column: 2; }
/* a note between two figures needs room above as well as below */
.case-note--spaced { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 820px) {   /* where the case grid collapses to one column */
  .case-note .case-section__body { grid-column: 1; }
}

/* narrow: the map is too small to carry pop-overs, so the screens sit
   underneath it, numbered to match the pins */
@media (max-width: 760px) {
  .flowmap__canvas { margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .flowmap__map, .flowmap__leaders { grid-column: 1 / -1; }
  .flowmap__leaders { display: none; }
  .flowmap__pop { position: static; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .flowmap__pop { transition: none; }
  .flowmap__pop:hover { transform: none; }
}

/* step-by-step slideshow: frames cross-fade every few seconds inside a
   fixed stage (each fitted whole on the purple wash), with arrows, a
   pause/play control, and dots that fill as the next step approaches */
.slideshow {
  --slide-ms: 5000ms;
  max-width: 1020px;
  margin: clamp(32px, 4vw, 48px) auto 0;
}
.slideshow__stage {
  position: relative;
  height: clamp(320px, 52vw, 620px);
  border-radius: var(--radius);
  background: linear-gradient(150deg, #efeafd 0%, #f8f5ff 45%, #ded2f9 100%);
  overflow: hidden;
}
.slideshow__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: clamp(16px, 3vw, 32px) clamp(60px, 8vw, 84px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.slideshow__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}
.slideshow__slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;   /* the frames carry the modal's own shadow, so no box is added */
}
.slideshow__nav,
.slideshow__toggle {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(40, 24, 80, 0.12);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.slideshow__nav {
  top: 50%;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
}
.slideshow__nav--prev { left: clamp(10px, 1.6vw, 18px); }
.slideshow__nav--next { right: clamp(10px, 1.6vw, 18px); }
.slideshow__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.slideshow__toggle {
  right: clamp(10px, 1.6vw, 18px);
  bottom: clamp(10px, 1.6vw, 18px);
  width: 36px;
  height: 36px;
  color: #6b3fb0;
}
.slideshow__toggle:hover { background: #fff; transform: scale(1.06); }
.slideshow__nav:focus-visible,
.slideshow__toggle:focus-visible,
.slideshow__dot:focus-visible { outline: 2px solid #6b3fb0; outline-offset: 2px; }

.slideshow__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 16px;
}
.slideshow__caption {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.slideshow__caption b {
  margin-right: 8px;
  font-weight: 600;
  color: #6b3fb0;
}
.slideshow__dots { display: flex; flex: none; gap: 6px; }
.slideshow__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ddd5ee;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.3s ease;
}
.slideshow__dot.is-active { width: 28px; }
/* the active dot fills over the interval while the slideshow plays */
.slideshow__dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: #6b3fb0;
}
.slideshow.is-ticking .slideshow__dot.is-active::after {
  width: 0;
  animation: slideshow-fill var(--slide-ms) linear forwards;
}
@keyframes slideshow-fill { to { width: 100%; } }

@media (max-width: 600px) {
  .slideshow__meta { flex-direction: column; align-items: flex-start; }
  .slideshow__slide { padding-inline: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .slideshow__slide, .slideshow__slide.is-active, .slideshow__dot { transition: none; }
}

/* how nonprofits monitor program data today: two dashboards side by side,
   top aligned */
.current-dashboards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(16px, 2vw, 24px);
  max-width: 1020px;
  margin: clamp(32px, 4vw, 48px) auto 0;
}
.current-dashboards__item { margin: 0; }
.current-dashboards__item img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e2e0db;
  border-radius: 12px;
}
@media (max-width: 600px) {
  .current-dashboards { grid-template-columns: 1fr; }
}

/* dashboard layout wireframes, two by two */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 36px) clamp(16px, 2vw, 24px);
  max-width: 1020px;
  margin: clamp(32px, 4vw, 48px) auto 0;
}
.layout-grid__item { margin: 0; }
/* the personas each template is shaped for, tagged above its top left corner */
.layout-grid__personas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.layout-grid__persona {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border: 1px solid #e2e0db;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}
.layout-grid__item img {
  display: block;
  width: 100%;
  height: auto;
  /* one shape for all four, so each row lines up (the first runs a touch
     taller and loses only empty space at its foot) */
  aspect-ratio: 1200 / 763;
  object-fit: cover;
  object-position: top;
  border: 1px solid #e2e0db;
  border-radius: 12px;
}
@media (max-width: 600px) {
  .layout-grid { grid-template-columns: 1fr; }
}

/* ---------- outcomes: one headline result, then up to three proof cards ----------
   shared by both Salesforce case studies; each page tints it to its own palette */
.outcomes {
  --oc-accent: #6b3fb0;
  --oc-wash: linear-gradient(150deg, #efeafd 0%, #f8f5ff 45%, #e6dcfa 100%);
  margin: clamp(24px, 3vw, 40px) 0 0;
}
.outcomes--cm {
  --oc-accent: #0f6f66;
  --oc-wash: linear-gradient(150deg, #e3f4f2 0%, #f2faf9 45%, #d6eeeb 100%);
}
.outcomes__lead {
  margin: 0;
  padding: clamp(36px, 6vw, 72px) clamp(24px, 6vw, 88px);
  border-radius: var(--radius);
  background: var(--oc-wash);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-align: center;
  text-wrap: balance;
  color: var(--text-muted);
}
.outcomes__lead strong,
.outcome-card strong { color: var(--oc-accent); font-weight: 600; }
.outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin: clamp(12px, 1.6vw, 20px) 0 0;
  padding: 0;
  list-style: none;
}
.outcome-card {
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid #e2e0db;
  border-radius: var(--radius);
  background: #fff;
}
.outcome-card__kicker {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
}
.outcome-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-muted);
}
@media (max-width: 860px) {
  .outcomes__grid { grid-template-columns: 1fr; }
}

/* app demo stage (Ono Diary): the iPad frame on the same gray wash as its card */
.app-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(380px, 52vw, 660px);
  border-radius: var(--radius);
  background: linear-gradient(150deg, #eaeef4 0%, #f5f7fa 45%, #d7e0ec 100%);
}
.app-stage .ono-icon { width: 30%; }  /* beats the full-width .case-visual img rule */

/* an outbound link set on its own line, e.g. to a live product page */
.case-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 4px;
  padding-bottom: 2px;
  font-weight: 600;
  border-bottom: 2px solid var(--text);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.case-link:hover { color: var(--orange); border-color: var(--orange); }
.case-hero .case-link { margin-bottom: clamp(28px, 4vw, 44px); }

/* stand-in for an image while a case study is being written */
.placeholder-media {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 24px;
  border: 2px dashed #d6d3cc;
  border-radius: var(--radius);
  background: #faf9f7;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}
.placeholder-media--wide { aspect-ratio: 16 / 7; }

/* phone recordings (Ono Diary) */
.phone {
  width: min(100%, 270px);
  aspect-ratio: 1206 / 2452;
  padding: 7px;
  border: 3px solid #3a3a40;
  border-radius: 42px;
  background: #17171a;
  box-shadow: 0 18px 36px rgba(30, 30, 40, 0.22);
}
.phone video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 34px;
  background: #fff;
}
/* a cropped recording, shown as a card rather than a whole phone */
.screen-crop {
  display: block;
  width: min(100%, 380px);
  height: auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(30, 30, 40, 0.14);
}

/* design system: colors and type sheets, side by side */
.ds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
  width: 100%;
  max-width: 1020px;
}
.case-visual .ds-grid img {
  border-radius: 18px;
  box-shadow: 0 0 0 1px #e2e0db;
}
@media (max-width: 760px) {
  .ds-grid { grid-template-columns: 1fr; }
}

/* app recordings stacked in one centered column, each on the gray wash */
.clip-row {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  max-width: 720px;
  margin: 0 auto;
}
.clip-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 52px);
  border-radius: var(--radius);
  background: linear-gradient(150deg, #eaeef4 0%, #f5f7fa 45%, #d7e0ec 100%);
}
.clip-tile .phone { width: min(100%, 300px); }
.clip-tile { position: relative; }
/* play / pause for each recording, pinned to the tile's corner */
.clip-toggle {
  position: absolute;
  right: clamp(12px, 1.6vw, 18px);
  bottom: clamp(12px, 1.6vw, 18px);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(30, 30, 40, 0.12);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.clip-toggle:hover { background: #fff; transform: scale(1.06); }
.clip-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.clip-tile .screen-crop { width: min(100%, 420px); }

/* ---------- benchmarking line charts (Case Management pilot) ----------
   one measure per chart (no dual axis): a 2px line over a 10% wash, ringed
   markers, solid hairline grid, a labelled reference line, and a crosshair
   tooltip that also follows keyboard focus */
.bench {
  --bench-line: #00897b;
  --bench-grid: #ecebe8;
  --bench-ref: #a8a6a0;
  margin: clamp(40px, 5vw, 64px) 0 0;
}
.bench__head { max-width: 640px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.bench__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bench__sub { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.5; }
.bench__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}
.bench-chart {
  position: relative;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid #e2e0db;
  border-radius: var(--radius);
  background: #fff;
}
.bench-chart__title { margin: 0; font-weight: 600; font-size: 1rem; }
.bench-chart__note { margin: 2px 0 10px; color: #6b6b68; font-size: 0.85rem; }
.bench-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.bench-chart .tick, .bench-chart .xlab, .bench-chart .ref-label {
  font-family: var(--font-body);
  font-size: 12px;
  fill: #6b6b68;
  font-variant-numeric: tabular-nums;
}
.bench-chart .val {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  fill: var(--text);
}
.bench-chart .hit { fill: transparent; cursor: default; outline: none; }
.bench-chart .cross { stroke: #c9c7c1; stroke-width: 1; opacity: 0; }
.bench-chart.is-hover .cross { opacity: 1; }
.bench-chart .dot.is-active { r: 6; }
.bench-tip {
  position: absolute;
  z-index: 2;
  min-width: 120px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(24, 28, 34, 0.14), 0 0 0 1px #e2e0db;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity 0.12s ease;
}
.bench-chart.is-hover .bench-tip { opacity: 1; }
.bench-tip strong { display: block; font-size: 1rem; }
.bench-tip span { display: flex; align-items: center; gap: 6px; color: #6b6b68; font-size: 0.8rem; }
.bench-tip span::before { content: ""; width: 12px; height: 2px; border-radius: 1px; background: var(--bench-line); }
@media (max-width: 760px) {
  .bench__grid { grid-template-columns: 1fr; }
}

/* stage marker on the benchmarking charts, set from "What we heard" */
.bench-chart .band { fill: var(--bench-line); opacity: 0.08; pointer-events: none; }
.bench-chart .dot.is-picked { r: 6; }
.bench-chart .hit { cursor: pointer; }

/* "What we heard": insights per pilot, under the charts */
.bench-insights {
  margin-top: clamp(16px, 2vw, 24px);
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid #e2e0db;
  border-radius: var(--radius);
  background: #fff;
}
/* pilot tabs on the left, the title centred: the empty right column
   balances the tabs so the title sits on the container's centre line */
.bench-insights__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: clamp(16px, 2vw, 22px);
}
.bench-insights__bar .bench-insights__label { grid-column: 2; grid-row: 1; text-align: center; }
.bench-insights__bar .bench-insights__tabs { grid-column: 1; grid-row: 1; justify-self: start; }
@media (max-width: 760px) {
  .bench-insights__bar { grid-template-columns: 1fr; justify-items: center; }
  .bench-insights__bar .bench-insights__label { grid-column: 1; grid-row: 1; }
  .bench-insights__bar .bench-insights__tabs { grid-column: 1; grid-row: 2; justify-self: center; }
}
/* titled like the benchmarking heading above it */
.bench-insights__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bench-insights__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #f3f2ef;
}
.bench-insights__tabs button {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.bench-insights__tabs button:hover { color: var(--text); }
.bench-insights__tabs button[aria-selected="true"] {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(24, 28, 34, 0.12);
}
.bench-insights__tabs button:focus-visible { outline: 2px solid var(--bench-line); outline-offset: 2px; }
.bench-insights__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: heard;
}
.bench-insights__list li {
  position: relative;
  padding: 16px 18px 18px 48px;
  border-radius: 14px;
  background: #f7f7f5;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  counter-increment: heard;
}
.bench-insights__list li::before {
  content: counter(heard);
  position: absolute;
  left: 18px;
  top: 17px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dcefec;
  color: #00695f;
  font-size: 0.75rem;
  font-weight: 700;
}
.bench-insights__list strong { color: var(--text); font-weight: 600; }
/* an optional headline finding above a pilot's tiles */
.bench-insights__lead {
  max-width: 820px;
  margin: 0 auto clamp(16px, 2vw, 24px);
  text-align: center;
  text-wrap: balance;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.55;
}
.bench-insights__lead strong { color: var(--text); font-weight: 600; }
@media (max-width: 860px) {
  .bench-insights__list { grid-template-columns: 1fr; }
}

/* principle stencils: an animated wireframe above a principle */
.principle__stencil {
  max-width: 340px;
  margin: 0 auto 18px;
  padding: clamp(10px, 1.4vw, 16px);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px #e8e6e1, 0 6px 20px rgba(24, 28, 34, 0.06);
}
.principle__stencil .stencil { display: block; width: 100%; height: auto; }
/* principles with a stencil read as centred cards */
.principle:has(.principle__stencil) { text-align: center; }
.principle:has(.principle__stencil) p { max-width: 46ch; margin-inline: auto; }

/* ---------- Run section: actionable insights under the dashboard, beside a trace
   of the indicators and program behind the at-risk item ---------- */
.ai-row {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
  max-width: 1020px;
  margin: clamp(20px, 2.6vw, 32px) auto 0;
}
.ai-insights {
  padding: 16px 16px 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(24, 28, 34, 0.08), 0 10px 28px rgba(24, 28, 34, 0.08);
  font-family: var(--font-body);
  text-align: left;
}
.ai-insights__head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ai-insights__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eef4ff;
  color: #0b5cab;
}
.ai-insights__title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.ai-insights__sub { margin: 1px 0 0; font-size: 0.78rem; color: #6b6b68; }
.ai-insights__list { margin: 0; padding: 0; list-style: none; }
.ai-insight { padding: 10px 0; border-top: 1px solid #ecebe8; }
.ai-insight__text { margin: 6px 0 8px; font-size: 0.85rem; line-height: 1.45; color: #4a4a48; }
.ai-insight__text strong { color: var(--text); font-weight: 600; }
/* contributing factors under an at-risk insight */
.ai-drivers__label {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6b68;
}
.ai-drivers { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #faf6f5; list-style: none; }
.ai-drivers li { position: relative; padding-left: 14px; font-size: 0.8rem; line-height: 1.45; color: #4a4a48; }
.ai-drivers li + li { margin-top: 4px; }
.ai-drivers li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b3261e;
}
.ai-drivers strong { color: var(--text); font-weight: 600; }
/* the traced insight is outlined, and a dashed lead runs from it to the trace */
.ai-insight--traced {
  position: relative;
  margin: 0 -8px;
  padding: 10px 8px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px #f2c3be;
}
.ai-insight--traced + .ai-insight { border-top: 0; }
.ai-insight--traced::after {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(100% + 8px);
  width: clamp(16px, 2vw, 24px);
  border-top: 2px dashed #e39a93;
}

/* status pairs an icon and a label with its colour, never colour alone */
.ai-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.ai-status--risk  { background: #fdecea; color: #b3261e; }
.ai-status--watch { background: #fdf1e0; color: #8c4b00; }
.ai-status--win   { background: #e7f4ea; color: #1e6b37; }
.ai-action {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #c9d7ee;
  border-radius: 999px;
  color: #0b5cab;
  font-size: 0.78rem;
  font-weight: 600;
}

.ai-trace { padding: clamp(18px, 2.2vw, 26px) 0 0 clamp(8px, 1vw, 12px); }
.ai-trace__title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text); }
.ai-trace__sub { margin: 2px 0 16px; font-size: 0.85rem; color: #5a5a58; }
.ai-trace__flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  row-gap: 8px;
}
.trace-col__label {
  grid-row: 1;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b5a8e;
}
.ai-trace__flow > .trace-node,
.ai-trace__flow > .trace-stack,
.ai-trace__flow > .trace-link { grid-row: 2; }
.trace-stack { display: grid; gap: 12px; }
.trace-stack .trace-node { min-height: 112px; }
.trace-link { display: block; width: 100%; height: 100%; overflow: visible; }
.trace-link path {
  fill: none;
  stroke: #a995d6;
  stroke-width: 2;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
.trace-link .trace-link--risk { stroke: #d9776d; }

/* nodes: a dark header strip over a white body, like a flow builder */
.trace-node {
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px #ecebe8, 0 4px 12px rgba(40, 24, 80, 0.08);
}
.trace-node__head {
  margin: 0;
  padding: 5px 10px;
  background: #1f2433;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.trace-node--risk .trace-node__head { background: #8f2a22; }
.trace-node__body { padding: 8px 10px 9px; }
.trace-node__title { margin: 0 0 4px; font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.trace-node ul { margin: 0; padding: 0; list-style: none; }
.trace-node li { display: flex; align-items: flex-start; gap: 6px; font-size: 0.76rem; line-height: 1.35; color: #4a4a48; }
.trace-node li + li { margin-top: 4px; }
.trace-node li svg { flex: none; margin-top: 1px; color: #6b3fb0; }
.trace-node--risk li svg { color: #b3261e; }
.trace-node li b { font-weight: 600; color: var(--text); }

@media (max-width: 860px) {
  .ai-row { grid-template-columns: 1fr; }
  .ai-insight--traced::after { display: none; }
  .ai-trace__flow { grid-template-columns: 1fr; row-gap: 10px; }
  .trace-col__label { display: none; }
  .ai-trace__flow > * { grid-row: auto !important; grid-column: 1 !important; }
  .trace-link { display: none; }
  .trace-stack .trace-node { min-height: 0; }
}

/* chat messages wait offstage until the Run tile plays them in */
.chat-msg { transition: opacity 0.4s ease, transform 0.4s ease; }
.chat-msg.is-pending { opacity: 0; transform: translateY(8px); }

/* Run tile: a skeleton of the outcomes app with the actionable insights in
   it; the Agentforce side panel then slides open inside the same screen */
/* sized like the other tiles' screens (the dashboard's 2040 x 1424), with
   the app laid out at a fixed 860 x 600 and scaled to fit, like a screenshot */
.tile__media--fit:has(.run-demo) { container-type: size; }
.run-demo {
  position: relative;
  flex: none;
  /* contained like an image: as large as fits the tile, never stretched */
  width: min(100cqw, 100cqh * 2040 / 1424);
  aspect-ratio: 2040 / 1424;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(40, 24, 80, 0.12);
}
.run-demo__app {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 860px;
  height: 600px;
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
  background: #fff;
}
.sk { display: block; border-radius: 6px; background: #ecebe8; }
.run-demo__bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid #f0efec; }
.sk--logo { width: 30px; height: 18px; border-radius: 9px; }
.sk--search { width: 34%; height: 18px; margin: 0 auto; border-radius: 9px; background: #f3f2f0; }
.sk--avatar { width: 22px; height: 22px; border-radius: 50%; }
.run-demo__nav { display: flex; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #f0efec; }
.sk--tab { width: 64px; height: 10px; }
.sk--tab.is-on { background: #d9d8d4; }
.run-demo__body { position: relative; flex: 1; display: flex; min-height: 0; }
.run-demo__page {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 14px;
  padding: 14px;
  background: #fafaf9;
}
.run-demo__skeleton { flex: 1; min-width: 0; display: grid; align-content: start; gap: 12px; }
.sk--title { width: 46%; height: 14px; }
.sk-row { display: flex; gap: 10px; }
.sk--tile { flex: 1; height: 64px; border-radius: 10px; background: #f0efec; }
.sk--chart { height: 150px; border-radius: 10px; background: #f0efec; }
.sk--line { width: 70%; height: 8px; }
.sk--short { width: 30%; }
.run-demo__page .ai-insights--compact {
  width: 270px;
  align-self: flex-start;
  box-shadow: 0 0 0 1px rgba(24, 28, 34, 0.07), 0 6px 18px rgba(24, 28, 34, 0.08);
}

/* the panel starts collapsed at the right edge and grows open */
.run-demo .run-demo__panel {
  flex: none;
  width: 0;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.run-demo.is-panel .run-demo__panel { width: 300px; }

/* ---------- Agentforce side panel, drawn to SLDS 2 ---------- */
.afp {
  display: flex;
  overflow: hidden;
  border-left: 1px solid #e5e5e5;
  background: #fff;
  color: #2e2e2e;
  font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: left;
}
.afp__inner { display: flex; flex-direction: column; flex: none; width: 300px; height: 100%; }
.afp__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e5e5;
}
.afp__title { margin: 0; font-size: 18px; font-weight: 400; color: #03234d; }
.afp__actions { display: inline-flex; align-items: center; gap: 10px; color: #066afe; }
.afp__log {
  position: relative;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 16px 14px;
  overflow-y: auto;
  scrollbar-width: none;
}
.afp-msg { display: flex; align-items: flex-start; gap: 12px; }
.afp-body { flex: 1; min-width: 0; }
.afp-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; }
.afp-avatar--user { background: #18837e; color: #fff; }
.afp-avatar--agent { background: #e6f0ff; color: #066afe; }
.afp-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: #2e2e2e; }
.afp-feedback { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; color: #5c5c5c; }
.afp-card { margin-top: 12px; padding: 12px 14px; border: 1px solid #c9c9c9; border-radius: 16px; }
.afp-card__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 400; color: #03234d; }
.afp-card__icon { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #9e84f4; }
.afp-card__fields { display: grid; gap: 8px; margin: 0 0 0 30px; }
.afp-card__fields dt { font-size: 11.5px; font-weight: 600; color: #2e2e2e; }
.afp-card__fields dd { margin: 1px 0 0; font-size: 11.5px; color: #2e2e2e; }
.afp-link { color: #0250d9; }
.afp-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.afp-card__footer .afp-feedback { margin-top: 0; }
.afp-button {
  padding: 4px 18px;
  border: 1px solid #747474;
  border-radius: 999px;
  color: #066afe;
  font-size: 13px;
  font-weight: 500;
}
.afp__composer { padding: 8px 14px 10px; }
.afp-input { padding: 10px 12px 8px; border: 1px solid #747474; border-radius: 12px; }
.afp-input__placeholder { display: block; font-size: 12.5px; color: #747474; }
.afp-input__tools { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; color: #2e2e2e; }
.afp-input__tools span { display: inline-flex; gap: 10px; }
.afp__note { margin: 6px 0 0; font-size: 10.5px; color: #5c5c5c; }