/* =====================================================================
   Case study 02 : Turning a cart into a choice (product selection)
   Built from case-gate.css. Every rule is scoped to
   .case-study--selection so nothing here reaches the rest of the site.
   Tokens live on the article; --px uses the article's own width
   (container query units), so the 1440 Figma geometry scales with
   the case-study overlay rather than the window.
   ===================================================================== */

/* The overlay pads every case; this one runs edge to edge */
.expand-plane__case:has(> .case-study--selection:not([hidden])) { padding: 0; }
.case-study.case-study--selection {
  container-type: inline-size;
  width: 100%;
  max-width: none;
  margin: 0;
  letter-spacing: normal;
}

/* =====================================================================
   Product selection case study : tokens
   Layout: a 1440 frame with a 72 gutter and a 1296 content column.
   Desktop geometry is written in Figma pixels and multiplied by --px,
   so at 1440 and wider it is exact, and below 1440 it scales down in
   proportion. Under 820px the page restacks (see case.css, Mobile).
   One deliberate dark look plus a light "paper" band, so no theme
   switching: every colour is set explicitly.
   ===================================================================== */

.case-study.case-study--selection {
  color-scheme: dark;

  /* 1 Figma pixel, scaled. calc(124 * var(--px)) = 124px at 1440. */
  --px: min(1px, calc(100cqw / 1440));

  /* ---------- Colour ---------- */
  --bg:          #15171a;  /* page */
  --surface-1:   #1f2124;  /* evidence tiles */
  --surface-light: #f2f0ea; /* the chosen evidence tile, off-white */
  --surface-2:   #26292c;  /* iteration cards */
  --rule:        #2e3134;  /* dividers on dark */
  --bar-muted:   #666a70;  /* negative bars */
  --fg:          #ecebe6;  /* primary text */
  --fg-2:        #c3c1bb;  /* body copy */
  --fg-3:        #8f8e88;  /* labels, captions */
  --fg-4:        #6e6d68;  /* dimmed words, struck text */
  --accent:      #ff6a3d;  /* the one highlight */

  --paper:       #e9e7e1;  /* "credit is shared" band */
  --paper-fg:    #121212;
  --paper-fg-2:  #2b2b28;
  --paper-fg-3:  #62615b;
  --paper-rule:  #cfcdc6;

  /* ---------- Type families ---------- */
  --font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  /* ---------- Type scale (Figma px, with a phone floor) ---------- */
  --fs-hero:      max(46px, calc(124 * var(--px)));  /* lh 117.8, ls -6.2 */
  --fs-band:      max(42px, calc(92 * var(--px)));   /* lh 90.16, ls -3.22 */
  --fs-statement: max(32px, calc(64 * var(--px)));   /* lh 67.84, ls -2.24 */
  --fs-hypothesis:max(28px, calc(46 * var(--px)));   /* lh 1.1, ls -1.38 */
  --fs-stat:      max(32px, calc(44 * var(--px)));   /* lh 44, ls -1.76 */
  --fs-pullquote: max(30px, calc(44 * var(--px)));   /* serif italic, lh 54 */
  --fs-before:    max(24px, calc(34 * var(--px)));   /* struck headline */
  --fs-after:     max(23px, calc(32 * var(--px)));
  --fs-eyebrow:   max(22px, calc(30 * var(--px)));   /* serif italic, lh 39.6 */
  --fs-h3:        max(22px, calc(28 * var(--px)));   /* lh 32.2, ls -0.56 */
  --fs-body-lg:   18px;  /* lh 30 */
  --fs-body:      16px;  /* lh 26 */
  --fs-small:     14px;  /* lh 20 */
  --fs-data:      12px;  /* mono figures */
  --fs-label:     11px;  /* mono caps, lh 16, ls 1.32 */

  /* ---------- Figma variables (unscaled, from the file) ---------- */
  --space-1:  4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-8:  40px;
  --space-12: 64px;
  --radius-lg: 14px;
  --radius-sm: 6px;
  --stroke-fine: 1px;

  /* ---------- Spacing system ----------
     One scale for the whole page, in Figma px at 1440.
     Gaps are measured content edge to content edge (image exports are
     trimmed of transparent padding so boxes match what you see). */
  --space-section:   calc(160 * var(--px));  /* between sections */
  --space-block:     calc(96 * var(--px));   /* between blocks inside a section */
  --space-heading:   calc(48 * var(--px));   /* display heading to its copy */
  --space-eyebrow:   calc(24 * var(--px));   /* eyebrow to its heading */
  --space-title:     var(--space-lg);        /* small heading (h3) to its paragraph */

  /* ---------- Spacing map ----------
     Each place, pointed at the system. Override one line to break rank. */
  --gutter:                 max(16px, calc(72 * var(--px)));

  --hero-pad-top:           calc(144 * var(--px));
  --hero-title-to-lede:     var(--space-heading);
  --hero-art-scale:         0.9;   /* 1 = Figma size (664 wide) */
  --hero-art-nudge-y:       calc(92 * var(--px));   /* below the Figma position */
  --hero-art-nudge-x:       calc(-164 * var(--px)); /* negative = left of the right gutter */
  --hero-lede-width:        calc(620 * var(--px));  /* wraps after "price", as in the mock */
  /* Hero ends one section-gap below the phones' visible bottom (90% of the art) */
  --hero-min-height:        calc(var(--hero-pad-top) + var(--hero-art-nudge-y)
                              + 828 * var(--hero-art-scale) * var(--px) + var(--space-section));

  --problem-eyebrow-gap:    var(--space-eyebrow);
  --problem-statement-gap:  var(--space-heading);
  --problem-col-gap:        calc(56 * var(--px));

  --audit-pad-top:          calc(var(--space-section) - 60 * var(--px));  /* nudged up 60 */

  --hyp-pad-top:            var(--space-section);
  --hyp-eyebrow-gap:        var(--space-eyebrow);
  --hyp-gap:                var(--space-heading);

  --iter-pad-top:           var(--space-block);
  --iter-gap:               var(--space-md);

  --count-pad-top:          var(--space-section);
  --count-text-gap:         var(--space-heading);
  --count-col-gap:          var(--space-block);   /* image to text */

  --decisions-pad-top:      var(--space-section);
  --decisions-head-gap:     calc(var(--space-block) / 2);  /* rule sits halfway */
  --decision-gap:           calc(var(--space-block) * 2);  /* between component rows: 192 at 1440 */
  --decision-col-gap:       calc(72 * var(--px));

  --results-pad-top:        var(--space-section);
  --results-eyebrow-gap:    var(--space-eyebrow);
  --results-statement-gap:  var(--space-heading);
  --results-chart-gap:      var(--space-block);
  --results-stats-gap:      var(--space-block);

  --band-margin-top:        var(--space-section);
  --band-pad-y:             calc(120 * var(--px));
  --band-head-gap:          var(--space-heading);
  --band-figure-gap:        var(--space-block);

  /* ---------- Motion ----------
     Shared by every [data-reveal]. Tune here first. */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);    /* long, soft landing */
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --dur-reveal:    900ms;
  --dur-mask:      1100ms;
  --dur-bar:       1200ms;
  --reveal-dist:   28px;
  --stagger:       70ms;
}

/* =====================================================================
   Product selection case study : layout and components
   Sections follow the Figma frame top to bottom. Each block carries
   the Figma node id in the HTML (data-node-id) so updates map 1:1.
   ===================================================================== */

/* ---------- Base ---------- */
.case-study.case-study--selection { background: var(--bg); }
.case-study.case-study--selection {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: 30px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The hero phone bleeds past the frame on purpose; clip it at the window */
.case-study--selection .sc-page { overflow-x: clip; }
.case-study--selection *,
.case-study--selection *::before,
.case-study--selection *::after { box-sizing: border-box; }
.case-study--selection img { display: block; max-width: 100%; }
.case-study--selection p,
.case-study--selection h1,
.case-study--selection h2,
.case-study--selection h3,
.case-study--selection figure { margin: 0; }
.case-study--selection :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.case-study--selection .frame { max-width: 1440px; margin-inline: auto; }

/* One gutter rule for every padded section */
.case-study--selection .pad {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Type roles ---------- */
.case-study--selection .t-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-eyebrow);
  line-height: 1.32;
  color: var(--accent);
}
.case-study--selection .t-statement {
  font-weight: 300;
  font-size: var(--fs-statement);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.case-study--selection .t-h3 {
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.case-study--selection .t-body-lg { font-size: var(--fs-body-lg); line-height: 30px; color: var(--fg-2); }
.case-study--selection .t-body { font-size: var(--fs-body);    line-height: 26px; color: var(--fg-2); }
/* Small labels: the body face (Geist), sentence case, as written */
.case-study--selection .t-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 20px;
  color: var(--fg-3);
}
.case-study--selection .t-caption { font-size: var(--fs-small); line-height: 20px; color: var(--fg-3); }
.case-study--selection .accent { color: var(--accent); }

/* Masked line reveals need each line in its own clip */
.case-study--selection .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.case-study--selection .line > span { display: block; }

/* Figma layer opacity (the faded "before" shots, the .69 button chips)
   comes baked into the exports, so no image here gets a CSS fade. */

/* ---------- Media slots ----------
   Every image sits in a .media box sized from Figma. If the file is
   missing, case.js adds .is-missing and the box shows what it wants. */
.case-study--selection .media { position: relative; }
.case-study--selection .media > img { width: 100%; height: 100%; object-fit: cover; }
.case-study--selection .media.is-missing {
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgb(236 235 230 / .035) 10px 11px),
    rgb(236 235 230 / .03);
  outline: 1px dashed rgb(236 235 230 / .22);
  outline-offset: -1px;
}
.case-study--selection .media.is-missing > img { visibility: hidden; }
.case-study--selection .media.is-missing::after {
  content: attr(data-file) "\A" attr(data-size);
  white-space: pre;
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 8px;
  font: 400 12px/16px var(--font-sans);
  color: var(--fg-3);
}
.case-study--selection .band .media.is-missing { outline-color: rgb(18 18 18 / .25); }
.case-study--selection .band .media.is-missing::after { color: var(--paper-fg-3); }

/* =====================================================================
   01 Hero
   The shipped desktop page, large and slightly turned, with the old
   page set back behind it and dimmed. On phones the two mobile screens
   sit side by side instead, so nothing desktop-sized is shrunk.
   ===================================================================== */
.case-study--selection .hero {
  position: relative;
  padding-top: var(--hero-pad-top);
  display: flex;
  flex-direction: column;
  gap: calc(72 * var(--px));
}
.case-study--selection .hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--hero-title-to-lede);
}
.case-study--selection .hero__title {
  font-weight: 200;
  font-size: var(--fs-hero);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--fg);
  white-space: nowrap;
}
.case-study--selection .hero__lede {
  max-width: var(--hero-lede-width);
  letter-spacing: -0.04em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-eyebrow);
  line-height: 1.32;
  color: var(--fg);
}
.case-study--selection .hero__art {
  position: relative;
  width: 100%;
  max-width: 1296px;
  aspect-ratio: 1296 / 760;
  perspective: calc(2400 * var(--px));
}
.case-study--selection .hero__art .media { position: absolute; border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.case-study--selection .hero__art .media > img { object-fit: cover; object-position: top; }
.case-study--selection .hero__before {
  left: 0;
  top: 7%;
  width: 46%;
  aspect-ratio: 1382 / 1230;
  transform: rotateY(14deg) scale(.96);
  transform-origin: 100% 50%;
  box-shadow: 0 30px 70px rgb(0 0 0 / .5);
}
.case-study--selection .hero__before > img { opacity: .55; filter: saturate(.7); }
.case-study--selection .hero__after {
  right: 0;
  top: 0;
  width: 62%;
  aspect-ratio: 1322 / 1180;
  transform: rotateY(-7deg);
  transform-origin: 0% 50%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 50px 110px rgb(0 0 0 / .65), 0 14px 30px rgb(0 0 0 / .4);
  z-index: 1;
}
.case-study--selection .hero__phones { display: none; }

/* =====================================================================
   02 Where it started
   Section line and two short columns on the left; on the right the
   five-year ledger: four dated rows over hairlines, then four figures.
   ===================================================================== */
.case-study--selection .origin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(520 * var(--px));
  column-gap: var(--space-block);
  align-items: start;
  padding-top: var(--space-section);
  max-width: 1296px;
}
.case-study--selection .origin__text { display: flex; flex-direction: column; gap: var(--space-title); min-width: 0; }
.case-study--selection .origin__text .t-body-lg { max-width: 600px; }
.case-study--selection .origin__text .t-body-lg + .t-body-lg { margin-top: 14px; }
.case-study--selection .ledger { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; }
.case-study--selection .ledger__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-lg);
  padding: 18px 0;
  border-top: var(--stroke-fine) solid var(--rule);
}
.case-study--selection .ledger__row:last-child { border-bottom: var(--stroke-fine) solid var(--rule); }
.case-study--selection .ledger__year { font-size: var(--fs-small); line-height: 24px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.case-study--selection .ledger__what { font-size: var(--fs-body); line-height: 24px; color: var(--fg); }
.case-study--selection .ledger__what small { display: block; font-size: var(--fs-small); line-height: 20px; color: var(--fg-3); margin-top: 2px; }
.case-study--selection .figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  margin: var(--space-8) 0 0;
}
.case-study--selection .figures > div { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; }
.case-study--selection .figures dd {
  margin: 0;
  font-weight: 200;
  font-size: max(30px, calc(36 * var(--px)));
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.case-study--selection .figures dt { font-size: var(--fs-small); line-height: 20px; color: var(--fg-3); }

/* =====================================================================
   03 The problem
   Act opener with two columns, then the old page annotated: the page
   on the left with three numbered marks on it, the notes on the right.
   ===================================================================== */
.case-study--selection .problem { display: flex; flex-direction: column; gap: var(--problem-eyebrow-gap); padding-top: var(--space-section); }
.case-study--selection .problem__body { display: flex; flex-direction: column; gap: var(--problem-statement-gap); }
.case-study--selection .problem__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--problem-col-gap);
  max-width: 1296px;
}
.case-study--selection .problem__cols > p { max-width: 600px; min-width: 0; }

.case-study--selection .annotated {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(380 * var(--px));
  column-gap: var(--space-block);
  align-items: center;
  padding-top: var(--space-block);
  max-width: 1296px;
}
.case-study--selection .annotated__fig { position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: #fff; aspect-ratio: 1382 / 1300; }
.case-study--selection .annotated__fig > img { opacity: .55; filter: saturate(.7); object-fit: cover; }
.case-study--selection .mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  font: 500 13px/28px var(--font-sans);
  text-align: center;
  box-shadow: 0 0 0 4px rgb(21 23 26 / .55);
}
.case-study--selection .notes { display: flex; flex-direction: column; min-width: 0; }
.case-study--selection .note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-lg);
  padding: 20px 0;
  border-top: var(--stroke-fine) solid var(--rule);
}
.case-study--selection .note:last-child { border-bottom: var(--stroke-fine) solid var(--rule); }
.case-study--selection .note__n { font-size: var(--fs-small); line-height: 26px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.case-study--selection .note__title { display: block; font-size: var(--fs-body); line-height: 26px; color: var(--fg); }
.case-study--selection .note__body { display: block; font-size: var(--fs-small); line-height: 20px; color: var(--fg-3); margin-top: 4px; }

/* =====================================================================
   04 Hypothesis
   ===================================================================== */
.case-study--selection .hypothesis { display: flex; flex-direction: column; gap: var(--hyp-gap); padding-top: var(--hyp-pad-top); }
.case-study--selection .hypothesis__eyebrow { width: calc(338 * var(--px)); min-width: 200px; margin-bottom: calc(var(--hyp-eyebrow-gap) - var(--hyp-gap)); }
.case-study--selection .hypothesis__statement {
  display: flex;
  flex-direction: column;
  gap: max(16px, calc(22 * var(--px)));
  font-weight: 300;
  font-size: max(20px, calc(26 * var(--px)));
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  max-width: 1040px;
}
.case-study--selection .hyp-pair { display: flex; flex-direction: column; gap: 4px; }
.case-study--selection .hypothesis__statement .dim {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--fg-3);
}

/* =====================================================================
   05 Versions
   A full-bleed field of the explorations, feathered into the ground at
   top and bottom, then the statement with the version ledger beside it.
   ===================================================================== */
.case-study--selection .versions { padding-top: var(--space-section); }
.case-study--selection .field {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 560;
  overflow: hidden;
  margin: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.case-study--selection .field > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: brightness(.82); }
.case-study--selection .versions__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(520 * var(--px));
  column-gap: var(--space-block);
  align-items: start;
  padding-top: var(--space-block);
  max-width: 1296px;
}
.case-study--selection .versions__text { display: flex; flex-direction: column; gap: var(--space-heading); min-width: 0; }
.case-study--selection .versions__text .t-body-lg { max-width: 600px; }
.case-study--selection .versions__title .accent { color: var(--accent); }
.case-study--selection .vledger { display: flex; flex-direction: column; min-width: 0; padding-top: 10px; }
.case-study--selection .vrow {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 92px;
  gap: var(--space-lg);
  padding: 16px 0;
  border-top: var(--stroke-fine) solid var(--rule);
}
.case-study--selection .vrow:last-child { border-bottom: var(--stroke-fine) solid var(--rule); }
.case-study--selection .vrow__v { font-size: var(--fs-small); line-height: 24px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.case-study--selection .vrow__name { font-size: var(--fs-body); line-height: 24px; color: var(--fg); }
.case-study--selection .vrow__q { display: block; font-size: var(--fs-small); line-height: 20px; color: var(--fg-3); margin-top: 2px; }
.case-study--selection .vrow__out { font-size: var(--fs-small); line-height: 24px; color: var(--fg-3); text-align: right; }
.case-study--selection .vrow--live .vrow__out { color: var(--fg); }

/* =====================================================================
   06 Filmstrip
   Landscape crops of the card region, six in a row, each on a plate
   with its label and one line under it. On phones it scrolls sideways
   with each frame near full width, never shrunk to a thumbnail.
   ===================================================================== */
.case-study--selection .film {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-xl);
  padding-top: var(--space-block);
}
.case-study--selection .frame-item { display: flex; flex-direction: column; gap: var(--space-md); }
.case-study--selection .frame-item__card { background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 10; }
.case-study--selection .frame-item__card > img { object-position: top left; }
.case-study--selection .frame-item .t-label { color: var(--fg); }
.case-study--selection .frame-item--shipped .t-label { color: var(--accent); }

/* =====================================================================
   07 Decisions
   ===================================================================== */
.case-study--selection .decisions { padding-top: var(--decisions-pad-top); }
.case-study--selection .decisions__head {
  padding-bottom: var(--decisions-head-gap);
  border-bottom: var(--stroke-fine) solid var(--rule);
}
.case-study--selection .decision { margin-top: var(--decision-gap); }
.case-study--selection .decisions__head + .decision { margin-top: var(--decisions-head-gap); }
.case-study--selection .decision__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--decision-col-gap);
  align-items: center;
}
.case-study--selection .decision__text { display: flex; flex-direction: column; gap: var(--space-title); min-width: 0; }
.case-study--selection .decision__text .t-body { max-width: 600px; }

.case-study--selection .evidence { display: flex; flex-direction: column; gap: var(--space-xl); min-width: 0; }
.case-study--selection .evidence__fig { display: flex; flex-direction: column; gap: var(--space-md); }
.case-study--selection .evidence__fig .media > img { object-fit: contain; height: auto; }
.case-study--selection .evidence__fig--before .media > img { opacity: .55; }
.case-study--selection .evidence__fig--after .t-label { color: var(--fg); }
.case-study--selection .evidence .media { border-radius: var(--radius-sm); overflow: hidden; }
.case-study--selection .evidence--chips .media { width: auto; max-width: 100%; }
.case-study--selection .evidence--chips .media > img { width: auto; max-width: 100%; height: auto; }
.case-study--selection .evidence--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: start;
}
.case-study--selection .evidence--pair .media { box-shadow: 0 20px 50px rgb(0 0 0 / .45); background: #fff; }
.case-study--selection .evidence--stack .stack { display: flex; flex-direction: column; gap: var(--space-md); }
.case-study--selection .evidence picture { display: contents; }

/* =====================================================================
   08 Results
   ===================================================================== */
.case-study--selection .results { padding-top: var(--results-pad-top); }
.case-study--selection .results__eyebrow { width: calc(338 * var(--px)); min-width: 200px; margin-bottom: var(--results-eyebrow-gap); }
.case-study--selection .results__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--problem-col-gap);
  padding-top: var(--results-statement-gap);
  max-width: 1296px;
}
.case-study--selection .results__col { display: flex; flex-direction: column; gap: 30px; min-width: 0; max-width: 600px; }
.case-study--selection .results__source { padding-top: var(--space-block); max-width: 760px; }

.case-study--selection .pin-track { --p: 1; --pin-distance: 110vh; }
.case-study--selection .pin-stage { background: var(--bg); }
.case-study--selection.motion-on .pin-stage { position: sticky; top: var(--pin-top, 0px); }
.case-study--selection .pin-spacer { height: 0; }
.case-study--selection.motion-on .pin-spacer { height: var(--pin-distance); }
.case-study--selection .pin-track--results { --pin-distance: 240vh; margin-top: var(--results-chart-gap); }
.case-study--selection .worth {
  display: grid;
  grid-template-columns: minmax(0, 746fr) minmax(0, 526fr);
  gap: var(--space-xl);
  align-items: center;
  max-width: 1296px;
}
.case-study--selection .sw { --s: 1; --H: 480; --B: 300; --K: 5; --off: var(--sw-off, 0px); min-width: 0; }
.case-study--selection .sw-plot { position: relative; height: calc(var(--H) * var(--s) * 1px + var(--off) + var(--sw-extra, 0px)); }
.case-study--selection .sw-base {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--B) * var(--s) * 1px + var(--off));
  height: 1px;
  background: color-mix(in srgb, var(--fg) 55%, transparent);
}
.case-study--selection .sw-old {
  position: absolute;
  left: 0;
  top: calc(var(--B) * var(--s) * 1px + var(--off) + 10px);
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-3);
}
.case-study--selection .sw-ink {
  position: absolute;
  left: 0;
  top: var(--off);
  width: 100%;
  height: calc(var(--H) * var(--s) * 1px);
  clip-path: inset(-12px calc((1 - var(--rx, 1)) * 100%) -12px -12px);
}
.case-study--selection .sw-ink svg { display: block; width: 100%; height: 100%; overflow: visible; }
.case-study--selection .sw-line { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.case-study--selection .sw-line--up { stroke: var(--accent); }
.case-study--selection .sw-line--flat { stroke: var(--bar-muted); }
.case-study--selection .sw-dot {
  --d: 9px;
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc((var(--B) - var(--v) * var(--K)) * var(--s) * 1px + var(--off));
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.case-study--selection .sw-dot--rise { --d: 14px; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.case-study--selection .sw-dot--flat { background: var(--bar-muted); box-shadow: 0 0 0 2px var(--bg); }
.case-study--selection .sw-lab {
  --y: calc((var(--B) - var(--v) * var(--K)) * var(--s) * 1px + var(--off));
  position: absolute;
  left: calc(var(--x) * 100% - 12.5%);
  width: 25%;
  top: calc(var(--y) + 16px);
  display: grid;
  justify-content: center;
  justify-items: start;
  gap: 6px;
  text-align: left;
}
.case-study--selection .sw-lab > :is(.sw-big, .sw-small) { justify-self: center; }
.case-study--selection .sw-lab--step,
.case-study--selection .sw-lab--rise { top: auto; bottom: calc(100% - var(--y) + 16px); }
.case-study--selection .sw-lab--flat { left: auto; right: 0; width: 30%; justify-content: end; justify-items: end; text-align: right; }
.case-study--selection .sw-lab--flat > .sw-small { justify-self: end; }
.case-study--selection .sw-big {
  font-weight: 300;
  font-size: max(30px, calc(36 * var(--px)));
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg);
  margin-bottom: 6px;
}
.case-study--selection .sw-bar {
  --bw: 12px;
  position: absolute;
  left: calc(var(--x) * 100% - var(--bw) / 2);
  width: var(--bw);
  height: calc(var(--m) * var(--K) * var(--s) * 1px);
  transform: scaleY(var(--g, 1));
}
.case-study--selection .sw-bar--pos {
  top: calc((var(--B) - var(--m) * var(--K)) * var(--s) * 1px + var(--off));
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--bar-muted) 75%, transparent);
  transform-origin: 50% 100%;
}
.case-study--selection .sw-bar--win { background: color-mix(in srgb, var(--accent) 72%, transparent); }
.case-study--selection .sw-bar--neg {
  top: calc(var(--B) * var(--s) * 1px + var(--off) + 1px);
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, var(--bar-muted) 75%, transparent);
  transform-origin: 50% 0;
}
.case-study--selection .sw-small { font-weight: 500; font-size: 15px; line-height: 20px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.case-study--selection .sw-name { font-size: 14px; line-height: 20px; color: var(--fg-2); text-wrap: balance; }
.case-study--selection .sw-lab--rise .sw-name { font-size: 15px; line-height: 22px; color: var(--fg); }
.case-study--selection .sw-vals {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-data);
  line-height: 16px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The same four steps as a list, for phones (hidden on desktop) */
.case-study--selection .sw-list { display: none; margin: 0; padding: 0; list-style: none; }
.case-study--selection .sw-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name delta" "vals delta";
  column-gap: var(--space-lg);
  padding: 14px 0;
  border-top: var(--stroke-fine) solid var(--rule);
}
.case-study--selection .sw-list li:last-child { border-bottom: var(--stroke-fine) solid var(--rule); }
.case-study--selection .sw-list .sw-name { grid-area: name; font-size: 15px; line-height: 22px; color: var(--fg); }
.case-study--selection .sw-list .sw-vals { grid-area: vals; margin-top: 2px; }
.case-study--selection .sw-list .sw-small { grid-area: delta; align-self: center; font-size: 22px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; }
.case-study--selection .sw-list li.is-win .sw-small { color: var(--accent); font-size: 30px; }

.case-study--selection .money {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xl);
  padding-left: var(--space-xl);
  min-width: 0;
}
.case-study--selection .money::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform-origin: 50% 0;
}
.case-study--selection .money__title { font-size: 20px; line-height: 28px; letter-spacing: -0.02em; color: var(--fg); }
.case-study--selection .money__cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px var(--space-xl);
  margin: 0;
}
.case-study--selection .money__cell {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-sm);
  border-top: var(--stroke-fine) solid var(--rule);
  padding-top: 14px;
  min-width: 0;
}
.case-study--selection .money__cell dd {
  margin: 0;
  font-weight: 300;
  font-size: max(30px, calc(36 * var(--px)));
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.case-study--selection .money__cell dt { font-size: var(--fs-small); line-height: 20px; color: var(--fg-3); }

.case-study--selection .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   09 The band
   ===================================================================== */
.case-study--selection .band-wrap { padding-top: var(--band-margin-top); }
.case-study--selection .band { background: var(--paper); color: var(--paper-fg); padding-block: var(--band-pad-y); }
.case-study--selection .band .t-label { color: var(--paper-fg-3); }
.case-study--selection .band__main { display: flex; flex-direction: column; gap: var(--band-head-gap); min-width: 0; }
.case-study--selection .band__title {
  font-weight: 200;
  font-size: var(--fs-statement);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--paper-fg);
  white-space: nowrap;
}
.case-study--selection .band__title u {
  text-decoration-color: #d23f14;
  text-decoration-thickness: 3px;
  text-underline-offset: 12px;
}
.case-study--selection .band__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--problem-col-gap);
  max-width: 1296px;
}
.case-study--selection .band__col { display: flex; flex-direction: column; gap: 30px; max-width: 600px; min-width: 0; }
.case-study--selection .band__col > p { color: var(--paper-fg-2); }
.case-study--selection .band__figure {
  padding-top: var(--band-figure-gap);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-xl);
}
.case-study--selection .band__shots,
.case-study--selection .band__caption { display: contents; }
.case-study--selection .band__shot { border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.case-study--selection .band__shot picture { display: contents; }
.case-study--selection .band__shot > picture > img,
.case-study--selection .band__shot > img { display: block; width: 100%; height: auto; }
.case-study--selection .band__shot--before img { opacity: .55; }
.case-study--selection .band__caption > div:nth-child(1) { grid-area: 1 / 1; }
.case-study--selection .band__caption > div:nth-child(2) { grid-area: 1 / 2; }
.case-study--selection .band__shot:nth-child(1) { grid-area: 2 / 1; }
.case-study--selection .band__shot:nth-child(2) { grid-area: 2 / 2; }
.case-study--selection .band__caption .cap { font-weight: 400; font-size: var(--fs-small); line-height: 20px; color: var(--paper-fg-3); }
.case-study--selection .band__caption .cap--after { color: var(--paper-fg); }

/* =====================================================================
   Tablet: the scaled desktop gets tight under 1100
   ===================================================================== */
@media (max-width: 1100px) {
  .case-study--selection .hero__title { white-space: normal; }
  .case-study--selection .origin { grid-template-columns: 1fr 1fr; }
  .case-study--selection .annotated { grid-template-columns: 1.4fr 1fr; }
  .case-study--selection .versions__body { grid-template-columns: 1fr 1.1fr; }
  .case-study--selection .film { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-study--selection .band__title { white-space: normal; }
}

/* =====================================================================
   Mobile: restack under 820
   ===================================================================== */
@media (max-width: 820px) {
  .case-study.case-study--selection {
    --space-section: 96px;
    --space-block: 56px;
    --space-heading: 24px;
    --space-eyebrow: 16px;
    --hero-pad-top: 72px;
    --problem-col-gap: 24px;
    --decision-col-gap: 32px;
    --band-pad-y: 72px;
  }
  .case-study--selection .hero { gap: 40px; }
  .case-study--selection .hero__lede { max-width: none; }
  /* Phones on phones: the two mobile screens side by side */
  .case-study--selection .hero__art { display: none; }
  .case-study--selection .hero__phones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  .case-study--selection .hero__phones .media { border-radius: 10px; overflow: hidden; background: #fff; aspect-ratio: 278 / 600; }
  .case-study--selection .hero__phones .media > img { object-fit: cover; object-position: top; }
  .case-study--selection .hero__phones .media--before > img { opacity: .55; filter: saturate(.7); }
  .case-study--selection .hero__phones .t-label { margin-bottom: 8px; }
  .case-study--selection .hero__phones .phone-after .t-label { color: var(--fg); }

  .case-study--selection .origin { grid-template-columns: 1fr; row-gap: 40px; }
  .case-study--selection .problem { padding-top: var(--space-section); }
  .case-study--selection .problem__cols { grid-template-columns: 1fr; }
  .case-study--selection .annotated { grid-template-columns: 1fr; row-gap: 24px; }
  .case-study--selection .mark { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 12px; line-height: 24px; }

  .case-study--selection .hypothesis__eyebrow,
  .case-study--selection .results__eyebrow { width: auto; min-width: 0; }

  .case-study--selection .field { aspect-ratio: 4 / 3; }
  .case-study--selection .versions__body { grid-template-columns: 1fr; row-gap: 40px; }
  .case-study--selection .vrow { grid-template-columns: 64px minmax(0, 1fr); }
  .case-study--selection .vrow__out { grid-column: 2; text-align: left; line-height: 20px; margin-top: 4px; }

  /* The filmstrip scrolls sideways, each frame near the full width */
  .case-study--selection .film {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
    scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
  }
  .case-study--selection .film::-webkit-scrollbar { display: none; }
  .case-study--selection .frame-item { flex: 0 0 82vw; scroll-snap-align: start; }

  .case-study--selection .decision__row { grid-template-columns: 1fr; gap: var(--space-heading); }
  .case-study--selection .decision__row .decision__text { order: -1; }
  .case-study--selection .evidence--pair { grid-template-columns: 1fr; }
  .case-study--selection .evidence--pair .media { max-width: 360px; }

  .case-study--selection .worth { grid-template-columns: 1fr; gap: 32px; }
  .case-study--selection .pin-track--results { --pin-distance: 0px; margin-top: var(--space-block); }
  .case-study--selection.motion-on .pin-stage { position: static; }
  .case-study--selection .sw-plot { display: none; }
  .case-study--selection .sw-list { display: block; }
  .case-study--selection .money { padding-left: 20px; }
  .case-study--selection .money__cells { gap: 18px 16px; }
  .case-study--selection .money__cell dd { font-size: 28px; }
  .case-study--selection .results__cols { grid-template-columns: 1fr; gap: 30px; }

  .case-study--selection .band__cols { grid-template-columns: 1fr; gap: 30px; }
  /* Phone shots on phones, side by side */
  .case-study--selection .band__figure { gap: 8px 12px; }
  .case-study--selection .band__shot { aspect-ratio: 278 / 600; }
  .case-study--selection .band__shot > picture > img { height: 100%; object-fit: cover; object-position: top; }
}
/* =====================================================================
   Wrapping. Headings and short lines balance, so a two-line title or
   label splits evenly; running copy is pretty, so a paragraph never ends
   on a lone word. Anything set to nowrap stays on one line regardless.
   ===================================================================== */
.case-study--selection :is(h1, h2, h3, h4, figcaption,
  .t-statement, .t-h3, .t-eyebrow, .t-label, .t-caption,
  .hero__lede, .band__title, .money__title, .money__cell dt,
  .hyp-clause, .sw-name, .cap) {
  text-wrap: balance;
}
.case-study--selection :is(.t-body, .t-body-lg) {
  text-wrap: pretty;
}
.case-study--selection :is(.note__title, .vrow__name, .ledger__what, .figures dt) {
  text-wrap: balance;
}
.case-study--selection :is(.note__body, .vrow__q, .ledger__what small) {
  text-wrap: pretty;
}

/* =====================================================================
   Product selection case study : motion and dev overlays

   How reveals work
   - Mark anything with data-reveal="up | fade | mask | scale | bar | phone".
   - Put data-stagger on a parent to space its [data-reveal] children
     by --stagger. data-reveal-delay="200" adds a fixed delay (ms).
   - case.js adds .is-in as an element crosses into view, which plays
     the keyframes below. Before that, everything sits in its finished
     state, so the page reads fully with motion off or scripts blocked.
   - Motion runs only when <html> has .motion-on (set by case.js, and
     never under prefers-reduced-motion or with #still in the URL).
   ===================================================================== */

/* ---------- Keyframes ---------- */
@keyframes sc-reveal-up    { from { opacity: 0; transform: translate3d(0, var(--reveal-dist), 0); } }
@keyframes sc-reveal-fade  { from { opacity: 0; } }
@keyframes sc-reveal-scale { from { opacity: 0; transform: scale(.965); } }
@keyframes sc-reveal-mask  { from { transform: translate3d(0, 105%, 0); } }
@keyframes sc-reveal-drop  { from { opacity: 0; transform: translate3d(0, -22px, 0) scale(1.04); } }
@keyframes sc-reveal-phone { from { opacity: 0; transform: translate3d(5%, 3%, 0) scale(.98); } }

/* ---------- Timing shared by every reveal ---------- */
.case-study--selection.motion-on [data-reveal].is-in,
.case-study--selection.motion-on [data-reveal="mask"].is-in .line > span {
  animation-duration: var(--dur-reveal);
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
  animation-delay: calc(var(--delay, 0ms) + var(--i, 0) * var(--stagger));
}

.case-study--selection.motion-on [data-reveal="up"].is-in { animation-name: sc-reveal-up; }
.case-study--selection.motion-on [data-reveal="fade"].is-in { animation-name: sc-reveal-fade; }
.case-study--selection.motion-on [data-reveal="scale"].is-in { animation-name: sc-reveal-scale; }

/* Masked lines: the wrapper stays put, each line rises inside its clip */
.case-study--selection.motion-on [data-reveal="mask"].is-in { animation: none; }
.case-study--selection.motion-on [data-reveal="mask"].is-in .line > span {
  animation-name: sc-reveal-mask;
  animation-duration: var(--dur-mask);
}
.case-study--selection.motion-on [data-reveal="mask"].is-in .line:nth-child(2) > span { --i: 1; }
.case-study--selection.motion-on [data-reveal="mask"].is-in .line:nth-child(3) > span { --i: 2; }

/* Results swoosh: scroll drives it (case-gate.js sets --rx, .is-on and
   .is-paid). Dots pop in as the line passes them; the money arrives when
   the line reaches +22% and leaves again if you scroll back above it. */
.case-study--selection.motion-on .sw-stage :is(.sw-dot, .sw-lab) {
  transition: opacity 300ms var(--ease-out), transform 450ms var(--ease-out);
}
.case-study--selection.motion-on .sw-stage .sw-dot:not(.is-on) { opacity: 0; transform: scale(0.3); }
.case-study--selection.motion-on .sw-stage .sw-lab:not(.is-on) { opacity: 0; transform: translate3d(0, 8px, 0); }
.case-study--selection.motion-on .sw-stage .money::before { transition: transform 700ms var(--ease-in-out); }
.case-study--selection.motion-on .sw-stage :is(.money__title, .money__cell) {
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out);
}
.case-study--selection.motion-on .sw-stage:not(.is-paid) .money::before { transform: scaleY(0); }
.case-study--selection.motion-on .sw-stage:not(.is-paid) :is(.money__title, .money__cell) { opacity: 0; transform: translate3d(0, 12px, 0); }
.case-study--selection.motion-on .sw-stage.is-paid .money__title { transition-delay: 250ms; }
.case-study--selection.motion-on .sw-stage.is-paid .money__cell { transition-delay: calc(400ms + var(--ci, 0) * 110ms); }
.case-study--selection .money__cell:nth-child(2) { --ci: 1; }
.case-study--selection .money__cell:nth-child(3) { --ci: 2; }
.case-study--selection .money__cell:nth-child(4) { --ci: 3; }

/* Audit slides are dealt onto the table one by one */
.case-study--selection.motion-on [data-reveal="drop"].is-in { animation-name: sc-reveal-drop; animation-duration: 800ms; }

/* Offer cascade (D21k): cards dealt in on a diagonal from their side, notes slide out of their card */
@keyframes sc-reveal-deal-left  { from { opacity: 0; transform: translate3d(-56px, -24px, 0); } }
@keyframes sc-reveal-deal-right { from { opacity: 0; transform: translate3d(56px, -24px, 0); } }
@keyframes sc-reveal-note-out   { from { opacity: 0; transform: translate3d(-12px, 0, 0); } }
@keyframes sc-reveal-note-back  { from { opacity: 0; transform: translate3d(12px, 0, 0); } }
.case-study--selection.motion-on [data-reveal="deal-left"].is-in  { animation-name: sc-reveal-deal-left;  animation-duration: 800ms; }
.case-study--selection.motion-on [data-reveal="deal-right"].is-in { animation-name: sc-reveal-deal-right; animation-duration: 800ms; }
.case-study--selection.motion-on [data-reveal="note-out"].is-in   { animation-name: sc-reveal-note-out; }
.case-study--selection.motion-on [data-reveal="note-back"].is-in  { animation-name: sc-reveal-note-back; }

/* Hero phones drift in from the right */
.case-study--selection.motion-on [data-reveal="phone"].is-in { animation-name: sc-reveal-phone; animation-duration: 1400ms; }

/* Before its reveal fires, each element waits in its starting state, so
   nothing paints at rest and then snaps back to animate in. Only while
   .motion-on is set (never under reduced motion, never with motion off). */
.case-study--selection.motion-on [data-reveal="up"]:not(.is-in)    { opacity: 0; transform: translate3d(0, var(--reveal-dist), 0); }
.case-study--selection.motion-on [data-reveal="fade"]:not(.is-in)  { opacity: 0; }
.case-study--selection.motion-on [data-reveal="scale"]:not(.is-in) { opacity: 0; transform: scale(.965); }
.case-study--selection.motion-on [data-reveal="drop"]:not(.is-in)  { opacity: 0; transform: translate3d(0, -22px, 0) scale(1.04); }
.case-study--selection.motion-on [data-reveal="deal-left"]:not(.is-in)  { opacity: 0; transform: translate3d(-56px, -24px, 0); }
.case-study--selection.motion-on [data-reveal="deal-right"]:not(.is-in) { opacity: 0; transform: translate3d(56px, -24px, 0); }
.case-study--selection.motion-on [data-reveal="note-out"]:not(.is-in)   { opacity: 0; transform: translate3d(-12px, 0, 0); }
.case-study--selection.motion-on [data-reveal="note-back"]:not(.is-in)  { opacity: 0; transform: translate3d(12px, 0, 0); }
.case-study--selection.motion-on [data-reveal="phone"]:not(.is-in) { opacity: 0; transform: translate3d(5%, 3%, 0) scale(.98); }
.case-study--selection.motion-on [data-reveal="mask"]:not(.is-in) .line > span { transform: translate3d(0, 105%, 0); }

@media (prefers-reduced-motion: reduce) {
  .case-study--selection [data-reveal],
.case-study--selection [data-reveal] * { animation: none !important; transition: none !important; }
  .case-study--selection .sw-stage *,
  .case-study--selection .sw-stage *::before { transition: none !important; }
}

/* =====================================================================
   Dev overlays: press D for the panel, S spacing, G grid, M motion,
   R replay. Or open the page with #dev on the end of the link.
   ===================================================================== */
.sc-dev-panel {
  position: fixed;
  z-index: 50;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: rgb(22 24 26 / .92);
  backdrop-filter: blur(8px);
  font: 500 12px/1 var(--font-sans);
}
.sc-dev-panel[hidden] { display: none; }
.sc-dev-panel button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--fg-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}
.sc-dev-panel button:hover { color: var(--fg); }
.sc-dev-panel button[aria-pressed="true"] { color: var(--accent); border-color: rgb(255 106 61 / .35); }
.sc-dev-panel kbd { font: inherit; opacity: .55; margin-left: 4px; }

/* Spacing: outline every Figma-mapped block and name it */
.case-study--selection.show-spacing [data-node-id] { outline: 1px solid rgb(255 106 61 / .28); outline-offset: -1px; position: relative; }
.case-study--selection.show-spacing [data-section] { outline: 1px dashed rgb(255 106 61 / .7); }
.case-study--selection.show-spacing [data-section]::before {
  content: attr(data-section) "  " attr(data-node-id);
  position: absolute;
  z-index: 40;
  left: 0;
  top: 0;
  padding: 3px 6px;
  background: var(--accent);
  color: var(--bg);
  font: 500 11px/1.2 var(--font-sans);
  white-space: pre;
}

/* Grid: 12 columns over the 1296 content column */
.sc-grid-overlay {
  position: fixed;
  z-index: 45;
  inset: 0;
  pointer-events: none;
  display: none;
}
.sc-grid-overlay.is-on { display: block; }
.sc-grid-overlay > div {
  max-width: 1440px;
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-xl);
}
.sc-grid-overlay span { background: rgb(255 106 61 / .06); border-inline: 1px solid rgb(255 106 61 / .14); }

/* Phones show the results as a list with no pin, so the figures beside it
   must not wait for the scrub that never runs. */
@media (max-width: 820px) {
  .case-study--selection.motion-on .sw-stage:not(.is-paid) .money::before { transform: none; }
  .case-study--selection.motion-on .sw-stage:not(.is-paid) :is(.money__title, .money__cell) { opacity: 1; transform: none; }
}

/* Images wrapped in <picture> (phone crops) take the same box as bare ones */
.case-study--selection .media picture > img { display: block; width: 100%; height: auto; }
.case-study--selection .evidence__fig .media picture > img { object-fit: contain; }