/* Mirrors the opt-in in styles.css - both the outgoing and incoming
   document need it for the cross-document transition to fire. */
@view-transition {
  navigation: auto;
}

/* Mirrors styles.css exactly - see the comments there for why this specific
   curve/duration. Both documents need identical rules for the morph to
   look the same landing here as it did leaving the homepage. */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cs-root-in {
  from { opacity: 0; }
}
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation-name: cs-root-in; }

:root {
  /* Color tokens - same semantic names as styles.css's :root (surface,
     on-surface, interactive, ...), just pointed at this page's own light
     palette instead of the landing page's dark-panel/peach one. A shared
     vocabulary across both stylesheets, even though neither file imports
     the other. */
  --color-surface: #fdfbf8;
  --color-on-surface: #301e18;
  /* 0.68, not the original 0.56 - small muted text needs the full 4.5:1 AA
     ratio against both --color-surface and --color-surface-container, and
     0.56 only cleared ~3.5:1 on either. */
  --color-on-surface-muted: rgba(48, 30, 24, 0.68);
  --color-surface-container: #f9e0d6;
  --color-outline: rgba(48, 30, 24, 0.1);
  /* Case-study pages sit on a light surface throughout (unlike the landing
     page's dark sticky panel), so "interactive" defaults to on-surface
     here rather than the bright value styles.css uses. */
  --color-interactive: #301e18;
  /* Plain white for image panels so screenshots sit on a neutral ground. */
  --color-white: #ffffff;
  --color-scrim: rgba(26, 16, 12, 0.92);
  /* Glass: the top bar's veil, its controls, and the Contents menu. */
  --color-glass-veil: rgba(253, 251, 248, 0.72);
  --color-glass: rgba(255, 255, 255, 0.55);
  --color-glass-hover: rgba(255, 255, 255, 0.8);
  --color-glass-panel: rgba(253, 251, 248, 0.82);
  --color-glass-edge: rgba(255, 255, 255, 0.7);
  /* Frosted control sitting over the scrim (lightbox close). */
  --color-control-glass: rgba(253, 251, 248, 0.9);
  /* Laptop mockup illustration - device greys, not part of the palette. */
  --laptop-screen: #1c1c1e;
  --laptop-base: linear-gradient(180deg, #d8d8da 0%, #b6b6ba 100%);
  --laptop-notch: #98989c;

  --size-content-width: 700px;
  /* The one width figures break out to (prototype stage, annotated screens). */
  --size-wide-width: 1040px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-family-body);
  /* Inherited, so this reaches every paragraph/label on the page without
     hand-listing each class - avoids a lone last-line word (an "orphan")
     wherever text actually wraps to more than one line. Headings get the
     stronger text-wrap: balance below instead: pretty only nudges the last
     line, balance evens every line, which reads better on short multi-line
     titles specifically. Both are no-ops in browsers that don't support
     them yet (Safari/Firefox for pretty) - text just wraps as it always did. */
  text-wrap: pretty;
}

h1, h2, h3, h4 { text-wrap: balance; }

a { color: inherit; }

/* One visible focus ring for keyboard users on every control, including
   zoomable images (lightbox.js makes them focusable). */
:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 3px;
}

.cs-lightbox :focus-visible { outline-color: var(--color-white); }

/* Read by screen readers, not shown - e.g. "3 to 1" for a "3→1" stat. */
.cs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* For links inline within body copy (About page bio, etc.) - color: inherit
   alone makes them indistinguishable from surrounding text, so an
   underline is the non-color signal that it's a link. */
.cs-inline-link {
  color: var(--color-interactive);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The bar has no edge: a frosted layer behind it is strongest at the top
   and dissolves into the page below the controls, so content softens as it
   scrolls under instead of being cut off. The controls float on it as glass. */
.cs-topbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px;
  z-index: 10;
}

.cs-topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--color-glass-veil) 0%, var(--color-glass-veil) 45%, rgba(253, 251, 248, 0) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* Glass controls: translucent, blurred, a lit top edge and a soft drop. */
.cs-close,
.cs-topbar-toc-toggle {
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--color-glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 20px rgba(48, 30, 24, 0.1);
}

.cs-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  font-size: var(--font-size-900);
  line-height: var(--line-height-icon);
  text-decoration: none;
  color: var(--color-on-surface);
  transition: background-color 0.2s ease;
}

.cs-close:hover,
.cs-topbar-toc-toggle:hover { background: var(--color-glass-hover); }

/* No blur available, or the reader asked for less transparency: solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cs-topbar::before { background: var(--color-surface); -webkit-mask-image: none; mask-image: none; inset: 0; }
  .cs-close, .cs-topbar-toc-toggle { background: var(--color-surface); }
}

@media (prefers-reduced-transparency: reduce) {
  .cs-topbar::before {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
    inset: 0;
  }
  .cs-close, .cs-topbar-toc-toggle {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--color-outline);
  }
}

.cs-main {
  max-width: var(--size-content-width);
  margin: 0 auto;
  padding: 0 24px 100px;
}

/* ---- Hero ---- */
.cs-hero h1 {
  font-family: var(--font-heading-xxlarge-family);
  font-size: var(--font-heading-xxlarge-size);
  font-weight: var(--font-heading-xxlarge-weight);
  line-height: var(--font-heading-xxlarge-line-height);
  letter-spacing: var(--font-heading-xxlarge-tracking);
  margin: 8px 0 20px;
}

.cs-subtitle {
  font-family: var(--font-body-large-family);
  font-size: var(--font-body-large-size);
  font-weight: var(--font-body-large-weight);
  line-height: var(--font-body-large-line-height);
  letter-spacing: var(--font-body-large-tracking);
  color: var(--color-on-surface);
  max-width: 460px;
  margin: 0 0 36px;
}

.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-outline);
}

.cs-meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
  width: 100%;
}

/* 2x2 quick facts: Role/Timeline over Team/Scope, columns aligned.
   Use <div class="cs-meta cs-meta--grid"> with four flat .cs-meta-items
   (no .cs-meta-row wrapper). .cs-stats spans the full width below. */
.cs-meta--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.cs-meta--grid > .cs-stats {
  grid-column: 1 / -1;
}

.cs-meta-label {
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  font-weight: var(--font-body-xsmall-weight);
  line-height: var(--font-body-xsmall-line-height);
  letter-spacing: var(--font-body-xsmall-tracking);
  color: var(--color-on-surface-muted);
}

.cs-meta-value {
  font-family: var(--font-metric-small-family);
  font-size: var(--font-metric-small-size);
  font-weight: var(--font-metric-small-weight);
  line-height: var(--font-metric-small-line-height);
  letter-spacing: var(--font-metric-small-tracking);
}

.cs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
  width: 100%;
}

.cs-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* A stat with nothing left in it (its number and label removed) shouldn't
   hold a slot and a gap at the start of the row. */
.cs-stat:not(:has(*)) {
  display: none;
}

.cs-stat-value {
  font-family: var(--font-metric-large-family);
  font-size: var(--font-metric-large-size);
  font-weight: var(--font-metric-large-weight);
  line-height: var(--font-metric-large-line-height);
  letter-spacing: var(--font-metric-large-tracking);
}

.cs-stat-label {
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  font-weight: var(--font-body-xsmall-weight);
  line-height: var(--font-body-xsmall-line-height);
  letter-spacing: var(--font-body-xsmall-tracking);
  color: var(--color-on-surface-muted);
  max-width: 130px;
}

/* Split hero: title, subtitle and stats on the left, quick facts on the
   right, with the showcase spanning both below, so the screen shows on
   landing. On narrower screens it stacks with the showcase before the facts. */
.cs-hero--split .cs-stats {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 24px 40px;
  margin-top: 28px;
}

.cs-hero--split .cs-meta { margin-top: 32px; }

@media (min-width: 900px) {
  .cs-hero--split {
    position: relative;
    width: min(1080px, 100vw - 48px);
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "intro meta" "showcase showcase";
    column-gap: 64px;
    align-items: end;
  }
  .cs-hero--split .cs-hero-intro { grid-area: intro; }
  .cs-hero--split .cs-showcase { grid-area: showcase; margin-top: 40px; }
  .cs-hero--split h1 { margin-top: 0; }
  .cs-hero--split .cs-subtitle { margin-bottom: 0; }
  .cs-hero--split .cs-meta { grid-area: meta; margin-top: 0; gap: 24px 32px; padding-bottom: 0; border-bottom: 0; }
}

/* ---- Hero images ---- */
.cs-hero-images {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin: 40px 0 8px;
}

.cs-hero-images > div {
  background: var(--color-surface-container);
  border-radius: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  padding-top: 24px;
}

.cs-hero-images img { display: block; }

.cs-hero-desktop-wrap img { width: 82%; }

/* CSS laptop mockup for hero screenshots that don't already have a device
   frame baked into the image itself (Turn Tool and UltraBasic's hero PNGs
   are pre-rendered inside a photographic laptop/iMac mockup; this is for
   raw flat screenshots that need the same "sitting in a computer" framing
   built with plain CSS instead). Wrap the img: <div class="cs-laptop-frame">
   <img>...</div> in place of a bare img directly inside .cs-hero-desktop-wrap. */
.cs-laptop-frame {
  width: 82%;
}

.cs-laptop-screen {
  background: var(--laptop-screen);
  border-radius: 13px 13px 3px 3px;
  padding: 12px 12px 8px;
  box-shadow: var(--shadow-lg);
}

.cs-laptop-screen img {
  display: block;
  width: 100%;
  border-radius: 2px;
}

.cs-laptop-base {
  width: 112%;
  margin: 0 -6%;
  height: 12px;
  background: var(--laptop-base);
  border-radius: 0 0 8px 8px;
  position: relative;
}

.cs-laptop-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  height: 4px;
  background: var(--laptop-notch);
  border-radius: 0 0 5px 5px;
}

.cs-hero-images > .cs-hero-phones-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 12px;
}

.cs-hero-phones-wrap img {
  width: 34%;
  border-radius: 10px 10px 0 0;
}

/* A single flat, cropped detail shot (no device mockup) paired with the
   main desktop hero - for a supporting screenshot that isn't an actual
   phone screen, so it shouldn't take the 34%-wide phones-wrap treatment
   above (which was collapsing a full desktop screenshot down to an
   unreadable thumbnail). Sized to the same visual weight as the desktop
   hero image itself. */
.cs-hero-detail-wrap img {
  width: 82%;
  border-radius: 12px 12px 0 0;
}

/* ---- Sections ---- */
.cs-section {
  padding-top: 56px;
}

.cs-section h2 {
  font-family: var(--font-breadcrumb-family);
  font-size: var(--font-breadcrumb-size);
  font-weight: var(--font-breadcrumb-weight);
  line-height: var(--font-breadcrumb-line-height);
  letter-spacing: var(--font-breadcrumb-tracking);
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
  margin: 0 0 12px;
}

.cs-section h3.cs-h1-style {
  font-family: var(--font-heading-xlarge-family);
  font-size: var(--font-heading-xlarge-size);
  font-weight: var(--font-heading-xlarge-weight);
  line-height: var(--font-heading-xlarge-line-height);
  letter-spacing: var(--font-heading-xlarge-tracking);
  margin: 0 0 20px;
}

.cs-section p {
  font-family: var(--font-body-medium-family);
  font-size: var(--font-body-medium-size);
  font-weight: var(--font-body-medium-weight);
  line-height: var(--font-body-medium-line-height);
  letter-spacing: var(--font-body-medium-tracking);
  margin: 0 0 16px;
}

.cs-section h4,
.cs-section h3.cs-h4-style {
  font-family: var(--font-heading-small-family);
  font-size: var(--font-heading-small-size);
  font-weight: var(--font-heading-small-weight);
  line-height: var(--font-heading-small-line-height);
  letter-spacing: var(--font-heading-small-tracking);
  margin: 32px 0 12px;
}

/* ---- Callouts + labeled blocks ---- */
.cs-callout {
  background: var(--color-surface-container);
  border-radius: 18px;
  padding: 24px 28px;
  font-family: var(--font-lead-family);
  font-size: var(--font-lead-size);
  font-weight: var(--font-lead-weight);
  line-height: var(--font-lead-line-height);
  letter-spacing: var(--font-lead-tracking);
  margin: 4px 0 8px;
}

.cs-block {
  background: var(--color-surface-container);
  border-radius: 18px;
  padding: 24px 28px;
  margin: 0 0 16px;
}

/* Scoped as .cs-block .cs-block-label, not just .cs-block-label - it's a
   <p>, and needs to outrank .cs-section p's own font-size (a plain class
   selector loses to "class + type" on specificity) or the label renders
   at body-paragraph size instead of eyebrow size. */
.cs-block .cs-block-label {
  font-family: var(--font-breadcrumb-small-family);
  font-size: var(--font-breadcrumb-small-size);
  font-weight: var(--font-breadcrumb-small-weight);
  line-height: var(--font-breadcrumb-small-line-height);
  letter-spacing: var(--font-breadcrumb-small-tracking);
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
  margin: 0 0 8px;
}

.cs-block h3 {
  font-family: var(--font-heading-xsmall-family);
  font-size: var(--font-heading-xsmall-size);
  font-weight: var(--font-heading-xsmall-weight);
  line-height: var(--font-heading-xsmall-line-height);
  letter-spacing: var(--font-heading-xsmall-tracking);
  margin: 0 0 8px;
}

.cs-block p:not(.cs-block-label) {
  font-family: var(--font-body-small-family);
  font-size: var(--font-body-small-size);
  font-weight: var(--font-body-small-weight);
  line-height: var(--font-body-small-line-height);
  letter-spacing: var(--font-body-small-tracking);
  margin: 0;
  color: var(--color-on-surface);
}

/* ---- TL;DR ---- */
.cs-tldr {
  border: 1px solid var(--color-outline);
  border-radius: 18px;
  overflow: hidden;
  margin: 4px 0 8px;
}

.cs-tldr-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 20px 24px;
}

.cs-tldr-row + .cs-tldr-row { border-top: 1px solid var(--color-outline); }

.cs-tldr-label {
  font-family: var(--font-breadcrumb-small-family);
  font-size: var(--font-breadcrumb-small-size);
  font-weight: var(--font-breadcrumb-small-weight);
  line-height: var(--font-breadcrumb-small-line-height);
  letter-spacing: var(--font-breadcrumb-small-tracking);
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
  padding-top: 2px;
}

.cs-tldr-row p {
  margin: 0;
  font-family: var(--font-body-small-strong-family);
  font-size: var(--font-body-small-strong-size);
  font-weight: var(--font-body-small-strong-weight);
  line-height: var(--font-body-small-strong-line-height);
  letter-spacing: var(--font-body-small-strong-tracking);
}

/* ---- Key decisions (considered / decision / tradeoff) ---- */
.cs-decision {
  background: var(--color-surface-container);
  border-radius: 18px;
  padding: 24px 28px;
  margin: 0 0 16px;
}

.cs-decision h3 {
  font-family: var(--font-heading-xsmall-family);
  font-size: var(--font-heading-xsmall-size);
  font-weight: var(--font-heading-xsmall-weight);
  line-height: var(--font-heading-xsmall-line-height);
  letter-spacing: var(--font-heading-xsmall-tracking);
  margin: 0 0 16px;
}

.cs-decision-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  margin: 0 0 12px;
}

.cs-decision-row:last-child { margin-bottom: 0; }

.cs-decision-tag {
  font-family: var(--font-breadcrumb-small-family);
  font-size: var(--font-breadcrumb-small-size);
  font-weight: var(--font-breadcrumb-small-weight);
  line-height: var(--font-breadcrumb-small-line-height);
  letter-spacing: var(--font-breadcrumb-small-tracking);
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
  padding-top: 2px;
}

.cs-decision-row p {
  margin: 0;
  font-family: var(--font-body-small-family);
  font-size: var(--font-body-small-size);
  font-weight: var(--font-body-small-weight);
  line-height: var(--font-body-small-line-height);
  letter-spacing: var(--font-body-small-tracking);
  color: var(--color-on-surface);
}

/* ---- Figures ---- */
.cs-figure {
  margin: 40px 0;
}

.cs-figure img {
  display: block;
  width: 100%;
  border-radius: 18px;
}

.cs-figure figcaption {
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  font-weight: var(--font-body-xsmall-weight);
  line-height: var(--font-body-xsmall-line-height);
  letter-spacing: var(--font-body-xsmall-tracking);
  font-style: italic;
  color: var(--color-on-surface-muted);
  text-align: center;
  margin-top: 16px;
}

/* An embedded, hand-built prototype (e.g. seatselection-prototype.html),
   shown in a browser window or a phone. device-frame.js sizes the iframe
   to a real device and scales it to fit; the switch picks the device. */
.cs-device-switch {
  display: flex;
  width: max-content;
  margin: 0 auto 14px;
  padding: 3px;
  gap: 2px;
  border-radius: 100px;
  border: 1px solid var(--color-outline);
  background: var(--color-surface);
}

.cs-device-switch button {
  border: 0;
  border-radius: 100px;
  padding: 7px 16px;
  background: transparent;
  font-family: var(--font-label-strong-family);
  font-size: var(--font-label-strong-size);
  font-weight: var(--font-label-strong-weight);
  line-height: var(--font-label-strong-line-height);
  color: var(--color-on-surface-muted);
  cursor: pointer;
}

.cs-device-switch button[aria-pressed="true"] {
  background: var(--cs-accent);
  color: #fff;
}

/* Wider than the text column so the desktop window is readable. */
.cs-device-stage {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(100%, 100vw - 48px, var(--size-wide-width));
  display: flex;
  justify-content: center;
  padding: 32px 28px;
  border-radius: 22px;
  background: var(--cs-frame-bg);
}

.cs-device-frame {
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(29, 20, 40, 0.22);
}

.cs-device-screen {
  position: relative;
  overflow: hidden;
}

.cs-device-screen iframe {
  display: block;
  border: 0;
  transform-origin: 0 0;
  background: #f4f3f7;
}

/* Desktop: a browser window with a title bar. */
.cs-device[data-mode="desktop"] .cs-device-frame {
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(29, 20, 40, 0.08), 0 24px 60px rgba(29, 20, 40, 0.22);
}

.cs-device-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: #ebe7ee;
  border-bottom: 1px solid rgba(29, 20, 40, 0.08);
}

.cs-device-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d4ced9; }
.cs-device-bar i:nth-child(1) { background: #ec6a5e; }
.cs-device-bar i:nth-child(2) { background: #f4bf4f; }
.cs-device-bar i:nth-child(3) { background: #61c554; }

.cs-device-bar span {
  flex: 1;
  margin: 0 40px 0 14px;
  padding: 3px 10px;
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-body-xsmall-family);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-on-surface-muted);
}

/* Mobile: a phone with a bezel and a camera pill in the top bezel, clear of
   the screen. Side padding must match BEZEL in device-frame.js. */
.cs-device[data-mode="mobile"] .cs-device-frame {
  position: relative;
  padding: 34px 10px 14px;
  border-radius: 46px;
  background: #15111d;
}

.cs-device[data-mode="mobile"] .cs-device-frame::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  width: 72px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 100px;
  background: #15111d;
  pointer-events: none;
}

.cs-device[data-mode="mobile"] .cs-device-bar { display: none; }
.cs-device[data-mode="mobile"] .cs-device-screen { border-radius: 14px 14px 34px 34px; }
.cs-device[data-mode="mobile"] .cs-device-frame::after { background: #2a2433; }

/* The phone has no room for a desktop window, so no switch there. */
@media (max-width: 640px) {
  .cs-device-switch { display: none; }
  .cs-device-stage { padding: 20px 12px; border-radius: 18px; }
}

.cs-panel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cs-panel {
  background: var(--color-white);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cs-panel-pair {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  justify-content: center;
}

.cs-panel-pair-item { flex: 1; min-width: 0; }

.cs-panel-pair-item img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.cs-exp-label {
  font-family: var(--font-breadcrumb-small-family);
  font-size: var(--font-breadcrumb-small-size);
  font-weight: var(--font-breadcrumb-small-weight);
  line-height: var(--font-breadcrumb-small-line-height);
  letter-spacing: var(--font-breadcrumb-small-tracking);
  color: var(--color-on-surface-muted);
  text-align: center;
  margin: 0 0 8px;
}

/* ---- Touchpoints row ---- */
.cs-touchpoints {
  display: flex;
  gap: 16px;
  background: var(--color-white);
  border-radius: 18px;
  padding: 28px 20px;
  overflow-x: auto;
}

.cs-touchpoint {
  flex: 1;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cs-touchpoint p {
  font-family: var(--font-label-strong-family);
  font-size: var(--font-label-strong-size);
  font-weight: var(--font-label-strong-weight);
  line-height: var(--font-label-strong-line-height);
  letter-spacing: var(--font-label-strong-tracking);
  margin: 0 0 16px;
}

.cs-touchpoint img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* ---- Triplet + misc image groupings ---- */
.cs-triplet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 40px 0;
}

/* For a triplet mixing desktop + mobile screenshots: desktop shots get
   noticeably more width than the mobile one, roughly matching how much
   wider a real desktop viewport is than a phone, so mobile doesn't read
   at the same visual size as desktop by accident. Add is-mobile to the
   one mobile screenshot's <img>. */
.cs-triplet.has-mobile {
  grid-template-columns: 1.3fr 1.3fr 1fr;
  align-items: end;
}

.cs-triplet.has-mobile img.is-mobile {
  max-width: 220px;
  margin: 0 auto;
}

.cs-triplet img,
.cs-pair img {
  width: 100%;
  border-radius: 14px;
  display: block;
  background: var(--color-white);
}

.cs-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 40px 0;
}

.cs-collage {
  width: 100%;
  border-radius: 18px;
  display: block;
  margin: 40px 0;
}

.cs-footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--color-outline);
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  font-weight: var(--font-body-xsmall-weight);
  line-height: var(--font-body-xsmall-line-height);
  letter-spacing: var(--font-body-xsmall-tracking);
  color: var(--color-on-surface-muted);
}

/* ---- Image lightbox ---- */
.cs-main img { cursor: zoom-in; }

.cs-lightbox {
  position: fixed;
  inset: 0;
  background: var(--color-scrim);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  z-index: 50;
  cursor: zoom-out;
}

.cs-lightbox.is-open { display: flex; }

.cs-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  cursor: zoom-out;
}

.cs-lightbox-close {
  position: fixed;
  top: 24px;
  right: 28px;
  width: 40px;
  height: 40px;
  border: 0;
  padding: 0;
  border-radius: 100px;
  background: var(--color-control-glass);
  color: var(--color-on-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: var(--font-size-900);
  line-height: var(--line-height-icon);
  cursor: pointer;
}

/* The page behind an open lightbox shouldn't scroll. */
.cs-lightbox-open { overflow: hidden; }

/* Phones: fitting a wide desktop screenshot to a 375px screen makes it no
   bigger than it was inline. Open it at the screen's height instead and let
   the reader pan sideways (lightbox.js starts it centred). */
@media (max-width: 640px) {
  .cs-lightbox {
    justify-content: flex-start;
    overflow: auto;
    padding: 80px 16px 24px;
    overscroll-behavior: contain;
  }

  .cs-lightbox > img {
    flex-shrink: 0;
    margin: auto;
    max-width: none;
    max-height: calc(100dvh - 104px);
  }
}

/* Clone of a shared-background tile (.cs-panel, .cs-touchpoints) - opens as
   one combined view instead of just the single image clicked within it. */
.cs-lightbox-group {
  max-width: min(920px, 100%);
  max-height: 100%;
  overflow: auto;
  box-shadow: var(--shadow-lg);
  cursor: zoom-out;
}

/* ---- Table of contents ----
   One pill in the sticky top bar at every width, built by toc.js from the
   page's h2 headings. It names the section being read and opens the full
   list; a thin line along the bottom of the bar fills as you read. */
.cs-topbar-toc {
  position: relative;
}

.cs-topbar-toc-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border-radius: 100px;
  font-family: var(--font-label-strong-family);
  font-size: var(--font-label-strong-size);
  font-weight: var(--font-label-strong-weight);
  line-height: var(--font-label-strong-line-height);
  letter-spacing: var(--font-label-strong-tracking);
  color: var(--color-on-surface);
  cursor: pointer;
  transition: background-color 0.2s ease;
}


.cs-topbar-toc-chevron {
  font-size: var(--font-size-050);
  transition: transform 0.2s ease;
}

.cs-topbar-toc.is-open .cs-topbar-toc-chevron { transform: rotate(180deg); }

.cs-topbar-toc-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  max-width: calc(100vw - 48px);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--color-glass-panel);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--color-glass-edge);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--shadow-md);
}

.cs-topbar-toc.is-open .cs-topbar-toc-panel { display: flex; }

@media (prefers-reduced-transparency: reduce) {
  .cs-topbar-toc-panel {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--color-outline);
  }
}

.cs-topbar-toc-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  font-weight: var(--font-body-xsmall-weight);
  line-height: var(--font-body-xsmall-line-height);
  letter-spacing: var(--font-body-xsmall-tracking);
  color: var(--color-on-surface-muted);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cs-topbar-toc-panel a:hover { background: var(--color-surface-container); }

.cs-topbar-toc-panel a.is-active {
  color: var(--color-on-surface);
  font-family: var(--font-body-xsmall-strong-family);
  font-size: var(--font-body-xsmall-strong-size);
  font-weight: var(--font-body-xsmall-strong-weight);
  line-height: var(--font-body-xsmall-strong-line-height);
  letter-spacing: var(--font-body-xsmall-strong-tracking);
  background: var(--color-surface-container);
}

.cs-topbar-toc-current {
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .cs-topbar-toc-current { max-width: 34vw; }
}

.cs-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  pointer-events: none;
}

.cs-progress span {
  display: block;
  height: 100%;
  background: var(--cs-accent, var(--color-on-surface));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---- Product craft visuals ----
   Built for Seat Selection, reusable on any case study. A page sets its
   product's accent once on <body> (--cs-accent, --cs-accent-soft and the
   showcase backdrop) and every piece below picks it up. Defaults fall back
   to the site's own colours. */
:root {
  --cs-accent: var(--color-interactive);
  --cs-accent-soft: var(--color-surface-container);
  --cs-showcase-bg: var(--color-interactive);
  --cs-frame-bg: var(--color-surface-container);
  --cs-ink-faint: rgba(48, 30, 24, 0.38);
}

/* Hero showcase: the desktop screen on a dark product-colour stage with the
   phone overlapping it, wider than the text column.
   The site editor's Showcase controls (click either image) tune it per page
   with custom properties on .cs-showcase; each falls back to the value
   here. Insets and the phone's position are % of the stage's width (the
   phone's bottom, of its height), so they hold at every screen size:
     --cs-showcase-bg            the stage background (page default on <body>)
     --cs-stage-pad-top          space above the desktop screen
     --cs-stage-pad-left/-right  space beside it
     --cs-stage-radius           the stage's corners
     --cs-phone-width            the phone's width
     --cs-phone-right/-bottom    the phone's distance from those edges */
.cs-showcase {
  position: relative;
  width: min(1080px, 100vw - 48px);
  left: 50%;
  transform: translateX(-50%);
  margin: 48px 0 16px;
  padding: var(--cs-stage-pad-top, 56px) var(--cs-stage-pad-right, 18%) 0 var(--cs-stage-pad-left, 6%);
  border-radius: var(--cs-stage-radius, 28px);
  overflow: hidden;
  background: var(--cs-showcase-bg);
}

.cs-showcase-desktop {
  display: block;
  width: 100%;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.cs-showcase-phone {
  position: absolute;
  right: var(--cs-phone-right, 5%);
  bottom: var(--cs-phone-bottom, 8%);
  width: var(--cs-phone-width, 21%);
  border-radius: 22px;
  border: 5px solid #15111d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* One frame for every product screenshot: same backdrop, radius and shadow. */
.cs-frame {
  background: var(--cs-frame-bg);
  border-radius: 22px;
  padding: 28px;
}

.cs-frame img,
.cs-figure .cs-frame img {
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(29, 20, 40, 0.16);
}

.cs-frame.cs-panel-row { gap: 20px; }
.cs-frame--phones img { box-shadow: none; }

/* Research visuals: meters and dot grids inside a .cs-block. One hue, text
   in text colours, every value labelled. */
.cs-viz {
  display: grid;
  gap: 14px;
  margin: 18px 0 4px;
}

.cs-meter-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  line-height: var(--font-body-xsmall-line-height);
  color: var(--color-on-surface-muted);
  margin-bottom: 6px;
}

.cs-meter-label b { color: var(--color-on-surface); font-weight: 700; }

.cs-meter {
  height: 10px;
  border-radius: 100px;
  background: rgba(48, 30, 24, 0.1);
  overflow: hidden;
}

.cs-meter span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--cs-accent);
}

/* Research findings: several study results as rows of one outlined panel
   instead of a stack of filled cards. The headline number leads on the left;
   the question, what it meant and any meters sit beside it. */
.cs-findings {
  border: 1px solid var(--color-outline);
  border-radius: 18px;
  margin: 8px 0 24px;
}

.cs-finding {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 28px;
  padding: 28px;
}

.cs-finding + .cs-finding { border-top: 1px solid var(--color-outline); }

.cs-section .cs-finding-stat {
  margin: 0;
  color: var(--cs-accent);
}

.cs-finding-stat b {
  font-family: var(--font-heading-xxlarge-family);
  font-size: var(--font-heading-xxlarge-size);
  font-weight: var(--font-heading-xxlarge-weight);
  line-height: 1;
  letter-spacing: var(--font-heading-xxlarge-tracking);
}

.cs-finding-stat span {
  margin-left: 4px;
  font-family: var(--font-heading-xsmall-family);
  font-size: var(--font-heading-xsmall-size);
  font-weight: var(--font-heading-xsmall-weight);
}

.cs-finding-stat small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  line-height: var(--font-body-xsmall-line-height);
  color: var(--color-on-surface-muted);
}

.cs-finding-body h3 {
  font-family: var(--font-heading-xsmall-family);
  font-size: var(--font-heading-xsmall-size);
  font-weight: var(--font-heading-xsmall-weight);
  line-height: var(--font-heading-xsmall-line-height);
  letter-spacing: var(--font-heading-xsmall-tracking);
  margin: 0 0 8px;
}

.cs-finding-body p:not(.cs-meter-label) {
  font-family: var(--font-body-small-family);
  font-size: var(--font-body-small-size);
  font-weight: var(--font-body-small-weight);
  line-height: var(--font-body-small-line-height);
  letter-spacing: var(--font-body-small-tracking);
  margin: 0;
}

/* Supporting figures stay inline in the sentence, in the accent, so the
   one big number per row is the only thing in the stat column. */
.cs-finding-body p b {
  font-weight: 700;
  color: var(--cs-accent);
}

.cs-finding-body p:not(.cs-meter-label) + p { margin-top: 12px; }

/* An A/B test's variants sit in the text column of its finding as a short
   table - name, message, outcome - so the panel keeps its two columns. The
   winner is tinted, not filled. */
.cs-finding-body .cs-variants {
  grid-template-columns: 1fr;
  gap: 0;
  margin: 20px 0 0;
  border-top: 1px solid var(--color-outline);
}

.cs-finding-body .cs-variant {
  display: grid;
  grid-template-columns: 7.5em 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--color-outline);
}

.cs-finding-body .cs-variant b,
.cs-finding-body .cs-variant em { margin: 0; }

.cs-finding-body .cs-variant--win {
  background: var(--cs-accent-soft);
  color: var(--color-on-surface-muted);
}

.cs-finding-body .cs-variant--win b,
.cs-finding-body .cs-variant--win em { color: var(--cs-accent); }

.cs-dots-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cs-dots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  max-width: 220px;
}

.cs-dots i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cs-accent);
}

.cs-dots i.is-off {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--cs-ink-faint);
}

/* Diagrams inside a decision: steps joined by arrows. */
.cs-flow {
  display: grid;
  gap: 12px;
  margin: 20px 0 4px;
  padding: 20px;
  border-radius: 14px;
  background: var(--color-surface);
}

.cs-flow-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 12px;
}

.cs-flow-name {
  font-family: var(--font-body-xsmall-strong-family);
  font-size: var(--font-body-xsmall-strong-size);
  font-weight: var(--font-body-xsmall-strong-weight);
  color: var(--color-on-surface);
}

.cs-flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cs-step {
  padding: 7px 12px;
  border-radius: 100px;
  background: var(--cs-accent-soft);
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  line-height: 1.2;
  color: var(--color-on-surface);
}

.cs-step--key { background: var(--cs-accent); color: #fff; }
.cs-step--miss { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cs-ink-faint); color: var(--color-on-surface-muted); text-decoration: line-through; }
.cs-flow-arrow { color: var(--color-on-surface-muted); font-size: 14px; }

/* Seat colour comparison: two mini seat rows side by side. */
.cs-seat-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0 4px;
}

.cs-seat-compare > div {
  padding: 18px 16px 14px;
  border-radius: 14px;
  background: var(--color-surface);
}

.cs-mini-seats {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 10px repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.cs-mini-seats i {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
}

.cs-mini-seats i.is-aisle { visibility: hidden; }
.cs-mini-seats i.is-deal::after { content: ""; position: absolute; top: 0; right: 0; width: 34%; height: 34%; background: #f5d76e; border-bottom-left-radius: 3px; }
.cs-mini-seats--gradient i:not(.is-aisle)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(123, 82, 217, 0.55), rgba(108, 191, 204, 0.4) 45%, rgba(236, 120, 170, 0.5)); }

.cs-compare-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  line-height: 1.3;
  color: var(--color-on-surface-muted);
}

.cs-compare-label b { color: var(--color-on-surface); }

/* Three products feeding one set of shared components. */
.cs-system {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 20px 0 4px;
  padding: 20px;
  border-radius: 14px;
  background: var(--color-surface);
}

.cs-system-products { display: grid; gap: 6px; }
.cs-system-hub { padding: 14px 16px; border-radius: 12px; background: var(--cs-accent); color: #fff; }
.cs-system-hub p { margin: 0 0 10px; font-family: var(--font-body-xsmall-strong-family); font-size: var(--font-body-xsmall-strong-size); font-weight: var(--font-body-xsmall-strong-weight); }
.cs-system-hub .cs-flow-steps .cs-step { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Three short cards in a row (e.g. three guest moments). */
.cs-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}

.cs-trio > div {
  padding: 20px;
  border-radius: 16px;
  background: var(--color-surface-container);
}

.cs-section .cs-trio-label {
  margin: 0 0 6px;
  font-family: var(--font-breadcrumb-small-family);
  font-size: var(--font-breadcrumb-small-size);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-accent);
}

.cs-section .cs-trio h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading-xxsmall-family);
  font-size: var(--font-heading-xxsmall-size);
  font-weight: var(--font-heading-xxsmall-weight);
  line-height: var(--font-heading-xxsmall-line-height);
}

.cs-section .cs-trio p:last-child {
  margin: 0;
  font-family: var(--font-body-small-family);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-small-line-height);
  color: var(--color-on-surface-muted);
}

/* Label + text rows divided by hairlines, no boxes (e.g. how-might-we
   reframes, or how I led the work). */
.cs-rows {
  margin: 24px 0;
  border-top: 1px solid var(--color-outline);
}

.cs-rows > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-outline);
}

.cs-rows span {
  font-family: var(--font-breadcrumb-small-family);
  font-size: var(--font-breadcrumb-small-size);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-accent);
}

.cs-section .cs-rows p { margin: 0; }

@media (max-width: 640px) {
  .cs-trio { grid-template-columns: 1fr; }
  .cs-rows > div { grid-template-columns: 1fr; gap: 6px; }
}

/* Now vs. later: the focused list in a solid accent card, the parked list
   in a dashed one with hollow bullets. */
.cs-priority {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}

.cs-priority-col {
  padding: 26px 26px 22px;
  border-radius: 18px;
}

.cs-priority-col--now {
  background: var(--cs-accent-soft);
  box-shadow: inset 0 0 0 2px var(--cs-accent);
}

.cs-priority-col--later {
  border: 2px dashed rgba(48, 30, 24, 0.22);
}

.cs-section .cs-priority-label {
  margin: 0 0 6px;
  font-family: var(--font-breadcrumb-small-family);
  font-size: var(--font-breadcrumb-small-size);
  font-weight: 700;
  line-height: var(--font-breadcrumb-small-line-height);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
}

.cs-priority-col--now .cs-priority-label { color: var(--cs-accent); }

.cs-priority h4 {
  margin: 0 0 18px;
  font-family: var(--font-body-medium-family);
  font-size: var(--font-body-medium-size);
  font-weight: 400;
  line-height: var(--font-body-medium-line-height);
  color: var(--color-on-surface-muted);
}

.cs-priority ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.cs-priority li {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-body-small-family);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-small-line-height);
  color: var(--color-on-surface);
}

.cs-priority li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cs-accent);
}

.cs-priority-col--later li { color: var(--color-on-surface-muted); }
.cs-priority-col--later li::before { background: transparent; box-shadow: inset 0 0 0 2px var(--color-on-surface-muted); }

.cs-section .cs-priority-note {
  margin: 18px 0 0;
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  line-height: var(--font-body-xsmall-line-height);
  color: var(--color-on-surface-muted);
}

@media (max-width: 640px) {
  .cs-priority { grid-template-columns: 1fr; }
}

/* A/B variants: one tile per version, the winner marked. */
.cs-variants {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 20px 0 4px;
}

.cs-variant {
  padding: 14px 12px;
  border-radius: 12px;
  background: var(--color-surface);
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  line-height: 1.3;
  color: var(--color-on-surface-muted);
}

.cs-variant b { display: block; color: var(--color-on-surface); margin-bottom: 6px; }
.cs-variant em { display: block; margin-top: 8px; font-style: normal; font-weight: 700; color: var(--color-on-surface); }
.cs-variant--win { background: var(--cs-accent); color: rgba(255, 255, 255, 0.82); }
.cs-variant--win b, .cs-variant--win em { color: #fff; }

@media (max-width: 640px) {
  /* Phones: a less-tall top inset, smaller corners, and a phone a touch
     bigger (and the desktop narrower to make room for it), all relative to
     whatever the page has set. */
  .cs-showcase {
    padding: calc(var(--cs-stage-pad-top, 56px) * 0.57) calc(var(--cs-stage-pad-right, 18%) + 4%) 0 calc(var(--cs-stage-pad-left, 6%) - 1%);
    border-radius: min(var(--cs-stage-radius, 28px), 20px);
    margin-top: 32px;
  }
  .cs-showcase-phone { border-width: 3px; border-radius: 14px; right: calc(var(--cs-phone-right, 5%) - 1%); width: calc(var(--cs-phone-width, 21%) + 3%); }
  .cs-frame { padding: 16px; border-radius: 18px; }
  .cs-dots-row, .cs-seat-compare { grid-template-columns: 1fr; }
  .cs-variants { grid-template-columns: 1fr 1fr; }
  .cs-flow-row { grid-template-columns: 1fr; gap: 6px; }
  .cs-system { grid-template-columns: 1fr; }
  .cs-system .cs-flow-arrow { transform: rotate(90deg); justify-self: start; margin-left: 12px; }
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .cs-hero h1 { font-family: var(--font-heading-xlarge-family); font-size: var(--font-heading-xlarge-size); font-weight: var(--font-heading-xlarge-weight); line-height: var(--font-heading-xlarge-line-height); letter-spacing: var(--font-heading-xlarge-tracking); }
  .cs-subtitle { font-family: var(--font-body-medium-family); font-size: var(--font-body-medium-size); font-weight: var(--font-body-medium-weight); line-height: var(--font-body-medium-line-height); letter-spacing: var(--font-body-medium-tracking); }
  .cs-hero-images { grid-template-columns: 1fr; }
  .cs-panel-row { grid-template-columns: 1fr; }
  .cs-triplet { grid-template-columns: 1fr; }
  .cs-pair { grid-template-columns: 1fr; }
  .cs-meta { gap: 20px 28px; }
  .cs-meta-row { grid-template-columns: 1fr; gap: 20px; }
  .cs-meta--grid { grid-template-columns: 1fr; }
  .cs-tldr-row { grid-template-columns: 1fr; gap: 4px; }
  .cs-decision-row { grid-template-columns: 1fr; gap: 4px; }
  .cs-finding { grid-template-columns: 1fr; gap: 12px; padding: 24px 20px; }
  /* Name and outcome share the first line; the message wraps under the name. */
  .cs-finding-body .cs-variant { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .cs-finding-body .cs-variant b { grid-area: 1 / 1; }
  .cs-finding-body .cs-variant em { grid-area: 1 / 2; }
  /* The hero's single-column tile is wide enough for two phones to be
     bigger than 34% each - at that size they're ~100px and unreadable. */
  .cs-hero-phones-wrap:not(:has(img:nth-child(3))) img { width: 46%; }
  /* 10px uppercase labels are hard to read on a phone. */
  .cs-tldr-label,
  .cs-block .cs-block-label,
  .cs-decision-tag { font-size: var(--font-size-075); }
}

/* Annotated screen: a label and purpose above, a framed screenshot with
   numbered pins (placed by % so they track the image at any width), and a
   matching numbered list below that says what each part does and why. */
.cs-anno {
  margin: 56px 0;
}

/* The screenshot stays in view while its notes are read. In the text column
   it pins under the top bar and the notes scroll up beneath it; the surface
   ring hides them as they pass. Only on screens tall enough to leave room. */
@media (min-height: 600px) {
  .cs-anno-shot {
    position: sticky;
    top: 100px;
    z-index: 2;
    box-shadow: 0 0 0 12px var(--color-surface);
  }
}

/* Wide screens: break out of the column like the prototype stage, with the
   pinned screenshot on the left and the notes scrolling beside it. */
@media (min-width: 1100px) {
  .cs-anno {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(100%, 100vw - 48px, var(--size-wide-width));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    column-gap: 40px;
    align-items: start;
  }

  /* Only the screenshot and notes break out; the label and purpose stay on
     the text column's left edge (the column is the content width less the
     main padding). */
  .cs-anno figcaption {
    grid-column: 1 / -1;
    width: calc(var(--size-content-width) - 48px);
    margin-left: calc((100% - var(--size-content-width) + 48px) / 2);
  }

  .cs-anno-shot { box-shadow: none; }

  .cs-anno .cs-anno-list {
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.cs-anno figcaption { margin-bottom: 20px; }

.cs-anno figcaption p { margin: 0; }

.cs-anno .cs-anno-label {
  font-family: var(--font-breadcrumb-small-family);
  font-size: var(--font-breadcrumb-small-size);
  font-weight: var(--font-breadcrumb-small-weight);
  line-height: var(--font-breadcrumb-small-line-height);
  letter-spacing: var(--font-breadcrumb-small-tracking);
  text-transform: uppercase;
  color: var(--cs-accent);
  margin-bottom: 8px;
}

/* Pins are placed against the image, not the frame's padding, and the
   coordinates are each pin's centre. */
.cs-anno-img {
  position: relative;
}

.cs-anno-img img {
  display: block;
  width: 100%;
}

.cs-anno-img .cs-anno-pin {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* Markers number themselves in order, like the list below (.cs-anno-list's
   counter), so adding or removing one in the editor keeps every marker
   paired with its note. The digit written in the HTML is just a fallback. */
.cs-anno-img { counter-reset: anno-pin; }
.cs-anno-img .cs-anno-pin { counter-increment: anno-pin; font-size: 0; }
.cs-anno-img .cs-anno-pin::before { content: counter(anno-pin); font-size: var(--font-annotation-size); }

/* A small frosted marker: quiet on the screenshot until its list item (or
   the pin itself) is hovered, then it fills with the accent and the rest
   step back. annotations.js pairs pins and list items by order. */
.cs-anno-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--cs-accent);
  box-shadow: 0 0 0 1px rgba(29, 20, 40, 0.12), 0 2px 8px rgba(29, 20, 40, 0.18);
  font-family: var(--font-annotation-family);
  font-size: var(--font-annotation-size);
  font-weight: var(--font-annotation-weight);
  line-height: var(--line-height-icon);
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.cs-anno-img .cs-anno-pin::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--cs-accent);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cs-anno.has-active .cs-anno-pin { opacity: 0.4; }

.cs-anno.has-active .cs-anno-pin.is-active {
  opacity: 1;
  background: var(--cs-accent);
  color: var(--color-white);
  transform: translate(-50%, -50%) scale(1.12);
}

.cs-anno-pin.is-active::after {
  opacity: 0.5;
  transform: scale(1);
}

.cs-anno-list {
  list-style: none;
  counter-reset: anno;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.cs-anno-list li {
  counter-increment: anno;
  position: relative;
  padding-left: 40px;
  font-family: var(--font-body-small-family);
  font-size: var(--font-body-small-size);
  font-weight: var(--font-body-small-weight);
  line-height: var(--font-body-small-line-height);
  letter-spacing: var(--font-body-small-tracking);
  color: var(--color-on-surface-muted);
}

.cs-anno-list li::before {
  content: counter(anno);
  position: absolute;
  left: 0;
  top: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--cs-accent);
  color: var(--cs-accent);
  font-family: var(--font-label-strong-family);
  font-size: var(--font-label-strong-size);
  font-weight: var(--font-label-strong-weight);
  line-height: var(--line-height-icon);
}

.cs-anno-list li::before { transition: background-color 0.2s ease, color 0.2s ease; }

.cs-anno-list li.is-active::before {
  background: var(--cs-accent);
  color: var(--color-white);
}

.cs-anno-list li.is-active { color: var(--color-on-surface); }

.cs-anno-list b {
  display: block;
  margin-bottom: 2px;
  color: var(--color-on-surface);
  font-weight: var(--font-body-small-strong-weight);
}

@media (max-width: 640px) {
  .cs-anno-img .cs-anno-pin { width: 18px; height: 18px; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .cs-anno-list { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* Captions that point at side-by-side images ("Left: … Right: …") say
   "Top / Bottom" instead once .cs-panel-row stacks them on phones. */
.cs-narrow-only { display: none; }

@media (max-width: 640px) {
  .cs-wide-only { display: none; }
  .cs-narrow-only { display: inline; }
}

/* Reduced motion: page-to-page morphs become a plain cut. */
@media (prefers-reduced-motion: reduce) {
  .cs-anno-pin,
  .cs-anno-pin::after,
  .cs-anno-list li::before { transition: none; }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---- Scroll stories (.cs-anno--story, scroll-story.js) ----
   An annotated screen told as a walkthrough: each note is a beat with room
   to breathe, the screenshot stays pinned, and the camera moves to the part
   the beat in view describes. Chapters number themselves. */
.cs-section { counter-reset: story; }
.cs-anno--story { counter-increment: story; }

.cs-anno--story .cs-anno-label::before {
  content: counter(story, decimal-leading-zero) " \00b7  ";
}

.cs-anno--story .cs-anno-shot { overflow: hidden; }

/* Screens: every .cs-anno-img in the shot stacks in the same place, and
   markers number on across them. The incoming screen fades in on top; the
   outgoing one waits underneath, then hides once the fade has finished.
   Before the script runs, only the first screen shows. */
.cs-anno--story .cs-anno-shot {
  display: grid;
  counter-reset: anno-pin;
}

.cs-anno--story .cs-anno-img {
  grid-area: 1 / 1;
  align-self: start;
  counter-reset: none;
  transition: opacity 0.6s ease;
}

/* Screens after the first are fitted inside its box by scroll-story.js,
   whatever their shape. */
.cs-anno--story .cs-anno-img ~ .cs-anno-img {
  grid-area: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.cs-anno--story .cs-anno-img.is-shown { z-index: 1; }

.cs-anno--story .cs-anno-img:not(:first-child):not(.is-shown),
.cs-anno--story .cs-anno-img.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s 0.6s;
}

.cs-anno--story .cs-anno-img {
  transform-origin: 0 0;
  will-change: transform, clip-path;
}

/* Markers keep their size while the screenshot zooms under them. */
.cs-anno--story .cs-anno-img .cs-anno-pin {
  transform: translate(-50%, -50%) scale(calc(1 / var(--story-z, 1)));
}

.cs-anno--story.has-active .cs-anno-img .cs-anno-pin.is-active {
  transform: translate(-50%, -50%) scale(calc(1.12 / var(--story-z, 1)));
}

/* Beats: one note at a time, the rest step back. The space after the last
   one is where the camera pulls back out to the whole screen. */
.cs-anno--story .cs-anno-list {
  grid-template-columns: 1fr;
  gap: 0;
  padding-bottom: 28vh;
}

.cs-anno--story .cs-anno-list li {
  --beat: 52vh;
  min-height: var(--beat);
  padding-top: calc(var(--beat) * 0.38);
  opacity: 0.32;
  transition: opacity 0.4s ease, color 0.2s ease;
}

.cs-anno--story .cs-anno-list li::before { top: calc(var(--beat) * 0.38 - 2px); }
.cs-anno--story .cs-anno-list li.is-active { opacity: 1; }

@media (min-width: 1100px) {
  .cs-anno--story .cs-anno-list { padding-bottom: 40vh; }
  .cs-anno--story .cs-anno-list li { --beat: 70vh; }

  /* The label and purpose open the story beside the whole screen, before
     the camera moves in: the first beat, not a heading above the figure. */
  .cs-anno--story figcaption {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    margin: 0;
    padding-top: 12vh;
    min-height: 60vh;
  }

  .cs-anno--story .cs-anno-shot { grid-column: 1; grid-row: 1 / span 2; }
  .cs-anno--story .cs-anno-list { grid-column: 2; grid-row: 2; }

  /* Beside the screenshot, the note reads larger, like a caption to it. */
  .cs-anno--story .cs-anno-list li {
    font-family: var(--font-body-medium-family);
    font-size: var(--font-body-medium-size);
    line-height: var(--font-body-medium-line-height);
    letter-spacing: var(--font-body-medium-tracking);
  }
}

/* Short screens can't pin the screenshot, so there's no story to tell:
   plain annotated screen. Reduced motion keeps the beats but not the zoom
   (scroll-story.js holds the camera still). */
@media (max-height: 599px) {
  .cs-anno--story .cs-anno-list { padding-bottom: 0; gap: 16px; }
  .cs-anno--story .cs-anno-list li { --beat: 0px; opacity: 1; }
}

/* Wipe stories (.cs-anno--wipe, scroll-story.js): no zoom and no fade.
   Every screen is visible and stacked, later ones on top, and the script's
   clip decides how much of each shows; the sweep line marks the edge of the
   screen coming in. The backdrop fills the frame around a screen shorter
   than it, so the one underneath doesn't show through. */
.cs-anno--wipe .cs-anno-img:not(:first-child):not(.is-shown),
.cs-anno--wipe .cs-anno-img.is-hidden {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

.cs-anno--wipe .cs-anno-img ~ .cs-anno-img::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: -100vh;
  bottom: -100vh;
  background: var(--cs-frame-bg);
}

.cs-story-wipe {
  position: absolute;
  z-index: 50;
  width: 2px;
  margin-left: -1px;
  background: var(--cs-accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 16px rgba(29, 20, 40, 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cs-story-wipe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--cs-accent);
  box-shadow: 0 0 0 3px #fff;
}

.cs-story-wipe.is-out { opacity: 1; }

/* A note on a newly opened screen gets extra room before it, for the
   camera to go to the click, press, and open the screen. */
.cs-anno--story .cs-anno-list li.opens-screen { margin-top: 30vh; }

/* The click that opens the next screen (data-tap, scroll-story.js): a
   cursor glides in, presses, and a ring goes out from the point. */
.cs-story-cursor {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cs-story-cursor svg {
  position: absolute;
  left: -5px;
  top: -3px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
  transform: translate(36px, 28px);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cs-story-cursor::after {
  content: "";
  position: absolute;
  left: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(21, 17, 29, 0.25);
  opacity: 0;
  transform: scale(0.3);
}

.cs-story-cursor.is-out { opacity: 1; }
.cs-story-cursor.is-out svg { transform: none; }
.cs-story-cursor.is-pressed svg { transform: scale(0.86); transition-duration: 0.15s; }
.cs-story-cursor.is-pressed::after { animation: cs-story-tap 0.7s ease-out both; }

@keyframes cs-story-tap {
  0% { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* A built component's note is read for longer: its anatomy reveals part
   by part over it. */
.cs-anno--story .cs-anno-list li.is-spec { --beat: 64vh; }

/* A wipe has no camera to move to the click, so its new screens need
   less room before them than a zoom story's. */
.cs-anno--wipe .cs-anno-list li.opens-screen { margin-top: 12vh; }

@media (min-width: 1100px) {
  .cs-anno--story .cs-anno-list li.opens-screen { margin-top: 40vh; }
  .cs-anno--story .cs-anno-list li.is-spec { --beat: 72vh; }
  .cs-anno--wipe .cs-anno-list li.opens-screen { margin-top: 14vh; }
}

@media (max-height: 599px) {
  .cs-anno--story .cs-anno-list li.opens-screen { margin-top: 0; }
  .cs-anno--story .cs-anno-list li.is-spec { --beat: 0px; }
  .cs-story-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-anno--story .cs-anno-list li { transition: none; }
  .cs-story-cursor svg { transition: none; }
  .cs-story-cursor.is-pressed::after { animation: none; }
  .cs-anno--story .cs-anno-img { transition: none; }
}

/* ---- Built components with anatomy (.cs-spec in a wipe story) ----
   A screen drawn in HTML instead of a screenshot: a 720 x 475 canvas (the
   seat map's shape) scaled to the frame. scroll-story.js numbers every
   [data-part] - left-hand parts top to bottom, then right-hand ones - and
   draws its outline, number, leader and legend row, revealed one by one as
   the screen's note is read. [data-reveal="last"] comes in after them. */
.cs-anno--wipe .cs-spec { overflow: hidden; border-radius: 10px; }
/* Leading the story, a built screen sets the frame's shape itself. */
.cs-anno--wipe .cs-spec:first-child { aspect-ratio: 720 / 475; }
.cs-spec > .cs-anno-pin { display: none; }

.cs-spec-canvas {
  --spec-purple: #9a4cf2;
  --spec-teal: #00807a;
  --spec-ink: #12333a;
  --spec-muted: #5f6f72;
  position: relative;
  width: 720px;
  height: 475px;
  transform-origin: 0 0;
  transform: scale(var(--spec-scale, 1));
  background: #f6f5f7;
  color: var(--spec-ink);
  font-family: var(--font-family-body);
  font-size: 11px;
  line-height: 1.35;
}

.cs-spec-canvas p, .cs-spec-canvas dl, .cs-spec-canvas dd { margin: 0; }

/* The case study's paragraph type stays out of the component. */
.cs-spec-canvas p {
  max-width: none;
  font: inherit;
  letter-spacing: normal;
  color: inherit;
}
.cs-spec-canvas svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-main .cs-spec-canvas img { cursor: default; }

.cs-spec-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(18, 51, 58, 0.12);
}

/* Anatomy, drawn by scroll-story.js. */
.cs-spec-outline,
.cs-spec-num,
.cs-spec-lead,
.cs-spec-legend li,
.cs-spec-canvas [data-reveal] {
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-spec-outline {
  position: absolute;
  z-index: 2;
  border: 1.5px dashed var(--spec-purple);
  border-radius: 8px;
  background: color-mix(in srgb, var(--spec-purple) 9%, transparent);
  pointer-events: none;
  transform: scale(0.97);
}

.cs-spec-num {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--spec-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  transform: scale(0.4);
}

.cs-spec-lead {
  position: absolute;
  z-index: 2;
  height: 0;
  border-top: 1.5px dotted var(--spec-purple);
  transform-origin: var(--from, left) center;
  transform: scaleX(0);
}

.cs-spec-legend {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  width: 230px;
}

.cs-spec-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  transform: translateX(-8px);
}

.cs-spec-legend li b {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--spec-purple);
  color: #fff;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
}

.cs-spec-canvas .is-on { opacity: 1; transform: none; }
.cs-spec-canvas [data-reveal] { transform: translateY(8px); }
.cs-spec-canvas [data-reveal].is-on { transform: none; }

/* Pulse (ambient status): from the motion guidelines - opacity 55% to
   100%, duration/pulse (1000ms a phase), easing/pulse, looping. */
@keyframes cs-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.cs-pulse { animation: cs-pulse 1000ms cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }

/* Guest list */
.cs-spec-canvas .cs-spec-guests { padding: 18px 20px 14px; }
.cs-spec-canvas .sg-row { white-space: nowrap; display: flex; align-items: center; gap: 6px; color: var(--spec-muted); margin-bottom: 10px !important; }
.cs-spec-canvas .sg-row b { color: var(--spec-ink); }
.cs-spec-canvas .sg-row i { width: 1px; height: 12px; background: #c9d1d2; }
.cs-spec-canvas .sg-caret { width: 14px; height: 14px; margin-left: auto; color: var(--spec-ink); }
.cs-spec-canvas .sg-arrow { width: 15px; height: 15px; color: #6b7a7d; }
.cs-spec-canvas .sg-arrow.is-on { color: var(--spec-teal); }
.cs-spec-canvas .sg-tabs { display: flex; gap: 6px; overflow: hidden; margin: 2px 0 12px; }
.cs-spec-canvas .sg-tabs span { flex: none; padding: 9px 12px; border-radius: 8px; background: #f2f3f3; border: 1px solid #e3e6e6; color: #6b7a7d; font-size: 12px; font-weight: 600; }
.cs-spec-canvas .sg-tabs span.is-on { background: #fff; border-color: #a9b3b4; color: var(--spec-ink); }
.cs-spec-canvas .sg-skip { color: var(--spec-teal); font-size: 15px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid #dfe3e3; margin-bottom: 6px !important; }
.cs-spec-canvas .sg-guest { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.cs-spec-canvas .sg-guest p { display: grid; gap: 2px; font-size: 13px; }
.cs-spec-canvas .sg-av { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 11px; font-weight: 600; }
.cs-spec-canvas .sg-av--done { background: #cdeeee; color: var(--spec-ink); }
.cs-spec-canvas .sg-av--done svg { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--spec-ink); color: #fff; stroke-width: 2.2; }
.cs-spec-canvas .sg-av--active { background: var(--spec-teal); color: #fff; }
.cs-spec-canvas .sg-av--active i { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--spec-teal); }
.cs-spec-canvas .sg-av--none { background: #4f78a6; color: #fff; }
.cs-spec-canvas .sg-price { font-weight: 600; }
.cs-spec-canvas .sg-muted { color: var(--spec-muted); font-size: 11px; }
.cs-spec-canvas .sg-status { display: flex; align-items: center; gap: 5px; color: var(--spec-muted); font-size: 11px; }
.cs-spec-canvas .sg-status i { width: 7px; height: 7px; border-radius: 50%; background: #10b3a8; }
.cs-spec-canvas .sg-remove { width: 18px; height: 13px; margin-left: auto; fill: var(--spec-teal); stroke: none; }

.cs-spec-canvas .cs-spec-motion {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 236px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(18, 51, 58, 0.08);
}

.cs-spec-canvas .cs-spec-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--spec-purple); margin-bottom: 8px !important; }
.cs-spec-canvas .cs-spec-motion dl { display: grid; gap: 5px; }
.cs-spec-canvas .cs-spec-motion dl div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; }
.cs-spec-canvas .cs-spec-motion dt { color: var(--spec-muted); }
.cs-spec-canvas .cs-spec-motion code { font-family: var(--font-family-code); font-size: 10px; background: #f0eef3; padding: 1px 4px; border-radius: 4px; }

/* Seat details panel */
.cs-spec-canvas .cs-spec-seat { padding: 16px 18px; }
.cs-spec-canvas .ss-head { display: grid; gap: 1px; padding-right: 24px; margin-bottom: 10px; }
.cs-spec-canvas .ss-head b { font-size: 15px; }
.cs-spec-canvas .ss-head span { font-size: 10px; color: var(--spec-muted); }
.cs-spec-canvas .ss-close { position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; }
.cs-spec-canvas .ss-price { display: flex; justify-content: space-between; align-items: end; margin-bottom: 10px; }
.cs-spec-canvas .ss-price p { display: grid; }
.cs-spec-canvas .ss-price span { font-size: 10px; color: var(--spec-muted); }
.cs-spec-canvas .ss-amount { justify-items: end; }
.cs-spec-canvas .ss-amount s { font-size: 10px; color: var(--spec-muted); }
.cs-spec-canvas .ss-amount b { display: flex; align-items: center; gap: 4px; font-size: 16px; }
.cs-spec-canvas .ss-amount svg, .cs-spec-canvas .sp-actions svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.cs-spec-canvas .ss-button { display: block; padding: 9px; border-radius: 4px; background: var(--spec-teal); color: #fff; text-align: center; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.cs-spec-canvas .ss-grid { display: grid; grid-template-columns: 1fr 120px; gap: 12px; align-items: start; margin-bottom: 12px; }
.cs-spec-canvas .ss-attrs { display: grid; gap: 6px; }
.cs-spec-canvas .ss-attrs dt { font-size: 10px; color: var(--spec-muted); }
.cs-spec-canvas .ss-attrs dd { font-weight: 600; }
.cs-spec-canvas .ss-photo { display: block; width: 120px; height: 96px; object-fit: cover; border-radius: 6px; }
.cs-spec-canvas .ss-aircraft { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid #e3e6e6; }
.cs-spec-canvas .ss-aircraft span { display: block; font-size: 10px; color: var(--spec-muted); }

/* Price details */
.cs-spec-canvas .cs-spec-price { overflow: hidden; background: #f4f4f4; }
.cs-spec-canvas .sp-head { display: grid; gap: 2px; padding: 18px 20px 14px; background: #02141a; color: #fff; }
.cs-spec-canvas .sp-head b { font-size: 18px; }
.cs-spec-canvas .sp-head span { font-size: 11px; color: #7fd1c6; }
.cs-spec-canvas .sp-close { position: absolute; top: 18px; right: 18px; width: 15px; height: 15px; color: #fff; }
.cs-spec-canvas .sp-body { display: grid; gap: 8px; padding: 10px; }
.cs-spec-canvas .sp-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-spec-canvas .sp-actions span { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); font-size: 9px; font-weight: 600; }
.cs-spec-canvas .sp-message { padding: 6px; border: 1.5px dashed #cdbff0; border-radius: 6px; color: #8e7fb8; text-align: center; font-size: 10px; }
.cs-spec-canvas .sp-pricing { display: grid; gap: 7px; }
.cs-spec-canvas .sp-pricing > div { display: grid; gap: 3px; padding: 9px 12px; background: #fff; border-radius: 6px; }
.cs-spec-canvas .sp-pricing p { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--spec-muted); }
.cs-spec-canvas .sp-pricing p:first-child { color: var(--spec-ink); font-size: 11px; }

/* Global header */
.cs-spec-canvas .cs-spec-header { display: flex; align-items: center; height: 54px; padding: 0 18px; border-radius: 6px; background: #1d3a40 repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, 0.035) 22px 23px); color: #fff; }
.cs-spec-canvas .gh-logo { font-weight: 800; font-style: italic; font-size: 17px; letter-spacing: -0.02em; }
.cs-spec-canvas .gh-mark svg { display: block; width: 24px; height: 24px; fill: #fff; stroke: none; }
.cs-spec-canvas .gh-slots { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.cs-spec-canvas .gh-cad { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.cs-spec-canvas .gh-cad svg { width: 12px; height: 12px; }
.cs-spec-canvas .gh-flag { width: 15px; height: 10px; background: linear-gradient(90deg, #d52b1e 28%, #fff 28% 72%, #d52b1e 72%); border-radius: 1px; }
.cs-spec-canvas .gh-bell { position: relative; }
.cs-spec-canvas .gh-bell svg, .cs-spec-canvas .gh-user { display: block; width: 19px; height: 19px; }
.cs-spec-canvas .gh-bell i { position: absolute; top: -5px; right: -6px; width: 13px; height: 13px; border-radius: 50%; background: #10b3a8; font-size: 8px; font-style: normal; font-weight: 700; line-height: 13px; text-align: center; }
.cs-spec-canvas .gh-dim { position: absolute; height: 1px; background: #9aa4a6; color: var(--spec-muted); font-size: 10px; }
.cs-spec-canvas .gh-dim::before, .cs-spec-canvas .gh-dim::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: #9aa4a6; }
.cs-spec-canvas .gh-dim::before { left: 0; }
.cs-spec-canvas .gh-dim::after { right: 0; }
.cs-spec-canvas .gh-dim span { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
  .cs-pulse { animation: none; }
  .cs-spec-outline, .cs-spec-num, .cs-spec-lead, .cs-spec-legend li, .cs-spec-canvas [data-reveal] { transition: none; }
}

/* ---- Story signatures ----
   The frame of a case study is shared (hero, overview, sections, framed
   screens, decisions, findings, the closing section). These pieces give
   each project its own centrepiece on top of it - Space Centre's brand
   book, Turn Tool's before-and-after workflow, UltraBasic's scale of work -
   and all of them read the page's accent, so they stay in one family. */

/* Breaks out of the text column to the wide width, like annotated screens. */
.cs-wide {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(100%, 100vw - 48px, var(--size-wide-width));
}

/* A dark stage for a section's centrepiece, in the showcase's colours. */
.cs-band {
  margin: 40px 0;
  padding: 48px clamp(20px, 5vw, 56px);
  border-radius: 28px;
  background: var(--cs-showcase-bg);
  color: var(--color-white);
}

.cs-section .cs-band p { color: rgba(255, 255, 255, 0.78); }

.cs-section .cs-band-label {
  margin: 40px 0 16px;
  font-family: var(--font-breadcrumb-small-family);
  font-size: var(--font-breadcrumb-small-size);
  font-weight: 700;
  line-height: var(--font-breadcrumb-small-line-height);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.cs-section .cs-band-label:first-child { margin-top: 0; }

.cs-section .cs-band-quote {
  margin: 0 0 24px;
  font-family: var(--font-heading-large-family);
  font-size: var(--font-heading-large-size);
  font-weight: var(--font-heading-large-weight);
  line-height: 1.35;
  color: var(--color-white);
}

/* Cards inside a band: two or four to a row. */
.cs-band-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cs-band-cards > div {
  padding: 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.cs-section .cs-band-cards h4 {
  margin: 0 0 8px;
  font-family: var(--font-heading-xxsmall-family);
  font-size: var(--font-heading-xxsmall-size);
  font-weight: var(--font-heading-xxsmall-weight);
  line-height: var(--font-heading-xxsmall-line-height);
  color: var(--color-white);
}

.cs-section .cs-band-cards p {
  margin: 0;
  font-family: var(--font-body-small-family);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-small-line-height);
}

/* Type specimens: the client's own faces, so these name font families
   directly instead of the site's type roles. The page loads the fonts. */
.cs-section .cs-band-cards .cs-specimen {
  margin: 0 0 14px;
  font-size: var(--font-size-1300);
  line-height: 1.05;
  color: var(--color-white);
}

.cs-section .cs-band-cards p.cs-specimen--archivo { font-family: 'Archivo Black', sans-serif; font-weight: 400; }
.cs-section .cs-band-cards p.cs-specimen--bebas { font-family: 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: 0.02em; }
.cs-section .cs-band-cards p.cs-specimen--opensans { font-family: 'Open Sans', sans-serif; font-weight: 400; }
.cs-section .cs-band-cards p.cs-specimen--orbitron { font-family: 'Orbitron', sans-serif; font-weight: 500; }

/* Colour swatches: a block of the colour, its name and what it's for. */
.cs-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cs-swatch {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 120px;
  padding: 14px;
  border-radius: 14px;
  color: var(--color-white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.cs-swatch--light { color: var(--color-on-surface); }

.cs-section .cs-swatch b {
  font-family: var(--font-label-strong-family);
  font-size: var(--font-label-strong-size);
  font-weight: var(--font-label-strong-weight);
  line-height: var(--font-label-strong-line-height);
}

.cs-section .cs-swatch p {
  margin: 4px 0 0;
  font-family: var(--font-body-xsmall-family);
  font-size: var(--font-body-xsmall-size);
  line-height: var(--font-body-xsmall-line-height);
  color: inherit;
  opacity: 0.8;
}

/* Phases along a line, numbered in order. */
.cs-timeline {
  list-style: none;
  margin: 28px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  counter-reset: phase;
}

.cs-timeline li {
  position: relative;
  padding-top: 40px;
  counter-increment: phase;
}

.cs-timeline li::before {
  content: counter(phase);
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cs-accent);
  color: var(--color-white);
  font-family: var(--font-label-strong-family);
  font-size: var(--font-label-strong-size);
  font-weight: var(--font-label-strong-weight);
  line-height: 26px;
  text-align: center;
}

.cs-timeline li::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 36px;
  right: -14px;
  height: 2px;
  background: var(--cs-accent-soft);
}

.cs-timeline li:last-child::after { display: none; }

.cs-section .cs-timeline h4 {
  margin: 0 0 8px;
  font-family: var(--font-heading-xxsmall-family);
  font-size: var(--font-heading-xxsmall-size);
  font-weight: var(--font-heading-xxsmall-weight);
  line-height: var(--font-heading-xxsmall-line-height);
}

.cs-section .cs-timeline p {
  margin: 0;
  font-family: var(--font-body-small-family);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-small-line-height);
  color: var(--color-on-surface-muted);
}

/* A flow diagram standing on its own in a section (not inside a decision). */
.cs-flow--framed {
  margin: 28px 0;
  padding: 24px;
  border-radius: 18px;
  background: var(--color-surface-container);
}

.cs-flow--framed .cs-step:not(.cs-step--key):not(.cs-step--miss) { background: var(--color-white); }
.cs-flow--framed .cs-flow-row { grid-template-columns: 116px 1fr; }

/* Scale of the work: a row of plain numbers in a frame. */
.cs-frame.cs-stats--scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 28px 0;
}

.cs-stats--scale .cs-stat-label { max-width: none; }

@media (max-width: 640px) {
  .cs-band { padding: 32px 20px; border-radius: 20px; }
  .cs-band-cards { grid-template-columns: 1fr; }
  .cs-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-timeline { grid-template-columns: 1fr; gap: 20px; }
  .cs-timeline li::after { display: none; }
  .cs-frame.cs-stats--scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-flow--framed .cs-flow-row { grid-template-columns: 1fr; }
}