/* ============================================================
   Case-study layout (v2): shared by every page whose <body> has class "cs-v2"
   (case-study-lppi.html, ultimate-guitar.html). Load after styles.css.

   Site-wide pieces stay in styles.css: the lightbox, the mobile section bar
   (and its 920px breakpoint), and the "being redesigned" note for pages that
   haven't moved to this layout yet.
   ============================================================ */

.cs-v2 { --cs-measure: 620px; }   /* reading width for body text */


/* ---------- Labels ----------
   one style for section names, meta keys, figure + card labels, the rail heading */
.cs-v2 .cs-label { font-family: var(--ui); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); margin: 0 0 10px; }
.cs-v2 .cs-label-muted { color: #6b6266; }


/* ---------- Hero ----------
   title + subtitle + links on the left, the projects-card thumbnail as a tilted card on the right */
.cs-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.cs-v2 .cs-hero h1 { line-height: 1.1; }   /* the title wraps to two lines here; body's 1.6 left a gap between them */
.cs-hero-card { margin: 0; justify-self: end; width: 100%; max-width: 400px; animation: fadeUp .6s ease both; animation-delay: .42s; }
.cs-hero-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; transform: rotate(2deg); box-shadow: 0 16px 34px rgba(99,40,92,0.18); }
.cs-hero-card figcaption { font-family: var(--ui); font-size: 13px; color: rgba(54,49,51,.8); text-align: center; margin-top: 18px; }


/* ---------- Meta row ----------
   one row under a thin divider; --cs-meta-cols matches the number of items */
.cs-v2 .cs-meta { grid-template-columns: repeat(var(--cs-meta-cols, 6), minmax(0, 1fr)); gap: 18px 24px; max-width: none; margin-top: 40px; padding-top: 24px; border-top: 1.5px solid rgba(54,49,51,0.25); }
.cs-v2 .cs-meta .k { margin-bottom: 6px; }
.cs-v2 .cs-meta .v { font-family: var(--read); font-weight: 500; font-size: 15.5px; line-height: 1.45; }


/* ---------- Stat band ---------- */
.cs-v2 .cs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; }
.cs-v2 .cs-snapshot .cs-stat { background: rgba(255,255,255,0.55); border-radius: 16px; padding: 22px; }
.cs-v2 .cs-stat .n, .cs-v2 .cs-stat.text .n { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.cs-v2 .cs-stat .l { font-family: var(--ui); font-size: 15px; line-height: 1.45; margin-top: 10px; color: rgba(54,49,51,.85); }


/* ---------- Body layout ----------
   same side margins as the nav/hero/stat band. Text keeps a 620px measure;
   figures, card grids, the stat callouts and the version strip run the full column */
.cs-v2 .cs-body .wrap { max-width: var(--maxw); }
.cs-v2 .cs-body .cs-layout .cs-read { max-width: none; }
.cs-v2 .cs-section > * { max-width: var(--cs-measure); }
.cs-v2 .cs-section > .fig-wide, .cs-v2 .cs-section > .cs-who, .cs-v2 .cs-section > .cs-findings { max-width: none; }
.cs-v2 .cs-section { scroll-margin-top: 136px; }
.cs-v2 .cs-section + .cs-section { margin-top: 76px; }
.cs-v2 .cs-read > .cs-section:first-child .cs-pair { margin-top: 0; }
.cs-v2 .cs-outro { margin-top: 64px; }


/* ---------- Section headings ----------
   label above the claim; no plum bar */
.cs-v2 .cs-body h2::before { content: none; display: none; }
.cs-v2 .cs-read h2 { font-family: var(--serif); font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 18px; }
.cs-v2 .cs-read h3 { font-size: 24px; line-height: 1.2; margin: 40px 0 12px; }
.cs-v2 .cs-read .cs-label-h2 { font-family: var(--ui); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .08em; margin: 0 0 10px; }
.cs-v2 .cs-label-h2 + h3 { margin-top: 0; }
.cs-v2 .cs-strip + h2 { margin-top: 44px; }


/* ---------- Rail ----------
   "on this page" heading; inactive links darkened to pass 4.5:1 (active stays plum + bold) */
.cs-v2 .cs-rail-label { margin: 0 0 12px; }
.cs-v2 .cs-rail a:not(.active) { color: #6b6266; }
.cs-v2 .cs-rail a:not(.active):hover { color: var(--plum); }
/* mobile section bar's n/total counter: Karla, no mono on these pages */
.cs-v2 .csm-meta { font-family: var(--ui); font-size: .78rem; }


/* ---------- Figures ---------- */
/* captions: left-aligned to the text measure, darkened to pass 4.5:1 */
.cs-v2 .cs-read figcaption { text-align: left; max-width: var(--cs-measure); color: #6b6266; margin-top: 12px; }

/* figure images are real buttons that open the lightbox */
.cs-zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: zoom-in; border-radius: 12px; }
.cs-zoom img { transition: transform .2s ease, box-shadow .2s ease; }
.cs-zoom:hover img { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(99,40,92,.5); }
.cs-zoom:focus-visible { outline: 3px solid rgba(99,40,92,.6); outline-offset: 4px; }
/* tint behind images so a not-yet-exported placeholder reads as a box */
.cs-v2 .cs-read figure img { background: #f3ecea; }

/* two images side by side with a label above each (before/after, V5/final) */
.cs-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }


/* ---------- Audience cards ---------- */
.cs-v2 .cs-body .cs-who { list-style: none; padding: 0; margin: 26px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cs-v2 .cs-body .cs-who-card { background: #faf3f2; border-radius: 14px; padding: 20px; margin: 0; font-size: .96rem; line-height: 1.5; color: rgba(54,49,51,.9); }
.cs-v2 .cs-body .cs-who-card::before { content: none; }
.cs-v2 .cs-who-card strong { display: block; font-size: 1rem; margin-bottom: 6px; color: var(--ink); }


/* ---------- Numbered task list: plum number badges ---------- */
.cs-v2 .cs-body .cs-steps { list-style: none; padding: 0; margin: 4px 0 30px; counter-reset: cs-step; }
.cs-v2 .cs-body .cs-steps li { counter-increment: cs-step; position: relative; padding: 1px 0 0 42px; margin-bottom: 14px; min-height: 28px; }
.cs-v2 .cs-body .cs-steps li::before { content: counter(cs-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--plum); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; }


/* ---------- Big stat callouts ---------- */
.cs-findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 34px 0 6px; }
.cs-finding { background: #EFCECC; border-radius: 18px; padding: 26px; }
.cs-v2 .cs-finding .cs-label { margin-bottom: 8px; }
.cs-v2 .cs-body .cs-finding-num { font-family: var(--serif); font-size: 60px; line-height: 1.05; letter-spacing: -0.01em; color: var(--plum); margin: 4px 0 12px; }
.cs-v2 .cs-body .cs-finding-text { font-family: var(--ui); font-size: 1rem; line-height: 1.55; color: var(--ink); margin: 0; }
.cs-finding-dark { background: #63285C; }
.cs-v2 .cs-finding-dark .cs-label { color: #e6eabf; }
.cs-v2 .cs-body .cs-finding-dark .cs-finding-num { color: #fff; }
.cs-v2 .cs-body .cs-finding-dark .cs-finding-text { color: #f3dfe9; }


/* ---------- Version strip: page 1 of each version, final outlined in plum ---------- */
.cs-v2 .cs-body .cs-strip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cs-v2 .cs-body .cs-strip-item { padding: 0; margin: 0; font-size: inherit; }
.cs-v2 .cs-body .cs-strip-item::before { content: none; }
.cs-v2 .cs-strip-item img { aspect-ratio: 17 / 22; object-fit: cover; object-position: top; }
.cs-v2 .cs-strip-item .cs-label { font-size: 12.5px; margin: 10px 0 0; }
.cs-v2 .cs-read .cs-strip-final img { border: 2px solid var(--plum); }
/* page 1 / page 2 switch above the strip (JS-only; without JS the strip just shows page 1) */
.cs-pagetoggle { display: none; }
.js .cs-pagetoggle { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 999px; background: rgba(99,40,92,.08); }
.cs-pagetoggle button { font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--plum); background: transparent; border: 0; border-radius: 999px; padding: 6px 14px; min-height: 32px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.cs-pagetoggle button[aria-pressed="true"] { background: var(--plum); color: #fff; }
.cs-pagetoggle button:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
 (prefers-reduced-motion: reduce) { .cs-pagetoggle button { transition: none; } }


/* ---------- Bar chart: bar length = value / 10 of the track (minus room for the label) ---------- */
.cs-bars { display: grid; gap: 10px; margin: 4px 0 22px; }
.cs-bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 14px; }
.cs-bar-label { font-family: var(--ui); font-size: 14px; color: var(--ink); }
.cs-bar-track { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cs-bar { flex: none; display: block; height: 18px; border-radius: 9px; background: #6E7A35; width: calc((100% - 84px) * var(--n) / 10); }
.cs-bar-hi { background: #63285C; }
.cs-bar-val { font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; }


/* ---------- Responsive ---------- */
/* tablet: hero stacks into one centered column, like the home hero (its .wrap caps
   at 600px; phones are narrower than that, so they're unaffected); the card centers
   under the text. Meta to 3 columns, stats 2x2 */
@media (max-width: 920px) {
  .cs-v2 .cs-hero .wrap { max-width: 600px; }
  .cs-hero-grid { grid-template-columns: 1fr; }
  .cs-hero-card { justify-self: center; }
  .cs-v2 .cs-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-v2 .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-v2 .cs-section { scroll-margin-top: 140px; }   /* clears the nav + section bar */
}
@media (max-width: 820px) {
  .cs-v2 .cs-section { scroll-margin-top: 124px; }
}
@media (max-width: 700px) {
  .cs-v2 .cs-body .cs-who { grid-template-columns: 1fr; }
}
/* phone: pairs + callouts stack, strip goes 2x2, smaller claims */
@media (max-width: 600px) {
  .cs-pair-grid { grid-template-columns: 1fr; gap: 22px; }
  .cs-findings { grid-template-columns: 1fr; }
  .cs-v2 .cs-body .cs-strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .cs-v2 .cs-read h2 { font-size: 28px; }
  .cs-v2 .cs-read h3 { font-size: 22px; }
  .cs-v2 .cs-body .cs-finding-num { font-size: 48px; }
  .cs-v2 .cs-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-bar-row { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 520px) {
  .cs-v2 .cs-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero-card { animation: none; }
  .cs-zoom img { transition: none; }
  .cs-zoom:hover img { transform: none; }
}


/* ============================================================
   Ultimate Guitar additions
   ============================================================ */
/* three stat cards instead of four */
.cs-v2 .cs-stats.cs-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* the heuristic evaluation table runs the full column like the other wide elements */
.cs-v2 .cs-section > .heval-wrap { max-width: none; margin: 26px 0 30px; }

/* finding -> response table: finding (with its source underneath), a plum arrow, the response in 600 */
.cs-v2 .cs-section > .cs-pairs { max-width: none; }
.cs-pairs { width: 100%; border-collapse: collapse; margin: 22px 0 32px; }
.cs-v2 .cs-pairs th { font-family: var(--ui); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); text-align: left; padding: 0 0 12px; border-bottom: 1px solid rgba(54,49,51,0.15); }
.cs-pairs td { vertical-align: top; padding: 16px 0; border-bottom: 1px solid rgba(54,49,51,0.15); font-family: var(--read); font-size: 1rem; line-height: 1.5; color: rgba(54,49,51,.92); }
.cs-pairs td:first-child { width: 48%; padding-right: 12px; }
.cs-pairs .cs-pairs-arrow { width: 52px; text-align: center; color: var(--plum); font-family: var(--ui); }
.cs-pairs .cs-pairs-to { font-weight: 600; color: var(--ink); padding-left: 4px; }
.cs-pairs-src { display: block; margin-top: 4px; font-family: var(--ui); font-size: 13px; line-height: 1.4; color: #6b6266; }

/* pull quote */
.cs-v2 .cs-read .cs-quote { margin: 30px 0 28px; padding: 0; border: 0; }
.cs-v2 .cs-read .cs-quote p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1.25; color: var(--plum); margin: 0 0 14px; }
.cs-v2 .cs-quote cite { display: flex; align-items: center; gap: 12px; font-family: var(--ui); font-style: normal; font-size: 15px; line-height: 1.4; color: #5e5659; }
.cs-v2 .cs-quote cite::before { content: ""; flex: none; width: 24px; height: 2px; background: var(--plum); }

/* persona / empathy / journey maps as a small thumbnail grid; each opens the lightbox carousel */
.cs-v2 .cs-body .cs-thumb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; }
.cs-v2 .cs-body .cs-thumb { margin: 0; padding: 0; font-size: inherit; }
.cs-v2 .cs-body .cs-thumb::before { content: none; }
.cs-v2 .cs-thumb img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }   /* the source images' own shape, so nothing gets cropped */
.cs-v2 .cs-thumb .cs-label { font-size: 12.5px; margin: 9px 0 0; }
.cs-v2 .cs-label-olive { color: #5F6B2C; }

/* small label over each stage heading (Personas, Lo-fi, ...) */
.cs-v2 .cs-read .cs-stage-label { margin: 48px 0 8px; }
.cs-v2 .cs-read .cs-label-h2 + .cs-stage-label { margin-top: 22px; }
.cs-v2 .cs-stage-label + h3 { margin-top: 0; }

/* a small image pair kept inside the reading column (contrast test / retest) */
.cs-v2 .cs-pair-small img { max-width: 394px; }

/* "try the interactive prototype": a filled plum pill like the back pill */
.cs-v2 .cs-read .cs-proto-link { margin: 26px 0 14px; }
.cs-v2 .cs-read a.cs-proto-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; background: var(--plum); color: #fff; font-family: var(--ui); font-weight: 600; font-size: 1rem; text-decoration: none; box-shadow: 0 9px 24px -12px rgba(99,40,92,.65); transition: background .2s ease; }
.cs-v2 .cs-read a.cs-proto-pill:hover, .cs-v2 .cs-read a.cs-proto-pill:focus-visible { background: #7a3f72; color: #fff; }
.cs-v2 .cs-read a.cs-proto-pill:focus-visible { outline: 3px solid rgba(99,40,92,.6); outline-offset: 3px; }

@media (max-width: 600px) {
  .cs-v2 .cs-stats.cs-stats-3 { grid-template-columns: 1fr; }
  .cs-v2 .cs-body .cs-thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-v2 .cs-read .cs-quote p { font-size: 26px; }
  /* pairs table: each row stacks, finding over response; arrow hidden */
  .cs-pairs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cs-pairs tr { display: block; padding: 14px 0; border-bottom: 1px solid rgba(54,49,51,0.15); }
  .cs-pairs tbody tr:first-child { border-top: 1px solid rgba(54,49,51,0.15); }
  .cs-pairs td { display: block; width: auto; padding: 0; border: 0; }
  .cs-pairs td:first-child { width: auto; padding: 0 0 6px; }
  .cs-pairs .cs-pairs-arrow { display: none; }
  .cs-pairs .cs-pairs-to { padding-left: 0; }
}


/* ============================================================
   Ginkgo additions: portrait phone hero, source line, metric callout,
   comparison table, one-line statement, phone screen row, image + text
   split, concept cards
   ============================================================ */
/* more full-column elements */
.cs-v2 .cs-section > .cs-metric:not(.cs-metric-small),
.cs-v2 .cs-section > .cs-table-scroll,
.cs-v2 .cs-section > .cs-split,
.cs-v2 .cs-section > .cs-concepts { max-width: none; }

/* hero for a mobile app: the landing screen as a tilted phone, a sage card peeking out behind it */
.cs-hero-phone { position: relative; margin: 0; justify-self: center; width: 210px; animation: fadeUp .6s ease both; animation-delay: .42s; }
.cs-hero-phone::before { content: ""; position: absolute; z-index: 0; left: -46px; top: 58px; width: 240px; height: 380px; border-radius: 32px; background: #C3C98D; transform: rotate(-5deg); }
.cs-hero-phone img { position: relative; z-index: 1; width: 210px; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: 28px; border: 1px solid rgba(54,49,51,0.12); box-shadow: 0 16px 34px rgba(99,40,92,0.18); transform: rotate(2deg); }

/* small source line under a stat or callout */
.cs-v2 .cs-read .cs-source { font-family: var(--ui); font-size: 13px; line-height: 1.4; color: #6b6266; margin: 10px 0 30px; }

/* metric callout: label beside the statement (above it on phones); the small one sits in a text column */
.cs-metric { display: flex; align-items: baseline; gap: 8px 22px; background: #eef0dc; border-radius: 18px; padding: 24px 28px; margin: 22px 0 8px; }
.cs-v2 .cs-metric .cs-label { flex: none; margin: 0; color: #4f5a26; }
.cs-v2 .cs-read .cs-metric-text { font-family: var(--serif); font-size: 28px; line-height: 1.2; color: var(--ink); margin: 0; }
.cs-metric.cs-metric-small { display: block; padding: 16px 18px; border-radius: 14px; margin: 18px 0 0; }
.cs-v2 .cs-metric-small .cs-label { margin: 0 0 6px; }
.cs-v2 .cs-read .cs-metric-small .cs-metric-text { font-family: var(--read); font-size: 1rem; line-height: 1.55; }

/* comparison table: label-style header row, bold row headers, hairline dividers.
   Scrolls sideways if a narrow tablet squeezes it; becomes labeled cards on phones */
.cs-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0 18px; }
.cs-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.cs-v2 .cs-table thead th { font-family: var(--ui); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); text-align: left; vertical-align: bottom; padding: 0 16px 12px 0; border-bottom: 1px solid rgba(54,49,51,0.15); }
.cs-table tbody th, .cs-table td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1px solid rgba(54,49,51,0.15); font-family: var(--read); font-size: .95rem; line-height: 1.5; color: rgba(54,49,51,.92); }
.cs-table tbody th { width: 20%; font-weight: 700; color: var(--ink); }
.cs-table td:last-child { padding-right: 0; }

/* one-line takeaway in display type */
.cs-v2 .cs-read .cs-statement { font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--plum); margin: 6px 0 30px; }

/* a row of phone screens; each opens the lightbox */
.cs-v2 .cs-body .cs-screen-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; }
.cs-v2 .cs-body .cs-screen { margin: 0; padding: 0; font-size: inherit; }
.cs-v2 .cs-body .cs-screen::before { content: none; }
.cs-v2 .cs-read .cs-screen img,
.cs-v2 .cs-read .cs-split-media img { aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: 22px; border: 1px solid rgba(54,49,51,0.12); box-shadow: 0 10px 22px rgba(54,49,51,0.12); }
.cs-screen .cs-zoom, .cs-split-media .cs-zoom { border-radius: 22px; }
.cs-v2 .cs-screen .cs-label { font-size: 12.5px; margin: 12px 0 0; }

/* image + text split: a phone screen on the left, heading and text on the right */
.cs-split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: center; margin: 48px 0 8px; }
.cs-split-media { margin: 0; }
.cs-v2 .cs-split-text h3 { margin-top: 0; }
.cs-v2 .cs-read .cs-split-caption { font-family: var(--ui); font-size: .82rem; line-height: 1.5; color: #6b6266; margin: 0; }

/* persona thumbnails that are portrait, not 16:9 */
.cs-v2 .cs-thumbs-tall .cs-thumb img { aspect-ratio: 9 / 10; object-position: top; }

/* concept cards: ideas that came after the prototype, so a dashed "not built" outline */
.cs-v2 .cs-body .cs-concepts { list-style: none; margin: 26px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cs-v2 .cs-body .cs-concept { margin: 0; padding: 22px; border: 2px dashed rgba(99,40,92,0.45); border-radius: 16px; font-size: inherit; }
.cs-v2 .cs-body .cs-concept::before { content: none; }
.cs-concept-tag { display: inline-block; margin: 0 0 12px; padding: 3px 10px; border-radius: 999px; background: #f6e7e6; color: #63285C; font-family: var(--ui); font-weight: 700; font-size: 12px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.cs-v2 .cs-read .cs-concept h3 { font-family: var(--read); font-weight: 700; font-size: 17px; line-height: 1.35; letter-spacing: 0; margin: 0 0 8px; }
.cs-v2 .cs-body .cs-concept p { font-size: .97rem; line-height: 1.6; margin: 0; }
.cs-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; margin: 2px 0; }
.cs-chip { display: inline-block; padding: 4px 11px; border-radius: 999px; background: #eef0dc; color: #3f4820; font-family: var(--ui); font-weight: 600; font-size: 14px; line-height: 1.3; white-space: nowrap; }

/* references keep their original small heading on v2 pages (the shared h2 is 34px) */
.cs-v2 .cs-read .cs-refs h2 { font-size: 1.2rem; line-height: 1.3; margin: 16px 0 8px; }

@media (max-width: 600px) {
  .cs-metric { display: block; padding: 20px 22px; }
  .cs-v2 .cs-metric .cs-label { margin: 0 0 6px; }
  .cs-v2 .cs-read .cs-metric-text { font-size: 24px; }
  /* comparison table: one labeled card per row, no sideways scroll */
  .cs-table-scroll { overflow: visible; }
  .cs-table { min-width: 0; }
  .cs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cs-table tr { display: block; padding: 16px 0; border-bottom: 1px solid rgba(54,49,51,0.15); }
  .cs-table tbody tr:first-child { border-top: 1px solid rgba(54,49,51,0.15); }
  .cs-table tbody th, .cs-table td { display: block; width: auto; padding: 0; border: 0; }
  .cs-table tbody th { font-size: 1.02rem; }
  .cs-table td { margin-top: 10px; }
  .cs-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); }
  .cs-v2 .cs-body .cs-screen-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-split { grid-template-columns: 1fr; gap: 24px; }
  .cs-split-media { max-width: 220px; }
  .cs-v2 .cs-body .cs-concepts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero-phone { animation: none; }
}