/* Case-study pages — Verdance 2583:176416. Values from tokens.css only. */

/* === FIXED NAV (2583:178594) — 2 CTAs, fixed, bg = page token === */
.cs-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  width: var(--page-w);
  height: var(--cs-nav-h);
  margin: 0 auto;
  padding: var(--sp-16) var(--page-margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--c-bg);
}

/* === PAGE FRAME === */
.cs-page {
  position: relative;
  width: var(--page-w);
  margin: 0 auto;
  padding-top: var(--sp-170);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-100);
  background: var(--c-bg);
}

/* Top label 2583:178609 — scrolls with the page (as Figma) */
.cs-label {
  position: absolute;
  left: var(--cs-label-x);
  top: var(--cs-label-y);
  width: var(--cs-label-w);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-auto);
  text-align: center;
  color: var(--c-label-pink);
}

.cs-title {
  width: var(--cs-title-w);
  font-weight: var(--fw-bold);
  font-size: var(--fs-82);
  line-height: var(--cs-title-lh);
  text-align: center;
  color: var(--c-grey-e6e9f3);
}

/* === VIDEO === */
.cs-video { display: block; background: var(--c-bg); }
.cs-video--hero { width: var(--page-w); height: var(--cs-hero-video-h); object-fit: contain; }
.cs-video--wide { width: var(--cs-wide-w); height: var(--cs-video-wide-h); object-fit: cover; }

/* === META CARD (2583:176420) === */
.cs-meta {
  width: var(--cs-meta-w);
  padding: var(--sp-24);
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  border-radius: var(--r-16);
  background: var(--c-meta-bg);
}
.cs-meta__row { display: flex; justify-content: space-between; }
.cs-meta__item { display: flex; flex-direction: column; gap: var(--sp-4); }
.cs-meta__key {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-150-8);
  color: var(--c-grey-e6e9f3);
}
.cs-meta__value {
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-150-8);
  color: var(--c-grey-8e8e8e);
}

/* === CONTENT COLUMN (2583:176434 / 176435) === */
.cs-content {
  width: var(--cs-content-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-60);
}
.cs-section {
  width: var(--cs-text-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
}
.cs-section--wide { width: var(--page-w); gap: var(--sp-12); }
.cs-h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-32);
  text-align: center;
  color: var(--c-white);
  scroll-margin-top: var(--cs-nav-h);
}
.cs-h2--overview { line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }
.cs-block { width: 100%; display: flex; flex-direction: column; }
.cs-block--gap { gap: var(--sp-24); }
.cs-lead, .cs-p {
  font-size: var(--fs-24);
  line-height: var(--lh-40);
}
.cs-lead { font-weight: var(--fw-bold); color: var(--c-white); }
.cs-p { color: var(--c-grey-8e8e8e); }
.cs-p b { font-weight: var(--fw-bold); color: var(--c-white); }
.cs-figure { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.cs-caption {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  line-height: var(--lh-auto);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-white);
}
.cs-caption--11 { font-size: var(--fs-11); }

/* "Why I built this" figure with callouts */
.cs-why { position: relative; width: var(--cs-text-w); }
.cs-why__img { width: var(--cs-text-w); height: var(--cs-why-img-h); object-fit: cover; }
.cs-note { position: absolute; display: flex; flex-direction: column; gap: var(--sp-6); }
.cs-note--1 { left: var(--cs-note-1-x); top: var(--cs-note-1-y); width: var(--cs-note-1-w); }
.cs-note--2 { left: var(--cs-note-2-x); top: var(--cs-note-2-y); width: var(--cs-note-2-w); }
.cs-note--3 { left: var(--cs-note-3-x); top: var(--cs-note-3-y); width: var(--cs-note-3-w); }
.cs-note__title { font-weight: var(--fw-semibold); font-size: var(--fs-18); line-height: var(--lh-auto); color: var(--c-white); }
.cs-note__text { font-size: var(--fs-18); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.cs-arrow { position: absolute; color: var(--c-verdance-fg); }
.cs-arrow--1 { left: var(--cs-arrow-1-x); top: var(--cs-arrow-1-y); }
.cs-arrow--2 { left: var(--cs-arrow-2-x); top: var(--cs-arrow-2-y); }
.cs-arrow--3 { left: var(--cs-arrow-3-x); top: var(--cs-arrow-3-y); }

/* Moodboard + boards */
.cs-moodboard { width: var(--page-w); height: var(--cs-moodboard-h); background: var(--c-moodboard); }
.cs-board { display: block; width: var(--cs-board-w); height: var(--cs-board-h); }
.cs-fontboard { width: var(--cs-wide-w); height: var(--cs-fontboard-h); }

/* === SIDE NAV (2583:178624) — fixed === */
.cs-sidenav {
  position: fixed;
  left: calc(50% - var(--page-w) / 2 + var(--cs-sidenav-x));
  top: var(--cs-sidenav-y);
  z-index: var(--z-nav);
  width: var(--cs-sidenav-w);
  padding: var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  border-radius: var(--r-12);
  background: var(--g-side-nav-radial),
              linear-gradient(var(--g-side-nav-angle), var(--g-side-nav-linear-stops));
}
.cs-sidenav::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--bw-1);
  border-radius: var(--r-12);
  background: var(--g-side-nav-border);
  -webkit-mask: linear-gradient(var(--c-black) 0 0) content-box, linear-gradient(var(--c-black) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.cs-sidenav a {
  width: var(--cs-sidenav-item-w);
  font-size: var(--fs-12);
  line-height: var(--lh-150-8);
  color: var(--c-grey-8e8e8e);
  white-space: nowrap;
}
.cs-sidenav a.is-selected { color: var(--c-grey-e6e9f3); }   /* Selected 1322:32217 */

/* === STICKY PILL (2608:188737) — fixed bottom === */
.cs-pill {
  position: fixed;
  left: 50%;
  bottom: var(--cs-pill-bottom);
  z-index: var(--z-nav);
  width: var(--cs-pill-w);
  transform: translateX(-50%);
  padding: var(--sp-12) var(--sp-16);
  display: flex;
  align-items: center;
  gap: var(--sp-60);
  border-radius: var(--r-32);
  background: var(--c-pill-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  /* hidden until the Overview comes into view (case-study.js adds .is-visible) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, var(--pill-rise));
  transition: opacity var(--dur-pill) var(--ease-out), transform var(--dur-pill) var(--ease-out), visibility 0s linear var(--dur-pill);
}
.cs-pill.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%);
  transition: opacity var(--dur-pill) var(--ease-out), transform var(--dur-pill) var(--ease-out), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {   /* fade only, no rise */
  .cs-pill, .cs-pill.is-visible { transform: translateX(-50%) !important; }
  .cs-pill { transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear var(--dur-pill) !important; }
  .cs-pill.is-visible { transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear 0s !important; }
}
.cs-pill__logo { width: var(--icon-32); height: var(--icon-32); flex: none; }
.cs-pill__live { display: flex; align-items: center; gap: var(--sp-8); }
.cs-pill__dot {
  width: var(--dot-6);
  height: var(--dot-6);
  border-radius: 50%;
  background: var(--c-live-green);
  animation: cs-dot var(--dur-dot-cycle) infinite;
}
.cs-pill__live span, .cs-pill__visit {
  font-family: var(--font-pp);
  font-weight: var(--fw-ultrabold);
  font-style: italic;
  font-size: var(--fs-14);
  line-height: var(--lh-32);
  color: var(--c-white);
  white-space: nowrap;
}
.cs-pill__visit {
  width: var(--cs-visit-w);
  padding: 0 var(--sp-12);
  border-radius: var(--r-12);
  background: var(--c-verdance-fg);
  text-align: center;
}
/* Figma: AFTER_TIMEOUT 0.5s → change, smart animate 0.3s ease-out, both ways */
@keyframes cs-dot {
  0%, 31.25% { background: var(--c-live-green); animation-timing-function: var(--ease-out); }
  50%, 81.25% { background: var(--c-verdance-fg); animation-timing-function: var(--ease-out); }
  100% { background: var(--c-live-green); }
}

html { scroll-behavior: smooth; }   /* side-nav scroll (Figma: scroll animate) */
@media (prefers-reduced-motion: reduce) { .cs-pill__dot { animation: none; } }
.cs-para { display: block; }
.cs-para + .cs-para { margin-top: var(--hero-para-gap); }   /* Figma paragraph spacing 11 */

/* === CHUNK B === */
.cs-video--full { width: var(--page-w); height: var(--cs-video-full-h); object-fit: cover; }
.cs-video--arrival { width: var(--page-w); height: var(--cs-video-arrival-h); object-fit: cover; }

/* Finished town 2583:176725 */
.cs-town { width: var(--page-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-60); }
.cs-town__title {
  font-family: var(--font-pp);
  font-weight: var(--fw-ultrabold);
  font-style: italic;
  font-size: var(--fs-150);
  line-height: var(--lh-pp-150);
  text-align: center;
  white-space: nowrap;
  color: var(--c-white);
  scroll-margin-top: var(--cs-nav-h);
}
.cs-town__title span { display: block; color: var(--c-verdance-fg); }
.cs-crop { position: relative; overflow: hidden; }
.cs-crop video { position: absolute; max-width: none; }
.cs-crop--tour { width: var(--page-w); height: var(--cs-tour-h); }
.cs-crop--tour video { width: var(--cs-tour-vw); height: var(--cs-tour-vh); left: var(--cs-tour-vx); top: var(--cs-tour-vy); }

/* Phones 2583:176730 */
.cs-phones { display: flex; gap: var(--sp-40); }
.cs-phone { width: var(--cs-phone-col-w); display: flex; flex-direction: column; align-items: center; }
.cs-phone__frame { position: relative; width: var(--cs-phone-col-w); height: var(--cs-phone-frame-h); }
.cs-phone__img { position: absolute; left: var(--sp-8); top: var(--cs-phone-img-y); width: var(--cs-phone-img-w); height: var(--cs-phone-img-h); }
.cs-phone__screen { position: absolute; left: var(--cs-phone-screen-x); width: var(--cs-phone-screen-w); height: var(--cs-phone-screen-h); }
.cs-phone__screen--a { top: var(--cs-phone-screen-y-a); border-radius: var(--r-28); }
.cs-phone__screen--b { top: var(--cs-phone-screen-y-b); border-radius: var(--r-32); background: var(--c-white); }
.cs-phone__screen--a video { width: var(--cs-and-vw); height: var(--cs-and-vh); left: var(--cs-and-vx); top: var(--cs-and-vy); }
.cs-phone__screen--b video { width: var(--cs-iph-vw); height: var(--cs-iph-vh); left: var(--cs-iph-vx); top: var(--cs-iph-vy); }
.cs-phone__screen video { object-fit: fill; }   /* non-uniform scale, as Figma */
.cs-phone__label { font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-40); text-align: center; color: var(--c-white); }
.cs-figure--24 { gap: var(--sp-24); }   /* film block 2583:176714 uses gap 24 */

/* === CHUNK C === */
.cs-content-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.cs-section--outcome { gap: var(--sp-40); }
.cs-wide { width: var(--cs-wide-card-w); display: flex; flex-direction: column; gap: var(--sp-60); }
.cs-wide__head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.cs-wide__charts { display: flex; flex-direction: column; gap: var(--sp-40); }
.cs-lead-150, .cs-p-150 { width: 100%; font-size: var(--fs-24); line-height: var(--lh-150-8); }
.cs-lead-150 { font-weight: var(--fw-semibold); color: var(--c-white); }
.cs-p-150 { color: var(--c-grey-8e8e8e); }

/* Testing: gate image + iPhone bug group */
.cs-gate-img { width: var(--cs-text-w); height: var(--cs-gate-img-h); object-fit: cover; }
.cs-bug { position: relative; width: var(--cs-text-w); height: var(--cs-bug-h); }
.cs-bug__air { position: absolute; left: 0; top: 0; width: var(--cs-text-w); height: var(--cs-air-h); }
.cs-bug__shot { position: absolute; left: var(--cs-shot-x); top: var(--cs-shot-y); width: var(--cs-shot-w); height: var(--cs-shot-h); border-radius: var(--r-35); object-fit: cover; }
.cs-bug__leaf { position: absolute; left: var(--cs-leaf-x); top: var(--cs-leaf-y); width: var(--cs-leaf-w); height: var(--cs-leaf-h); object-fit: cover; }
.cs-bug__arrow { position: absolute; left: var(--cs-bug-arrow-x); top: var(--cs-bug-arrow-y); color: var(--c-verdance-fg); }
.cs-bug__note { position: absolute; left: var(--cs-bug-note-x); top: var(--cs-bug-note-y); width: var(--cs-bug-note-w); font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-auto); color: var(--c-white); }
.cs-bug__cap { position: absolute; left: var(--cs-bug-cap-x); top: var(--cs-bug-cap-y); width: var(--cs-bug-cap-w); }

/* Gates */
.cs-gates { width: var(--cs-content-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.cs-gates__row { display: flex; gap: var(--cs-gates-gap); }
.cs-gates__row img { width: var(--cs-gate-w); height: var(--cs-gate-h); object-fit: cover; }

/* Comparison table */
.cs-table { position: relative; display: flex; height: var(--cs-table-h); }
.cs-table__left { width: var(--cs-table-left-w); background: var(--c-card); }
.cs-table__right { width: var(--cs-table-right-w); background: var(--c-verdance-bg); }
.cs-table__head { position: absolute; left: var(--cs-table-head-x); top: var(--cs-table-head-y); width: var(--cs-table-head-w); display: flex; gap: var(--sp-40); padding-left: calc(var(--sp-16) + var(--sp-2)); }
.cs-table__h1 { width: var(--cs-table-col1-w); font-size: var(--fs-24); line-height: var(--lh-40); color: var(--c-strike); }
.cs-table__h2 { width: var(--cs-table-col2-w); font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; font-size: var(--fs-24); line-height: var(--lh-40); color: var(--c-white); }
.cs-table__line { position: absolute; top: var(--cs-table-line-y); left: calc(var(--cs-table-head-x) + var(--cs-table-line-x)); width: var(--cs-table-line-w); height: var(--sp-3); background: var(--c-verdance-fg); }
.cs-table__line--grey { left: var(--cs-table-head-x); width: var(--cs-table-grey-w); background: var(--c-table-grey-line); }
.cs-table__list { position: absolute; display: flex; flex-direction: column; gap: var(--sp-24); font-size: var(--fs-20); line-height: var(--lh-40); }
.cs-table__list--old { left: var(--cs-table-left-x); top: var(--cs-table-left-y); width: var(--cs-table-col1-w); color: var(--c-strike); text-decoration: line-through; }
.cs-table__list--new { left: var(--cs-table-right-x); top: var(--cs-table-right-y); width: var(--cs-table-col2-w); font-weight: var(--fw-medium); color: var(--c-white); }
.cs-table__list--new li:last-child { line-height: var(--lh-auto); }
.cs-chart { display: block; }

/* Stat cards */
.cs-stats { display: flex; gap: var(--sp-24); }
.cs-stat { position: relative; width: var(--cs-stat-w); height: var(--cs-stat-h); padding: var(--sp-24); display: flex; flex-direction: column; justify-content: space-between; background: var(--c-card); }
.cs-stat__title { font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-auto); color: var(--c-white); }
.cs-stat__old { font-family: var(--font-inter); font-size: var(--fs-28); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.cs-stat__new { font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; font-size: var(--fs-64); line-height: var(--lh-pp-64); text-align: right; color: var(--c-white); }
.cs-stat__note { position: absolute; left: var(--cs-stat-note-x); top: var(--cs-stat-note-y); font-family: var(--font-pp); font-style: italic; font-size: var(--fs-20); line-height: var(--lh-pp-20); color: var(--c-verdance-fg-on-card); }
.cs-stat__arrow { position: absolute; color: var(--c-verdance-fg); }
.cs-stat__arrow--1 { left: var(--cs-stat-arrow-1-x); top: var(--cs-stat-arrow-1-y); }
.cs-stat__arrow--2 { left: var(--cs-stat-arrow-2-x); top: var(--cs-stat-arrow-2-y); }

/* Google scale */
.cs-scale { height: var(--cs-scale-h); padding: var(--sp-40) 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-140); background: var(--c-card); }
.cs-scale__text { width: var(--cs-scale-text-w); display: flex; flex-direction: column; gap: var(--sp-12); }
.cs-scale__title { font-size: var(--fs-24); line-height: var(--lh-auto); color: var(--c-white); }
.cs-scale__desc { font-size: var(--fs-18); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.cs-scale__scale { position: relative; width: var(--cs-scale-w); display: flex; flex-direction: column; gap: calc(var(--sp-8) + var(--sp-2)); }
.cs-scale__bar { display: block; width: var(--cs-scale-w); height: var(--cs-scale-bar-h); }
.cs-scale__labels { display: flex; }
.cs-scale__col { display: flex; flex-direction: column; gap: var(--sp-8); }
.cs-scale__col:nth-child(1) { width: var(--cs-scale-col-1); }
.cs-scale__col:nth-child(2) { width: var(--cs-scale-col-2); }
.cs-scale__col:nth-child(3) { width: var(--cs-scale-col-3); align-items: center; }
.cs-scale__name { font-size: var(--fs-18); line-height: var(--lh-auto); color: var(--c-white); }
.cs-scale__range { font-size: var(--fs-16); line-height: var(--lh-auto); color: var(--c-caption-grey); white-space: nowrap; }
.cs-scale__mark { position: absolute; left: var(--cs-scale-mark-x); top: var(--cs-scale-mark-y); color: var(--c-verdance-fg); }
.cs-scale__mark-text { position: absolute; left: var(--cs-scale-mark-text-x); top: var(--cs-scale-mark-text-y); display: flex; flex-direction: column; }
.cs-scale__mark-text b { font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; font-size: var(--fs-40); line-height: var(--lh-pp-40); color: var(--c-white); }
.cs-scale__mark-text span { font-size: var(--fs-16); line-height: var(--lh-auto); color: var(--c-white); white-space: nowrap; }

/* Takeaways */
.cs-takeaways { width: var(--cs-content-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-40); }
.cs-head { width: var(--cs-head-w); display: flex; flex-direction: column; gap: var(--sp-24); }
.cs-head .cs-h2 { line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }
.cs-tk-rows { display: flex; flex-direction: column; align-items: center; gap: var(--sp-32); }
.cs-tk-row { display: flex; gap: var(--sp-32); }
.cs-tk { width: var(--cs-tk-card-w); height: var(--cs-tk-card-h); padding: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-12); background: var(--c-card-2); }
.cs-tk--wide { width: var(--cs-wide-card-w); height: var(--cs-tk-wide-h); flex-direction: row; justify-content: space-between; align-items: center; gap: var(--sp-16); }
.cs-tk__col { width: var(--cs-tk-col-w); display: flex; flex-direction: column; gap: var(--sp-12); }
.cs-tk__head { display: flex; flex-direction: column; gap: var(--sp-12); }
.cs-tk__head svg { width: var(--icon-24); height: var(--icon-24); }
.cs-tk__title { font-size: var(--fs-22); line-height: var(--lh-auto); text-transform: capitalize; color: var(--c-white); }
.cs-tk__body { font-size: var(--fs-18); line-height: var(--lh-160); color: var(--c-grey-8e8e8e); }
.cs-tk__take { font-weight: var(--fw-semibold); font-size: var(--fs-18); line-height: var(--lh-160); color: var(--c-verdance-fg-on-card); }
.cs-tk__take--auto { line-height: var(--lh-auto); }
.cs-tk__thumbs { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.cs-tk__thumb-row { display: flex; }
.cs-tk__thumb { width: var(--cs-tk-thumb-col); display: flex; flex-direction: column; gap: var(--sp-17); }
.cs-tk__thumb img { width: var(--cs-tk-thumb-w); height: var(--cs-tk-thumb-h); }
.cs-tk__thumb span, .cs-tk__thumbs > p { font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-auto); color: var(--c-caption-grey); }
.cs-tk__thumb span.is-final { color: var(--c-verdance-fg-on-card); }
.cs-tk__thumbs > p { width: 100%; font-size: var(--fs-16); }

/* What's next */
.cs-next { width: var(--cs-content-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-40); }
.cs-bi { position: relative; display: flex; height: var(--cs-table-h); }
.cs-bi__card { position: relative; width: var(--cs-next-card-w); overflow: hidden; }
.cs-bi__card--en { background: var(--c-cream); }
.cs-bi__card--ar { background: var(--c-verdance-bg); }
.cs-bi__en { position: absolute; left: var(--cs-next-en-x); top: var(--cs-next-en-y); width: var(--cs-next-en-w); display: flex; flex-direction: column; align-items: center; font-family: var(--font-pp); font-size: var(--fs-48); line-height: var(--lh-pp-48); white-space: nowrap; }
.cs-bi__en span:first-child { color: var(--c-ink-333239); }
.cs-bi__en span:last-child { font-weight: var(--fw-ultrabold); font-style: italic; color: var(--c-verdance-fg); }
.cs-bi__ar { position: absolute; left: var(--cs-next-ar-x); top: var(--cs-next-ar-y); width: var(--cs-next-ar-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); font-family: var(--font-arabic); font-size: var(--fs-48); line-height: var(--lh-arabic); white-space: nowrap; }
.cs-bi__ar span:first-child { color: var(--c-white); }
.cs-bi__ar span:last-child { font-weight: var(--fw-bold); color: var(--c-verdance-fg); }
.cs-bi__head { position: absolute; left: var(--cs-table-head-x); top: var(--cs-table-head-y); font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; font-size: var(--fs-24); line-height: var(--lh-40); text-align: center; }
.cs-bi__head span { position: absolute; top: 0; }
.cs-bi__head span:first-child { left: calc(var(--sp-16) + var(--sp-2)); width: var(--cs-next-col-en); color: var(--c-verdance-fg); }
.cs-bi__head span:last-child { left: var(--cs-next-col-ar-x); width: var(--cs-next-col-ar); color: var(--c-white); }
.cs-bi__line { position: absolute; left: var(--cs-table-head-x); top: var(--cs-table-line-y); width: var(--cs-next-line-w); height: var(--sp-3); background: var(--c-verdance-fg); }

/* Footer 2583:176947 */
.cs-footer { position: relative; width: var(--page-w); height: var(--cs-footer-h); overflow: hidden; background: var(--c-verdance-bg); }
.cs-footer__draw { position: absolute; left: 0; top: var(--cs-footer-draw-y); width: var(--cs-footer-draw-w); height: var(--cs-footer-draw-h); }
.cs-footer__title, .cs-footer__tag { position: absolute; font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; text-align: center; color: var(--c-cream-text); white-space: nowrap; }
.cs-footer__title { left: var(--cs-footer-title-x); top: var(--cs-footer-title-y); width: var(--cs-footer-title-w); font-size: var(--fs-140); line-height: var(--lh-pp-140); }
.cs-footer__tag { left: var(--cs-footer-tag-x); top: var(--cs-footer-tag-y); width: var(--cs-footer-tag-w); font-size: var(--fs-54); line-height: var(--lh-pp-54); }
.cs-footer__tag .gap { color: var(--c-tag-mid); }
.cs-footer__tag .pink { color: var(--c-verdance-fg); }
.cs-badge {
  position: absolute;
  left: var(--cs-badge-x);
  top: var(--cs-badge-y);
  width: var(--cs-badge);
  height: var(--cs-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-white);
  transition: background-color var(--dur-hover) var(--ease-out);
}
.cs-badge::after {   /* hover ring (Rectangle 5193 in 2555:166238) */
  content: "";
  position: absolute;
  left: var(--cs-badge-ring-x);
  top: var(--cs-badge-ring-y);
  width: var(--cs-badge-ring);
  height: var(--cs-badge-ring);
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-white);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.cs-badge { cursor: pointer; }
.cs-badge:hover, .cs-badge:focus-visible { background-color: var(--c-badge-hover); }
.cs-badge:hover::after, .cs-badge:focus-visible::after { opacity: 1; }
.cs-badge__live { display: flex; align-items: center; gap: var(--sp-4); }
.cs-badge__live .cs-pill__dot { background: var(--c-verdance-fg); animation-delay: calc(var(--dur-dot-cycle) / -2); }
.cs-badge__text { font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; font-size: var(--fs-16); line-height: var(--lh-pp-16); color: var(--c-white); white-space: nowrap; }
.cs-badge svg { width: var(--icon-16); height: var(--icon-16); color: var(--c-white); }

/* Next project 2583:176968 */
.cs-nextproj { width: var(--cs-head-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.cs-nextproj__head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.cs-nextproj__label, .cs-textbtn {
  padding: var(--sp-8) var(--sp-16);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  line-height: var(--lh-20);
  color: var(--c-grey-e6e9f3);
  text-shadow: var(--shadow-btn);
}
.cs-nextproj__label { font-style: italic; }
.cs-nextproj__title { font-weight: var(--fw-bold); font-size: var(--fs-r-next); line-height: var(--lh-hero); text-align: center; color: var(--c-grey-e6e9f3); }
.cs-nextproj__btns { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.cs-nextproj__mock { width: var(--cs-mock-w); height: var(--cs-mock-h); border-radius: var(--r-10); }

/* Social footer 2583:178589 */
.cs-social-footer { width: var(--page-w); height: var(--cs-social-h); display: flex; justify-content: center; align-items: flex-start; }
.cs-social-footer .social { align-self: flex-start; }

/* === EDITOR EXPERIENCE (1322:32944) === */
.cs-page--editor, .cs-page--mta { padding-top: var(--sp-148); gap: var(--sp-80); }
.cs-title--editor { line-height: var(--lh-hero); }
.cs-sidenav--editor { top: var(--ed-sidenav-y); width: var(--ed-sidenav-w); --g-side-nav-angle: var(--g-side-nav-angle-editor); }
.cs-sidenav--editor a { width: var(--ed-sidenav-item-w); }
.ed-hero { width: var(--content-w); height: var(--ed-hero-h); }
.ed-col { width: var(--cs-head-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.ed-col .cs-h2 { line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }
.ed-wide { width: var(--content-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-40); }
.ed-text { width: 100%; font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.ed-text .hl { color: var(--c-grey-e6e9f3); }
.ed-text b { font-weight: var(--fw-semibold); color: var(--c-grey-e6e9f3); }
.ed-list { width: 100%; display: flex; flex-direction: column; gap: var(--sp-24); }
.ed-feature { width: var(--cs-head-w); display: flex; flex-direction: column; }
.ed-feature__title { align-self: flex-start; font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-feature); list-style: decimal inside; }
.ed-feature__title li::marker { color: var(--c-feature); }

/* Goals */
.ed-goals { display: flex; flex-direction: column; align-items: center; gap: calc(var(--sp-16) + var(--sp-4)); }
.ed-goals__spacer { width: var(--ed-goal-spacer); height: var(--ed-goal-spacer); }
.ed-goals__emoji { width: var(--ed-emoji); height: var(--ed-emoji); }
.ed-goals__list { display: flex; flex-direction: column; gap: var(--sp-12); }
.ed-goal { width: var(--ed-goal-w); padding: var(--sp-12) var(--sp-24); border-radius: var(--r-12); background: var(--c-goal-bg); box-shadow: inset 0 0 0 var(--bw-1) var(--c-goal-border); font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.ed-goal b { font-weight: var(--fw-semibold); color: var(--c-grey-e6e9f3); }

/* Strategy cards */
.ed-cards { width: var(--ed-cards-w); display: flex; flex-direction: column; gap: var(--sp-24); }
.ed-cards__row { display: flex; justify-content: center; gap: var(--sp-24); }
.ed-card { width: var(--ed-card-w); height: var(--ed-card-h); display: flex; flex-direction: column; border-radius: var(--r-16); overflow: hidden; }   /* Figma's white card fill is fully covered by the panel + body; painting it only leaked a light hairline at the clipped corners */
.ed-card__img { width: var(--ed-card-w); height: var(--ed-card-top-h); }
.ed-card__body { flex: 1; padding: var(--ed-card-pad-y) var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-12); background: var(--c-goal-bg); }
.ed-card__title { font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }
.ed-card__text { font-size: var(--fs-20); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }

/* Carousel (component sets 1322:24954 / 27711 / 29316 / 30906) */
.ed-carousel { width: var(--ed-slide-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.ed-carousel:focus-visible { outline: var(--bw-2) solid var(--c-feature); outline-offset: var(--sp-8); }
.ed-carousel__frame { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.ed-carousel__title { width: var(--cs-head-w); font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-150-8); text-align: center; color: var(--c-grey-e6e9f3); }
.ed-slide { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.ed-carousel__slides { width: 100%; display: grid; justify-items: center; }
.ed-carousel__slides > .ed-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slide) var(--ease-out), visibility 0s linear var(--dur-slide); }
.ed-carousel__slides > .ed-slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--dur-slide) var(--ease-out), visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) { .ed-carousel__slides > .ed-slide, .ed-carousel__slides > .ed-slide.is-active { transition: none; } }
.ed-slide > img { width: var(--ed-slide-w); height: var(--ed-slide-img-h); }
.ed-slide figcaption { font-weight: var(--fw-semibold); font-size: var(--fs-12); line-height: var(--lh-150-8); text-transform: uppercase; text-align: center; color: var(--c-grey-e6e9f3); }
.ed-carousel__controls { display: flex; align-items: center; gap: var(--sp-12); }
.ed-carousel__count { font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); }
.ed-arrow { width: var(--ed-arrow); height: var(--ed-arrow); color: var(--c-white); }
.ed-arrow svg { width: var(--ed-arrow); height: var(--ed-arrow); overflow: visible; }
.ed-arrow path { transition: transform var(--dur-arrow) var(--ease-out); }
.ed-arrow--next path { transform-origin: var(--ed-arrow-next-origin); }
.ed-arrow--prev path { transform-origin: var(--ed-arrow-prev-origin); }
.ed-arrow:not(:disabled):hover path, .ed-arrow:not(:disabled):focus-visible path { transform: scale(var(--ed-arrow-scale)); }
.ed-arrow:disabled { color: var(--c-arrow-off); cursor: default; }
.ed-feature__title { margin: 0; padding: 0; }
.ed-feature--gap24 { gap: var(--sp-24); }
.ed-feature--gap40 { gap: var(--sp-40); }
.ed-wide--24 { gap: var(--sp-24); }
.ed-paras { width: var(--cs-head-w); display: flex; flex-direction: column; gap: var(--hero-para-gap); }   /* Figma paragraph spacing 11 */
.ed-wide > .cs-h2 { line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }

/* =====================================================================
   SHARED RESPONSIVE RULES (all case-study pages)
   The design is 1440 wide. Below 1440 the page narrows instead of
   scrolling sideways; at 1440 and above nothing changes.
   ===================================================================== */
html, body { overflow-x: clip; }   /* safety net: never a horizontal scrollbar */

/* Nav: background spans the full window; buttons keep their Figma inset from the 1440 frame */
.cs-nav {
  width: 100%;
  margin: 0;
  padding-left: calc(max(0px, (100% - var(--page-w)) / 2) + var(--page-margin));
  padding-right: calc(max(0px, (100% - var(--page-w)) / 2) + var(--page-margin));
}

/* Page frame and wide blocks never exceed the window */
.cs-page { width: 100%; max-width: var(--page-w); }
/* (blocks that Figma deliberately extends past their column — 1440 media in a 920/1436 column —
   are not capped; html/body overflow-x: clip keeps them from causing a scrollbar) */
.cs-content, .cs-content-wrap, .cs-gates, .cs-takeaways, .cs-next, .cs-social-footer, .ed-cards { max-width: 100%; }
.ed-wide, .cs-page .ed-hero { max-width: calc(100% - 2 * var(--page-margin)); }

/* Images and videos: rendered at their Figma display size (width/height attributes);
   the 2x file is only for sharpness. They never grow, and never get wider than the window.
   (100vw, not 100%: Figma places some media wider than their text column on purpose.) */
.cs-page img { max-width: 100vw; }
@media (max-width: 1439.98px) {
  .cs-page img { height: auto; }
  .cs-gates__row { max-width: calc(100% - 2 * var(--page-margin)); }
  .cs-gates__row img { min-width: 0; flex: 0 1 var(--cs-gate-w); }
  .cs-video--hero, .cs-video--wide, .cs-video--full, .cs-video--arrival { max-width: 100vw; height: auto; }
  .cs-video--hero { aspect-ratio: var(--ar-video-hero); }
  .cs-video--wide { aspect-ratio: var(--ar-video-wide); }
  .cs-video--full { aspect-ratio: var(--ar-video-full); }
  .cs-video--arrival { aspect-ratio: var(--ar-video-arrival); }
}
/* Editor: images stay inside their own cards/columns */
.ed-card img, .ed-carousel img, .ed-goals img { max-width: 100%; }

/* Side nav: Figma position measured from the 1440 frame; never off-screen; hidden over the hero */
.cs-sidenav {
  left: calc(max(0px, (100% - var(--page-w)) / 2) + var(--cs-sidenav-x));
  top: min(var(--cs-sidenav-y), calc(100vh - var(--cs-sidenav-h) - var(--sp-16)));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear var(--dur-pill);
}
.cs-sidenav.is-visible { opacity: 1; visibility: visible; transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear 0s; }
.cs-sidenav--editor { top: min(var(--ed-sidenav-y), calc(100vh - var(--ed-sidenav-h) - var(--sp-16))); }
@media (prefers-reduced-motion: reduce) {
  .cs-sidenav { transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear var(--dur-pill) !important; }
  .cs-sidenav.is-visible { transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear 0s !important; }
}

/* ===== Editor Experience, half 2 (Figma 1322:34840 - 1322:35360) ===== */
.ed-col--32 { gap: var(--sp-32); }
.ed-journey { width: 100%; padding: var(--sp-24); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24);
  background: var(--c-goal-bg); border-radius: var(--r-24); box-shadow: inset 0 0 0 var(--bw-1) var(--c-journey-border); }
.ed-journey__title { font-weight: var(--fw-medium); font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); }
.ed-journey__cols { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.ed-journey__col { display: flex; flex-direction: column; gap: var(--sp-12); }
.ed-journey__head { font-weight: var(--fw-semibold); font-style: italic; font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.ed-journey__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-12);
  font-weight: var(--fw-medium); font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.ed-journey__list--now { color: var(--c-grey-e6e9f3); }
.ed-impact { width: var(--cs-head-w); max-width: calc(100% - 2 * var(--page-margin)); display: flex; justify-content: center; align-items: flex-start; gap: var(--sp-24); }
.ed-impact__icons { flex: none; width: var(--ed-emoji); padding: var(--ed-impact-pad-top) 0 var(--sp-24); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.ed-impact__icons picture, .ed-impact__emoji { display: block; width: var(--ed-emoji); height: var(--ed-emoji); }
.ed-impact__line { width: var(--bw-1); height: var(--ed-impact-line-h); background: var(--c-grey-2c2c2d); }
.ed-impact__list { width: var(--ed-impact-text-w); min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-80); }
.ed-impact__item { display: flex; flex-direction: column; gap: var(--sp-8); }
.ed-impact__title { font-weight: var(--fw-semibold); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }
.ed-impact__text { font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.ed-h2-24 { width: 100%; font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); scroll-margin-top: var(--cs-nav-h); }
.ed-photo { position: relative; width: var(--ed-photo-w); height: var(--ed-photo-h); margin: 0; border-radius: var(--r-24); overflow: hidden;
  background: var(--c-goal-bg); box-shadow: 0 0 0 var(--bw-4) var(--c-photo-border); }
.ed-photo img { display: block; width: 100%; height: 100%; }
.ed-photo__me { position: absolute; left: var(--ed-photo-me-x); top: var(--ed-photo-me-y); font-weight: var(--fw-bold); font-size: var(--fs-32); line-height: var(--lh-hero); text-align: center; color: var(--c-white); }
.ed-tk-row { max-width: calc(100% - 2 * var(--page-margin)); display: flex; justify-content: center; gap: var(--sp-32); }
.ed-tk { flex: 0 1 var(--ed-tk-w); min-width: 0; padding: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-12); background: var(--c-card-2); border-radius: var(--r-16); }
.ed-tk__head { display: flex; flex-direction: column; gap: var(--sp-12); }
.ed-tk__head svg { width: var(--icon-24); height: var(--icon-24); color: var(--c-tk-icon); }
.ed-tk__title { font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-auto); text-transform: capitalize; color: var(--c-white); }
.ed-tk__text { font-size: var(--fs-20); line-height: var(--lh-160); color: var(--c-grey-8e8e8e); }
.ed-col .ed-future { width: var(--ed-future-w); max-width: 100%; }
.ed-rule { width: var(--content-w); max-width: calc(100% - 2 * var(--page-margin)); height: 0; margin: 0 0 calc(-1 * var(--bw-1)); border: 0; border-top: var(--bw-1) solid var(--c-grey-1b1b1c); }

/* ===== MEDIA CORNERS (all case-study pages) =====
   Every content image, mockup and video frame: --r-media (16px) on all corners, clipped.
   :where() keeps this at zero specificity, so any element with a Figma-specific radius
   (.cs-bug__shot 35, .cs-nextproj__mock 10.12, phone screens 28/32, .ed-photo 24) keeps its own. */
:where(.cs-page) :where(img, video, .cs-crop) { border-radius: var(--r-media); }
:where(.cs-page) :where(.cs-crop) { overflow: hidden; }
/* Exception: Verdance media corners follow Figma exactly (mostly 0). Zero specificity, so Figma radii
   set by class (.cs-bug__shot 35, .cs-nextproj__mock 10.12, phone screens 28/32) still apply. */
:where(.cs-page--verdance) :where(img, video, .cs-crop) { border-radius: 0; }
/* Not rounded: phone bezels and cut-outs, emoji */
.cs-phone__img, .cs-bug__air, .cs-bug__leaf, .ed-goals__emoji, .ed-impact__emoji { border-radius: 0; }
/* Media inside a rounded, clipping frame: the frame gives the corners */
.cs-crop video, .cs-phone__screen video, .ed-card__img, .ed-photo img { border-radius: 0; }

/* ===== MTA case study (Figma 1322:35380) — builds on the Editor (ed-*) components ===== */
.cs-sidenav--mta { top: min(var(--cs-sidenav-y), calc(100vh - var(--mta-sidenav-h) - var(--sp-16))); width: var(--ed-sidenav-w); --g-side-nav-angle: var(--g-side-nav-angle-mta); }
.cs-sidenav--mta a { width: var(--ed-sidenav-item-w); }
.mta-view { width: var(--content-w); max-width: calc(100% - 2 * var(--page-margin)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.mta-view__cap { width: 100%; display: flex; flex-direction: column; gap: var(--sp-8); text-align: center; font-size: var(--fs-20); line-height: var(--lh-150-8); }
.mta-view__title { font-weight: var(--fw-bold); color: var(--c-grey-e6e9f3); }
.mta-view__sub { color: var(--c-grey-8e8e8e); }
/* Annotated mockups: a stage in Figma px; positions/sizes from --x/--y/--w/--h (unitless Figma px) scale with the stage (cqw) */
.mta-annot { position: relative; max-width: 100%; container-type: inline-size; }
.mta-annot--ev { width: calc(var(--mta-ev-w) * 1px); aspect-ratio: var(--mta-ev-w) / var(--mta-ev-h); --stage: var(--mta-ev-w); }   /* Figma panel fill is hidden: notes sit on the page bg */
.mta-annot--lv { width: calc(var(--mta-lv-w) * 1px); aspect-ratio: var(--mta-lv-w) / var(--mta-lv-h); --stage: var(--mta-lv-w); }
.mta-annot__item { position: absolute; left: calc(var(--x) / var(--stage) * 100%); top: calc(var(--y) / var(--stage) * 100cqw); width: calc(var(--w) / var(--stage) * 100%); }
.mta-annot__item:is(svg, img) { height: calc(var(--h) / var(--stage) * 100cqw); }
.mta-annot svg { overflow: visible; color: var(--c-annot-arrow); }
.mta-annot__note { font-weight: var(--fw-medium); font-size: calc(16 / var(--stage) * 100cqw); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.mta-annot__note b { font-weight: var(--fw-bold); color: var(--c-grey-e6e9f3); }
.mta-personas { display: flex; justify-content: center; gap: var(--sp-24); }
.mta-persona { width: var(--mta-persona-w); padding: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-16); background: var(--c-goal-bg); border-radius: var(--r-8); overflow: hidden; }
.mta-persona__head { display: flex; align-items: center; gap: var(--mta-persona-gap); }
.mta-persona__head img { flex: none; width: var(--mta-avatar); height: var(--mta-avatar); border-radius: 50%; }
.mta-persona__id { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.mta-persona__who { display: flex; flex-direction: column; gap: var(--sp-4); }
.mta-persona__name { font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-auto); color: var(--c-grey-e6e9f3); }
.mta-persona__age { font-weight: var(--fw-medium); font-size: var(--fs-12); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.mta-persona__tag { padding: var(--sp-4) var(--sp-8); border-radius: var(--r-8); background: var(--c-tag-bg); font-weight: var(--fw-semibold); font-size: var(--fs-12); line-height: var(--lh-130); color: var(--c-grey-e6e9f3); }
.mta-persona__bio { font-weight: var(--fw-medium); font-size: var(--fs-12); line-height: var(--lh-170); color: var(--c-persona-text); }
.mta-persona__needs { display: flex; flex-direction: column; gap: var(--sp-12); font-size: var(--fs-12); line-height: var(--lh-auto); color: var(--c-grey-e6e9f3); }
.mta-persona__needs-title { font-weight: var(--fw-bold); }
.mta-persona__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto auto; justify-content: space-between; column-gap: var(--mta-needs-gap); row-gap: var(--sp-12); font-weight: var(--fw-semibold); }   /* Figma: wrap, space-between -> col 2 at 163 / 144 */
.mta-persona__list li { position: relative; padding-left: var(--mta-bullet-indent); }
.mta-persona__list li::before { content: "\2022"; position: absolute; left: var(--mta-bullet-x); }
.ed-cards--40 { gap: var(--sp-40); }
.mta-pain { width: 100%; display: flex; flex-direction: column; gap: var(--sp-16); }
.mta-pain__label { font-weight: var(--fw-medium); font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); }
.mta-notes { display: flex; gap: var(--sp-16); }
.mta-note { flex: 0 1 var(--mta-note-w); min-width: 0; height: var(--mta-note-h); padding: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-12); overflow: hidden;
  background: var(--c-bg); border-radius: var(--r-16); box-shadow: var(--sh-note), inset 0 0 0 var(--bw-1) var(--note-c); }
.mta-note--1 { --note-c: var(--c-note-1); } .mta-note--2 { --note-c: var(--c-note-2); } .mta-note--3 { --note-c: var(--c-note-3); } .mta-note--4 { --note-c: var(--c-note-4); }
.mta-note__title { font-family: var(--font-roboto); font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: var(--lh-20); color: var(--c-grey-e6e9f3); }
.mta-note__list { margin: 0; padding: 0 0 0 var(--sp-16); display: flex; flex-direction: column; gap: var(--mta-note-list-gap); list-style: disc;
  font-family: var(--font-inter); font-weight: var(--fw-semibold); font-size: var(--fs-12); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }
.mta-note__list b { font-weight: var(--fw-bold); color: var(--c-grey-e6e9f3); }
.mta-note__list b.dim { color: var(--c-grey-8e8e8e); }
.mta-note__list .lt { color: var(--c-grey-e6e9f3); }
.ed-goals--plain .ed-goals__spacer { display: none; }
/* Competitor cards 1322:36149: no container fill; each image r16 + 4px OUTSIDE stroke #5F5F62 */
.mta-comps { width: var(--ed-slide-w); max-width: 100%; display: flex; flex-direction: column; gap: var(--mta-comps-gap); }
.mta-comps__row { display: flex; gap: var(--sp-16); }
.mta-comps__row--b { gap: var(--sp-17); }
.mta-comps img { flex: 1 1 0; min-width: 0; width: var(--mta-comp-w); height: auto; aspect-ratio: var(--mta-comp-ar-a); border-radius: var(--r-16); box-shadow: 0 0 0 var(--bw-4) var(--c-photo-border); }
.mta-comps__row--b img { aspect-ratio: var(--mta-comp-ar-b); }
.ed-col--40 { gap: var(--sp-40); }
.ed-text b.bold { font-weight: var(--fw-bold); }
.mta-annot { margin: 0; }

/* ===== MTA half 2 (Figma 1322:36157 - 1322:37963) ===== */
.mta-col-left { align-items: flex-start; }
.mta-h3 { font-weight: var(--fw-semibold); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); scroll-margin-top: var(--cs-nav-h); }
.mta-wires { width: var(--ed-slide-w); max-width: 100%; display: flex; flex-direction: column; gap: var(--mta-wire-row-gap); }
.mta-wires__row { display: flex; gap: var(--mta-wire-gap); }
.mta-wires img { flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: var(--mta-wire-ar-a); border-radius: var(--r-24); }   /* Figma r24, 4px INSIDE stroke baked in */
.mta-wires__row + .mta-wires__row img { aspect-ratio: var(--mta-wire-ar-b); }
.mta-shot { border-radius: var(--r-8); box-shadow: 0 0 0 var(--bw-4) var(--c-photo-border); }   /* Figma r8 + 4px OUTSIDE stroke */
.mta-ut { width: var(--ed-slide-w); max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-80); }
.mta-ut__block { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.mta-ut__title { font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-150-8); text-align: center; color: var(--c-grey-e6e9f3); }
.mta-ut__row { width: 100%; display: flex; justify-content: center; gap: var(--sp-16); }
.mta-ut__row img { flex: 0 1 var(--mta-shot-w); min-width: 0; height: auto; aspect-ratio: var(--mta-shot-ar-a); }
.mta-pc { width: 100%; display: flex; justify-content: center; gap: var(--sp-40); }
.mta-pc__col { flex: 0 1 var(--ed-card-w); min-width: 0; display: flex; flex-direction: column; gap: var(--sp-16); }
.mta-pc__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.mta-pc__fig figcaption { font-size: var(--fs-16); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.mta-pc__fig img { width: 100%; height: auto; aspect-ratio: var(--mta-shot-ar-b); }
.mta-pc__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.mta-pc__list li { display: flex; align-items: center; gap: var(--sp-4); font-weight: var(--fw-medium); font-size: var(--fs-16); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.mta-pc__ico { flex: none; width: var(--sp-16); height: var(--sp-16); }
.mta-pc__ico--ok { color: var(--c-pro); } .mta-pc__ico--no { color: var(--c-con); }
.mta-carousels { display: flex; flex-direction: column; align-items: center; gap: var(--sp-80); max-width: 100%; }
.mta-carousel__head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.mta-carousel__sub { width: var(--cs-head-w); max-width: 100%; font-size: var(--fs-20); line-height: var(--lh-150-8); text-align: center; color: var(--c-grey-8e8e8e); }
.mta-results, .mta-learn { width: var(--content-w); max-width: calc(100% - 2 * var(--page-margin)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-80); }
.mta-results__top, .mta-learn__top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-40); }
.mta-results__cards { width: var(--cs-head-w); max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-40); }
.mta-learn__rows { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-40); }
.ed-journey.mta-survey, .ed-journey.mta-cloud { overflow: hidden; }   /* Figma: clip content, r24, 1px INSIDE stroke #1D1E1E */
.mta-survey__table { display: grid; grid-template-columns: var(--mta-survey-cols); column-gap: var(--mta-survey-col-gap); row-gap: var(--sp-12); border-collapse: collapse;
  font-weight: var(--fw-medium); font-size: var(--fs-32); line-height: var(--lh-150-8); text-align: center; color: var(--c-grey-8e8e8e); }
.mta-survey__table :is(thead, tbody, tr) { display: contents; }
.mta-survey__table :is(th, td) { padding: 0; font-weight: inherit; }
.mta-survey__h { font-weight: var(--fw-regular); font-style: italic; font-size: var(--fs-48); line-height: var(--lh-150-8); }
.mta-survey__table td:last-child { display: flex; justify-content: center; align-items: center; gap: var(--sp-4); }
.mta-survey__now { color: var(--c-grey-e6e9f3); }
.mta-survey__gain { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-16); }
.mta-survey__up { width: var(--sp-16); height: var(--sp-16); color: var(--c-gain); }
.ed-journey.mta-cloud { position: relative; display: block; height: var(--mta-cloud-h); }
.mta-cloud__w { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); transform-origin: 0 0; transform: rotate(calc(var(--r) * -1deg));
  font-style: italic; font-size: calc(var(--fs) * 1px); line-height: var(--lh-150-8); white-space: nowrap; color: var(--c-grey-e6e9f3); }
.mta-cloud__w--blue { color: var(--c-cloud-blue); }
.mta-cloud__text { position: relative; font-weight: var(--fw-medium); font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); }
.mta-impact { width: var(--cs-head-w); max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-24); }
.mta-impact__row { width: 100%; max-width: 100%; }
.mta-impact__icons { padding-top: var(--mta-impact-pad-top); }
.mta-line-a { height: var(--mta-impact-line-a); }
.mta-stroke { -webkit-text-stroke: calc(2 * var(--bw-1)) var(--c-black); paint-order: stroke fill; }   /* Figma: 1px OUTSIDE black text stroke */
.mta-next__title { text-wrap: balance; }   /* owner's decision: balanced lines (explicit <br>s in the HTML; balance alone left "Workspace" on its own) */
.mta-next__mock { width: calc(var(--cs-mock-w) + 2 * var(--mta-next-stroke)); max-width: none; height: auto; margin: calc(-1 * var(--mta-next-stroke)); border-radius: var(--mta-next-r); }

/* ===== TEAM WORKSPACE case study (Figma 2235:166662) ===== */
/* isolation: the rotated user-flow diagram sits at z-index -1, above the page background but under later text (as Figma) */
.cs-page--tw { padding-top: var(--sp-100); gap: var(--sp-100); isolation: isolate; }
.cs-sidenav--tw { width: var(--ed-sidenav-w); --g-side-nav-angle: var(--g-side-nav-angle-tw); }
.cs-sidenav--tw a { width: var(--ed-sidenav-item-w); }
.tw-title { line-height: var(--cs-title-lh); text-wrap: balance; }
.tw-title__p { display: block; margin-bottom: var(--sp-11); }   /* Figma paragraph spacing 11 after line 1 */
.tw-hero { width: var(--tw-hero-w); max-width: calc(100% - 2 * var(--page-margin)); height: auto; margin: calc(-1 * var(--tw-hero-stroke)); }
:where(.cs-page--tw) .tw-hero { border-radius: var(--tw-hero-r); }
.tw-overview { width: var(--cs-content-w); max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.tw-content { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-60); }
.tw-col { width: var(--tw-text-w); max-width: calc(100% - 2 * var(--page-margin)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.tw-col--left { align-items: flex-start; }
.tw-sub { width: 100%; display: flex; flex-direction: column; gap: var(--sp-16); }   /* Figma 2235:167041 */
.tw-text { width: 100%; margin: 0; font-size: var(--fs-24); line-height: var(--lh-40); color: var(--c-grey-8e8e8e); --tw-b: var(--c-white); }
.tw-text--soft { --tw-b: var(--c-tw-label); }
.tw-text b { font-weight: var(--fw-bold); color: var(--tw-b); }
.tw-text ul, .tw-text ol { margin: 0; padding: 0; list-style: none; }
.tw-text li { position: relative; padding-left: var(--sp-36); }
.tw-text ul > li::before { content: "\2022"; position: absolute; left: var(--sp-12); color: var(--tw-b); }
.tw-step { position: relative; padding-left: var(--sp-37); font-weight: var(--fw-bold); color: var(--c-tw-step); }   /* Figma ordered list, numbered across text boxes */
.tw-step::before { content: attr(data-n) "."; position: absolute; left: var(--sp-9); }
.tw-gap { display: block; height: var(--lh-40); }

/* Carousels: each slide is a whole Figma card */
.tw-carousel { width: auto; max-width: calc(100% - 2 * var(--page-margin)); gap: var(--sp-12); }
.tw-carousel--persona { gap: calc(var(--sp-16) + var(--tw-cap-gap)); }
.tw-card { box-sizing: border-box; width: var(--tw-matrix-w); max-width: 100%; min-height: var(--tw-matrix-h); padding: var(--sp-24); border-radius: var(--r-40); background: var(--c-tw-card); box-shadow: var(--sh-tw-card); }
.tw-card__title { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-36); line-height: var(--lh-auto); color: var(--c-grey-e6e9f3); }
.tw-matrix { position: relative; display: flex; flex-direction: column; gap: var(--sp-33); }
.tw-matrix::before { content: ""; position: absolute; left: calc(var(--sp-24) + var(--tw-col-hl-x)); top: calc(var(--sp-24) + var(--tw-col-hl-y)); width: var(--tw-col-hl-w); height: var(--tw-col-hl-h); border-radius: var(--r-16); background: var(--c-tw-col); }
.tw-matrix__table { position: relative; display: grid; grid-template-columns: repeat(6, var(--tw-col-w)); justify-content: space-between; row-gap: var(--sp-24); margin: 0; font-size: var(--fs-18); line-height: var(--lh-auto); color: var(--c-grey-e6e9f3); }
.tw-matrix__table > * { margin: 0; min-height: var(--tw-cell-h); }
.tw-matrix__head { height: var(--tw-head-h); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; font-weight: var(--fw-bold); }
.tw-matrix__head--first { justify-content: flex-end; color: var(--c-white); }
.tw-matrix__feat { font-weight: var(--fw-bold); }
.tw-matrix__table svg { display: block; }
:where(.cs-page--tw) .tw-logo { border-radius: 0; }
:where(.cs-page--tw) .tw-logo--r2 { border-radius: var(--r-2); }
.tw-comp { display: flex; flex-direction: column; gap: var(--sp-40); }
.tw-comp__table { display: flex; flex-direction: column; gap: var(--sp-40); margin: 0; font-size: var(--fs-20); line-height: var(--lh-auto); color: var(--c-grey-e6e9f3); }
.tw-comp__row { display: grid; grid-template-columns: var(--tw-comp-cols); align-items: start; }
.tw-comp__row--head { grid-template-columns: var(--tw-comp-cols-head); font-weight: var(--fw-bold); }
.tw-comp__row > * { margin: 0; }
.tw-comp__name { display: flex; align-items: center; gap: var(--sp-12); font-weight: var(--fw-bold); }
.tw-comp__rule { width: 1px; height: var(--tw-rule-h); background: var(--c-tw-rule); }
.tw-comp__focus { font-weight: var(--fw-bold); }

.tw-persona { width: var(--tw-persona-w); min-height: var(--tw-persona-h); display: flex; gap: var(--sp-40); }
.tw-persona__photo { position: relative; flex: none; width: var(--tw-photo-w); height: var(--tw-photo-h); border-radius: var(--r-30); box-shadow: 0 0 0 var(--tw-photo-stroke) var(--tw-stroke), var(--sh-tw-photo-out); }
.tw-persona__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
:where(.cs-page--tw) .tw-persona__photo img { border-radius: var(--r-30); }
.tw-persona__photo::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-30); background: var(--g-tw-photo); box-shadow: var(--sh-tw-photo-in); }
.tw-persona--1 { --tw-stroke: var(--c-tw-p1-stroke); }
.tw-persona--2 { --tw-stroke: var(--c-tw-p2-stroke); }
.tw-persona__id { position: absolute; z-index: 1; left: var(--tw-name-x); top: var(--tw-name-y); display: flex; flex-direction: column; gap: var(--sp-12); color: var(--c-grey-e6e9f3); }
.tw-persona__name { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-36); line-height: var(--lh-auto); }
.tw-persona__facts { margin: 0; display: flex; flex-direction: column; gap: var(--sp-16); font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-auto); }
.tw-persona__facts div { display: flex; gap: var(--sp-10); }
.tw-persona__facts dt, .tw-persona__facts dd { margin: 0; }
.tw-persona__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-24); }
.tw-persona__block { display: flex; flex-direction: column; gap: var(--sp-16); }
.tw-persona__block + .tw-persona__block::before { content: ""; height: 1px; background: repeating-linear-gradient(90deg, var(--c-tw-dash) 0 var(--sp-6), transparent var(--sp-6) var(--sp-12)); }
.tw-chip { align-self: flex-start; display: flex; align-items: center; gap: var(--sp-6); margin: 0; padding: var(--sp-6) var(--sp-16); border-radius: var(--r-16); background: var(--c-tw-chip); font-family: var(--font-inter); font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-18); color: var(--c-white); }
.tw-chip--figtree { font-family: inherit; }
.tw-chip svg { width: var(--tw-chip-icon); height: var(--tw-chip-icon); flex: none; }
.tw-persona__text { margin: 0; font-weight: var(--fw-medium); font-size: var(--fs-20); line-height: var(--lh-130-tw); color: var(--c-tw-chip-text); }

/* User-flow diagram 2235:167048: Figma rotates it 5.69deg and lets it run past the page; the WebP is the
   rotated render clipped to the 1440 page. It fills a 1224 slot and overlaps the next section (text on top). */
.tw-flow { position: relative; width: min(var(--tw-flow-w), 100vw); aspect-ratio: var(--tw-flow-ar); }
.tw-flow img { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; max-width: none; height: auto; }
:where(.cs-page--tw) .tw-flow img { border-radius: 0; }

.tw-wires { width: var(--tw-wires-w); max-width: calc(100% - 2 * var(--page-margin)); display: flex; justify-content: space-between; }
.tw-wires img { width: var(--tw-wire-w); height: auto; }
:where(.cs-page--tw) .tw-wires img { border-radius: var(--r-17); }
.tw-comp__row > [style*="--w"] { width: calc(var(--w) * 1px); max-width: 100%; }   /* Figma text-box widths (wrap points) */
.ed-carousel__slides > .tw-card { align-items: stretch; }   /* the slide is the card: Figma's left-aligned content */
.ed-carousel__slides > .tw-persona { flex-direction: row; }

/* ===== Team Workspace, second half ===== */
.tw-step--plain { padding-left: 0; }   /* "4. Engineering Alignment": number typed in the text, not a Figma list (no hanging indent) */
.tw-step--plain::before { content: none; }

/* Handover boards (Figma 1436-wide frames): a stage in Figma px; items placed with --x/--y/--w/--h, text sized with --fs */
.tw-board { position: relative; width: calc(var(--tw-board) * 1px); max-width: 100%; aspect-ratio: var(--tw-board) / var(--h); container-type: inline-size; background: var(--c-bg); --u: calc(100cqw / var(--tw-board)); }
.tw-board--clip { overflow: hidden; }
.tw-b { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); margin: 0; }
.tw-b:is(img, svg, .tw-b--box) { height: calc(var(--h) * var(--u)); }
:where(.cs-page--tw) .tw-board img { border-radius: 0; }   /* crops of the board: corners are in the image */
.tw-nm { font-family: var(--font-nm); font-size: calc(var(--fs) * var(--u)); color: var(--c-white); }
.tw-nm--b { font-weight: var(--fw-bold); }
.tw-lh-100 { line-height: var(--lh-tw-100); }
.tw-lh-120 { line-height: var(--lh-tw-120); }
.tw-lh-125 { line-height: var(--lh-tw-125); }
.tw-lh-140 { line-height: var(--lh-tw-140); }
.tw-lh-auto { line-height: var(--lh-auto); }
.tw-c { text-align: center; }
.tw-grey { color: var(--c-grey-8e8e8e); }
.tw-spaced { letter-spacing: var(--ls-tw-14); word-break: break-all; }   /* Figma wraps the alphabet between letters */
.tw-lower { text-transform: lowercase; }
.tw-3-2 { color: var(--c-tw-3-2); }
.tw-rot { transform-origin: 0 0; transform: matrix(var(--a), var(--b), var(--c), var(--d), 0, 0); }
.tw-rule { background: var(--c-grey-8e8e8e); }
.tw-vdash { width: var(--bw-1); background: repeating-linear-gradient(180deg, var(--c-tw-board-line) 0 var(--sp-8), transparent var(--sp-8) var(--sp-16)); }
.tw-vdash--grid { background: repeating-linear-gradient(180deg, var(--c-tw-grid-line) 0 var(--sp-8), transparent var(--sp-8) var(--sp-16)); }
.tw-label { display: flex; align-items: center; gap: var(--sp-8); font-weight: var(--fw-bold); font-size: calc(var(--fs-20-n) * var(--u)); line-height: var(--lh-auto); color: var(--c-white); white-space: nowrap; }
.tw-label--col { flex-direction: column; }
.tw-label svg { width: calc(var(--icon-24-n) * var(--u)); height: calc(var(--icon-24-n) * var(--u)); flex: none; }
.tw-ccard { box-sizing: border-box; height: calc(var(--h) * var(--u)); padding: calc(var(--fs-16-n) * var(--u)) calc(var(--icon-24-n) * var(--u)); display: flex; flex-direction: column; gap: calc(var(--n-8) * var(--u)); border: var(--bw-1) solid var(--c-tw-comp-stroke); border-radius: var(--r-16); background: var(--c-tw-comp-card); }
.tw-ccard__title { margin: 0; font-family: var(--font-inter); font-weight: var(--fw-regular); font-size: calc(var(--fs-18-n) * var(--u)); line-height: calc(var(--n-28) * var(--u)); color: var(--c-white); white-space: nowrap; }
.tw-ccard img { display: block; width: calc(var(--iw) * var(--u)); height: auto; max-width: none; }

/* Carousel 3 (2235:155512): the Figma prototype's Smart Animate rebuilt as layers. Six phones, one image each,
   placed per variant with transform (translate + separate x/y scale) and opacity only; JS sets --tx/--ty/--sx/--sy/--o. */
.tw-c3 { width: var(--tw-c3-w); max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); scroll-margin-top: var(--cs-nav-h); }
.tw-c3:focus-visible { outline: var(--bw-2) solid var(--c-feature); outline-offset: var(--sp-8); }
.tw-c3__stage { position: relative; width: 100%; aspect-ratio: var(--tw-c3-ar); overflow: hidden; container-type: inline-size; background: var(--c-bg); --u: calc(100cqw / var(--tw-c3)); }
.tw-c3__phone { position: absolute; left: 0; top: 0; width: calc(var(--rw) * var(--u)); height: calc(var(--rh) * var(--u)); padding: 0; border: 0; background: none; cursor: default;
  transform-origin: 0 0; transform: translate(calc(var(--tx, 0) * var(--u)), calc(var(--ty, 0) * var(--u))) scale(var(--sx, 1), var(--sy, 1)); opacity: var(--o, 0);
  transition: transform var(--dur-c3) var(--ease-c3), opacity var(--dur-c3) var(--ease-c3); }
.tw-c3__phone.is-link { cursor: pointer; }
.tw-c3__phone img { display: block; width: 100%; height: 100%; }
:where(.cs-page--tw) .tw-c3 img { border-radius: 0; }
.tw-c3__arrow, .tw-c3__hint, .tw-c3__dots { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); transition: opacity var(--dur-c3) var(--ease-c3); }
.tw-c3__arrow { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); pointer-events: none; }
.tw-c3__hint { margin: 0; font-weight: var(--fw-semibold); font-size: calc(var(--fs-16-n) * var(--u)); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); white-space: nowrap; pointer-events: none; }
.tw-c3__dots { display: flex; gap: calc(var(--tw-dot-gap-n) * var(--u)); }
.tw-c3__dot { position: relative; width: calc(var(--tw-dot-n) * var(--u)); height: calc(var(--tw-dot-n) * var(--u)); border-radius: var(--r-32); background: var(--c-white); }
.tw-c3__dot i { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity var(--dur-c3) var(--ease-c3); }
.tw-c3__dot-past { background: var(--c-tw-dot-past); }
.tw-c3__dot-now { background: var(--c-tw-dot-now); }
.tw-c3__dot.is-past .tw-c3__dot-past, .tw-c3__dot.is-now .tw-c3__dot-now { opacity: 1; }
.tw-c3.is-first .tw-c3__dots, .tw-c3:not(.is-first) .tw-c3__hint, .tw-c3:not(.is-first) .tw-c3__arrow { opacity: 0; }
.tw-c3.no-anim :is(.tw-c3__phone, .tw-c3__arrow, .tw-c3__hint, .tw-c3__dots, .tw-c3__dot i) { transition: none; }   /* first paint: no move-in */
@media (prefers-reduced-motion: reduce) { .tw-c3__phone, .tw-c3__arrow, .tw-c3__hint, .tw-c3__dots, .tw-c3__dot i { transition: none; } }

.tw-collage { width: calc(var(--tw-board) * 1px); max-width: 100%; height: auto; aspect-ratio: var(--tw-collage-ar); }
:where(.cs-page--tw) .tw-collage { border-radius: var(--r-tw-collage); }

/* Outcome & Impact (2235:168753) */
.tw-h2-outcome { line-height: var(--lh-32); }
.tw-h2-outcome span { color: var(--c-tw-outcome); }
.tw-text--32 { line-height: var(--lh-32); }
.tw-text--32 p + p { margin-top: var(--sp-11); }
.tw-impact { width: var(--cs-head-w); max-width: 100%; display: flex; justify-content: center; align-items: flex-start; gap: var(--sp-24); }
.tw-impact__icons { flex: none; width: var(--ed-emoji); padding-bottom: var(--sp-24); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.tw-impact__icons picture, .tw-impact__icons .ed-impact__emoji { display: block; width: var(--ed-emoji); height: var(--ed-emoji); }
.tw-impact__pad { padding: var(--tw-impact-pad) 0; }
.tw-impact__icons .ed-impact__line:nth-of-type(1) { height: var(--tw-line-1); }
.tw-impact__icons .ed-impact__line:nth-of-type(2) { height: var(--tw-line-2); }
.tw-impact__icons .ed-impact__line:nth-of-type(3) { height: var(--tw-line-3); }
.tw-impact .ed-impact__list { gap: var(--tw-impact-gap); padding: var(--tw-impact-pad) 0; }

/* Key Takeaways (2235:168784) and Future Prospects (2235:168810) */
.tw-learn { width: var(--cs-content-w); max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-80); }
.tw-learn .ed-tk { flex-basis: var(--tw-tk-w); }
.tw-learn .ed-tk-row { width: 100%; }
.tw-h2-future { line-height: var(--lh-32); color: var(--c-tw-outcome); }
.tw-handover { width: calc(var(--tw-board) * 1px); max-width: 100%; display: flex; flex-direction: column; }   /* Handover Part 1/2: boards stacked, gap 0 */
#dev-handover { scroll-margin-top: var(--cs-nav-h); }   /* side-nav targets that are not headings: land below the top bar like the others */

/* Full-flow viewer for the user-flow diagram (opens from .tw-flow) */
.tw-flow[data-flow-open] { cursor: zoom-in; }
.tw-flow[data-flow-open]:focus-visible { outline: var(--bw-2) solid var(--c-feature); outline-offset: var(--sp-8); }
.tw-viewer { position: fixed; inset: 0; z-index: var(--z-viewer); background: var(--c-bg); opacity: 0; transition: opacity var(--dur-viewer) var(--ease-out); }
.tw-viewer.is-open { opacity: 1; }
.tw-viewer[hidden] { display: none; }
.tw-viewer__canvas { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.tw-viewer__canvas.is-dragging { cursor: grabbing; }
.tw-viewer__img, .tw-viewer__node { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--s, 1)); user-select: none; -webkit-user-drag: none; }
:where(.cs-page--tw, .tw-viewer) .tw-viewer__img { border-radius: 0; }
.tw-viewer.is-anim :is(.tw-viewer__img, .tw-viewer__node) { transition: transform var(--dur-viewer) var(--ease-out); }
.tw-viewer__bar { position: absolute; left: 0; right: 0; top: 0; height: var(--tw-viewer-bar-h); padding: 0 var(--page-margin); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.tw-viewer__group { display: flex; align-items: center; gap: var(--sp-12); pointer-events: auto; }
.tw-viewer__btn { padding: var(--sp-8); }
.tw-viewer__btn[hidden] { display: none; }   /* single board: no prev / next */
.tw-viewer__btn:disabled { color: var(--c-arrow-off); cursor: default; }
.tw-viewer__title { margin: 0; font-weight: var(--fw-semibold); font-size: var(--fs-16); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tw-viewer, .tw-viewer.is-anim .tw-viewer__img { transition: none; } }

/* =====================================================================
   RESPONSIVE — shared (all case-study pages). >= 1190 unchanged.
   ===================================================================== */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }   /* 0 unless viewport-fit=cover (Verdance) */

@media (max-width: 1189.98px) {
  .cs-sidenav { display: none; }                                  /* D3: hidden on tablet + phone */
  .cs-nextproj { max-width: calc(100% - 2 * var(--page-margin)); }
  .cs-nextproj__mock { max-width: 100%; height: auto; }
  /* 44 px hit areas, visuals unchanged: carousel arrows (40) and "Visit site" (32 tall) */
  .ed-arrow, .cs-pill__visit { position: relative; }
  .ed-arrow::before { content: ""; position: absolute; inset: calc(var(--hit-pad) * -1); }
  .cs-pill__visit::before { content: ""; position: absolute; inset: calc(var(--hit-pad-visit) * -1) 0; }
}
/* "Visit site" pill: same show/hide rules; kept clear of the home indicator */
.cs-pill { bottom: max(var(--cs-pill-bottom), env(safe-area-inset-bottom)); }

/* Case-study top bar on phone: pills 44 px tall, labels 14 */
@media (max-width: 767.98px) {
  .cs-nav { padding-top: 0; padding-bottom: 0; }
  .cs-nav .btn { height: var(--tap); padding: 0 var(--sp-16); font-size: var(--fs-r-min); }
}

/* Carousels: horizontal swipe on touch; vertical page scroll and pinch-zoom stay with the browser */
.ed-carousel__slides, .tw-c3__stage { touch-action: pan-y pinch-zoom; }

/* Full-screen viewer, generic: any element with [data-viewer] (live boards) opens it on tablet + phone */
@media (max-width: 1189.98px) {
  [data-viewer] { cursor: zoom-in; }
  [data-viewer]:focus-visible { outline: var(--bw-2) solid var(--c-feature); outline-offset: var(--sp-8); }
}
.tw-viewer__node > .tw-viewer__scope { display: block; width: 100%; max-width: none; margin: 0; padding: 0; gap: 0; background: none; }   /* board copy keeps its page classes, not the page layout */
.tw-viewer__node { pointer-events: none; }

/* Touch screens (hover: none): default state */
@media (hover: none) {
  .ed-arrow:not(:disabled):hover:not(:focus-visible) path { transform: none; }
  .cs-badge:hover:not(:focus-visible) { background-color: transparent; }
  .cs-badge:hover:not(:focus-visible)::after { opacity: 0; }
}

/* =====================================================================
   VERDANCE — tablet + phone (build 4). >= 1190 unchanged.
   Column = window - 2 x page margin; every block is its content + spacing.
   ===================================================================== */
@media (max-width: 1189.98px) {
  .cs-page--verdance { padding-top: var(--cs-top-tablet); gap: var(--cs-gap-tablet); --col: calc(100% - 2 * var(--page-margin)); }
  .cs-page--verdance .cs-label { position: static; width: auto; margin-bottom: calc(var(--sp-16) - var(--cs-gap-tablet)); font-size: var(--fs-r-body-24); }
  .cs-page--verdance .cs-title { width: min(var(--cs-title-w), var(--col)); font-size: var(--fs-r-hero); line-height: var(--lh-r-title); }
  .cs-page--verdance .cs-meta { width: var(--col); }
  .cs-page--verdance .cs-meta__row { flex-wrap: wrap; gap: var(--sp-24) var(--sp-32); }
  .cs-page--verdance .cs-meta__value { font-size: var(--fs-r-body-24); }
  .cs-page--verdance :is(.cs-content-wrap, .cs-content, .cs-takeaways, .cs-next) { width: 100%; }
  .cs-page--verdance .cs-section { width: min(var(--cs-text-w), var(--col)); container-type: inline-size; }
  .cs-page--verdance .cs-section--wide { width: 100%; }
  .cs-page--verdance :is(.cs-lead, .cs-p) { font-size: var(--fs-r-body-24); line-height: var(--lh-r-body); }
  .cs-page--verdance :is(.cs-lead-150, .cs-p-150) { font-size: var(--fs-r-body-24); }
  .cs-page--verdance .cs-h2 { font-size: var(--fs-r-h2); line-height: var(--lh-r-h2); }
  .cs-page--verdance .cs-caption { font-size: var(--fs-r-min); }
  .cs-page--verdance :is(.cs-moodboard, .cs-board, .cs-fontboard, .cs-chart, .cs-gate-img, .cs-video--wide) { width: 100%; max-width: 100%; height: auto; }

  /* Boards that scale as one piece (tap opens the viewer) */
  .cs-page--verdance .cs-fit { zoom: min(1, tan(atan2(100cqw, var(--fit-w)))); }
  .cs-page--verdance .cs-why { --fit-w: var(--why-w); width: var(--why-w); align-items: flex-start; }
  .cs-page--verdance .cs-why > * { translate: var(--why-dx) 0; }
  .cs-page--verdance .cs-why > figcaption { width: var(--cs-text-w); }
  .cs-page--verdance .cs-bug { --fit-w: var(--bug-w); }
  .cs-page--verdance :is(.cs-fit, .cs-phone__frame) img { max-width: none; }   /* sizes stay Figma px inside a scaled board */
  .cs-page--verdance .cs-why__img { height: var(--cs-why-img-h); }

  /* Finished town + desktop tour */
  .cs-page--verdance .cs-town { width: 100%; gap: var(--sp-40); }
  .cs-page--verdance .cs-town__title { padding: 0 var(--page-margin); font-size: var(--fs-r-display); line-height: var(--lh-pp-r); white-space: normal; }
  .cs-page--verdance .cs-town .cs-figure { width: 100%; }
  .cs-page--verdance .cs-crop--tour { width: 100%; height: auto; aspect-ratio: var(--tour-ar); }
  .cs-page--verdance .cs-crop--tour video {
    left: calc(100% * var(--n-tour-vx) / var(--n-tour-w));
    top: calc(100% * var(--n-tour-vy) / var(--n-tour-h));
    width: calc(100% * var(--n-tour-vw) / var(--n-tour-w));
    height: calc(100% * var(--n-tour-vh) / var(--n-tour-h));
    max-width: none;
  }

  /* Phone videos: side by side, scaled to fit */
  .cs-page--verdance .cs-phones { width: var(--col); justify-content: center; gap: var(--phones-gap); container-type: inline-size; }
  .cs-page--verdance .cs-phone { width: auto; }
  .cs-page--verdance .cs-phone__frame { zoom: min(1, tan(atan2(calc((100cqw - var(--phones-gap)) / 2), var(--phone-col-w)))); }

  .cs-page--verdance .cs-gates { width: 100%; }

  /* Outcome */
  .cs-page--verdance :is(.cs-wide, .cs-wide__charts) { width: 100%; }
  .cs-page--verdance .cs-table { display: grid; grid-template-columns: var(--table-cols); height: auto; }
  .cs-page--verdance :is(.cs-table__left, .cs-table__right, .cs-table__line) { display: none; }
  .cs-page--verdance :is(.cs-table__head, .cs-table__list) { display: contents; }
  .cs-page--verdance :is(.cs-table__h1, .cs-table__h2) { width: auto; padding: var(--table-cell-pad); font-size: var(--fs-r-body-24); }
  .cs-page--verdance .cs-table__h1 { grid-area: 1 / 1; background: var(--c-card); box-shadow: inset 0 calc(var(--sp-3) * -1) 0 var(--c-table-grey-line); }
  .cs-page--verdance .cs-table__h2 { grid-area: 1 / 2; background: var(--c-verdance-bg); box-shadow: inset 0 calc(var(--sp-3) * -1) 0 var(--c-verdance-fg); }
  .cs-page--verdance .cs-table__list li { padding: var(--table-cell-pad); font-size: var(--fs-r-body-20); line-height: var(--lh-r-body); }
  .cs-page--verdance .cs-table__list--old li { grid-column: 1; background: var(--c-card); }
  .cs-page--verdance .cs-table__list--new li { grid-column: 2; background: var(--c-verdance-bg); }
  .cs-page--verdance .cs-table__list li:nth-child(1) { grid-row: 2; }
  .cs-page--verdance .cs-table__list li:nth-child(2) { grid-row: 3; }
  .cs-page--verdance .cs-table__list li:nth-child(3) { grid-row: 4; }
  .cs-page--verdance .cs-table__list li:nth-child(4) { grid-row: 5; }
  .cs-page--verdance .cs-stats { width: 100%; flex-wrap: wrap; justify-content: center; }
  .cs-page--verdance .cs-stat { width: calc(50% - var(--sp-12)); }
  .cs-page--verdance .cs-scale { height: auto; padding: var(--sp-32) var(--sp-24); gap: var(--scale-gap-r); }
  .cs-page--verdance .cs-scale__text, .cs-page--verdance .cs-scale__scale, .cs-page--verdance .cs-scale__bar { width: 100%; }
  .cs-page--verdance .cs-scale__bar { height: auto; }
  .cs-page--verdance .cs-scale__title { font-size: var(--fs-r-body-24); }
  .cs-page--verdance .cs-scale__labels { display: grid; grid-template-columns: calc(100% * var(--n-scale-c1) / var(--n-scale)) calc(100% * var(--n-scale-c2) / var(--n-scale)) 1fr; }
  .cs-page--verdance .cs-scale__col { width: auto; align-items: flex-start; }
  .cs-page--verdance .cs-scale__range { white-space: normal; }
  .cs-page--verdance .cs-scale__mark { left: calc(100% * var(--n-scale-mark) / var(--n-scale)); }
  .cs-page--verdance .cs-scale__mark-text { left: calc(100% * var(--n-scale-mark) / var(--n-scale) + var(--scale-mark-text-dx)); right: 0; top: auto; bottom: calc(100% + var(--scale-mark-text-gap)); }   /* keeps its Figma 31 px offset from the arrow; a wrapped line grows upward, away from the bar */
  .cs-page--verdance .cs-scale__mark-text span { white-space: normal; }

  /* Takeaways: one column */
  .cs-page--verdance .cs-head { width: min(var(--cs-head-w), var(--col)); }
  .cs-page--verdance .cs-tk-rows { width: var(--col); align-items: stretch; }
  .cs-page--verdance .cs-tk-row { flex-direction: column; }
  .cs-page--verdance .cs-tk, .cs-page--verdance .cs-tk--wide { width: auto; height: auto; }
  .cs-page--verdance .cs-tk--wide { flex-direction: column; align-items: stretch; }
  .cs-page--verdance .cs-tk__col { width: auto; }
  .cs-page--verdance .cs-tk__thumb-row { width: 100%; gap: var(--sp-12); }
  .cs-page--verdance .cs-tk__thumb { width: auto; flex: 1 1 0; min-width: 0; }
  .cs-page--verdance .cs-tk__thumb img { width: 100%; max-width: var(--cs-tk-thumb-w); height: auto; }

  /* What's next: the two cards stacked; label + line inside each card */
  .cs-page--verdance .cs-bi { width: var(--col); height: auto; display: grid; grid-template-columns: minmax(0, var(--cs-next-card-w)); justify-content: center; gap: var(--sp-16); }
  .cs-page--verdance .cs-bi__card { width: auto; display: flex; align-items: center; justify-content: center; padding: var(--cs-bi-pad) var(--sp-16) var(--sp-48); }
  .cs-page--verdance .cs-bi__card--en { grid-area: 1 / 1; }
  .cs-page--verdance .cs-bi__card--ar { grid-area: 2 / 1; }
  .cs-page--verdance :is(.cs-bi__en, .cs-bi__ar) { position: static; width: auto; font-size: min(var(--fs-48), calc((100vw - 2 * var(--page-margin) - 2 * var(--sp-16)) * var(--n-48) / var(--n-bi-en-w))); }
  .cs-page--verdance .cs-bi__en { line-height: var(--lh-pp-r); }
  .cs-page--verdance .cs-bi__ar { line-height: var(--lh-arabic-r); }
  .cs-page--verdance .cs-bi__head { display: contents; }
  .cs-page--verdance .cs-bi__head span { position: relative; z-index: 1; left: 0; width: auto; align-self: start; margin: var(--cs-table-head-y) var(--cs-table-head-x) 0; padding-left: calc(var(--sp-16) + var(--sp-2)); text-align: left; box-shadow: inset 0 calc(var(--sp-3) * -1) 0 var(--c-verdance-fg); }
  .cs-page--verdance .cs-bi__head span:first-child { grid-area: 1 / 1; }
  .cs-page--verdance .cs-bi__head span:last-child { grid-area: 2 / 1; }
  .cs-page--verdance .cs-bi__line { display: none; }

  /* Closing frame: restacked (title, tagline, badge, then the drawing) */
  .cs-page--verdance .cs-footer { width: 100%; height: auto; padding-top: var(--cs-footer-pad); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
  .cs-page--verdance :is(.cs-footer__title, .cs-footer__tag) { position: static; width: auto; padding: 0 var(--page-margin); white-space: normal; }
  .cs-page--verdance .cs-footer__title { font-size: min(var(--fs-140), calc((100vw - 2 * var(--page-margin)) * var(--n-140) / var(--n-footer-title-w))); line-height: var(--lh-pp-r); }
  .cs-page--verdance .cs-footer__tag { font-size: var(--fs-r-body-24); line-height: var(--lh-pp-r); }
  .cs-page--verdance .cs-badge { position: relative; left: auto; top: auto; flex: none; z-index: 1; }
  .cs-page--verdance .cs-footer__draw { position: static; order: 4; width: 100%; height: auto; }
}
.tw-viewer__scope .cs-fit { zoom: 1; }   /* the viewer shows boards at full size */
@media (max-width: 767.98px) {
  .cs-page--verdance { padding-top: var(--cs-top-phone); gap: var(--cs-gap-phone); }
  .cs-page--verdance .cs-label { margin-bottom: calc(var(--sp-16) - var(--cs-gap-phone)); }
  .cs-page--verdance .cs-meta { padding: var(--cs-card-pad-phone); }
  .cs-page--verdance .cs-meta__row { flex-direction: column; }
  .cs-page--verdance .cs-gates__row { flex-direction: column; }
  .cs-page--verdance .cs-gates__row img { flex: none; width: 100%; }
  .cs-page--verdance .cs-phones { flex-direction: column; align-items: center; }
  .cs-page--verdance .cs-phone__frame { zoom: min(1, tan(atan2(calc(100vw * var(--phone-share)), var(--phone-col-w)))); }
  /* comparison: each row a stacked pair, typical above Verdance */
  .cs-page--verdance .cs-table { grid-template-columns: minmax(0, 1fr); }
  .cs-page--verdance .cs-table__h1 { grid-area: 1 / 1; }
  .cs-page--verdance .cs-table__h2 { grid-area: 2 / 1; }
  .cs-page--verdance .cs-table__list li { grid-column: 1; }
  .cs-page--verdance .cs-table__list--old li:nth-child(1) { grid-row: 3; }  .cs-page--verdance .cs-table__list--new li:nth-child(1) { grid-row: 4; }
  .cs-page--verdance .cs-table__list--old li:nth-child(2) { grid-row: 5; }  .cs-page--verdance .cs-table__list--new li:nth-child(2) { grid-row: 6; }
  .cs-page--verdance .cs-table__list--old li:nth-child(3) { grid-row: 7; }  .cs-page--verdance .cs-table__list--new li:nth-child(3) { grid-row: 8; }
  .cs-page--verdance .cs-table__list--old li:nth-child(4) { grid-row: 9; }  .cs-page--verdance .cs-table__list--new li:nth-child(4) { grid-row: 10; }
  .cs-page--verdance .cs-stat { width: 100%; }
  .cs-page--verdance .cs-tk { padding: var(--cs-card-pad-phone); }
  /* scale labels: "Needs improvement" gets the room up to "Poor", which sits at the bar's end (red segment) */
  .cs-page--verdance .cs-scale__labels { grid-template-columns: calc(100% * var(--n-scale-c1) / var(--n-scale)) 1fr auto; column-gap: var(--sp-8); }
}

/* ===== Viewer (shared) below 1190: bar + content ===== */
@media (max-width: 1189.98px) {
  /* bar: − + × stay at the right; the title takes what is left, 2 lines max, then … */
  .tw-viewer__bar { padding: 0 var(--viewer-bar-pad); gap: var(--sp-12); }
  .tw-viewer__group:first-child { flex: 1 1 auto; min-width: 0; }
  .tw-viewer__group:last-child { flex: none; }
  .tw-viewer__title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}
/* content copies keep their Figma px size (the page's "never wider than the window" image rule doesn't apply in the viewer),
   so the measured size is the drawn size and the fit / clamp centring is exact */
.tw-viewer__scope img { max-width: none; }
.tw-viewer__scope > * { width: 100% !important; max-width: none !important; margin: 0 !important; }   /* the copy always fills its Figma width (page layout rules don't apply in the viewer) */

/* ===== Verdance comparison table, phone: one card per row ===== */
@media (max-width: 1189.98px) {
  .cs-page--verdance .cs-table__list--old li { text-decoration: line-through; }   /* Figma strike-through (the list itself is display: contents here) */
}
@media (max-width: 767.98px) {
  .cs-page--verdance :is(.cs-table__h1, .cs-table__h2) { display: none; }
  .cs-page--verdance .cs-table__list--old li:nth-child(1) { grid-row: 1; }  .cs-page--verdance .cs-table__list--new li:nth-child(1) { grid-row: 2; }
  .cs-page--verdance .cs-table__list--old li:nth-child(2) { grid-row: 3; }  .cs-page--verdance .cs-table__list--new li:nth-child(2) { grid-row: 4; }
  .cs-page--verdance .cs-table__list--old li:nth-child(3) { grid-row: 5; }  .cs-page--verdance .cs-table__list--new li:nth-child(3) { grid-row: 6; }
  .cs-page--verdance .cs-table__list--old li:nth-child(4) { grid-row: 7; }  .cs-page--verdance .cs-table__list--new li:nth-child(4) { grid-row: 8; }
  .cs-page--verdance .cs-table__list--new li:not(:last-child) { margin-bottom: var(--table-card-gap); }
  .cs-page--verdance .cs-table__list li::before {
    display: inline-block;   /* atomic: the row's strike-through doesn't run through the label */
    width: 100%;
    margin-bottom: var(--sp-4);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-12);
    line-height: var(--lh-auto);
    letter-spacing: var(--ls-card-label);
    text-transform: uppercase;
  }
  .cs-page--verdance .cs-table__list--old li::before { content: "Typical site"; color: var(--c-strike); }
  .cs-page--verdance .cs-table__list--new li::before { content: "Verdance"; color: var(--c-verdance-fg); }
}

/* =====================================================================
   EDITOR EXPERIENCE (build 5) + MATCH THE ANSWER (build 6, same components) — tablet + phone. >= 1190 unchanged.
   ===================================================================== */
@media (max-width: 1189.98px) {
  :is(.cs-page--editor, .cs-page--mta) { padding-top: var(--cs-top-tablet); gap: var(--cs-gap-tablet); --col: calc(100% - 2 * var(--page-margin)); }
  :is(.cs-page--editor, .cs-page--mta) .cs-title--editor { width: min(var(--cs-title-w), var(--col)); font-size: var(--fs-r-hero); }
  :is(.cs-page--editor, .cs-page--mta) .ed-hero { width: var(--col); max-width: var(--col); height: auto; }
  :is(.cs-page--editor, .cs-page--mta) .cs-meta { width: var(--col); }
  :is(.cs-page--editor, .cs-page--mta) .cs-meta__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24) var(--sp-32); }
  :is(.cs-page--editor, .cs-page--mta) .cs-meta__value { font-size: var(--fs-r-body-24); }
  :is(.cs-page--editor, .cs-page--mta) .ed-col { width: min(var(--cs-head-w), var(--col)); }
  :is(.cs-page--editor, .cs-page--mta) .ed-wide { width: var(--col); max-width: var(--col); }
  :is(.cs-page--editor, .cs-page--mta) :is(.ed-feature, .ed-paras, .ed-carousel__title) { width: 100%; }
  :is(.cs-page--editor, .cs-page--mta) :is(.ed-text, .ed-goal, .ed-feature__title, .ed-journey__title, .ed-journey__head, .ed-journey__list, .ed-impact__title, .ed-impact__text, .ed-card__title, .ed-tk__title) { font-size: var(--fs-r-body-24); }
  :is(.cs-page--editor, .cs-page--mta) :is(.ed-card__text, .ed-tk__text, .ed-carousel__title) { font-size: var(--fs-r-body-20); }
  :is(.cs-page--editor, .cs-page--mta) .cs-h2 { font-size: var(--fs-r-h2); }
  /* Goals: 2 per row, emoji keeps its size */
  :is(.cs-page--editor, .cs-page--mta) .ed-goals { width: 100%; }
  :is(.cs-page--editor, .cs-page--mta) .ed-goals__list { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
  :is(.cs-page--editor, .cs-page--mta) .ed-goal { width: auto; }
  /* Strategy boards: 2 per row */
  :is(.cs-page--editor, .cs-page--mta) .ed-cards { width: var(--col); }
  :is(.cs-page--editor, .cs-page--mta) .ed-card { width: calc(50% - var(--sp-12)); height: auto; }
  :is(.cs-page--editor, .cs-page--mta) .ed-card__img { width: 100%; height: auto; }
  /* Carousels */
  :is(.cs-page--editor, .cs-page--mta) .ed-carousel { width: 100%; }
  :is(.cs-page--editor, .cs-page--mta) .ed-slide > img { width: 100%; height: auto; }
  :is(.cs-page--editor, .cs-page--mta) .ed-slide figcaption { font-size: var(--fs-r-min); }
  /* Journey */
  :is(.cs-page--editor, .cs-page--mta) .ed-journey__cols { gap: var(--sp-24); }
  /* Impact: timeline kept (emoji level with each result), rebuilt as a grid so it follows the text height */
  :is(.cs-page--editor, .cs-page--mta) .ed-impact { width: min(var(--cs-head-w), var(--col)); max-width: none; display: grid; grid-template-columns: var(--ed-emoji) minmax(0, 1fr); gap: 0 var(--sp-24); align-items: start; }
  :is(.cs-page--editor, .cs-page--mta) :is(.ed-impact__icons, .ed-impact__list) { display: contents; }
  :is(.cs-page--editor, .cs-page--mta) .ed-impact__icons picture { grid-column: 1; margin-top: var(--ed-impact-pad-top); }
  :is(.cs-page--editor, .cs-page--mta) .ed-impact__line { grid-column: 1; justify-self: center; align-self: stretch; height: auto; margin: var(--ed-impact-line-top) 0 var(--ed-impact-line-end); }
  :is(.cs-page--editor, .cs-page--mta) .ed-impact__item { grid-column: 2; }
  :is(.cs-page--editor, .cs-page--mta) .ed-impact__item:not(:last-child) { padding-bottom: var(--ed-impact-row-gap); }
  :is(.cs-page--editor, .cs-page--mta) .ed-impact__icons picture:nth-of-type(1), :is(.cs-page--editor, .cs-page--mta) .ed-impact__line:nth-of-type(1), :is(.cs-page--editor, .cs-page--mta) .ed-impact__item:nth-child(1) { grid-row: 1; }
  :is(.cs-page--editor, .cs-page--mta) .ed-impact__icons picture:nth-of-type(2), :is(.cs-page--editor, .cs-page--mta) .ed-impact__line:nth-of-type(2), :is(.cs-page--editor, .cs-page--mta) .ed-impact__item:nth-child(2) { grid-row: 2; }
  :is(.cs-page--editor, .cs-page--mta) .ed-impact__icons picture:nth-of-type(3), :is(.cs-page--editor, .cs-page--mta) .ed-impact__line:nth-of-type(3), :is(.cs-page--editor, .cs-page--mta) .ed-impact__item:nth-child(3) { grid-row: 3; }
  :is(.cs-page--editor, .cs-page--mta) .ed-impact__icons picture:nth-of-type(4), :is(.cs-page--editor, .cs-page--mta) .ed-impact__item:nth-child(4) { grid-row: 4; }
  /* Hackathon photo */
  :is(.cs-page--editor, .cs-page--mta) .ed-photo { width: min(var(--ed-photo-w), var(--col)); height: auto; aspect-ratio: var(--ed-photo-ar); }
  :is(.cs-page--editor, .cs-page--mta) .ed-photo__me { left: var(--ed-photo-me-xp); top: var(--ed-photo-me-yp); font-size: var(--fs-r-h2); }
  /* Takeaways: 2 per row */
  :is(.cs-page--editor, .cs-page--mta) .ed-tk-row { width: var(--col); }
  :is(.cs-page--editor, .cs-page--mta) .ed-tk { flex: 1 1 0; }
  /* Next project: mockup full width of the column */
  :is(.cs-page--editor, .cs-page--mta) .cs-nextproj__mock { width: 100%; }
}
@media (max-width: 767.98px) {
  :is(.cs-page--editor, .cs-page--mta) { padding-top: var(--cs-top-phone); gap: var(--cs-gap-phone); }
  :is(.cs-page--editor, .cs-page--mta) .cs-meta { padding: var(--cs-card-pad-phone); }
  :is(.cs-page--editor, .cs-page--mta) .cs-meta__row { grid-template-columns: 1fr; }
  :is(.cs-page--editor, .cs-page--mta) .ed-goals__list { grid-template-columns: 1fr; }
  :is(.cs-page--editor, .cs-page--mta) .ed-goal { padding: var(--sp-12) var(--sp-16); }
  :is(.cs-page--editor, .cs-page--mta) .ed-cards__row { flex-direction: column; }
  :is(.cs-page--editor, .cs-page--mta) .ed-card { width: 100%; }
  :is(.cs-page--editor, .cs-page--mta) .ed-journey__cols { flex-direction: column; }
  :is(.cs-page--editor, .cs-page--mta) .ed-tk-row { flex-direction: column; gap: var(--sp-24); }
  :is(.cs-page--editor, .cs-page--mta) .ed-tk { flex: none; padding: var(--cs-card-pad-phone); }
}

/* =====================================================================
   MATCH THE ANSWER — page-specific, tablet + phone (build 6)
   ===================================================================== */
@media (max-width: 1189.98px) {
  .cs-page--mta :is(.mta-view__cap, .mta-carousel__sub, .mta-ut__title) { font-size: var(--fs-r-body-20); }
  .cs-page--mta .mta-h3 { font-size: var(--fs-r-body-24); }
  .cs-page--mta :is(.mta-view, .mta-results, .mta-learn) { width: var(--col); max-width: var(--col); }
  /* Personas */
  .cs-page--mta .mta-personas { width: 100%; }
  .cs-page--mta .mta-persona { flex: 1 1 0; min-width: 0; max-width: var(--mta-persona-w); }
  /* Pain-point notes: 2 per row */
  .cs-page--mta .mta-pain { width: 100%; }
  .cs-page--mta .mta-pain__label { font-size: var(--fs-r-body-24); }
  .cs-page--mta .mta-notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
  .cs-page--mta .mta-note { height: auto; }   /* content height; cards in a tablet row stay equal (grid stretch) */
  /* Image grids: 2 per row */
  .cs-page--mta :is(.mta-comps, .mta-wires, .mta-ut) { width: 100%; }
  .cs-page--mta .mta-wires { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
  .cs-page--mta .mta-wires__row { display: contents; }
  .cs-page--mta .mta-wires img { width: 100%; }
  .cs-page--mta .mta-ut__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
  .cs-page--mta .mta-ut__row img { width: 100%; }
  /* Results: survey + word cloud */
  .cs-page--mta .mta-results__cards { width: 100%; }
  .cs-page--mta :is(.mta-carousels, .mta-carousel__head) { width: 100%; }
  .cs-page--mta .ed-journey.mta-cloud {
    height: auto;
    container-type: inline-size;
    --cs: calc((100cqw + 2 * var(--sp-24)) / var(--n-cloud-w));   /* one Figma px, scaled to the card */
  }
  .cs-page--mta .mta-cloud__text { font-size: var(--fs-r-body-24); margin-bottom: calc((var(--n-cloud-h) - var(--n-cloud-top)) * var(--cs) - var(--sp-24)); }   /* bottom padding + this = the words area */
  .cs-page--mta .mta-cloud__w {   /* words keep their Figma layout, scaled, anchored to the card's bottom so a taller intro never meets them */
    left: calc(var(--x) * var(--cs));
    top: auto;
    bottom: calc((var(--n-cloud-h) - var(--y) - var(--fs) * var(--n-cloud-lh)) * var(--cs));
    font-size: calc(var(--fs) * var(--cs));
  }
  .cs-page--mta .mta-impact { width: 100%; }
  .cs-page--mta .ed-impact__icons picture { margin-top: var(--mta-impact-pad-top); }
  .cs-page--mta .ed-impact__line { margin: var(--mta-impact-line-top) 0 var(--mta-impact-line-end); }
  /* Next project: mockup full width (its baked-in stroke stays outside, as Figma) */
  .cs-page--mta .mta-next__mock { width: calc(100% + 2 * var(--mta-next-stroke)); max-width: none; }
}
@media (max-width: 767.98px) {
  .cs-page--mta .mta-personas { flex-direction: column; align-items: stretch; }
  .cs-page--mta .mta-persona { flex: none; max-width: none; }
  .cs-page--mta .mta-persona__list { grid-template-columns: 1fr; }
  .cs-page--mta .mta-notes { grid-template-columns: 1fr; }
  .cs-page--mta .mta-comps__row { flex-direction: column; }
  .cs-page--mta .mta-comps img { flex: none; width: 100%; }
  .cs-page--mta :is(.mta-wires, .mta-ut__row) { grid-template-columns: 1fr; }
  .cs-page--mta .mta-pc { flex-direction: column; gap: var(--sp-32); }
  .cs-page--mta .mta-pc__col { flex: none; }
}

/* Sideways-scrolling tables (shared, phone): scroll inside their card, never the page; an edge fades while there is more */
@media (max-width: 767.98px) {
  [data-hscroll] {
    max-width: 100%;
    align-self: stretch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    --fade-l: 0px; --fade-r: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent, var(--c-black) var(--fade-l), var(--c-black) calc(100% - var(--fade-r)), transparent);
    mask-image: linear-gradient(to right, transparent, var(--c-black) var(--fade-l), var(--c-black) calc(100% - var(--fade-r)), transparent);
  }
  [data-hscroll].has-more-right { --fade-r: var(--hscroll-fade); }
}

/* =====================================================================
   HEADING + CARD SPACING (owner rule, all case studies, all widths)
   ===================================================================== */
/* Main centred section heading -> next element: 24 */
.ed-col--32 > .cs-h2 + * { margin-top: calc(var(--gap-heading) - var(--sp-32)); }
.cs-page .cs-town { gap: var(--gap-heading); }
/* Other headings -> their paragraph: 0 (line height only) */
.cs-tk__head + .cs-tk__body, .ed-card__title + .ed-card__text, .ed-tk__head + .ed-tk__text, .mta-note__title + .mta-note__list { margin-top: calc(var(--gap-heading-text) - var(--sp-12)); }
.ed-impact__item, .ed-feature--gap24, .ed-feature--gap40, .mta-col-left, .mta-view__cap, .mta-carousel__head { gap: var(--gap-heading-text); }
.ed-h2-24 + .ed-text { margin-top: calc(var(--gap-heading-text) - var(--sp-24)); }
.tw-sub > .tw-step + * { margin-top: calc(var(--gap-heading-text) - var(--sp-16)); }
.tw-col > .tw-step + * { margin-top: calc(var(--gap-heading-text) - var(--sp-24)); }
/* Stacked cards, >= 1190: the vertical gap equals the list's own (Figma) row gap */
.cs-page--editor > .ed-tk-row + .ed-tk-row, .tw-learn .ed-tk-row + .ed-tk-row { margin-top: calc(var(--sp-32) - var(--sp-80)); }
.mta-learn__rows { gap: var(--sp-32); }
.ed-cards--40 { gap: var(--sp-24); }
/* Stacked cards, tablet 24 / phone 16 */
@media (max-width: 1189.98px) {
  .cs-page :is(.cs-tk-rows, .cs-tk-row, .cs-stats, .ed-goals__list, .ed-cards, .ed-cards__row, .ed-tk-row, .mta-learn__rows, .mta-notes, .mta-personas) { gap: var(--card-gap); }
  .cs-page--editor > .ed-tk-row + .ed-tk-row { margin-top: calc(var(--card-gap) - var(--cs-gap-tablet)); }
  .tw-learn .ed-tk-row + .ed-tk-row { margin-top: calc(var(--card-gap) - var(--sp-80)); }
  .cs-page :is(.ed-impact) .ed-impact__item:not(:last-child) { padding-bottom: var(--card-gap); }
}
@media (max-width: 767.98px) {
  .cs-page--editor > .ed-tk-row + .ed-tk-row { margin-top: calc(var(--card-gap) - var(--cs-gap-phone)); }
}
/* Impact timelines at every width: grid, so each emoji stays level with its result whatever the text height
   (the title -> text gap is now 0, which the fixed-length desktop lines could not follow) */
.cs-page .ed-impact { display: grid; grid-template-columns: var(--ed-emoji) minmax(0, 1fr); gap: 0 var(--sp-24); align-items: start; }
.cs-page .ed-impact :is(.ed-impact__icons, .ed-impact__list) { display: contents; }
.cs-page .ed-impact .ed-impact__icons picture { grid-column: 1; margin-top: var(--ed-impact-pad-top); }
.cs-page .ed-impact .ed-impact__line { grid-column: 1; justify-self: center; align-self: stretch; height: auto; margin: var(--ed-impact-line-top) 0 var(--ed-impact-line-end); }
.cs-page .ed-impact .ed-impact__item { grid-column: 2; }
.cs-page .ed-impact .ed-impact__item:not(:last-child) { padding-bottom: var(--ed-impact-item-gap); }
.cs-page .ed-impact :is(.ed-impact__icons picture:nth-of-type(1), .ed-impact__line:nth-of-type(1), .ed-impact__item:nth-child(1)) { grid-row: 1; }
.cs-page .ed-impact :is(.ed-impact__icons picture:nth-of-type(2), .ed-impact__line:nth-of-type(2), .ed-impact__item:nth-child(2)) { grid-row: 2; }
.cs-page .ed-impact :is(.ed-impact__icons picture:nth-of-type(3), .ed-impact__line:nth-of-type(3), .ed-impact__item:nth-child(3)) { grid-row: 3; }
.cs-page .ed-impact :is(.ed-impact__icons picture:nth-of-type(4), .ed-impact__item:nth-child(4)) { grid-row: 4; }
.cs-page--mta .ed-impact .ed-impact__icons picture { margin-top: var(--mta-impact-pad-top); }
.cs-page--mta .ed-impact .ed-impact__line { margin: var(--mta-impact-line-top) 0 var(--mta-impact-line-end); }
/* Team Workspace: same idea, its own offsets (emoji level with the title; row 2's emoji sits in a 4 px pad box) */
.cs-page .tw-impact { display: grid; grid-template-columns: var(--ed-emoji) minmax(0, 1fr); gap: 0 var(--sp-24); align-items: start; }
.cs-page .tw-impact :is(.tw-impact__icons, .ed-impact__list) { display: contents; }
.cs-page .tw-impact .tw-impact__icons > :is(picture, .tw-impact__pad) { grid-column: 1; }
.cs-page .tw-impact .ed-impact__line { grid-column: 1; justify-self: center; align-self: stretch; height: auto; margin: var(--tw-impact-line-top) 0 var(--sp-24); }
.cs-page .tw-impact .ed-impact__item { grid-column: 2; padding-top: var(--tw-impact-pad); }
.cs-page .tw-impact .ed-impact__item:not(:last-child) { padding-bottom: var(--tw-impact-gap); }
.cs-page .tw-impact .tw-impact__icons > :nth-child(1), .cs-page .tw-impact .tw-impact__icons > :nth-child(2), .cs-page .tw-impact .ed-impact__item:nth-child(1) { grid-row: 1; }
.cs-page .tw-impact .tw-impact__icons > :nth-child(3), .cs-page .tw-impact .tw-impact__icons > :nth-child(4), .cs-page .tw-impact .ed-impact__item:nth-child(2) { grid-row: 2; }
.cs-page .tw-impact .tw-impact__icons > :nth-child(5), .cs-page .tw-impact .tw-impact__icons > :nth-child(6), .cs-page .tw-impact .ed-impact__item:nth-child(3) { grid-row: 3; }
.cs-page .tw-impact .tw-impact__icons > :nth-child(7), .cs-page .tw-impact .ed-impact__item:nth-child(4) { grid-row: 4; }
.cs-page .tw-impact .tw-impact__icons > :nth-child(2) { margin-bottom: var(--tw-impact-line-end-pad); }   /* next emoji is 4 px into its row */
.cs-page .tw-impact .tw-impact__icons > :nth-child(4) { margin-top: var(--tw-impact-line-top-pad); }      /* this row's emoji box is 48 tall */
@media (max-width: 1189.98px) {
  .cs-page :is(.ed-impact, .tw-impact) .ed-impact__item:not(:last-child) { padding-bottom: var(--card-gap); }
}

/* =====================================================================
   TEAM WORKSPACE (build 7) + item 0 of the spacing rule
   ===================================================================== */
/* Spacing, all widths: card title -> its table 24 (was 33 / 40) */
.tw-matrix, .tw-comp { gap: var(--gap-heading); }
/* The matrix column highlight belongs to the table (follows it when the gap changes or the table scrolls) */
.tw-matrix::before { content: none; }
.tw-matrix__table { z-index: 0; }
.tw-matrix__table::before { content: ""; position: absolute; z-index: -1; left: var(--tw-col-hl-x); top: calc(var(--tw-hl-above) * -1); width: var(--tw-col-hl-w); height: var(--tw-col-hl-h); border-radius: var(--r-16); background: var(--c-tw-col); }

@media (max-width: 1189.98px) {
  .cs-page--tw { padding-top: var(--cs-top-tablet); gap: var(--cs-gap-tablet); --col: calc(100% - 2 * var(--page-margin)); }
  /* Hero title: Figma breaks only at >= 1190; balanced wrapping below */
  .cs-page--tw .tw-title { width: min(var(--cs-title-w), var(--col)); font-size: var(--fs-r-hero); line-height: var(--lh-r-title); }
  .cs-page--tw .tw-title br { display: none; }
  .cs-page--tw .tw-title__p { display: inline; margin: 0; }
  .cs-page--tw .tw-title__p::after { content: " "; }
  .cs-page--tw .tw-hero { max-width: var(--col); }
  .cs-page--tw .cs-meta { width: var(--col); }
  .cs-page--tw .cs-meta__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24) var(--sp-32); }
  .cs-page--tw .cs-meta__value { font-size: var(--fs-r-body-24); }
  .cs-page--tw .cs-h2 { font-size: var(--fs-r-h2); }
  .cs-page--tw .tw-text { font-size: var(--fs-r-body-24); line-height: var(--lh-r-body); }
  .cs-page--tw .tw-text .tw-gap { height: calc(1em * var(--lh-r-body)); }
  /* Carousel 1: the cards fit the column; their tables scroll sideways inside (tablet too: 948 / 1030 px don't fit) */
  .cs-page--tw .tw-carousel { width: var(--col); max-width: var(--col); }
  .cs-page--tw .tw-carousel .ed-carousel__slides { grid-template-columns: minmax(0, 1fr); }   /* the track never grows to the table's width */
  .cs-page--tw .tw-card { width: 100%; min-height: 0; padding: var(--sp-24); }
  .cs-page--tw .ed-col { width: min(var(--cs-head-w), var(--col)); }
  .cs-page--tw .ed-text { font-size: var(--fs-r-body-24); }
  .cs-page--tw .tw-card__title { font-size: var(--fs-r-h2); }
  .cs-page--tw .tw-matrix__table { grid-template-columns: repeat(6, var(--tw-col-w)); column-gap: var(--tw-matrix-col-gap); justify-content: start; padding: var(--tw-hl-above) 0 var(--tw-hl-below); margin: calc(var(--tw-hl-above) * -1) 0 calc(var(--tw-hl-below) * -1); }
  .cs-page--tw .tw-matrix__table::before { top: 0; }
  .cs-page--tw .tw-comp__table > .tw-comp__row { min-width: var(--tw-comp-min); }
  .cs-page--tw [data-hscroll] {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    --fade-l: 0px; --fade-r: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent, var(--c-black) var(--fade-l), var(--c-black) calc(100% - var(--fade-r)), transparent);
    mask-image: linear-gradient(to right, transparent, var(--c-black) var(--fade-l), var(--c-black) calc(100% - var(--fade-r)), transparent);
  }
  .cs-page--tw [data-hscroll].has-more-right { --fade-r: var(--hscroll-fade); }
  /* Persona carousel: full column; photo beside the text from 900 up, above it below */
  .cs-page--tw .tw-persona { width: 100%; min-height: 0; }
  .cs-page--tw .tw-persona__text { font-size: var(--fs-r-body-20); }
  .cs-page--tw .tw-persona__name { font-size: var(--fs-r-h2); }
  /* Wireframes: 4 in a row (scaled) */
  .cs-page--tw .tw-wires { max-width: var(--col); }
  /* Takeaways: 2 per row */
  .cs-page--tw .tw-learn .ed-tk-row { width: var(--col); }
  .cs-page--tw .tw-learn .ed-tk { flex: 1 1 0; min-width: 0; }
  .cs-page--tw :is(.ed-tk__title) { font-size: var(--fs-r-body-24); }
  .cs-page--tw .ed-tk__text { font-size: var(--fs-r-body-20); }
  .cs-page--tw :is(.ed-impact__title, .ed-impact__text) { font-size: var(--fs-r-body-24); }
  .cs-page--tw .cs-nextproj__mock { width: 100%; }
}
@media (max-width: 899.98px) {
  .cs-page--tw .ed-carousel__slides > .tw-persona { flex-direction: column; align-items: center; gap: var(--sp-24); }
  .cs-page--tw .tw-persona__photo { width: min(var(--tw-photo-w), 100%); height: auto; aspect-ratio: var(--tw-photo-w) / var(--tw-photo-h); }
  .cs-page--tw .tw-persona__id { top: var(--tw-name-yp); }
  .cs-page--tw .tw-persona__body { width: 100%; }
}
@media (max-width: 767.98px) {
  .cs-page--tw { padding-top: var(--cs-top-phone); gap: var(--cs-gap-phone); }
  .cs-page--tw .cs-meta { padding: var(--cs-card-pad-phone); }
  .cs-page--tw .cs-meta__row { grid-template-columns: 1fr; }
  .cs-page--tw .tw-card { padding: var(--cs-card-pad-phone); }
  .cs-page--tw .tw-wires { flex-wrap: wrap; row-gap: var(--card-gap); }
  .cs-page--tw .tw-wires img { width: calc(50% - var(--card-gap) / 2); }
  .cs-page--tw .tw-learn .ed-tk-row { flex-direction: column; }
  .cs-page--tw .tw-learn .ed-tk { flex: none; padding: var(--cs-card-pad-phone); }
}

/* =====================================================================
   Phone / tablet fixes: sticky first table column, MTA personas, TW persona photo, carousel 3 dots
   ===================================================================== */
/* Sticky first column in sideways-scrolling tables: ONE continuous opaque surface (card colour; each cell's
   background bleeds --sc into the row gaps, so the Feature Matrix highlight never shows between rows), and a
   1 px divider along its full right edge only while the table is scrolled. No shadows. */
@media (max-width: 1189.98px) {
  .cs-page--tw .tw-matrix__table { --sc: var(--sticky-cover); }
  .cs-page--tw .tw-comp__table { --sc: var(--sticky-cover-comp); }
  .cs-page--tw :is(.tw-matrix__table [role="row"] > :first-child, .tw-comp__row > :first-child) {
    position: sticky; left: 0; z-index: 2; align-self: stretch;
    background: var(--c-tw-card);
    box-shadow: 0 var(--sc) 0 0 var(--c-tw-card), 0 calc(var(--sc) * -1) 0 0 var(--c-tw-card);
  }
  /* stretched to the row height so later columns can't show beneath it; name stays at the top */
  .cs-page--tw .tw-comp__row > :first-child { align-items: flex-start; }
  .cs-page--tw .has-more-left :is([role="row"] > :first-child, .tw-comp__row > :first-child) {
    box-shadow: 0 var(--sc) 0 0 var(--c-tw-card), 0 calc(var(--sc) * -1) 0 0 var(--c-tw-card),
      var(--bw-1) 0 0 0 var(--c-sticky-line), var(--bw-1) var(--sc) 0 0 var(--c-sticky-line), var(--bw-1) calc(var(--sc) * -1) 0 0 var(--c-sticky-line);
  }
}
@media (max-width: 767.98px) {
  /* MTA survey on phone: labels | Before | After (DOM order is Before | label | After; dense placement keeps the rows) */
  .cs-page--mta .mta-survey__table { --sc: var(--sticky-cover); grid-template-columns: max-content max-content max-content;
    grid-auto-flow: row dense; column-gap: var(--mta-survey-col-gap-phone); }
  .cs-page--mta .mta-survey__table tr > :nth-child(1) { grid-column: 2; }
  .cs-page--mta .mta-survey__table tr > :nth-child(3) { grid-column: 3; }
  .cs-page--mta .mta-survey__table tr > :nth-child(2) {
    grid-column: 1; position: sticky; left: 0; z-index: 2; text-align: left;
    background: var(--c-goal-bg);
    box-shadow: 0 var(--sc) 0 0 var(--c-goal-bg), 0 calc(var(--sc) * -1) 0 0 var(--c-goal-bg);
  }
  .cs-page--mta .mta-survey__table.has-more-left tr > :nth-child(2) {
    box-shadow: 0 var(--sc) 0 0 var(--c-goal-bg), 0 calc(var(--sc) * -1) 0 0 var(--c-goal-bg),
      var(--bw-1) 0 0 0 var(--c-sticky-line), var(--bw-1) var(--sc) 0 0 var(--c-sticky-line), var(--bw-1) calc(var(--sc) * -1) 0 0 var(--c-sticky-line);
  }
  /* TW Competitor on phone: narrow sticky column, logo (32) stacked above the name, no divider; the other columns
     keep their Figma widths (header offsets stay 4 px left of the rows, as in Figma) */
  .cs-page--tw .tw-comp__row { grid-template-columns: var(--tw-comp-col1-phone) 161px 351px 1fr; }
  .cs-page--tw .tw-comp__row--head { grid-template-columns: calc(var(--tw-comp-col1-phone) - 4px) 167px 344px 1fr; }
  .cs-page--tw .tw-comp__table > .tw-comp__row { min-width: var(--tw-comp-min-phone); }
  .cs-page--tw .tw-comp__name { flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
  .cs-page--tw .tw-comp__name .tw-logo { width: var(--tw-comp-logo-phone); height: auto; }
  .cs-page--tw .tw-comp__rule { display: none; }
  /* TW Feature Matrix on phone: first column 140 (labels wrap to 2 lines); the highlight band starts where it ends */
  .cs-page--tw .tw-matrix__table { --tw-col-hl-x: var(--tw-matrix-col1-phone); grid-template-columns: var(--tw-matrix-col1-phone) repeat(5, var(--tw-col-w)); }
  /* MTA survey on phone: all text smaller, same proportions; fits at 390 without scrolling (360 still scrolls) */
  .cs-page--mta .mta-survey__table { font-size: var(--mta-survey-fs-phone); }
  .cs-page--mta .mta-survey__h { font-size: var(--mta-survey-h-fs-phone); }
  .cs-page--mta .mta-survey__gain { font-size: var(--mta-survey-gain-fs-phone); }
  .cs-page--mta .mta-survey__up { width: var(--mta-survey-gain-fs-phone); height: var(--mta-survey-gain-fs-phone); }
  /* MTA personas fill the column */
  .cs-page--mta .mta-persona { width: 100%; }
  /* TW: persona photo capped and centred; carousel 3 without dots (counter + arrows stay) */
  .cs-page--tw .tw-persona__photo { width: min(var(--tw-photo-max-phone), 100%); }
  /* overlay scaled down slightly so name + facts stay inside the 280 px photo */
  .cs-page--tw .tw-persona__id { gap: var(--sp-8); }
  .cs-page--tw .tw-persona__name { font-size: var(--fs-20); }
  .cs-page--tw .tw-persona__facts { gap: var(--sp-8); font-size: var(--fs-14); }
  .cs-page--tw .tw-c3__dots { display: none; }
}
/* TW persona photo on tablet: never wider than 360 */
@media (min-width: 768px) and (max-width: 1189.98px) {
  .cs-page--tw .tw-persona__photo { flex: none; width: min(var(--tw-photo-max-tablet), 100%); height: auto; aspect-ratio: var(--tw-photo-w) / var(--tw-photo-h); }
  .cs-page--tw .tw-persona__id { top: var(--tw-name-yp); }
}

/* === Tap areas (C1): at least 44 x 44 (--tap), invisible; elements larger than 44 keep their own size === */
.cs-textbtn { position: relative; }
.cs-textbtn::after { content: ""; position: absolute;
  inset: min(0px, calc((100% - var(--tap)) / 2)) min(0px, calc((100% - var(--tap)) / 2)); }

/* C2: MTA small text at 14 px (--fs-r-min) on phone: pain-point notes and persona cards (Figma 12 kept >= 768) */
@media (max-width: 767.98px) {
  .cs-page--mta :is(.mta-note__list, .mta-persona__age, .mta-persona__tag, .mta-persona__bio, .mta-persona__needs) { font-size: var(--fs-r-min); }
}
/* C4: no lone short word on the last line of these headings on phone (balanced wrapping; wording unchanged) */
@media (max-width: 767.98px) {
  :is(.cs-tk__head, .ed-tk__head, .ed-feature__title, .ed-impact__title) { text-wrap: balance; }
}