/* ============================================================
   Miivo case study — page-specific additions.

   Scoped to .cs-miivo so nothing here touches the other case
   study, which shares case-study.css. Everything structural,
   typographic and colour-wise still comes from that sheet; this
   only adds the three things it does not cover: a section index
   that works on a phone, playback controls on the demo videos,
   and the before/after comparison.
   ============================================================ */

/* ── Section index on mobile ───────────────────────────── */

/* case-study.css hides the index below 700px because there is no column
   beside the reading to hold it. Miivo keeps it, as a horizontal strip that
   scrolls — the links stay reachable without taking a block of vertical space
   above the title. */
@media (max-width: 700px) {
  .cs-miivo .side {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--page);
    padding-top: 16px;
    box-shadow: inset 0 -1px 0 var(--hairline);
  }
  .cs-miivo .side__nav { gap: 10px; }
  .cs-miivo .side__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 10px;
    margin: 0 calc(var(--edge) * -1);   /* bleed to the screen edges */
    padding-inline: var(--edge);
  }
  .cs-miivo .side__list::-webkit-scrollbar { display: none; }
  .cs-miivo .side__list li { flex: 0 0 auto; }
  .cs-miivo .side__list a { white-space: nowrap; }
}

/* ── Video playback control ────────────────────────────── */

/* The demo videos autoplay muted on screen; this adds a visible, keyboard-
   reachable pause/play so the motion is the viewer's to stop. */
.cs-miivo .showcase__frame { position: relative; }

.vid-ctl {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  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-ctl:hover { background: rgba(0, 0, 0, .74); opacity: 1; }
.vid-ctl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }
.vid-ctl svg { display: block; }
.vid-ctl .ic-pause { display: none; }
.vid-ctl.is-playing .ic-pause { display: block; }
.vid-ctl.is-playing .ic-play { display: none; }

@media (max-width: 700px) {
  .vid-ctl { left: 10px; bottom: 10px; width: 34px; height: 34px; }
}

/* ── Overview brief ────────────────────────────────────── */

/* Product and details on the left, the story of the project down the right
   in three tiles: what was wrong, how it was built, what came of it. */
.ov {
  margin-top: var(--inner);
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Three rows shared by both columns: Product beside Problem, and Details
     spanning the two below beside Phases and Outcome, so every edge lines up
     with one across from it. Each row is sized to its content, not to the
     tallest row, so no tile carries space it does not need. */
  grid-template-rows: auto auto auto;
  gap: 12px;
}
.ov__tile {
  background: var(--card);
  border-radius: 12px;
  padding: clamp(20px, 2.4vw, 32px);
}
.ov__product { grid-column: 1; grid-row: 1; }
.ov__details { grid-column: 1; grid-row: 2 / 4; }
.ov__block   { grid-column: 2; }

.ov__head {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--ink);
}
.ov__copy {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}

/* Label first, the value under it, a hairline between rows. */
.ov__rows { margin: 4px 0 0; }
.ov__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 0;
}
.ov__row + .ov__row { box-shadow: inset 0 1px 0 var(--hairline); }
.ov__row:last-child { padding-bottom: 0; }
.ov__row dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.ov__row dt {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-faint);
}

/* The right column's wrapper steps aside so its three tiles sit on the
   shared grid directly. */
.ov__story { display: contents; }

.nowrap { white-space: nowrap; }

@media (max-width: 700px) {
  .ov { grid-template-columns: 1fr; grid-template-rows: none; gap: 8px; }
  .ov__product,
  .ov__details,
  .ov__block { grid-column: 1; grid-row: auto; }
  .ov__copy, .ov__row dd { font-size: 14px; }
}

/* ── Pointers ──────────────────────────────────────────── */

/* Supporting facts side by side in two columns, as .duo sets them, each
   numbered above its first line. */
.points {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: point;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.points li {
  counter-increment: point;
  font-size: 15px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}
.points li::before {
  content: counter(point);
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

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

/* ── Small labels ──────────────────────────────────────── */

/* The uppercase label set over groups and columns across the page. */
.changes__label {
  font-family: var(--eyebrow-face);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* ── Reflection cards ──────────────────────────────────── */

/* The takeaways as the same grey tiles the overview uses, two to a row. */
.reflect {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px) {
  .reflect { grid-template-columns: 1fr; gap: 8px; }
}

/* The poster sits behind each demo video (set from its poster attribute by
   the page script), so if the browser drops the decoded frame the still shows
   through instead of an empty grey box. Sized the way the video itself is. */
.cs-miivo .showcase__shot {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cs-miivo .showcase__shot--trim { background-size: cover; }

/* A part of a section with its own label and heading, set apart from what
   comes before it by the same space that separates sections. */
.subsection { margin-top: var(--block); }

/* ── Prototype feedback ────────────────────────────────── */

/* What six owners said about the early prototype: a lead sentence, then what
   they liked and what they questioned, four to a row, each marked so the two
   groups read apart at a glance. */
.feedback { margin-top: var(--block); }
.feedback__lead {
  max-width: 40em;
  margin-top: 14px;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.35;
  color: var(--ink);
}
.feedback__group { margin-top: 36px; }
.feedback__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.feedback__list li {
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--hairline);
  font-size: 15px;
  font-weight: 500;
  line-height: 165%;
  color: var(--ink-muted);
}
/* Each point carries an icon for what it is about, in a small tinted badge:
   green for what owners liked, amber for what they questioned. */
.feedback__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 9px;
}
.feedback__icon svg { display: block; }
.feedback__list--liked .feedback__icon { background: rgba(47, 107, 79, .1); color: #2F6B4F; }
.feedback__list--questioned .feedback__icon { background: rgba(154, 123, 79, .13); color: #8A6A3E; }

@media (max-width: 900px) {
  .feedback__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .feedback__list { grid-template-columns: 1fr; gap: 16px; }
  .feedback__list li { font-size: 14px; }
}

/* ── Context ───────────────────────────────────────────── */

/* What owners faced, then the founders' reading of it: both left-aligned at
   the full column width, one under the other. */
.context__block--offset { margin-top: 56px; }
@media (max-width: 700px) {
  .context__block--offset { margin-top: 36px; }
}

/* ── Product possibilities ─────────────────────────────── */

/* Four possibilities read left to right: what the product could do, what
   that gives the owner, and why it was worth it for the business. The user
   value sits in a grey tile as the middle of the argument. */
.offer { margin-top: var(--block); }

.offer__head,
.offer__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}
/* Column heads set as the page's other small labels (.changes__label). */
.offer__head {
  margin-top: 36px;
  font-family: var(--eyebrow-face);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.offer__rows { margin: 12px 0 0; padding: 0; list-style: none; }
.offer__row { padding: 18px 0; }
.offer__row + .offer__row { box-shadow: inset 0 1px 0 var(--hairline); }

.offer__possibility {
  font-size: 16px;
  font-weight: 500;
  line-height: 155%;
  color: var(--ink);
}
.offer__value {
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--card);
  font-size: 15px;
  font-weight: 500;
  line-height: 160%;
  color: var(--ink);
}
.offer__rationale {
  font-size: 15px;
  font-weight: 500;
  line-height: 160%;
  color: var(--ink-muted);
}
.offer__arrow { display: flex; justify-content: center; color: var(--ink-faint); }
/* Hidden on desktop, where the column heads say the same, but still read
   out with each cell so the rows make sense without the grid. */
.offer__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .offer__head { display: none; }
  .offer__row {
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 20px 0;
  }
  .offer__arrow { display: none; }
  .offer__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: block;
    margin-bottom: 4px;
    font-family: var(--eyebrow-face);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
}

/* ── Product scope ─────────────────────────────────────── */

/* The three parts of the first scope side by side, kept brief: what the
   owner needed, and the part of the product that answered it. */
.scope {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
/* Each part in its own grey box, the same tile as the overview. */
.scope li {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 12px;
  background: var(--card);
}
.scope__title {
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--ink);
}
.scope__copy {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}
@media (max-width: 700px) {
  .scope { grid-template-columns: 1fr; gap: 8px; }
  .scope__copy { font-size: 14px; }
}

/* ── Design process ────────────────────────────────────── */

/* Three steps in order: numbered, joined by a line, so the process reads as
   a sequence rather than another row of equal columns. */
.steps {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.steps li {
  position: relative;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--page);
  font-size: 13px;
  font-weight: 600;
}
/* The connector: from each number to the next. */
.steps li + li::after {
  content: "";
  position: absolute;
  top: 15px;
  right: calc(100% - 0px);
  width: calc(100% + 32px - 30px);
  height: 1px;
  background: var(--hairline);
}
.steps__title {
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--ink);
}
.steps__copy {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}

/* What the design leaned on: two grey cards, the same tile as the overview. */
.refs { margin-top: 48px; }
.refs__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 12px;
}
/* The Shopify mark on its own square tile, leading the row. */
.refs__card--mark {
  display: flex;
  align-items: center;
  justify-content: center;
  /* As tall as the text cards beside it, and as wide as it is tall. The
     row height is set by the page script once the cards have laid out. */
  width: var(--mark-size, 172px);
  min-height: var(--mark-size, 172px);
  padding: 0;
}
.refs__card {
  background: var(--card);
  border-radius: 12px;
  padding: clamp(20px, 2.4vw, 28px);
}
.refs__name {
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.refs__copy {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}

@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .steps li + li::after { display: none; }
  .refs__grid { grid-template-columns: 1fr; gap: 8px; }
  .refs__card--mark { width: 96px; }
}

/* ── Heading style ─────────────────────────────────────── */

/* One heading style for everything below the overview, taken from the
   overview tiles' titles (.ov__head): section titles, sub-section titles,
   the feedback lead, and the titles on columns, cards and design flows. */
.cs-miivo .section:not(#overview) .claim,
.cs-miivo .feedback__lead,
.cs-miivo .scope__title,
.cs-miivo .steps__title,
.cs-miivo .refs__name,
.cs-miivo .showcase__title {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--ink);
}

/* ── Sprint hypotheses ─────────────────────────────────── */

/* What the sprint set out to test, four short lines across the card, each
   under a hairline like the prototype feedback below it. */
.hypo__label { margin-top: 28px; }
.hypo {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.hypo li {
  padding-top: 14px;
  box-shadow: inset 0 1px 0 var(--hairline);
  font-size: 15px;
  font-weight: 500;
  line-height: 160%;
  color: var(--ink);
}
@media (max-width: 900px) {
  .hypo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .hypo { grid-template-columns: 1fr; gap: 14px; }
  .hypo li { font-size: 14px; }
}

/* ── Framework tabs ────────────────────────────────────── */

/* The three first screens, one at a time at the full column width. All the
   panels share one grid cell, so the frame holds the tallest screen's height
   and switching does not move the page. */
.tabs { margin-top: var(--inner); }
.tabs__list {
  display: flex;
  gap: 6px;
  padding: 4px;
  width: fit-content;
  border-radius: 10px;
  background: var(--card);
}
.tabs__tab {
  padding: 8px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab[aria-selected="true"] {
  background: var(--page);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.tabs__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.tabs__panels { margin-top: 20px; display: grid; }
.tabs__panel { margin: 0; grid-area: 1 / 1; }
.tabs.is-enhanced .tabs__panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s .3s;
}
.tabs.is-enhanced .tabs__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease);
}
/* No script: the list cannot switch, so it steps aside and every screen
   shows in turn. */
.tabs:not(.is-enhanced) .tabs__list { display: none; }
.tabs:not(.is-enhanced) .tabs__panels { gap: 40px; }
.tabs:not(.is-enhanced) .tabs__panel { grid-area: auto; }

.tabs__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.tabs__caption {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 165%;
  color: var(--ink-muted);
}
@media (max-width: 700px) {
  .tabs__list { width: auto; }
  .tabs__tab { flex: 1; padding: 8px 6px; font-size: 13px; }
  .tabs__caption { font-size: 14px; }
}


/* ── Scope expansion ───────────────────────────────────── */

/* Where the bigger scope came from, one row per source: a label on the left,
   what it contributed on the right. */
.expand { margin: 36px 0 0; }
.expand__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px;
  padding: 20px 0;
  box-shadow: inset 0 1px 0 var(--hairline);
}
.expand__row:last-child { box-shadow: inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline); }
/* The label is set at the text's own size and line height, one weight up,
   so it sits on the same baseline as the first line beside it. */
.expand dt {
  font-size: 16px;
  font-weight: 600;
  line-height: 165%;
  color: var(--ink);
}
.expand dd {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 165%;
  color: var(--ink);
}
/* A row still waiting on real copy: marked so it cannot ship unnoticed. */
.expand__draft {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(199, 154, 61, .16);
  color: #8A5E0E;
}
@media (max-width: 700px) {
  .expand__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .expand dt, .expand dd { font-size: 14px; }
}

/* ── Responses to the initial product ──────────────────── */

/* What people said about the first version, in two groups, each point
   ending in the part of the expanded product it led to. */
.response__group { margin-top: 36px; }
.response__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.response__list li {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--hairline);
}
.response__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 165%;
  color: var(--ink);
}
.response__led {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
}
.response__led span[aria-hidden] { margin-right: 4px; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Draft marker: the section is placeholder copy, so it cannot go live
   unnoticed. Remove the class and the note once the real copy is in. */
.response.is-draft {
  position: relative;
  padding: 20px;
  margin-left: -20px;
  margin-right: -20px;
  border-radius: 12px;
  outline: 1.5px dashed #C79A3D;
}
.response__draft {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9A6B12;
}
.response:not(.is-draft) .response__draft { display: none; }

@media (max-width: 700px) {
  .response__list { grid-template-columns: 1fr; gap: 16px; }
  .response.is-draft { margin-left: 0; margin-right: 0; padding: 14px; }
}