/* ============================================================
   FACTOR+ V6 — THE ARTICLE, AFTER APPLE'S PRODUCT PAGES

   Loaded last, on this page only. Rules target the article, local nav and
   prev/next band, plus the hero's metric context and the film's closing gap.

   What is borrowed from apple.com/apple-watch-series-12, and nothing else:

     1. A local nav: the name and the chapters, pinned once you are past
        the film, with the current chapter marked.
     2. The section rhythm: eyebrow, a big tight headline, copy in one
        measure with the phrases that carry it picked out, then large media.
        Generous padding between sections instead of a rule or a numeral.
     3. One oversized number with small labels. The chart's own head value,
        moved up under the results heading, is the payoff.
     4. Grounds that change with the section: the dark band, the page, one
        inset panel on a lifted ground, the page again.
     5. Numbered footnotes collected at the end.

   The type, colour and radius all come from the site's own tokens; the
   accent stays on numerals (the negative result) and nowhere else.
   ============================================================ */

/* ---- this article's measures ---- */
.cs-body {
  --v6-text: 700px;                          /* reading measure */
  --v6-mid: 1000px;                          /* the chart, the notes */
  --v6-wide: 1200px;                         /* stages, tiles, the panel */
  --v6-pad: var(--wrap-gutter, 24px);        /* side gutter inside a chapter */
  --v6-radius: clamp(20px, 2.2vw, 32px);     /* Apple's tiles run 28px at 1440 */
  --v6-radius-sm: clamp(12px, 1.1vw, 18px);
  --v6-space: clamp(88px, 10vw, 168px);      /* between sections; Apple uses 144 */
  --v6-fig-gap: clamp(56px, 6.5vw, 104px);   /* copy to media */

  /* the chapters now carry their own width, so the article is full width */
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ============================================================
   CHAPTERS: ONE COLUMN ON A BREAKOUT GRID

   The newspaper columns go. Each chapter is a grid of named tracks, so a
   child sits on the reading measure by default and a figure opts out to
   `wide` or `full` without negative margins or --cs-bleed. The side tracks
   never drop below the gutter, so nothing can reach the window edge.
   ============================================================ */
.cs-body .pv-chapter {
  columns: auto;
  /* styles-sidebar.css gives every chapter a 64px column-gap for its old
     newspaper columns, and a grid honours column-gap too: four of them took
     256px out of the tracks, which at 390px left a text column of 86px */
  gap: 0;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--v6-pad), 1fr)
    [wide-start] minmax(0, calc((var(--v6-wide) - var(--v6-text)) / 2))
    [text-start] min(var(--v6-text), 100% - 2 * var(--v6-pad)) [text-end]
    minmax(0, calc((var(--v6-wide) - var(--v6-text)) / 2)) [wide-end]
    minmax(var(--v6-pad), 1fr) [full-end];
  margin: 0;
  padding-block: var(--v6-space);
  /* anchor jumps from the local nav land below it */
  scroll-margin-top: 52px;
}

.cs-body .pv-chapter > * {
  grid-column: text;
  min-width: 0;
}

/* band.css spaces the chapter after the band with a quarter of the old
   300px gap; the section rhythm replaces it */
.cs-body .pv-chapter.is-banded + .pv-chapter { padding-top: var(--v6-space); }
.cs-body .pv-chapter.is-banded { padding-block: var(--v6-space); }

/* ---- the opener: eyebrow + headline ---- */
.cs-body .v6-head {
  grid-column: wide;
  margin: 0 0 clamp(36px, 4.4vw, 64px);
  text-align: center;
}

/* .v6-head in the selector: `.cs-body .pv-chapter p` (styles-sidebar.css)
   is (0,2,1) and sets every chapter paragraph flush left */
.cs-body .v6-head .v6-eyebrow {
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  text-align: center;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--text-muted);
}

/* Apple sets its section headlines at the size of its hero headline and
   tracks them in; the display serif gets the same treatment. 12em is
   measured, not guessed: it is just wider than the longest sentence in any
   heading (11.7em), so every one breaks into two balanced lines on a wide
   screen, and the two-sentence heading breaks between its sentences. */
.cs-body .v6-head h2 {
  max-width: 12em;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.024em;
  text-align: center;
  text-wrap: balance;
  color: var(--text-primary);
}

/* the Strategy heading is two sentences; each keeps a line of its own, so
   a narrow screen breaks inside a sentence and never across the full stop */
.cs-body .v6-head .v6-line { display: block; }

.cs-body .v6-head .cs-boxed { border-width: 0.03em; padding: 0 0.14em 0.02em; }

/* ---- the copy ----
   Apple's copy is grey with the phrases that carry it in full ink, so a
   reader who only skims still gets the argument. Same device here with the
   site's two text inks: --text-muted for the run, --text-primary for the
   emphasis. Both clear 4.5:1 on every ground this page uses. */
.cs-body .v6-copy p {
  margin: 0 0 1.05em;
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.34vw, 21px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.004em;
  text-align: left;
  text-wrap: pretty;
  color: var(--text-muted);
}

.cs-body .v6-copy p:last-child { margin-bottom: 0; }

.cs-body .v6-copy strong {
  font-weight: 600;
  color: var(--text-primary);
}

.cs-body .v6-decisions {
  margin: 0;
  padding-left: 1.25em;
  list-style: disc;
  color: var(--text-muted);
}

.cs-body .v6-decisions > li { padding-left: 0.3em; }
.cs-body .v6-decisions > li + li { margin-top: 1.05em; }

.cs-hero-info .v6-result-context {
  max-width: none;
  margin: 16px 0 0;
}

.cs-hero-info .v6-result-context a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---- footnote markers ---- */
.cs-body .v6-fn {
  font-size: 0.6em;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.08em;
}

.cs-body .v6-fn a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.cs-body .v6-fn a:hover { color: var(--text-hover); }

/* ============================================================
   FIGURES

   Every figure leaves the reading measure for the wide track. The scroll
   layer's clip reveal and fade (styles-sidebar.css, behind .cs-fx) are
   switched off here: the page does not wait on an observer to show a figure,
   and a figure is never faded. The parallax drift goes with them, because it
   slid each plate up to 20px over its own caption.
   ============================================================ */
/* Top margins only: grid items' margins do not collapse, so a bottom margin
   on every figure doubled the gap between Figs. 02 and 03 to 186px. The
   copy that follows a figure takes the gap instead. */
.cs-body .pv-chapter > .pv-fig {
  grid-column: wide;
  width: auto;
  margin: var(--v6-fig-gap) 0 0;
}

.cs-body .pv-chapter > .pv-fig + .v6-copy { margin-top: var(--v6-fig-gap); }

.cs-fx .cs-body .pv-chapter .pv-fig,
.cs-fx .cs-body .pv-chapter .pv-fig.is-inview {
  clip-path: none;
  opacity: 1;
  transition: none;
}

.cs-fx .cs-body .pv-chapter .pv-fig > :first-child { transform: none; }

.cs-fx .cs-body .pv-chapter .pv-fig img,
.cs-fx .cs-body .pv-chapter .pv-fig video { transform: none; transition: none; }

/* captions: centred under the media, the number set inline as a label */
.cs-body .pv-chapter .pv-fig-cap {
  max-width: 62ch;
  margin: 20px auto 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
  color: var(--text-muted);
}

.cs-body .pv-chapter .pv-fig-cap .pv-fig-num {
  display: inline;
  margin: 0 0.6em 0 0;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* ---- Fig. 01: the hub, on a stage ----
   A web capture sized to be read: on a surface panel the width of the other
   stages, at up to 880px, which is its own 2x size. */
.cs-body .v6-stage .pv-shot.is-real.is-device {
  padding: clamp(28px, 6vw, 96px) clamp(14px, 5vw, 80px);
  border-radius: var(--v6-radius);
  background: var(--surface);
}

.cs-body .v6-stage .pv-shot.is-real.is-device img {
  width: min(100%, 880px);
  border-radius: var(--v6-radius-sm);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 40px 80px -40px rgba(0, 0, 0, 0.5);
}

/* ---- Fig. 02: joining, the closer look ----
   The owner's player, kept: the same blurred card, the clip on the left and
   the three beats on the right, lit in time by demo.js. What changes is
   scale and finish. The card takes the stage width and a larger phone, the
   beats hang off a rail whose lit segment fills as the beat plays (article.js
   writes --v6-p), and a play/pause glyph sits where Apple puts one on every
   looping film. */
.cs-body .cs-demo .cs-demo-card {
  grid-template-columns: minmax(0, 360px) minmax(0, 400px);
  justify-content: center;
  gap: clamp(36px, 7vw, 120px);
  /* the bottom never drops below 76px: the glyph hangs 54px under the
     phone and the card clips at its edge (measured clipped at 768) */
  padding: clamp(40px, 6vw, 96px) clamp(28px, 5vw, 80px) max(clamp(40px, 6vw, 96px), 76px);
  border-radius: var(--v6-radius);
}

.cs-body .cs-demo .cs-demo-shot video { border-radius: 16px; }

.cs-body .cs-demo-steps { gap: 6px; }

.cs-body .cs-demo-steps li {
  position: relative;
  grid-template-columns: 2.1em minmax(0, 1fr);
  column-gap: 10px;
  padding: 16px 0 16px 22px;
}

/* the rail: a quiet track per beat, and the lit fill over it */
.cs-body .cs-demo-steps li::before,
.cs-body .cs-demo-steps li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
}

.cs-body .cs-demo-steps li::before { background: rgba(255, 255, 255, 0.22); }

.cs-body .cs-demo-steps li::after {
  background: #fff;
  transform: scaleY(0);
  transform-origin: top;
}

.cs-body .cs-demo-steps li.is-on::after { transform: scaleY(var(--v6-p, 1)); }

.cs-body .cs-demo-n {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.62);
}

.cs-body .cs-demo-steps .cs-trio-label { font-size: 18px; margin-bottom: 6px; }
.cs-body .cs-demo-steps .cs-trio-line { font-size: 15px; line-height: 1.5; max-width: 32ch; }

/* the glyph, under the phone's right edge where Apple hangs one off every
   looping film. State only, from demo.js's .is-synced (set while the clip
   plays); the card's bottom padding is what it sits in. */
.cs-body .v6-demo-toggle {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: background 0.2s ease;
}

.cs-body .v6-demo-toggle:hover { background: rgba(255, 255, 255, 0.26); }
.cs-body .v6-demo-toggle svg { grid-area: 1 / 1; display: block; }
.cs-body .v6-demo-toggle .v6-i-pause { display: none; }
.cs-body .cs-demo.is-synced .v6-demo-toggle .v6-i-pause { display: block; }
.cs-body .cs-demo.is-synced .v6-demo-toggle .v6-i-play { display: none; }

/* ---- Fig. 03: leaving, three tiles ---- */
.cs-body .cs-trio-row { gap: clamp(12px, 1.6vw, 24px); }

.cs-body .cs-trio-cell {
  padding: 10% 9% 9%;
  border-radius: var(--v6-radius);
}

.cs-body .cs-trio-label { font-size: 16px; }
.cs-body .cs-trio-line { font-size: 14px; }

/* ---- Fig. 04: the result, as one big number ----
   The chart's own head, re-set as Apple sets a spec: a small label, the
   figure at display size, a small line under it. The positive result in
   full ink, the negative one in the page's single accent, as the bar is. */
.cs-body .pv-chapter > .cs-chart {
  justify-self: center;
  width: min(100%, var(--v6-mid));
  margin-top: 0;
}

.cs-body .pv-chapter > .v6-copy + .cs-chart { margin-top: var(--v6-fig-gap); }

.cs-body .cs-bands .cl-panel {
  padding: clamp(24px, 4.6vw, 64px) clamp(20px, 4.6vw, 64px) clamp(28px, 4vw, 56px);
  border: 0;
  border-radius: var(--v6-radius);
  background: var(--surface);
}

.cs-body .cs-chart .cl-head { margin-bottom: clamp(28px, 3.6vw, 48px); }

.cs-body .cs-chart .cl-label {
  margin: 0 0 clamp(8px, 1vw, 14px);
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
}

.cs-body .cs-chart .cl-value {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(46px, 8.2vw, 124px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* on a phone the figure breaks after +12.6%, and the arrow travels with
   the number it points at */
.cs-body .cs-chart .v6-pos,
.cs-body .cs-chart .v6-to { white-space: nowrap; }
.cs-body .cs-chart .v6-neg { color: var(--accent); }

.cs-body .cs-chart .v6-arrow {
  display: inline-block;
  margin: 0 0.06em;
  font-weight: 400;
  color: var(--text-muted);
}

.cs-body .cs-chart .cl-value .v6-fn {
  font-size: 0.24em;
  vertical-align: 2.6em;
  color: var(--text-muted);
}

.cs-body .cs-chart .cl-sub {
  max-width: 60ch;
  margin: clamp(12px, 1.4vw, 20px) 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

.cs-body .cs-bars { gap: 12px; }

.cs-body .cs-bar {
  grid-template-columns: 5em minmax(0, 1fr) 4.4em 7.6em;
  column-gap: 16px;
  font-size: 15px;
}

.cs-body .cs-bar-track { height: 26px; }
.cs-body .cs-bar-fill { border-radius: 6px; }
.cs-body .cs-bar-track::before { top: -6px; bottom: -6px; }

/* The accent stays on the negative bar and on the big figure above it.
   The row's small labels go to full ink: on the filled panel the accent
   measures 4.15:1 in dark and 4.31:1 in light, under AA for 15px text.
   Full ink still sets the row apart from the muted ones either side. */
.cs-body .cs-bar.is-neg .cs-bar-v,
.cs-body .cs-bar.is-neg .cs-bar-tag { color: var(--text-primary); }
.cs-body .cs-bar.is-neg .cs-bar-tag { font-weight: 600; }

/* ============================================================
   THE EXPERIMENT CHAPTER, AS AN INSET PANEL

   Apple's page drops one rounded panel onto the ground for the module it
   most wants read as a unit. Here that is the test design: two paragraphs,
   side by side on a wide screen, split where the owner split them.
   ============================================================ */
.cs-body .pv-chapter.v6-panel {
  --v6-pad: clamp(24px, 5vw, 72px);
  width: min(100% - 2 * var(--wrap-gutter, 24px), var(--v6-wide));
  margin-inline: auto;
  padding-block: clamp(64px, 8vw, 128px);
  border-radius: var(--v6-radius);
  background: var(--bg-band);
}

.cs-body .v6-panel .v6-head { margin-bottom: clamp(32px, 4vw, 56px); }

@media (min-width: 1000px) {
  .cs-body .v6-panel .v6-two {
    grid-column: wide;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 88px);
    width: min(100%, var(--v6-mid));
  }
  .cs-body .v6-panel .v6-two p { margin: 0; }
}

/* ============================================================
   NOTES
   ============================================================ */
.cs-body .v6-notes {
  width: min(100% - 2 * var(--wrap-gutter, 24px), var(--v6-mid));
  margin: 0 auto;
  padding: 28px 0 clamp(72px, 8vw, 128px);
  border-top: 1px solid var(--rule-soft);
}

.cs-body .v6-notes ol {
  margin: 0;
  padding: 0 0 0 1.25em;
}

.cs-body .v6-notes li {
  max-width: 100ch;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  scroll-margin-top: 96px;
}

/* following a marker lands here; the note comes up to full ink */
.cs-body .v6-notes li:target { color: var(--text-primary); }

/* the last chapter hands straight to the notes */
.cs-body #pv-ch3 { padding-bottom: clamp(64px, 7vw, 112px); }

/* ============================================================
   PREV / NEXT, AS TWO TILES

   The shared band (styles.css) runs edge to edge in near-black. Here it
   takes the shape the rest of the page now uses, two rounded tiles inset
   on the ground, the way Apple ends a page on the next thing to look at.
   Covers, scrims, type and hover are the shared component's, untouched.
   isolation keeps the rounded clip in Safari while the cover scales.
   ============================================================ */
.cs-next {
  width: min(100% - 2 * var(--wrap-gutter, 24px), 1200px);
  margin: 0 auto;
  padding-bottom: clamp(72px, 8vw, 128px);
  gap: clamp(12px, 1.6vw, 24px);
  background: none;
  border-bottom: 0;
}

.cs-next-item {
  min-height: clamp(260px, 32svh, 400px);
  border-radius: clamp(20px, 2.2vw, 32px);
  background: #0a0a08;
  isolation: isolate;
}

.cs-next-item + .cs-next-item { border-left: 0; }

@media (max-width: 700px) {
  .cs-next-item + .cs-next-item { border-top: 0; }
  .cs-next-item { min-height: 220px; }
}

/* ============================================================
   THE LOCAL NAV
   Fixed at the top, above the page and below the site nav. Hidden (off the
   top, out of the tab order) until article.js adds .is-on. While the site nav is
   showing, it rides one site-nav height lower, on the same curve.
   `visibility: inherit` rather than `visible` when on: while the page is
   locked, <main> is visibility: hidden and this must stay hidden with it.
   ============================================================ */
.v6-lnav {
  --v6-lnav-h: 52px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--v6-lnav-h);
  color: var(--text-primary);
  background: var(--bg-cream);
  background: color-mix(in srgb, var(--bg-cream) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--rule-soft);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.v6-lnav.is-on {
  transform: translateY(0);
  visibility: inherit;
  transition: transform 0.3s ease, visibility 0s;
}

.nav:not(.hidden-bar) ~ main .v6-lnav.is-on { transform: translateY(var(--v6-site-nav, 101px)); }

/* over the dark band, in either theme, the bar goes dark with it */
.v6-lnav.is-dark {
  --text-primary: #f7f4f0;
  --text-body: #ded7cd;
  --text-muted: #cac2b6;
  --text-hover: #ffffff;
  --rule-soft: rgba(255, 255, 255, 0.12);
  background: rgba(18, 10, 7, 0.9);
  background: color-mix(in srgb, #120a07 78%, transparent);
}

.v6-lnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  padding: 0 var(--wrap-gutter, 24px);
}

.v6-lnav-title {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-primary);
  text-decoration: none;
}

.v6-lnav-list {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.2vw, 32px);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v6-lnav-list a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  /* body ink, not muted: the bar is translucent, and over a white capture
     muted ink fell to about 2.4:1. Apple marks the current item the same way,
     by the rule under it rather than by dimming the others. */
  color: var(--text-body);
  text-decoration: none;
  transition: color 0.2s ease;
}

.v6-lnav-list a:hover { color: var(--text-hover); }

.v6-lnav-list a[aria-current="true"] { color: var(--text-primary); }

/* the current chapter, underlined along the bar's bottom edge */
.v6-lnav-list a[aria-current="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: currentColor;
}

/* focus: a rounded ring around the word, in place of the site's outline,
   which on a full-height link drew a 52px box pressed against the text */
.v6-lnav-title { position: relative; }
.v6-lnav a:focus-visible { outline: none; }
.v6-lnav a:focus-visible::before {
  content: '';
  position: absolute;
  inset: 11px -9px;
  border: 2px solid var(--text-primary);
  border-radius: 8px;
  pointer-events: none;
}
.v6-lnav .v6-lnav-title:focus-visible::before { inset: -8px -10px; }

/* ============================================================
   FUN MODE: TWO TOKENS PUT BACK

   fun-v2/cs-serious.css restores the serious palette under the intro, but
   two of its copies have gone stale against styles.css: --text-muted is the
   old #756e64 (styles.css moved to #6b6459 for AA on --bg-band), and the
   dark block never restates --accent, so it stays #c73e1d where serious dark
   mode lifts it to #e05a34. Measured: those were the only differences
   between the two modes on this page. This page's copy runs in
   --text-muted, so they are put back here for the article, the local nav
   and prev/next (never the film above). :where() keeps these at zero
   specificity, level with cs-serious.css and ahead of it by order, so the
   band's own tokens and the nav's dark state still win inside them. The
   shared fix belongs in cs-serious.css; see the report.
   ============================================================ */
:where(html.fun-mode body[data-case-study] main > :is(.cs-body, .v6-lnav, .cs-next)) {
  --text-muted: #6b6459;
}

:where(html.fun-mode.dark-mode body[data-case-study]:not(.theme-locked) main > :is(.cs-body, .v6-lnav, .cs-next)) {
  --text-muted: #90918b;
  --accent: #e05a34;
}

/* ============================================================
   NARROWER SCREENS
   ============================================================ */
@media (max-width: 760px) {
  .cs-body { --v6-fig-gap: 48px; }

  /* Fig. 02: stacked, as figures.css already has it, with the rail kept */
  .cs-body .cs-demo .cs-demo-card {
    grid-template-columns: 1fr;
    gap: 68px;               /* room for the glyph between phone and beats */
    padding: 36px 20px 32px;
  }

  /* Fig. 03: three phones stacked is two and a half screens of scrolling.
     They swipe instead, one full tile and the edge of the next in view. */
  .cs-body .pv-chapter > .cs-trio { grid-column: full; }
  .cs-body .cs-trio-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 300px);
    width: auto;
    margin: 0;
    padding: 0 var(--v6-pad) 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--v6-pad);
    scrollbar-width: none;
  }
  .cs-body .cs-trio-row::-webkit-scrollbar { display: none; }
  .cs-body .cs-trio-cell { scroll-snap-align: start; }
  .cs-body .cs-trio .pv-fig-cap { margin-top: 0; padding: 0 var(--v6-pad); }

  .cs-body .pv-chapter.v6-panel {
    --v6-pad: 20px;
    width: calc(100% - 16px);
  }

  .v6-lnav { --v6-lnav-h: 44px; }
}

@media (max-width: 620px) {
  .cs-body .cs-bar {
    grid-template-columns: 6.4em minmax(0, 1fr) 3.9em;
    column-gap: 10px;
    font-size: 13px;
  }
  .cs-body .cs-bar-track { height: 22px; }
}

/* the title makes room for the four chapters on a phone */
@media (max-width: 560px) {
  .v6-lnav-title { display: none; }
  .v6-lnav-list {
    flex: 1;
    justify-content: space-between;
    gap: 8px;
  }
  .v6-lnav-list a { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .v6-lnav,
  .v6-lnav.is-on,
  .v6-lnav-list a { transition: none; }
  .cs-body .v6-demo-toggle { transition: none; }
}

/* ============================================================
   THE FILM, ON ITS OWN

   The one rule set in this file that reaches .cs-context. The explainer
   under the film is gone at the owner's request ("less is more"), so the
   panel now closes just under the film. Its bottom padding is the film's
   side gutter, and that makes the corners nest: the panel's radius
   (2vw) is the film's radius (1.1vw) plus that gutter (0.9vw), the same
   clamps styles-sidebar.css already uses, so the two curves share a centre
   at every width.
   ============================================================ */
.cs-context.is-wide { padding-bottom: clamp(8px, 0.9vw, 16px); }
.cs-context.is-wide .cs-context-film { margin-bottom: 0; }

/* two standfirst paragraphs in the hero get a beat between them */
.cs-hero .pv-standfirst + .pv-standfirst { margin-top: 0.75em; }

/* ============================================================
   THE MOBILE PASS, SEPTEMBER 2026: ONE TYPE SYSTEM FOR BOTH CASE STUDIES

   Everything here is under 1024px, so no desktop width can change.
   raf/mobile.css carries the same block with the same values: the two
   pages share a hero and are read as a pair, so a role keeps its size,
   weight, line-height and colour from one to the other. /raf is the
   reference for the body roles, and this page moves to it:

     chapter heading   36/1.04/-0.024em  ->  32/1.14/-0.01em. RAF's heading,
                       and it puts the chapters back under the 34px title.
     body copy         --text-muted, 1.6  ->  --text-body, 1.7, RAF's 16px
                       between paragraphs. The grey run was Apple's device
                       for picking phrases out in full ink; the markup never
                       carried any, so it read as dim copy, and TYPE-SYSTEM.md
                       gives body copy --text-body.
     heading to copy   36px (32 in the panel)  ->  RAF's 30.
     captions          1.55  ->  1.6.

   GREY IS NEVER BOLD; BOLD IS ALWAYS FULL INK. A label set semibold in
   --text-muted loses the weight and keeps the grey, because a label in full
   ink would outrank the value it names. Small type on photography (the demo
   card, the prev/next covers) goes to full ink and keeps the weight instead,
   since thin grey stops reading over an image. The footnote markers are
   links, and links at rest are full ink.
   ============================================================ */
@media (max-width: 760px) {
  /* the hero's label voice: kicker, stat labels, spec labels */
  .cs-hero-info .pv-kicker,
  .cs-hero-info .pv-result-label,
  .cs-hero-info .pv-meta dt { font-weight: 400; }

  /* A 2x2 grid holding three numbers leaves a hole at the bottom right and
     wraps the longest label to four lines. The third takes the row, as it
     already does on /raf (raf/mobile.css). */
  .cs-hero-info .pv-results.is-three > :last-child { grid-column: 1 / -1; }

  .cs-body .v6-head,
  .cs-body .v6-panel .v6-head { margin-bottom: 30px; }

  .cs-body .v6-head .v6-eyebrow { font-weight: 400; }

  .cs-body .v6-head h2 {
    font-size: 32px;
    line-height: 1.14;
    letter-spacing: -0.01em;
  }

  .cs-body .v6-copy p {
    margin-bottom: 16px;
    line-height: 1.7;
    letter-spacing: normal;
    color: var(--text-body);
  }

  .cs-body .pv-chapter .pv-fig-cap { line-height: 1.6; }
  .cs-body .pv-chapter .pv-fig-cap .pv-fig-num { line-height: inherit; }

  .cs-body .cs-chart .cl-label { font-weight: 400; }

  .cs-body .cs-demo-n { color: #fff; }
  .cs-next-kicker { color: #fff; }

  .cs-body .v6-fn a { color: var(--text-primary); }

  /* The note hung its number in 20px of list padding: the hairline started
     at 24, the text at 44, and the number floated between them, so neither
     was on the column. Number and text now start on the rule's edge. */
  .cs-body .v6-notes ol {
    padding-left: 0;
    list-style-position: inside;
  }
}

/* THE SPEC SHEET, one column where styles-sidebar.css made it two (700px).
   The same repair as raf/mobile.css, where the reasoning is written out:
   the hero's later rules pushed each value to the foot of its cell and set
   a wrapped value flush right, and the values do not fit two columns (three
   of six wrapped at every width from 360 to 430, and "Product · Engineering
   · Data · Finance · Brand" started a line with "·"). In one column none
   wraps. `balance` is for fun mode's 18px values. */
@media (max-width: 700px) {
  .cs-hero-info .pv-meta { grid-template-columns: minmax(0, 1fr); }

  .cs-hero-info .pv-meta > div {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 0;
  }

  .cs-hero-info .pv-meta dd { text-align: left; text-wrap: balance; }
}