/* =====================================================================
   Case study 04 : Showing the price up front (gate page)
   Ported from the standalone build. Every rule is scoped to
   .case-study--gate 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--gate:not([hidden])) { padding: 0; }
.case-study.case-study--gate {
  container-type: inline-size;
  width: 100%;
  max-width: none;
  margin: 0;
  letter-spacing: normal;
}

/* =====================================================================
   Gate page 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--gate {
  color-scheme: dark;

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

  /* ---------- Colour ---------- */
  --bg:          #0c0d0e;  /* page */
  --surface-1:   #16181a;  /* evidence tiles */
  --surface-light: #f2f0ea; /* the chosen evidence tile, off-white */
  --surface-2:   #1d2023;  /* iteration cards */
  --rule:        #24272a;  /* 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;  /* "page came down" 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;
}

/* =====================================================================
   Gate page 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--gate { background: var(--bg); }
.case-study.case-study--gate {
  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--gate .gc-page { overflow-x: clip; }
.case-study--gate *,
.case-study--gate *::before,
.case-study--gate *::after { box-sizing: border-box; }
.case-study--gate img { display: block; max-width: 100%; }
.case-study--gate p,
.case-study--gate h1,
.case-study--gate h2,
.case-study--gate h3,
.case-study--gate figure { margin: 0; }
.case-study--gate :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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

/* One gutter rule for every padded section */
.case-study--gate .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--gate .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--gate .t-statement {
  font-weight: 300;
  font-size: var(--fs-statement);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.case-study--gate .t-h3 {
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.case-study--gate .t-body-lg { font-size: var(--fs-body-lg); line-height: 30px; color: var(--fg-2); }
.case-study--gate .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--gate .t-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 20px;
  color: var(--fg-3);
}
.case-study--gate .t-caption { font-size: var(--fs-small); line-height: 20px; color: var(--fg-3); }
.case-study--gate .accent { color: var(--accent); }

/* Masked line reveals need each line in its own clip */
.case-study--gate .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.case-study--gate .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--gate .media { position: relative; }
.case-study--gate .media > img { width: 100%; height: 100%; object-fit: cover; }
.case-study--gate .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--gate .media.is-missing > img { visibility: hidden; }
.case-study--gate .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--gate .band .media.is-missing { outline-color: rgb(18 18 18 / .25); }
.case-study--gate .band .media.is-missing::after { color: var(--paper-fg-3); }

/* =====================================================================
   01 Hero  (1157:1634)
   ===================================================================== */
.case-study--gate .hero {
  position: relative;
  min-height: var(--hero-min-height);
  padding-top: var(--hero-pad-top);
}
.case-study--gate .hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--hero-title-to-lede);
}
.case-study--gate .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--gate .hero__lede {
  max-width: var(--hero-lede-width);
  letter-spacing: -0.04em;  /* browsers set Newsreader wider than Figma; this matches the mock */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-eyebrow);
  line-height: 1.32;
  color: var(--fg);
}
/* Phone artwork: 664 x 920 box whose right edge meets the content
   column; the front phone bleeds to the page edge. Sits over the
   headline on purpose ("intentional overlap" in Figma). */
/* Sits behind the headline: "price" runs over the glow, not under it */
.case-study--gate .hero__art {
  position: absolute;
  z-index: 0;
  top: calc(var(--hero-pad-top) + var(--hero-art-nudge-y));
  right: calc(max(var(--gutter), env(safe-area-inset-right, 0px)) - var(--hero-art-nudge-x));
  width: calc(664 * var(--px) * var(--hero-art-scale));
  aspect-ratio: 664 / 920;
  pointer-events: none;
}
/* The composite sits on the glow box: 820 wide, starting 4px left of the
   art box, so the front phone runs past the content column to the edge. */
.case-study--gate .hero__composite {
  position: absolute;
  left: -0.6%;
  top: 0;
  width: 123.5%;
  height: 100%;
}
.case-study--gate .hero__composite > img { object-fit: contain; }

/* =====================================================================
   02 The problem  (1125:1376)
   ===================================================================== */
.case-study--gate .problem { display: flex; flex-direction: column; gap: var(--problem-eyebrow-gap); }
.case-study--gate .problem__body { display: flex; flex-direction: column; gap: var(--problem-statement-gap); }
.case-study--gate .problem__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--problem-col-gap);
  width: calc(966 * var(--px));
  min-width: min(100%, 680px);
}
.case-study--gate .problem__cols > p { max-width: 600px; min-width: 0; }
/* Oct 31 copy: three columns across the full measure, as in the Figma frame */
.case-study--gate .problem__cols--three { grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; max-width: 1296px; }
.case-study--gate .problem__cols--three > p { max-width: none; }

/* =====================================================================
   03 Audit figure  (1152:56)
   ===================================================================== */
/* Text column matches one column of "The problem" above; the image keeps
   its size, and its transparent right edge runs off the frame. */
.case-study--gate .audit {
  --text-col: calc((966 * var(--px) - var(--problem-col-gap)) / 2);
  display: grid;
  grid-template-columns: calc(var(--gutter) + var(--text-col) + var(--space-xl)) calc(958 * var(--px));
  align-items: center;
  padding-top: var(--audit-pad-top);
}
.case-study--gate .audit__text {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-title);
  max-width: calc(var(--text-col) + var(--gutter) + var(--space-xl));
  min-width: 0;
}
.case-study--gate .audit__text .t-h3 { line-height: 1.15; }
/* Exported already cropped to the 958 x 854 frame */
.case-study--gate .audit__img { aspect-ratio: 958 / 744; }  /* trimmed of 48 / 62 transparent px */
.case-study--gate .audit__img > img { object-fit: contain; }
/* The competitor review slides (S3d): six slides spread like printouts on a
   table, the five behind dimmed, Superpower on top with an accent outline.
   The section stops at the right gutter (no bleed) and the spread takes 86%
   of its column, right-aligned. Positions are % of the spread's own box
   (856 x 636, the slides' rotated bounds), so it scales without spilling. */
.case-study--gate .audit--slides {
  grid-template-columns: calc(var(--gutter) + var(--text-col) + var(--space-xl)) minmax(0, 1fr);
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.case-study--gate .audit__slides { position: relative; --stagger: 120ms; aspect-ratio: 856 / 636; width: 86%; justify-self: end; }
.case-study--gate .audit__slides .aslide {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 16 / 9;
}
.case-study--gate .audit__slides .aslide > img {
  border-radius: 6px;
  background: #fff;
  object-fit: cover;
  transform: rotate(var(--r));
  filter: brightness(0.45) saturate(0.55);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 26px 60px rgb(0 0 0 / .55), 0 8px 18px rgb(0 0 0 / .35);
}
.case-study--gate .audit__slides .aslide--top > img {
  filter: none;
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 34px 80px rgb(0 0 0 / .6), 0 10px 24px rgb(0 0 0 / .4);
}

/* =====================================================================
   04 Hypothesis  (1125:1188)
   ===================================================================== */
.case-study--gate .hypothesis { display: flex; flex-direction: column; gap: var(--hyp-gap); padding-top: var(--hyp-pad-top); }
.case-study--gate .hypothesis__eyebrow { width: calc(338 * var(--px)); min-width: 200px; margin-bottom: calc(var(--hyp-eyebrow-gap) - var(--hyp-gap)); }
.case-study--gate .hypothesis__statement {
  font-weight: 300;
  font-size: var(--fs-hypothesis);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.case-study--gate .hypothesis__statement .dim { font-weight: 200; color: var(--fg-4); }
/* Oct 31 copy: each clause on its own line under a small serif label */
.case-study--gate .hypothesis__statement--pairs {
  display: flex;
  flex-direction: column;
  gap: max(16px, calc(22 * var(--px)));
  font-size: max(20px, calc(26 * var(--px)));
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.case-study--gate .hyp-pair { display: flex; flex-direction: column; gap: 4px; }
.case-study--gate .hypothesis__statement--pairs .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 Iterations strip  (1143:2500)
   ===================================================================== */
.case-study--gate .iterations {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--iter-gap);
  padding-top: var(--iter-pad-top);
}
.case-study--gate .iter { display: flex; flex-direction: column; gap: var(--space-md); }
.case-study--gate .iter__card {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 402 / 1193;   /* full-length screens, cropped where the shortest one ends */
  max-width: 100%;
}
/* Label in the page's sans, like the step names in the results, not mono caps */
.case-study--gate .iter .t-label { color: var(--fg); }
.case-study--gate .iter--shipped .t-label { color: var(--accent); }

/* =====================================================================
   06 Thirty-seven iterations  (1152:24)
   ===================================================================== */
.case-study--gate .count {
  display: grid;
  grid-template-columns: calc(767 * var(--px)) 1fr;
  column-gap: var(--count-col-gap);
  align-items: center;
  padding-top: var(--count-pad-top);
}
/* Closer view: the export is scaled up by --zoom and centred on the
   highlighted card (--fx, --fy as fractions of the image), with the
   edges feathered so the crop reads as a vignette, not a cut. */
.case-study--gate .count__img {
  --zoom: 1.8;
  --fx: .472;
  --fy: .394;
  aspect-ratio: 767 / 420;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
}
.case-study--gate .count__img > img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--zoom) * 100%);
  height: auto;
  max-width: none;
  object-fit: fill;
  transform: translate(calc(var(--fx) * -100%), calc(var(--fy) * -100%));
}
.case-study--gate .count__text {
  display: flex;
  flex-direction: column;
  gap: var(--count-text-gap);
  min-width: 0;
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.case-study--gate .count__title { color: var(--fg); }
.case-study--gate .count__title .accent { color: var(--accent); }

/* =====================================================================
   07 Decisions  (1149:2970)
   ===================================================================== */
.case-study--gate .decisions { padding-top: var(--decisions-pad-top); }
/* The one rule in this section sits under the heading, halfway to the first row */
.case-study--gate .decisions__head {
  padding-bottom: var(--decisions-head-gap);
  border-bottom: var(--stroke-fine) solid var(--rule);
}
.case-study--gate .decision,
.case-study--gate .decision--labels { margin-top: var(--decision-gap); }
.case-study--gate .decisions__head + .decision { margin-top: var(--decisions-head-gap); }
/* Social proof row and the fields row below it run without dividers */
.case-study--gate .decision__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--decision-col-gap);
  align-items: center;
}
.case-study--gate .decision__text { display: flex; flex-direction: column; gap: var(--space-title); min-width: 0; }

/* Before / after headline */
.case-study--gate .ba { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
/* Same label as Considered / Chosen (.t-label): Before reads muted, After in ink */
.case-study--gate .ba__label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 20px;
  letter-spacing: 0;
  color: var(--fg-3);
}
.case-study--gate .ba__label--after { padding-top: var(--space-lg); color: var(--fg); }
.case-study--gate .ba__before {
  font-weight: 300;
  font-size: var(--fs-before);
  line-height: 1.59;
  letter-spacing: -0.01em;
  color: var(--fg-4);
  text-decoration: line-through;
  text-decoration-thickness: from-font;
}
.case-study--gate .ba__after {
  font-weight: 300;
  font-size: var(--fs-after);
  line-height: 1.69;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* Decision 02: the offer list (canvas D21k). Copy left in a narrower column;
   on the right a cascade, left, right, left. The two considered cards are small
   (180) and set back, the chosen card large (340); each note sits on its card's
   open side, left aligned, its bottom level with the bottom of its card. */
.case-study--gate .decision__row--offer { grid-template-columns: calc(420 * var(--px)) minmax(0, 1fr); }
.case-study--gate .offer {
  --stagger: 0ms;  /* the sequence uses explicit delays */
  display: grid;
  grid-template-columns: calc(180 * var(--px)) calc(136 * var(--px)) minmax(0, 1fr) calc(180 * var(--px));
  /* One row per card and its note, both sitting on the row's bottom edge, so
     each note lines up with the bottom of its card. Card 2 rises into the empty
     corner beside card 1 (negative margin), which keeps the cascade's step. */
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  align-items: end;
  grid-template-areas:
    "c1 n1 n1 ."
    ".  n2 n2 c2"
    "c3 c3 n3 n3";
  min-width: 0;
}
.case-study--gate .offer__c1 { grid-area: c1; }
.case-study--gate .offer__c2 { grid-area: c2; }
.case-study--gate .offer__card.offer__c2 { margin-top: calc(-60 * var(--px)); }
.case-study--gate .offer__c3 { grid-area: c3; }
.case-study--gate .offer__n1 { grid-area: n1; }
.case-study--gate .offer__n2 { grid-area: n2; }
.case-study--gate .offer__n3 { grid-area: n3; }
.case-study--gate .offer__card { margin: 0; width: 100%; filter: drop-shadow(0 14px 24px rgb(0 0 0 / .45)); }
.case-study--gate .offer__card--considered { filter: drop-shadow(0 10px 16px rgb(0 0 0 / .35)); }
.case-study--gate .offer__card > img { height: auto; object-fit: contain; display: block; }
.case-study--gate .offer__card--considered > img { opacity: 0.55; }
.case-study--gate .offer__note { display: flex; flex-direction: column; gap: 4px; max-width: 480px; min-width: 0; }
.case-study--gate .offer__key { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: baseline; }
.case-study--gate .offer__name { color: var(--fg); }

/* Decision 02: button labels. No top rule in Figma. */
.case-study--gate .decision--labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--decision-col-gap);
  align-items: center;
}
.case-study--gate .labels { display: flex; flex-direction: column; gap: var(--space-xl); min-width: 0; }
.case-study--gate .labels__group { display: flex; flex-direction: column; gap: var(--space-sm); }
/* Labels match Considered / Chosen (.t-label): muted, the chosen one in ink */
.case-study--gate .labels__final-label { color: var(--fg); }
.case-study--gate .labels__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.case-study--gate .labels__chip { aspect-ratio: 210 / 32.941; width: 100%; min-width: 0; }
.case-study--gate .labels > .labels__group .labels__chip { width: calc((100% - 2 * var(--space-lg)) / 3); }
.case-study--gate .labels__chip > img { object-fit: contain; }
.case-study--gate .labels__final { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.case-study--gate .labels__final .media { align-self: center; }
.case-study--gate .labels__final .media { aspect-ratio: 297 / 46.588; width: 44.9%; min-width: 160px; }
.case-study--gate .labels__final .media > img { object-fit: contain; }

/* Decision 02: the undertone line under the copy */
.case-study--gate .labels-quote {
  margin-top: calc(var(--space-xl) - var(--space-title));  /* 24 from the paragraph */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: 1.32;
  color: var(--fg);
  text-wrap: balance;
}

/* Decision 03: social proof evidence */
.case-study--gate .evidence { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); min-width: 0; }
.case-study--gate .evidence__fig { display: flex; flex-direction: column; gap: var(--space-sm); }
/* Tiles are 257 wide inside 300-wide columns, left aligned */
.case-study--gate .evidence__tile {
  width: calc(257 / 300 * 100%);
  background: var(--surface-1);
  aspect-ratio: 257 / 168;
  padding: var(--space-md);
  display: grid;
  place-items: center;
}
.case-study--gate .evidence__tile .media { width: 100%; }
.case-study--gate .evidence__tile .media--considered { aspect-ratio: 229 / 120; }
.case-study--gate .evidence__tile .media--chosen { aspect-ratio: 229 / 68.56; }
.case-study--gate .evidence__fig--chosen .t-label { color: var(--fg); }

/* Wide evidence (collage, quote card): stacked, full column, each in its own tile.
   Considered sits on the dark surface; chosen gets an off-white tile so the
   quote card reads as it does on the page. */
.case-study--gate .evidence--stack { grid-template-columns: 1fr; gap: var(--space-xl); }
.case-study--gate .evidence--stack .evidence__tile {
  width: 100%;
  aspect-ratio: auto;
  border-radius: var(--radius-sm);
}
.case-study--gate .evidence__tile--considered { padding: max(14px, calc(20 * var(--px))); }
.case-study--gate .evidence__tile--chosen {
  background: var(--surface-light);
  padding: max(16px, calc(28 * var(--px))) max(18px, calc(40 * var(--px)));
}
.case-study--gate .evidence--stack .media--considered { aspect-ratio: 1206 / 313; }
.case-study--gate .evidence--stack .media--chosen { aspect-ratio: 976 / 253; }
.case-study--gate .evidence--stack .media > img { object-fit: contain; }

/* Decision 05: pull line */
.case-study--gate .pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-pullquote);
  line-height: 1.23;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* Decision 05: pinned fields
   The row sticks in the middle of the window while the next stretch of
   scrolling (--pin-distance) drives --p from 0 to 1, then releases.
   --p holds at 0 for the first 10% and at 1 for the last 12%, so both
   states get a beat. Each field moves inside its own window (--a to --b),
   eased with smoothstep. Motion off: no pin, finished form. */
.case-study--gate .decision--fields { padding-block: 0; border-top: 0; }
.case-study--gate .pin-track { --p: 1; --pin-distance: 110vh; }
.case-study--gate .pin-stage { background: var(--bg); }
.case-study--gate.motion-on .pin-stage { position: sticky; top: var(--pin-top, 0px); }
.case-study--gate .pin-spacer { height: 0; }
.case-study--gate.motion-on .pin-spacer { height: var(--pin-distance); }

.case-study--gate .decision__row--fields { align-items: center; }
.case-study--gate .fields-demo {
  --fld-h: 60px;
  --fld-gap: 10px;
  --pitch: calc(var(--fld-h) + var(--fld-gap));
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}
.case-study--gate .fields-head { display: flex; justify-content: space-between; align-items: baseline; }
.case-study--gate .fields-count { position: relative; color: var(--fg); }
.case-study--gate .fields-count__from { position: absolute; right: 0; opacity: clamp(0, (0.45 - var(--p)) * 8, 1); }
.case-study--gate .fields-count__to { color: var(--accent); opacity: clamp(0, (var(--p) - 0.5) * 8, 1); }

.case-study--gate .fields-stack {
  position: relative;
  height: calc(5 * var(--fld-h) + 4 * var(--fld-gap));
}
.case-study--gate .fld {
  --l: clamp(0, (var(--p) - var(--a)) / (var(--b) - var(--a)), 1);
  --t: calc(var(--l) * var(--l) * (3 - 2 * var(--l)));
  --slot: calc(var(--from) + (var(--to) - var(--from)) * var(--t));
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--fld-h);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-inline: 20px;
  background: var(--surface-1);
  border: var(--stroke-fine) solid #2f3337;
  border-radius: var(--radius-sm);
  transform:
    translate3d(calc(var(--bump, 0) * sin(var(--t) * 180deg) * 1px), calc(var(--slot) * var(--pitch)), 0)
    scale(calc(var(--s0, 1) + (1 - var(--s0, 1)) * var(--t)));
  opacity: calc(var(--o0, 1) + (1 - var(--o0, 1)) * var(--t));
  will-change: transform, opacity;
}
.case-study--gate .fld__name { font-size: var(--fs-body); line-height: 22px; color: var(--fg-2); }
.case-study--gate .fld__tag {
  margin-left: auto;
  font: 400 var(--fs-small)/20px var(--font-sans);
  color: var(--fg-3);
  opacity: clamp(0, (var(--t) - 0.6) * 3, 1);
}
.case-study--gate .fld__tag--added { color: var(--accent); }
.case-study--gate .fld--location .fld__tag { margin-left: auto; }
.case-study--gate .fld__chev {
  width: 7px;
  height: 7px;
  margin-right: 2px;
  border-right: 1.5px solid var(--fg-3);
  border-bottom: 1.5px solid var(--fg-3);
  transform: translateY(-2px) rotate(45deg);
}
/* The two added fields keep an accent edge once they land */
.case-study--gate .fld--location,
.case-study--gate .fld--phone {
  border-color: color-mix(in srgb, var(--accent) calc(var(--t) * 45%), #2f3337);
}
/* slot from -> to; the three fields start centred in slots 1 to 3 */
.case-study--gate .fld--location { --from: 0; --to: 0; --a: .12; --b: .42; --o0: 0; --s0: .96; }
.case-study--gate .fld--email {
  --from: 3; --to: 1; --a: .20; --b: .62; --bump: 34; z-index: 2;
  /* lifted while it passes over the name fields */
  box-shadow: 0 calc(sin(var(--t) * 180deg) * 14px) calc(sin(var(--t) * 180deg) * 30px) rgb(0 0 0 / .55);
}
.case-study--gate .fld--first { --from: 1; --to: 2; --a: .28; --b: .66; }
.case-study--gate .fld--last { --from: 2; --to: 3; --a: .32; --b: .70; }
.case-study--gate .fld--phone { --from: 4; --to: 4; --a: .56; --b: .86; --o0: 0; --s0: .96; }

.case-study--gate .fields-caption { position: relative; min-height: 1.3em; padding-top: var(--space-md); }
.case-study--gate .fields-caption .pull { display: block; }
.case-study--gate .fields-caption__from {
  position: absolute;
  left: 0;
  top: var(--space-md);
  color: var(--fg-3);
  opacity: clamp(0, (0.4 - var(--p)) * 6, 1);
}
.case-study--gate .fields-caption__to { opacity: clamp(0, (var(--p) - 0.72) * 6, 1); }

/* =====================================================================
   08 Results  (1143:2320)
   ===================================================================== */
.case-study--gate .results { padding-top: var(--results-pad-top); }
.case-study--gate .results__eyebrow { width: calc(338 * var(--px)); min-width: 200px; margin-bottom: var(--results-eyebrow-gap); }
.case-study--gate .results__lede { padding-top: var(--results-statement-gap); max-width: 1296px; }
/* Oct 31 copy: the funnel story on the left, the money on the right */
.case-study--gate .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--gate .results__col { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.case-study--gate .results__source { padding-top: var(--space-block); max-width: 760px; }

/* The chart and its worth, side by side, pinned while you scroll.
   Chart: the S6a3 swoosh through the four funnel steps. The plot has a
   fixed height that scales by --s on phones. Points sit at --x across and
   (baseline - value x K) down, the same numbers the SVG is drawn in; the
   SVG stretches to the plot (non-scaling stroke), the dots and labels are
   HTML so they stay round and sharp. */
.case-study--gate .pin-track--results { --pin-distance: 260vh; margin-top: var(--results-chart-gap); }
.case-study--gate .worth {
  display: grid;
  grid-template-columns: minmax(0, 746fr) minmax(0, 526fr);
  gap: var(--space-xl);
  align-items: center;
  max-width: 1296px;
}
.case-study--gate .sw { --s: 1; --H: 480; --B: 250; --K: 6; --off: var(--sw-off, 0px); min-width: 0; }
.case-study--gate .sw-plot { position: relative; height: calc(var(--H) * var(--s) * 1px + var(--off) + var(--sw-extra, 0px)); }
.case-study--gate .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--gate .sw-old {
  position: absolute;
  right: 0;
  top: calc(var(--B) * var(--s) * 1px + var(--off) + 10px);
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-3);
}
/* The line is revealed left to right: x only ever grows along it */
.case-study--gate .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--gate .sw-ink svg { display: block; width: 100%; height: 100%; overflow: visible; }
.case-study--gate .sw-line { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.case-study--gate .sw-line--down { stroke: var(--bar-muted); }
.case-study--gate .sw-line--up { stroke: var(--accent); }

.case-study--gate .sw-dot {
  --d: 12px;
  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(--bar-muted);
  box-shadow: 0 0 0 2px var(--bg);
}
.case-study--gate .sw-dot--step { --d: 9px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); }
.case-study--gate .sw-dot--rise { --d: 14px; background: var(--accent); }

.case-study--gate .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%;
  /* One column, centred on the point; the step name and its values
     share a left edge inside it. */
  display: grid;
  justify-content: center;
  justify-items: start;
  gap: 6px;
  text-align: left;
}
.case-study--gate .sw-lab > :is(.sw-big, .sw-small) { justify-self: center; }
.case-study--gate .sw-lab--dip { top: calc(var(--y) + 20px); }
.case-study--gate .sw-lab--step { top: calc(var(--y) + 14px); }
.case-study--gate .sw-lab--rise {
  left: auto;
  right: calc((1 - var(--x)) * 100% - 10px);
  bottom: calc(100% - var(--y) + 16px);
  width: auto;
  justify-content: end;
  justify-items: start;
  text-align: left;
}
.case-study--gate .sw-lab--rise > .sw-big { justify-self: end; }
/* The two headline numbers match the money figures beside them */
.case-study--gate .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;
}
.case-study--gate .sw-lab--dip .sw-big { color: var(--fg-3); margin-bottom: 6px; }
.case-study--gate .sw-lab--rise .sw-big { color: var(--fg); margin-bottom: 8px; }

/* Bars from the old-page line to each step, behind the swoosh. Each one
   grows over the stretch of line that leads to it (--g, set by
   case-gate.js), so bar and line arrive at the dot together. */
.case-study--gate .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--gate .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--gate .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(--accent) 72%, transparent);
  transform-origin: 50% 100%;
}
.case-study--gate .sw-small { font-weight: 500; font-size: 15px; line-height: 20px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.case-study--gate .sw-name { font-size: 15px; line-height: 22px; color: var(--fg); text-wrap: balance; }
.case-study--gate .sw-lab--step .sw-name { font-size: 14px; line-height: 20px; color: var(--fg-2); }
.case-study--gate .sw-vals {
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Worth: an accent rule the height of the chart, four figures in two rows */
.case-study--gate .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--gate .money::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform-origin: 50% 0;
}
.case-study--gate .money__title { font-size: 20px; line-height: 28px; letter-spacing: -0.02em; color: var(--fg); }
.case-study--gate .money__cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px var(--space-xl);
  margin: 0;
}
/* dt comes first for screen readers; the figure shows first */
.case-study--gate .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--gate .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--gate .money__cell dt { font-size: var(--fs-small); line-height: 20px; color: var(--fg-3); }

/* Screen-reader-only text */
.case-study--gate .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   09 The page came down  (1125:1290)
   ===================================================================== */
.case-study--gate .band-wrap { padding-top: var(--band-margin-top); }
.case-study--gate .band { background: var(--paper); color: var(--paper-fg); padding-block: var(--band-pad-y); }
.case-study--gate .band .t-label { color: var(--paper-fg-3); }
/* Single column from the gutter, like the sections above */
.case-study--gate .band__row { display: block; }
.case-study--gate .band__main { display: flex; flex-direction: column; gap: var(--band-head-gap); min-width: 0; }
.case-study--gate .band__title {
  font-weight: 200;
  font-size: var(--fs-statement);  /* same size as the section titles */
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--paper-fg);
  white-space: nowrap;
}
.case-study--gate .band__title u { text-decoration-thickness: from-font; text-underline-position: from-font; }
/* Same two columns as "The results": full frame width, each paragraph at the 600px measure */
.case-study--gate .band__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--problem-col-gap);
  max-width: 1296px;
}
.case-study--gate .band__cols > p { color: var(--paper-fg-2); max-width: 600px; min-width: 0; }
.case-study--gate .band__col { display: flex; flex-direction: column; gap: 30px; max-width: 600px; min-width: 0; }
.case-study--gate .band__col > p { color: var(--paper-fg-2); }

.case-study--gate .band__figure { padding-top: var(--band-figure-gap); }
/* Each screenshot carries its own caption: a fine rule and one line under it.
   The shots and the caption flatten into one grid so a phone can stack them
   shot, caption, shot, caption. */
.case-study--gate .band__figure {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-xl);
}
.case-study--gate .band__shots,
.case-study--gate .band__caption { display: contents; }
.case-study--gate .band__shot { aspect-ratio: 636 / 508.797; border-radius: var(--radius-sm); overflow: hidden; }
.case-study--gate .band__shot:nth-child(1) { grid-area: 1 / 1; }
.case-study--gate .band__shot:nth-child(2) { grid-area: 1 / 2; }
.case-study--gate .band__caption > div:nth-child(1) { grid-area: 2 / 1; }
.case-study--gate .band__caption > div:nth-child(2) { grid-area: 2 / 2; }
.case-study--gate .band__caption > div { border-top: var(--stroke-fine) solid var(--paper-rule); padding-top: var(--space-md); }
.case-study--gate .band__caption .cap { font-weight: 400; font-size: var(--fs-small); line-height: 20px; color: var(--paper-fg); }

/* =====================================================================
   Tablet: the scaled desktop gets tight under 1100
   ===================================================================== */
@media (max-width: 1100px) {
  .case-study--gate .hero__title { white-space: normal; }
  .case-study--gate .audit { grid-template-columns: minmax(260px, 1fr) 1.6fr; }
  .case-study--gate .audit__text { max-width: none; }
  .case-study--gate .count { grid-template-columns: 1.1fr 1fr; }
  .case-study--gate .decision--labels { grid-template-columns: 1.2fr 1fr; gap: var(--space-12); }
  .case-study--gate .band__title { white-space: normal; }
}

/* =====================================================================
   Mobile: restack under 820
   ===================================================================== */
@media (max-width: 820px) {
  .case-study.case-study--gate {
    --space-section: 96px;
    --space-block: 56px;
    --space-heading: 24px;
    --space-eyebrow: 16px;
    --hero-pad-top: 72px;
    --hero-min-height: 0px;
    --audit-pad-top: var(--space-section);
    --problem-col-gap: 24px;
    --decision-col-gap: 32px;
    --band-pad-y: 72px;
  }

  .case-study--gate .hero { display: flex; flex-direction: column; gap: 8px; }
  .case-study--gate .hero__art {
    position: relative;
    top: auto;
    right: auto;
    width: calc(80% * var(--hero-art-scale));
    margin-left: -2%;
  }
  .case-study--gate .hero__lede { max-width: none; }

  .case-study--gate .problem { padding-top: var(--space-section); }
  .case-study--gate .problem__cols { grid-template-columns: 1fr; width: auto; min-width: 0; }

  .case-study--gate .audit { grid-template-columns: 1fr; gap: var(--space-heading); }
  .case-study--gate .audit__text { padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .case-study--gate .audit--slides .audit__text { padding-right: 0; }
  .case-study--gate .audit__slides { width: auto; justify-self: stretch; margin-left: max(var(--gutter), env(safe-area-inset-left, 0px)); }

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

  /* The iterations are a sequence, so they scroll sideways in order */
  .case-study--gate .iterations {
    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--gate .iterations::-webkit-scrollbar { display: none; }
  .case-study--gate .iter { flex: 0 0 156px; scroll-snap-align: start; }

  .case-study--gate .count { grid-template-columns: 1fr; gap: 24px; }
  .case-study--gate .count__text {
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }

  .case-study--gate .decision__row { grid-template-columns: 1fr; }
  .case-study--gate .offer {
    grid-template-columns: 1fr;
    grid-template-areas: "c1" "n1" "c2" "n2" "c3" "n3";
    align-items: start;
    row-gap: var(--space-md);
  }
  .case-study--gate .offer__card--considered { width: 55%; }
  .case-study--gate .offer__c3 { max-width: 363px; margin-top: var(--space-md); }
  .case-study--gate .offer__note + .offer__card { margin-top: var(--space-md); }
  .case-study--gate .offer__card.offer__c2 { margin-top: var(--space-md); }
  .case-study--gate .decision--labels { grid-template-columns: 1fr; gap: var(--space-heading); }
  .case-study--gate .decision--labels .decision__text { order: -1; }
  .case-study--gate .decision__row--fields .decision__text { order: -1; }
  .case-study--gate .fields-demo { --fld-h: 52px; --fld-gap: 8px; }
  .case-study--gate .fld--email { --bump: 10; }
  .case-study--gate .pin-track { --pin-distance: 90vh; }
  .case-study--gate .labels__chip { width: 100%; }
  .case-study--gate .labels__cols { gap: 10px; }
  .case-study--gate .labels > .labels__group .labels__chip { width: calc((100% - 20px) / 3); }
  .case-study--gate .decision__row { gap: var(--space-heading); }

  .case-study--gate .worth { grid-template-columns: 1fr; gap: 20px; }
  .case-study--gate .pin-track--results { --pin-distance: 200vh; }
  .case-study--gate .sw { --s: 0.66; }
  .case-study--gate .sw-plot { --sw-extra: 58px; }
  .case-study--gate .sw { --sw-off: 10px; }
  .case-study--gate .sw-bar { --bw: 9px; }
  .case-study--gate .sw-old { font-size: 11px; line-height: 14px; top: calc(var(--B) * var(--s) * 1px + var(--off) + 8px); }
  .case-study--gate .sw-lab { left: calc(var(--x) * 100% - 13%); width: 26%; gap: 4px; }
  .case-study--gate .sw-lab--rise { left: auto; width: auto; }
  .case-study--gate .sw-big { font-size: 26px; }
  .case-study--gate .sw-lab--rise .sw-big { margin-bottom: 4px; }
  .case-study--gate .sw-small { font-size: 13px; line-height: 18px; }
  .case-study--gate .sw-name { font-size: 12px; line-height: 16px; }
  .case-study--gate .sw-lab--step .sw-name { font-size: 11px; line-height: 15px; }
  .case-study--gate .sw-vals { font-size: 11px; line-height: 15px; }
  .case-study--gate .money { gap: 16px; }
  .case-study--gate .money__title { font-size: 17px; line-height: 24px; }
  .case-study--gate .money__cells { gap: 18px 16px; }
  .case-study--gate .money__cell dd { font-size: 26px; }
  .case-study--gate .money { padding-block: 4px; }
  .case-study--gate .results__cols { grid-template-columns: 1fr; gap: 30px; }

  .case-study--gate .band__cols { grid-template-columns: 1fr; gap: 30px; width: auto; min-width: 0; }
  .case-study--gate .band__figure { grid-template-columns: 1fr; gap: 12px; }
  .case-study--gate .band__shot:nth-child(1) { grid-area: 1 / 1; }
  .case-study--gate .band__caption > div:nth-child(1) { grid-area: 2 / 1; margin-bottom: 20px; }
  .case-study--gate .band__shot:nth-child(2) { grid-area: 3 / 1; }
  .case-study--gate .band__caption > div:nth-child(2) { grid-area: 4 / 1; }
}

/* =====================================================================
   Gate page 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 gc-reveal-up    { from { opacity: 0; transform: translate3d(0, var(--reveal-dist), 0); } }
@keyframes gc-reveal-fade  { from { opacity: 0; } }
@keyframes gc-reveal-scale { from { opacity: 0; transform: scale(.965); } }
@keyframes gc-reveal-mask  { from { transform: translate3d(0, 105%, 0); } }
@keyframes gc-reveal-drop  { from { opacity: 0; transform: translate3d(0, -22px, 0) scale(1.04); } }
@keyframes gc-reveal-phone { from { opacity: 0; transform: translate3d(5%, 3%, 0) scale(.98); } }

/* ---------- Timing shared by every reveal ---------- */
.case-study--gate.motion-on [data-reveal].is-in,
.case-study--gate.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--gate.motion-on [data-reveal="up"].is-in { animation-name: gc-reveal-up; }
.case-study--gate.motion-on [data-reveal="fade"].is-in { animation-name: gc-reveal-fade; }
.case-study--gate.motion-on [data-reveal="scale"].is-in { animation-name: gc-reveal-scale; }

/* Masked lines: the wrapper stays put, each line rises inside its clip */
.case-study--gate.motion-on [data-reveal="mask"].is-in { animation: none; }
.case-study--gate.motion-on [data-reveal="mask"].is-in .line > span {
  animation-name: gc-reveal-mask;
  animation-duration: var(--dur-mask);
}
.case-study--gate.motion-on [data-reveal="mask"].is-in .line:nth-child(2) > span { --i: 1; }
.case-study--gate.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--gate.motion-on .sw-stage :is(.sw-dot, .sw-lab) {
  transition: opacity 300ms var(--ease-out), transform 450ms var(--ease-out);
}
.case-study--gate.motion-on .sw-stage .sw-dot:not(.is-on) { opacity: 0; transform: scale(0.3); }
.case-study--gate.motion-on .sw-stage .sw-lab:not(.is-on) { opacity: 0; transform: translate3d(0, 8px, 0); }
.case-study--gate.motion-on .sw-stage .money::before { transition: transform 700ms var(--ease-in-out); }
.case-study--gate.motion-on .sw-stage :is(.money__title, .money__cell) {
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out);
}
.case-study--gate.motion-on .sw-stage:not(.is-paid) .money::before { transform: scaleY(0); }
.case-study--gate.motion-on .sw-stage:not(.is-paid) :is(.money__title, .money__cell) { opacity: 0; transform: translate3d(0, 12px, 0); }
.case-study--gate.motion-on .sw-stage.is-paid .money__title { transition-delay: 250ms; }
.case-study--gate.motion-on .sw-stage.is-paid .money__cell { transition-delay: calc(400ms + var(--ci, 0) * 110ms); }
.case-study--gate .money__cell:nth-child(2) { --ci: 1; }
.case-study--gate .money__cell:nth-child(3) { --ci: 2; }
.case-study--gate .money__cell:nth-child(4) { --ci: 3; }

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

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

/* Hero phones drift in from the right */
.case-study--gate.motion-on [data-reveal="phone"].is-in { animation-name: gc-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--gate.motion-on [data-reveal="up"]:not(.is-in)    { opacity: 0; transform: translate3d(0, var(--reveal-dist), 0); }
.case-study--gate.motion-on [data-reveal="fade"]:not(.is-in)  { opacity: 0; }
.case-study--gate.motion-on [data-reveal="scale"]:not(.is-in) { opacity: 0; transform: scale(.965); }
.case-study--gate.motion-on [data-reveal="drop"]:not(.is-in)  { opacity: 0; transform: translate3d(0, -22px, 0) scale(1.04); }
.case-study--gate.motion-on [data-reveal="deal-left"]:not(.is-in)  { opacity: 0; transform: translate3d(-56px, -24px, 0); }
.case-study--gate.motion-on [data-reveal="deal-right"]:not(.is-in) { opacity: 0; transform: translate3d(56px, -24px, 0); }
.case-study--gate.motion-on [data-reveal="note-out"]:not(.is-in)   { opacity: 0; transform: translate3d(-12px, 0, 0); }
.case-study--gate.motion-on [data-reveal="note-back"]:not(.is-in)  { opacity: 0; transform: translate3d(12px, 0, 0); }
.case-study--gate.motion-on [data-reveal="phone"]:not(.is-in) { opacity: 0; transform: translate3d(5%, 3%, 0) scale(.98); }
.case-study--gate.motion-on [data-reveal="mask"]:not(.is-in) .line > span { transform: translate3d(0, 105%, 0); }

@media (prefers-reduced-motion: reduce) {
  .case-study--gate [data-reveal],
.case-study--gate [data-reveal] * { animation: none !important; transition: none !important; }
  .case-study--gate .sw-stage *,
  .case-study--gate .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.
   ===================================================================== */
.gc-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);
}
.gc-dev-panel[hidden] { display: none; }
.gc-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;
}
.gc-dev-panel button:hover { color: var(--fg); }
.gc-dev-panel button[aria-pressed="true"] { color: var(--accent); border-color: rgb(255 106 61 / .35); }
.gc-dev-panel kbd { font: inherit; opacity: .55; margin-left: 4px; }

/* Spacing: outline every Figma-mapped block and name it */
.case-study--gate.show-spacing [data-node-id] { outline: 1px solid rgb(255 106 61 / .28); outline-offset: -1px; position: relative; }
.case-study--gate.show-spacing [data-section] { outline: 1px dashed rgb(255 106 61 / .7); }
.case-study--gate.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 */
.gc-grid-overlay {
  position: fixed;
  z-index: 45;
  inset: 0;
  pointer-events: none;
  display: none;
}
.gc-grid-overlay.is-on { display: block; }
.gc-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);
}
.gc-grid-overlay span { background: rgb(255 106 61 / .06); border-inline: 1px solid rgb(255 106 61 / .14); }