/* ============================================================
   Miivo, the story version.

   The presentation deck's narrative told as a scrolling case
   study. Everything structural still comes from case-study.css
   and miivo.css; this sheet only adds the visual pieces the
   story needs and the earlier page did not have: chapter image
   bands, the founders' split, image cards, the onboarding
   figure, the decisions table, the before/after slider and the
   marked draft block.
   ============================================================ */

.cs-story { --story-gap: 12px; }

/* The headline breaks into even lines rather than leaving a short last one. */
.cs-story .hero__title { text-wrap: balance; }
.story-cap {
  margin-top: 10px;
  font-size: 13px;
  line-height: 155%;
  color: var(--ink-muted);
}
.story-cap a { color: var(--ink); text-underline-offset: 3px; }
.story-figure { color: var(--ink); font-weight: 600; }

/* ── Brief rows under the hero ─────────────────────────── */

.rows { margin: var(--inner) 0 0; }
.rows__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 32px;
  padding: 20px 0;
  box-shadow: inset 0 1px 0 var(--hairline);
}
.rows__row:last-child { box-shadow: inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline); }
.rows__row dt { padding-top: .35em; }
.rows__row dd {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.5;
  color: var(--ink);
}

/* The role's areas as pointers, three to a row, on the same left edge as
   the rows around them. */
.rows__points {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
}
.rows__points li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.rows__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* ── Founders' view under the context ──────────────────── */

.founders {
  margin-top: var(--inner);
  padding-top: 24px;
  box-shadow: inset 0 1px 0 var(--hairline);
}
.founders__copy {
  margin-top: 14px;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 155%;
  color: var(--ink);
}

/* ── Chapter bands: one wide image opening each act ────── */

.band {
  position: relative;
  margin: 0 0 var(--inner);
  aspect-ratio: 885 / 400;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}
.band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .6));
}
.band__text {
  position: absolute;
  z-index: 1;
  left: 28px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
}
.band__num { font-family: var(--eyebrow-face); font-size: 13px; letter-spacing: .06em; opacity: .85; }
.band__title { font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }

/* ── Image cards ───────────────────────────────────────── */

.media { margin: var(--inner) 0 0; }
.media > a, .media > img, .media > svg { display: block; }
.media img, .media svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.media > a, .media > img, .media--flow {
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: 12px;
  background: var(--card);
}
.media > img { box-sizing: border-box; }
.media--tab { margin: 0; padding: 0; background: none; }
.media--tab img { border-radius: 10px; }
.media--flow svg { max-width: 640px; margin: 0 auto; }
/* A diagram rather than a screen: shown at a reading size, centred on its
   tile, instead of stretched to the column. */
.media--narrow > a { display: flex; justify-content: center; }
.media--narrow img { width: auto; max-width: 100%; max-height: 520px; }

.site-pair { margin-top: var(--inner); display: grid; grid-template-columns: 1fr 1fr; gap: var(--story-gap); }
.site-pair .media { margin: 0; }
.site-pair .media > img { height: 100%; aspect-ratio: 1.6; object-fit: contain; }

/* ── Prototype: the words beside a smaller screen ──────── */

/* An early test, so it supports the paragraph rather than leading it. */
.proto {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  align-items: center;
}
/* The figure carries its caption underneath, so the text is lifted by the
   caption's height to centre on the image itself, not image plus caption. */
.proto__text { padding-bottom: 0; }
/* The label travels with its text, so the two centre against the image
   together and stay close. */
.cs-miivo.cs-story .proto .feedback__lead {
  margin-top: 14px;
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 500;
  line-height: 1.6;
}
.proto .proto__media { margin: 0; }
.proto .proto__media > a { padding: clamp(12px, 1.6vw, 20px); }

/* ── Sprint photos with captions ───────────────────────── */

.cs-story .sprint__shots figure { margin: 0; }
/* Both photos the same size: equal columns, one shape, cropped to fill. */
.cs-story .sprint__shots { grid-template-columns: 1fr 1fr; gap: 24px; }
.cs-story .sprint__shot { aspect-ratio: 6 / 5; }
.cs-story .sprint .hypo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }

/* ── Onboarding as a figure ────────────────────────────── */

.onboard {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 32px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 12px;
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
}
.onboard__figure {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.onboard__figure span:first-child { color: var(--ink-faint); }
.onboard__figure svg { align-self: center; color: var(--ink-faint); }
.onboard__figure small {
  font-family: var(--eyebrow-face);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.onboard__copy { font-size: 15px; font-weight: 500; line-height: 165%; color: var(--ink); }

/* ── Expansion: two cards with bullets ─────────────────── */

.pair-cards { margin-top: var(--inner); display: grid; grid-template-columns: 1fr 1fr; gap: var(--story-gap); }
.pair-cards__card { padding: clamp(20px, 2.4vw, 28px); border-radius: 12px; background: var(--card); }
.pair-cards__card .scope__copy { margin-top: 6px; }
.story-bullets { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.story-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 155%;
  color: var(--ink);
}
.story-bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}

/* The journeys' heading block sits tighter to the first showcase. */

/* ── Before / after slider ─────────────────────────────── */

.compare {
  --pos: 50%;
  position: relative;
  margin-top: var(--inner);
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  user-select: none;
}
.compare__layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 52px 24px 24px;
  pointer-events: none;
}
.compare__layer img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; }
.compare__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: var(--card); }
.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  pointer-events: none;
}
.compare__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(.compare__range:focus-visible) .compare__handle::after { outline: 2px solid var(--ink); outline-offset: 2px; }
.compare__tag {
  position: absolute;
  top: 14px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .06);
  font-family: var(--eyebrow-face);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  pointer-events: none;
}
.compare__tag--before { left: 14px; }
.compare__tag--after { right: 14px; }

/* ── Decisions table ───────────────────────────────────── */

.decide { margin-top: var(--inner); }
.decide__head, .decide__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.decide__head {
  padding-bottom: 10px;
  font-family: var(--eyebrow-face);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.decide__row { padding: 18px 0; box-shadow: inset 0 1px 0 var(--hairline); }
.decide__row:last-child { box-shadow: inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline); }
.decide__row p { font-size: 15px; font-weight: 500; line-height: 160%; color: var(--ink-muted); }
.decide__row p:nth-child(2) { color: var(--ink); }

/* ── Draft impact (dummy data from the handoff) ────────── */

.impact {
  margin-top: var(--block);
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 14px;
  outline: 1.5px dashed #C79A3D;
  outline-offset: -1.5px;
}
.impact__draft {
  margin-bottom: 14px;
  font-family: var(--eyebrow-face);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8A5E0E;
}
.impact__list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.impact__list strong {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ink-faint);
}
.impact__list .scope__copy { margin-top: 6px; }
.impact__list small {
  display: block;
  margin-top: 8px;
  font-family: var(--eyebrow-face);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8A5E0E;
}

.story-draft {
  width: fit-content;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(199, 154, 61, .14);
  font-size: 13px;
  color: #8A5E0E;
}

/* ── Phones ────────────────────────────────────────────── */

@media (max-width: 700px) {
  .proto { grid-template-columns: 1fr; gap: 20px; }
  .proto__text { padding-bottom: 0; }
  .rows__row, .onboard { grid-template-columns: 1fr; gap: 10px; }
  .rows__row dd { font-size: 15px; }
  .rows__points { grid-template-columns: 1fr 1fr; }
  .band { aspect-ratio: 4 / 3; }
  .band__text { left: 18px; bottom: 16px; }
  .site-pair, .pair-cards, .impact__list { grid-template-columns: 1fr; gap: 8px; }
  .cs-story .sprint .hypo { grid-template-columns: 1fr; }
  .compare { aspect-ratio: 4 / 3; }
  .decide__head { display: none; }
  .decide__row { grid-template-columns: 1fr; gap: 8px; }
  .decide__row .offer__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: block; margin-bottom: 2px; }
}

/* Section headings here run to two or three lines, so they get one step
   more air than miivo.css gives them: looser leading, lighter tracking. */
.cs-miivo.cs-story .section:not(#overview) .claim,
.cs-miivo.cs-story .feedback__lead {
  line-height: 1.5;
  letter-spacing: -.005em;
}

/* No word left alone on a last line, without shortening the lines: text
   runs the full measure and only the final break is adjusted (plus the
   last two words are joined by the page script). Only short titles are
   balanced. */
.cs-miivo.cs-story .section .claim,
.cs-story .feedback__lead,
.cs-story p,
.cs-story li,
.cs-story dd,
.cs-story figcaption { text-wrap: pretty; }
.cs-story .scope__title,
.cs-story .steps__title { text-wrap: balance; }

/* Possibilities: two columns now, the possibility and the value it gives. */
.cs-story .offer__head,
.cs-story .offer__row { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); }
.cs-story .scope--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .cs-story .offer__row { grid-template-columns: 1fr; }
  .cs-story .scope--two { grid-template-columns: 1fr; }
}

/* Spacing rhythm: chapter > subsection > content. Chapters get clearly more
   room than the blocks inside them, so a new part of the story reads as one. */
.cs-story { --chapter: 176px; --sub: 104px; }
.cs-story .section + .section { margin-top: var(--chapter); }
.cs-story .subsection,
.cs-story .offer,
.cs-story .showcase { margin-top: var(--sub); }
.cs-story @media (max-width: 700px) {
  .cs-story { --chapter: 96px; --sub: 64px; }
}

/* ── Reference canvases: two tiles side by side, words inside ── */
/* Columns follow the screenshots' proportions (landscape Shopify, portrait
   Notion) so both screens land at about the same height. */
.ref-pair {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: 12px;
  background: var(--card);
}
.ref-canvas {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ref-canvas__text { margin-bottom: 20px; }
.ref-canvas__text .refs__copy { margin-top: 6px; }
.ref-canvas__shot { margin-top: auto; display: block; }
.ref-canvas__shot img {
  display: block; width: 100%; height: clamp(220px, 24vw, 340px);
  object-fit: cover; object-position: left top; border-radius: 8px;
}
@media (max-width: 700px) {
  .ref-pair { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ref-canvas__shot img { height: auto; }
}

/* A label directly above an image sits close, like References above its canvas. */
.cs-story .eyebrow + .media { margin-top: 14px; }

/* ── Initial user flow, drawn on the canvas ────────────── */
.flowmap__canvas {
  padding: clamp(24px, 4vw, 56px) clamp(16px, 2.4vw, 32px);
  border-radius: 12px;
  background: var(--card);
}
.flowmap svg { display: block; width: 100%; height: auto; max-width: 620px; margin: 0 auto; color: var(--ink); overflow: visible; }
.flowmap__lines path { fill: none; stroke: currentColor; stroke-width: 1.25; }
.flowmap__user  { fill: #fff; stroke: var(--ink); stroke-width: 1.25; }
.flowmap__system { fill: #E6E6E6; }
.flowmap__area  { fill: #fff; stroke: var(--ink); stroke-width: 1.25; }
.flowmap__area--first { fill: var(--ink); }
.flowmap__label {
  font-family: 'Open Sauce Two', sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: -.005em;
  fill: var(--ink); text-anchor: middle;
}
.flowmap__label--first { fill: #fff; }

/* The line that hands the four months of feedback over to the expansion. */
.cs-story .feedback__bridge { margin-top: 24px; }

/* ── Screens: a hairline and soft corners on every product screenshot ── */
/* The tab canvas moves from the image onto its wrapper, so the line can
   sit on the screen itself rather than around the grey padding. */
.cs-story .media--tab {
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: 12px;
  background: var(--card);
}
.cs-story .media--tab > img { padding: 0; background: none; }
.cs-story .tabs__shot,
.cs-story .proto__media img,
.cs-story .ref-canvas__shot img,
.cs-story .compare__layer img {
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
}
.cs-story .media__canvas {
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: 12px;
  background: var(--card);
}
.cs-story .media__canvas > img {
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
}
/* Website pair: both canvases share one shape, each screen fitted inside. */
.cs-story .site-pair .media__canvas {
  aspect-ratio: 1.6;
  display: flex; align-items: center; justify-content: center;
}
.cs-story .site-pair .media__canvas > img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
}
/* A rendered device mockup carries its own backdrop, so it takes no line. */
.cs-story .media__canvas--mockup > img { border: 0; }

/* Feedback from live use: each area carries its icon in the amber badge
   used for what owners questioned in Discovery. */
.cs-story .scope--feedback .feedback__icon { background: rgba(154, 123, 79, .13); color: #8A6A3E; }

/* ── Expansion: two sources, each point a row with a one-line reason ── */
.pair-rows { margin-top: var(--inner); display: grid; gap: 32px; }
/* One line breaks the two sources apart; the points themselves are bullets. */
.pair-rows__group + .pair-rows__group { padding-top: 32px; box-shadow: inset 0 1px 0 var(--hairline); }
.pair-rows__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; }
.pair-rows__source { font-size: 14px; color: var(--ink-muted); }
.pair-rows__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pair-rows__list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px; font-weight: 500; line-height: 165%; color: var(--ink-muted);
}
.pair-rows__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .7em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-muted);
}


/* Expanded flow notes: three boxes under the diagram, close to it. */
.cs-story .scope--expand { margin-top: 12px; }

/* Other core workflows: two smaller walkthroughs side by side, so the three
   journeys above keep the weight. */
.showcase-pair {
  margin-top: var(--inner);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--story-gap);
}
.showcase-pair figure { margin: 0; }
.showcase-pair .showcase__frame { margin-top: 0; }
.showcase-pair .showcase__shot { width: 88%; border-radius: 8px; }
.showcase-pair .vid-ctl { left: 10px; bottom: 10px; transform: scale(.85); transform-origin: left bottom; }
@media (max-width: 700px) {
  .showcase-pair { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Expand a walkthrough ──────────────────────────────── */
/* Top right of each video, in the same dark glass as the play button. */
.vid-expand {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: .9;
  transition: background-color .2s var(--ease), opacity .2s var(--ease);
}
.vid-expand:hover { background: rgba(0, 0, 0, .74); opacity: 1; }
.vid-expand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }
.vid-expand svg { display: block; }
.showcase-pair .vid-expand { top: 10px; right: 10px; transform: scale(.85); transform-origin: right top; }

.vid-modal {
  width: min(1200px, calc(100vw - 48px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.vid-modal::backdrop {
  background: rgba(0, 0, 0, .75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.vid-modal__video {
  display: block;
  width: 100%;
  max-height: calc(100vh - 120px);
  border-radius: 12px;
  background: #000;
}
.vid-modal__close {
  position: absolute;
  top: -50px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
}
.vid-modal__close:hover { background: rgba(255, 255, 255, .26); }
.vid-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 700px) {
  .vid-expand { top: 10px; right: 10px; width: 30px; height: 30px; }
  .vid-modal { width: calc(100vw - 32px); }
}
/* What the feedback led to: a green tick in a soft round badge. */
.pair-rows__list--done li { padding-left: 30px; }
.pair-rows__list--done li::before {
  left: 0;
  top: .2em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E3F5E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* ── Design decisions: problem → response cards ────────── */
/* Each decision reads top to bottom: the topic, what prompted it (amber),
   an arrow, then the response (green). Rows are shared across the three
   cards so the arrows and responses line up. */
.decisions {
  margin: var(--inner) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: 20px;
}
.decision {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 0;
}
.decision__top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.decision__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--card); color: var(--ink);
}
.decision__icon svg { display: block; }
.decision__topic { font-size: 16px; font-weight: 600; color: var(--ink); }
.decision__label {
  margin-bottom: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.decision__from, .decision__to { padding: 20px 22px 22px; border-radius: 12px; }
.decision__from { background: rgba(154, 123, 79, .1); }
.decision__to { padding: 24px 22px 26px; background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .25); }
.decision__from .decision__label { color: #8A6A3E; }
.decision__from p:last-child { font-size: 14px; font-weight: 500; line-height: 155%; color: var(--ink-muted); }
.decision__arrow {
  justify-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: 12px 0; border-radius: 50%;
  background: var(--card); color: var(--ink-muted);
}
.decision__to .decision__label { color: #15803D; }
.decision__to p:last-child { font-size: 14px; font-weight: 600; line-height: 155%; color: var(--ink); }
.decisions + .story-cap { margin-top: 14px; }
@media (max-width: 900px) {
  .decisions { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--story-gap); }
  .decision { grid-row: auto; grid-template-rows: none; }
}

/* Design system strip (as on the live page): screens carry the same hairline. */
.cs-story .tooling__shot { box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .08); border-radius: 6px; }
/* The website on its own: one canvas at the column width. */
.cs-story .site-single .media__canvas { aspect-ratio: 1.6; display: flex; align-items: center; justify-content: center; }
.cs-story .site-single .media__canvas > img { width: auto; height: auto; max-width: 100%; max-height: 100%; }

/* Measured engagement (Clarity): a plain grey card, numbers in full ink. */
.impact--real { outline: 0; background: var(--card); }
.impact--real .impact__list strong { color: var(--ink); }
.impact--real .feedback__lead { margin-top: 14px; }
.impact__source { margin-top: 24px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--hairline); }

/* Four numbers, each in its own bordered box, two by two. */
.impact--real { padding: 0; background: none; }
.impact--real .impact__list { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.impact--real .impact__list li {
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 14px;
}
.impact--real .impact__list strong { margin-bottom: 16px; }
.impact--real .impact__source { margin-top: 16px; padding-top: 0; box-shadow: none; }
@media (max-width: 700px) { .impact--real .impact__list { grid-template-columns: 1fr; } }
/* A green up arrow beside each number, so the direction reads at a glance. */
.impact--real .impact__list strong { display: flex; align-items: center; gap: 14px; }
.trend-up {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: #E3F5E9; color: #16A34A;
}
.trend-up svg { display: block; }
.impact--real .impact__list strong { font-weight: 600; }
/* #journeys now marks Journey 1 itself, so the next journey keeps the usual gap. */
.cs-story #journeys + .showcase { margin-top: var(--sub); }
/* The label sits right above the decision cards, like other labels above content. */
.cs-story .eyebrow + .decisions { margin-top: 20px; }

/* Sprint hypotheses: a sticky-note mark, in sticky-note yellow. */
.hypo__icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 12px; border-radius: 8px;
  background: #FFF1B8; color: #9A6B00;
}
.hypo__icon svg { display: block; }

/* Sprint box: one even inset on every side, more air between the columns
   and between the photos and the hypotheses. */
.cs-story .sprint { padding: clamp(24px, 3vw, 36px); }
.cs-story .sprint__shots { margin-top: 0; gap: 40px; }
.cs-story .hypo__label { margin-top: 40px; }
.cs-story .sprint .hypo { column-gap: 40px; row-gap: 28px; margin-top: 14px; }
@media (max-width: 700px) {
  .cs-story .sprint__shots { gap: 20px; }
}

/* One heading size across the page, matching the founders' view: every
   main heading and heading-like lead reads at 20px, regular weight. */
.cs-miivo.cs-story .section:not(#overview) .claim.claim,
.cs-miivo.cs-story .section:not(#overview) .feedback > .feedback__lead.feedback__lead,
.cs-miivo.cs-story .section:not(#overview) .impact > .feedback__lead.feedback__lead {
  font-size: 20px; font-weight: 500; line-height: 31px; letter-spacing: normal;
}
@media (max-width: 700px) {
  .cs-miivo.cs-story .section:not(#overview) .claim.claim,
  .cs-miivo.cs-story .section:not(#overview) .feedback > .feedback__lead.feedback__lead,
  .cs-miivo.cs-story .section:not(#overview) .impact > .feedback__lead.feedback__lead { font-size: 18px; line-height: 28px; }
}

/* Headings inside boxes and cards follow the same size and weight. */
.cs-miivo.cs-story .section .scope__title.scope__title,
.cs-miivo.cs-story .section .refs__name.refs__name,
.cs-miivo.cs-story .section .ov__head.ov__head,
.cs-miivo.cs-story .section .decision__topic.decision__topic {
  font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: normal;
}
@media (max-width: 700px) {
  .cs-miivo.cs-story .section .scope__title.scope__title,
  .cs-miivo.cs-story .section .refs__name.refs__name,
  .cs-miivo.cs-story .section .ov__head.ov__head,
  .cs-miivo.cs-story .section .decision__topic.decision__topic { font-size: 18px; }
}

/* Prototype feedback: liked in core green, questioned in core orange. */
.cs-story .feedback__list--liked .feedback__icon { background: #E3F5E9; color: #16A34A; }
.cs-story .feedback__list--questioned .feedback__icon { background: #FFEDD5; color: #EA580C; }
.cs-story .feedback__list li { color: #333333; }
.pair-rows__list li strong { font-weight: 600; color: var(--ink); }
/* Both references are landscape now: equal columns. */
.ref-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .ref-pair { grid-template-columns: 1fr; } }
.ref-pair .ref-canvas__shot img { height: auto; aspect-ratio: 1.45; }

/* Framework tabs: the screens share one slot sized by the tallest, so each
   grey canvas fills that slot and its screen sits at the top. The block always
   ends at the same place and the gap after it is the usual one. */
.cs-story .tabs.is-enhanced .tabs__panel { display: flex; }
.cs-story .tabs.is-enhanced .tabs__panel > .media--tab {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
}
/* Each canvas fits its own screen: only the active panel sets the height, so
   the shorter Pulse and Opportunities screens carry no extra grey below. */
.cs-story .tabs.is-enhanced .tabs__panels { position: relative; }
.cs-story .tabs.is-enhanced .tabs__panel:not(.is-active) { position: absolute; inset: 0 0 auto 0; }
/* Live-use feedback cards: the same orange as what users questioned. */
.cs-story .scope--feedback .feedback__icon { background: #FFEDD5; color: #EA580C; }
/* New capabilities: a blue up arrow in a soft round badge, matching the ticks. */
.pair-rows__list--new li { padding-left: 30px; }
.pair-rows__list--new li::before {
  left: 0;
  top: .2em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #DBEAFE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
/* The manual step: dashed, the friction later removed. */
.flowmap__manual { stroke-dasharray: 5 4; }

/* ── Expansion: what improved and what was new, as compact tiles ── */
.change-grid {
  margin-top: var(--inner);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.change-col__head { display: flex; align-items: baseline; gap: 10px; font-size: 20px; font-weight: 500; color: var(--ink); }
.change-col__head span { font-size: 14px; color: var(--ink-muted); }
.change-tiles { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.change-tiles li {
  position: relative;
  padding: 16px 18px 16px 58px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 12px;
}
.change-tiles li::before {
  content: "";
  position: absolute; left: 18px; top: 14px; /* centred on the title line */
  width: 26px; height: 26px; border-radius: 50%;
}
.change-col--improved li::before {
  background: #E3F5E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.change-col--new li::before {
  background: #DBEAFE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.change-tile__name { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.change-tile__copy { margin-top: 6px; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 700px) {
  .change-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Overview brief in a grey box: lines only between rows, the box edge
   takes the place of the outer ones. */
.cs-story .rows {
  padding: 4px clamp(20px, 2.6vw, 32px);
  border-radius: 12px;
  background: var(--card);
}
.cs-story .rows__row { padding: 22px 0; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .08); }
.cs-story .rows__row:first-child,
.cs-story .rows__row:first-child:last-child { box-shadow: none; }
.cs-story .rows__row:last-child { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .08); }
.cs-story .rows__row dd { font-size: 16px; font-weight: 500; line-height: 1.55; }
.cs-miivo.cs-story .section .ref-canvas .refs__name.refs__name { font-size: 16px; font-weight: 600; }
/* Column headings use the small capitals label style. */
.change-col__head {
  font-family: "Inclusive Sans", system-ui, sans-serif;
  font-size: 14px; font-weight: 500; line-height: 19.6px;
  text-transform: uppercase; color: var(--ink);
}
.change-col__head span { font-family: inherit; font-size: 14px; text-transform: none; color: var(--ink-muted); }
/* Shorter decision copy, read at a calmer size and weight. */
.decision__from p:last-child { font-size: 15px; }
.decision__to p:last-child { font-size: 15px; font-weight: 500; }
/* "Chose" carries the green tick used for confirmed choices elsewhere. */
.decision__to .decision__label { display: flex; align-items: center; gap: 8px; }
.decision__to .decision__label::before {
  content: "";
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: #E3F5E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
/* The website mockup fills its frame: its own grey backdrop is the canvas. */
.cs-story .site-single .media__canvas { padding: 0; aspect-ratio: auto; display: block; background: none; overflow: hidden; border-radius: 12px; }
.cs-story .site-single .media__canvas > img { width: 100%; height: auto; max-width: none; max-height: none; border-radius: 0; }
/* Preview pill sits inside the mockup, bottom right. */
.cs-story .site-single .media__canvas { position: relative; }
.cs-story .site-single .website__preview {
  top: auto; left: auto; right: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px);
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cs-story .site-single .website__preview:hover { transform: scale(1.04); }
.cs-story .site-single .website__preview svg { display: block; width: 1em; height: 1em; border-radius: 0; }

/* Company snapshot: three status tiles in a row, no change arrows. */
.impact--company { margin-top: var(--inner); }
.impact--company .impact__list { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .impact--company .impact__list { grid-template-columns: 1fr; } }

/* ── Reflection: three light learnings and one open line ── */
.learn {
  margin: var(--inner) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.learn li { padding-top: 16px; box-shadow: inset 0 1px 0 var(--hairline); }
.learn__head { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.learn__copy { margin-top: 6px; font-size: 15px; font-weight: 500; line-height: 160%; color: var(--ink-muted); }
.still-open { margin-top: 40px; font-size: 15px; font-weight: 500; line-height: 160%; color: var(--ink-muted); }
.still-open span {
  margin-right: 10px;
  font-family: "Inclusive Sans", system-ui, sans-serif;
  font-size: 13px; text-transform: uppercase; color: var(--ink);
}
@media (max-width: 700px) {
  .learn { grid-template-columns: 1fr; gap: 20px; }
}
/* Company snapshot numbers sit a step smaller than the engagement ones. */
.impact--company .impact__list strong { font-size: clamp(32px, 3vw, 40px); }
/* Learnings in bordered boxes, matching the snapshot cards above. */
.learn { gap: 16px; }
.learn li {
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 14px;
}
@media (max-width: 700px) { .learn { gap: 12px; } }
.learn__icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 14px; border-radius: 9px;
  background: #DBEAFE; color: #2563EB;
}
.learn__icon svg { display: block; }

/* ── Possible approaches as a small diagram ─────────────── */
/* Four cards on one canvas: idea, arrow, user value, and the product area
   it became. Rows are shared so each step lines up across the cards. */
.poss {
  margin: var(--inner) 0 0;
  padding: clamp(16px, 2.4vw, 28px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: 12px;
  border-radius: 14px;
  background: var(--card);
}
.poss__card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 20px 18px;
  border-radius: 12px;
  background: #fff;
}
.poss__num { font-family: "Inclusive Sans", system-ui, sans-serif; font-size: 13px; color: var(--ink-faint); }
.poss__idea { margin-top: 10px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.poss__arrow {
  justify-self: start; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 12px 0; border-radius: 50%;
  background: var(--card); color: var(--ink-muted);
}
.poss__value { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.poss__became {
  justify-self: start; align-self: end;
  margin-top: 16px; padding: 5px 10px; border-radius: 999px;
  background: #E3F5E9; color: #15803D;
  font-size: 13px; font-weight: 600; line-height: 1;
}
@media (max-width: 900px) {
  .poss { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 12px; }
  .poss__card { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 560px) { .poss { grid-template-columns: 1fr; } }
.poss__became { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.poss__became::before { content: "\2192"; font-weight: 600; }
.poss .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Wider column, centred in the space beside the side index rather than the
   whole window, so the page spreads further right on large screens. */
@media (min-width: 981px) {
  /* Targeted by id as well as class: some browser extensions inject their
     own ".content" styles, which a class-only rule can lose to. */
  .cs-story .content,
  .cs-story #content {
    width: min(1000px, 100% - var(--nav-reserve) - var(--edge));
    margin-left: max((100% - 1000px) / 2 + var(--nav-reserve) / 4, var(--nav-reserve));
  }
}
/* Without the outcome chips, each card runs four rows. */
.poss { grid-template-rows: repeat(4, auto); }
.poss__card { grid-row: span 4; }
@media (max-width: 900px) { .poss { grid-template-rows: none; } .poss__card { grid-row: auto; } }
/* Small labels carry the old table's column headings into each card. */
.poss__num { text-transform: uppercase; letter-spacing: .02em; }
.poss__label {
  display: block; margin-bottom: 4px;
  font-family: "Inclusive Sans", system-ui, sans-serif;
  font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink-faint);
}
/* More air inside and between the possibility cards. */
.poss { padding: clamp(18px, 2.6vw, 32px); column-gap: 16px; }
.poss__card { padding: 26px 22px 28px; }
.poss__idea { margin-top: 14px; }
.poss__arrow { margin: 18px 0; }
.poss__label { margin-bottom: 8px; }
@media (max-width: 900px) { .poss { row-gap: 16px; } }

/* Initial scope: the three product areas, white cards with a blue edge and
   the icon each carries in the product's own navigation. */
.cs-story .scope--features li {
  background: #fff;
  border: 1px solid #BFD3FB;
  border-radius: 14px;
}
.feature__icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 18px; border-radius: 10px;
  background: #DBEAFE; color: #2563EB;
}
.feature__icon svg { display: block; }
/* Each engagement number says what it covers. */
.impact__scope {
  display: inline-block; margin-bottom: 14px; padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1;
}
.impact__scope--bi { background: #DBEAFE; color: #1D4ED8; }
.impact__scope--site { background: var(--card); color: var(--ink-muted); }

/* Phones: the flow diagrams keep a readable size and scroll sideways inside
   their canvas, instead of shrinking their labels to a few pixels. */
@media (max-width: 700px) {
  .flowmap__canvas,
  .cs-story .media--flow { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .flowmap svg { width: 640px; max-width: none; }
  .cs-story .media--flow .flow-svg { width: 640px; max-width: none; }
}
/* Phones: tab labels stay on one line, and the canvas fits the screen being
   shown rather than the tallest one. */
@media (max-width: 700px) {
  .cs-story .tabs__list { display: flex; width: 100%; }
  .cs-story .tabs__tab { flex: 1 1 auto; white-space: nowrap; padding-inline: 8px; font-size: 13px; }
  .cs-story .tabs.is-enhanced .tabs__panel { display: block; }
  .cs-story .tabs.is-enhanced .tabs__panel:not(.is-active) { display: none; }
  .cs-story .tabs.is-enhanced .tabs__panel > .media--tab { display: block; width: 100%; }
  .cs-story .tabs__shot { width: 100%; height: auto; }
}
@media (max-width: 700px) {
  .change-col__head { flex-wrap: wrap; row-gap: 2px; }
  .decisions { row-gap: 40px; }
}

/* Below desktop, keep the same id-level guard on the column width. */
@media (max-width: 980px) {
  .cs-story #content { width: min(var(--content-w), 100% - 2 * var(--edge)); margin-inline: auto; }
}

/* Comfortable line length: statements stop at about 70 characters a line,
   while images, diagrams and card grids keep the full column. */
.cs-miivo.cs-story .section .claim.claim,
.cs-miivo.cs-story .feedback > .feedback__lead.feedback__lead,
.cs-miivo.cs-story .impact > .feedback__lead.feedback__lead {
  max-width: 720px;
}

/* Title and body split: a short title on the left, the detail on the right.
   The pair spans the full column, so the body keeps a comfortable line
   length without leaving a gap beside it. Stacks on smaller screens. */
.cs-story .split {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.cs-miivo.cs-story .section .split > .claim.claim { margin: 0; max-width: none; }
.cs-story .split__body {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-muted);
}
@media (max-width: 700px) {
  .cs-story .split { grid-template-columns: 1fr; row-gap: 12px; }
}
/* Context reads as an opening statement, so it keeps the full column. */
.cs-miivo.cs-story #context.section .claim.claim,
.cs-miivo.cs-story #discovery.section > .claim.claim,
.cs-miivo.cs-story #framework.section > .claim.claim,
.cs-miivo.cs-story #process > .claim.claim,
.cs-miivo.cs-story .subsection:has(> .scope--feedback) > .claim.claim,
.cs-miivo.cs-story #expansion.section > .claim.claim,
.cs-miivo.cs-story .showcase > .claim.claim { max-width: none; }


/* Refined screens: the screen sits slightly smaller on the left, and a fine
   line runs from a ringed marker on each change to a small note card beside
   it. On phones the lines step aside and the notes follow as a list. */
.cs-story { --callout: #4F5BD5; }
.cs-story .tabs.is-enhanced .tabs__panel > .media--callouts { display: block; }
.cs-story .callouts { position: relative; }
.cs-story .callouts > .tabs__shot { width: 72%; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05); }
.cs-story .callouts__lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.cs-story .callouts__lines polyline {
  fill: none; stroke: var(--callout); stroke-opacity: .55; stroke-width: 1;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.cs-story .callout__dot {
  position: absolute; left: var(--x); top: var(--y);
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--callout);
  box-shadow: 0 0 0 4px rgba(79, 91, 213, .16);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.cs-story .callouts__list { margin: 0; padding: 0; list-style: none; }
.cs-story .callout {
  position: absolute; top: var(--ly); left: 78%; right: 0;
  transform: translateY(-50%);
  display: grid; gap: 3px;
  padding: 10px 12px;
  background: #fff; border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .04);
}
.cs-story .callout__title { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.cs-story .callout__copy { font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--ink-muted); }
@media (max-width: 700px) {
  .cs-story .callouts > .tabs__shot { width: 100%; }
  .cs-story .callouts__lines,
  .cs-story .callout__dot { display: none; }
  .cs-story .callouts__list { margin-top: 16px; display: grid; gap: 8px; }
  .cs-story .callout { position: static; transform: none; }
  .cs-story .callout__copy { font-size: 13px; }
}

/* Expand on the refined screens: the same dark glass button and spot as the
   videos, opening the whole canvas with its notes. */
.cs-story .media--callouts { position: relative; }
/* Same spot as the walkthrough expand button: top right of the canvas. */
.img-modal { width: min(1400px, calc(100vw - 48px)); }
.img-modal__frame {
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: clamp(20px, 3vw, 44px);
  border-radius: 14px;
  background: var(--card, #F4F4F4);
}
.img-modal .callout__copy { font-size: 14px; }
.img-modal .callout__title { font-size: 15px; }
@media (max-width: 700px) {
  .img-modal { width: calc(100vw - 24px); }
}

/* Refined tiles on their own fill the width as two columns; the new
   capabilities sit as one row of three under the refined screens. */
.change-grid--single { grid-template-columns: 1fr; }
.change-grid--single .change-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.change-row { margin-top: var(--inner); }
.change-row .change-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .change-grid--single .change-tiles,
  .change-row .change-tiles { grid-template-columns: 1fr; }
}

/* Design approach: three points in a row, each under a hairline with a
   small step number. Stacks on phones. */
.cs-story .approach {
  margin: 28px 0 48px; padding: 0; list-style: none; counter-reset: approach;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.cs-story .approach li {
  counter-increment: approach;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, .12);
  font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink);
}
.cs-story .approach li::before {
  content: counter(approach, decimal-leading-zero);
  display: block; margin-bottom: 8px;
  font-family: "Inclusive Sans", system-ui, sans-serif;
  font-size: 13px; font-weight: 500; color: var(--ink-faint);
}
@media (max-width: 700px) {
  .cs-story .approach { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
}

/* Keep the expand icon at its own size inside media canvases, where the
   general ".media svg" rule would otherwise stretch it to fill the button. */
.cs-story .media .vid-expand svg { width: 16px; height: 16px; padding: 0; background: none; border-radius: 0; }