/* Case study pages: shared styles. Load tokens.css first; this file uses its values. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pad: 40px;   /* everything else comes from tokens.css */
}

html { scroll-behavior: smooth; overflow-x: hidden; }

/* Lenis (smooth scroll) base styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  color: var(--black);
  background: var(--white);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { text-wrap: balance; font-weight: inherit; }
p, li { text-wrap: pretty; }
img, video { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── Layout helpers ── */
.cs-wrap {
  width: 100%;
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.cs-band { width: 100%; }
.cs-band.grey { background: var(--grey-bg); }

/* ── Type ── */
.cs-title {
  font-weight: 300;
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: -0.02em;
  color: var(--blue);
  text-box: trim-both cap alphabetic;
}

/* Long-form body: serif, one size on every screen */
.cs-copy {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--black);
}

.cs-copy p + p { margin-top: calc(var(--leading-body) * 1em); }
.cs-copy strong { font-weight: 700; }

.cs-caption {
  font-size: 16px;
  line-height: var(--leading-body);
  color: var(--black);
  text-box: trim-both cap alphabetic;
}

/* ── Header ── */
.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 40px;
}

.cs-header .logo img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

/* ☰ and ×: the same control-size button */
.menu-button,
.menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-size);
  height: var(--control-size);
  border: 0;
  border-radius: 50px;
  background: transparent;
  color: var(--black);
  cursor: pointer;
}

.menu-close svg { display: block; width: 20px; height: 20px; }
/* the menu icon file as a mask, so it takes the button's colour */
.menu-icon { display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("../images/lucide/menu.svg") center / contain no-repeat; mask: url("../images/lucide/menu.svg") center / contain no-repeat; }

/* Hover: a 3px cyan ring with round ends draws itself round the button, clockwise from the top.
   Hidden once it has unwound, so the round cap doesn't leave a dot. */
.menu-button, .menu-close { position: relative; }
.menu-button .menu-ring, .menu-close .menu-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0s linear 0.4s;
}
.menu-ring circle {
  fill: none;
  stroke: var(--cyan);
  stroke-width: var(--accent-stroke);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.4s ease-out;
}

@media (hover: hover) {
  :is(.menu-button, .menu-close):hover .menu-ring { opacity: 1; transition: none; }
  :is(.menu-button, .menu-close):hover .menu-ring circle { stroke-dashoffset: 0; }
}

/* Download CV beside the menu button (same as the homepage); hidden up to 900px */
.cs-header-right { display: flex; align-items: center; gap: 16px; }

.cv-wrap { position: relative; display: inline-flex; align-items: center; }

.cv-spark {
  position: absolute;
  left: -28px;
  width: 23px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}

.cv-btn {
  display: inline-flex;
  align-items: center;
  height: var(--control-size);
  padding: 0 16px;
  border-radius: 40px;
  background: var(--grey-ui);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.22s ease-out;
}

@media (hover: hover) {
  .cv-wrap:hover .cv-spark { opacity: 1; }
  .cv-wrap:hover .cv-btn { background: var(--black); }
}

/* Button states (Figma 417:3111): grey, black with the spark on hover, black while pressed */
.cv-btn:active { background: var(--black); }

@media (max-width: 900px) {
  .cs-header-right .cv-wrap { display: none; }
}

/* Menu: full screen up to 900px (same as the homepage), a floating panel above */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 40px var(--pad) 32px;
  background: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease-out), visibility 0s;
}

html.menu-open, html.menu-open body { overflow: hidden; }

.menu-top { display: flex; align-items: center; justify-content: space-between; }
.menu-top img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }

.menu-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 64px;
  gap: 48px;
  overflow-y: auto;
}

.menu-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.menu-links a {
  font-size: 30px;
  line-height: 37px;
  letter-spacing: -0.9px;
  color: var(--grey-ui);   /* black on hover, like the buttons */
  text-decoration: underline var(--accent-stroke) transparent;   /* cyan on hover */
  text-underline-offset: var(--underline-offset);
}

.menu-label {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--blue);
}

.menu-links a, .menu-label {
  opacity: 0;
  transform: translateY(var(--enter-distance));
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), color 0.2s, text-decoration-color 0.2s;
}

.menu-overlay.is-open :is(.menu-links a, .menu-label) {
  opacity: 1;
  transform: none;
  transition: opacity var(--enter-duration) var(--ease-out) calc(0.05s + var(--i) * var(--enter-stagger) / 2),
              transform var(--enter-duration) var(--ease-out) calc(0.05s + var(--i) * var(--enter-stagger) / 2),
              color 0.2s, text-decoration-color 0.2s;
}

.menu-social { display: flex; justify-content: space-around; }
.menu-social a { font-size: 18px; line-height: 28px; color: var(--grey); text-decoration: underline var(--accent-stroke) transparent; text-underline-offset: var(--underline-offset); transition: color 0.2s, text-decoration-color 0.2s; }

@media (hover: hover) {
  .menu-links a:hover, .menu-social a:hover { text-decoration-color: var(--cyan); }
  .menu-links a:hover, .menu-social a:hover { color: var(--black); }
}

/* Floating panel (Figma 1170:28155): about a third of the screen, full height on the right */
@media (min-width: 901px) {
  .menu-overlay {
    inset: 0 0 0 auto;
    /* past the max page width, the panel grows by the side margin so it keeps its place beside the ☰ */
    --gutter: max(0px, calc((100vw - var(--max-w) - 2 * var(--pad)) / 2));
    width: min(100vw, max(calc(0.32 * (100vw - 2 * var(--gutter)) + var(--gutter)), calc(var(--menu-x, 52px) + 228px)));
    padding: 40px;
    overflow-y: auto;
    box-shadow: -8px 8px 10px rgba(58, 124, 167, 0.1);
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }

  .menu-overlay.is-open {
    transform: none;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s;
  }

  html.menu-open, html.menu-open body { overflow: visible; }

  /* the × (40px, right-aligned) is centred on the ☰ button, JS sets --menu-x/y; links centre in the panel */
  .menu-top { justify-content: flex-end; margin: max(0px, calc(var(--menu-y, 60px) - 60px)) max(0px, calc(var(--menu-x, 60px) - 60px)) 0 0; }
  .menu-top img { display: none; }

  .menu-links { flex: none; gap: 60px; margin-top: 32px; padding-top: 0; overflow: visible; }
  .menu-links, .menu-social { margin-right: var(--gutter); }
  .menu-group { gap: 28px; }

  .menu-links a, .menu-label, .menu-social a { text-box: trim-both cap alphabetic; text-align: center; }
  .menu-links a { font-size: 20px; line-height: 28px; letter-spacing: 0; }
  .menu-links a, .menu-label { transform: translateY(8px); }

  .menu-social { flex-direction: column; align-items: center; gap: 28px; margin-top: 60px; }
  .menu-social a { font-size: 20px; color: var(--grey-dark); }
}

/* ── Intro ── */
.cs-intro {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-top: 40px;
}

.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 80px;
  max-width: 800px;
}

.cs-meta div { display: flex; flex-direction: column; gap: 12px; }

.cs-meta dt {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--blue);
  text-box: trim-both cap alphabetic;
}

.cs-meta dd {
  font-size: 20px;
  line-height: 28px;
  text-box: trim-both cap alphabetic;
}

.cs-heading { display: flex; flex-direction: column; gap: 40px; }

.cs-h1 {
  max-width: 800px;
  font-weight: 300;
  font-size: var(--text-page-title);
  line-height: var(--leading-heading);
  letter-spacing: -0.01em;
  color: var(--blue);
  text-box: trim-both cap alphabetic;
}

.cs-h1 span { color: var(--black); }

.cs-badges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }

.cs-badges li {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--grey-dark);
  border-radius: 40px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--grey-dark);
  white-space: nowrap;
}

/* Title and tags grouped 24px apart (hero sits 40px below the group) */
.cs-title-group { display: flex; flex-direction: column; gap: 24px; }

/* Hero: product screen on the soft cyan backdrop */
.cs-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1440 / 700;
  border-radius: 8px;
  background: url("../case-studies/centauri/hero-bg.png") center / cover no-repeat;
  overflow: hidden;
}

/* Hero variant: one full-bleed image */
.cs-hero.is-image { background: none; }
.cs-hero.is-image > img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

.cs-hero video {
  width: 84.72%;            /* 1220 of 1440 */
  height: auto;
  aspect-ratio: 1220 / 609;
  object-fit: cover;
  object-position: top left;
  border-radius: 8px;
}

/* ── TL;DR ── */
.cs-tldr {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 80px 0 60px;
}

.cs-tldr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cs-tldr-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 24px 32px;
  background: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.cs-tldr-card h3 {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--blue);
  text-box: trim-both cap alphabetic;
}

.cs-bullets { list-style: none; font-family: var(--font-body); font-size: var(--text-body); line-height: 1.4; text-box: trim-both cap alphabetic; }
.cs-bullets li { position: relative; padding-left: 14px; }
.cs-bullets li + li { margin-top: 4px; }
.cs-bullets li::before { content: "•"; position: absolute; left: 0; }
.cs-bullets strong { font-weight: 700; }

/* ── Generic two-column section ── */
.cs-section { padding: 60px 0; }
.cs-section.tall { padding: 80px 0; }

.cs-split {
  display: flex;
  justify-content: space-between;
  gap: 60px;
}

.cs-split > * { flex: 1 1 0; max-width: 660px; min-width: 0; }

.cs-stack { display: flex; flex-direction: column; gap: 32px; }

.cs-media {
  border-radius: 8px;
  overflow: hidden;
}

.cs-media img { width: 100%; height: 100%; object-fit: cover; }

/* The Problem */
.cs-problem-img { align-self: center; }
.cs-problem-img img { width: auto; max-width: 100%; height: auto; max-height: 472px; margin: 0 auto; }

/* The Challenges */
.cs-challenges { display: flex; flex-direction: column; gap: 80px; }

.cs-cols {
  display: flex;
  gap: 120px;
}

.cs-cols > * { flex: 1 1 0; min-width: 0; }

.cs-pullquote {
  display: block;
  margin: 28px 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-quote);
  line-height: var(--leading-heading);
  color: var(--blue);
}

.cs-flows {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.cs-figure.cs-flow-board { gap: 16px; }
.cs-flow-board img { width: 100%; height: auto; }

.cs-prototype { aspect-ratio: 1220 / 179.9; }
.cs-prototype img { width: 100%; height: 100%; object-fit: cover; }

/* Speech bubble + emoji (Refuelr's question) */
.cs-ask { display: flex; align-items: flex-end; gap: 16px; margin-top: 8px; }

.cs-bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
}

.cs-bubble p {
  align-self: stretch;
  padding: 24px;
  background: #ecfcf0;
  border-radius: 8px 8px 0 8px;   /* square corner where the tail joins */
  font-family: var(--font-body);
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.64px;
  color: #00320d;
  white-space: nowrap;              /* keep Figma's two-line break */
  text-box: trim-both cap alphabetic;
}

.cs-bubble img { width: 26.5px; height: 26px; transform: scaleX(-1); }

.cs-shrug { width: 132px; height: auto; flex-shrink: 0; }

/* Image beside copy at a fixed Figma ratio */
.cs-ratio { position: relative; overflow: hidden; border-radius: 8px; }
.cs-ratio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cs-listing { width: 100%; max-width: 1220px; margin: 0 auto; aspect-ratio: 1980 / 1700; border-radius: 16px; overflow: hidden; }
.cs-listing img { width: 100%; height: 100%; object-fit: cover; }

.cs-copy-media { display: flex; justify-content: space-between; gap: 60px; align-items: flex-start; }
.cs-copy-media > .cs-copy { flex: 1 1 700px; max-width: 700px; }
.cs-copy-media > .cs-copy p.gap { margin-top: 32px; }
.cs-copy-media > figure { flex: 0 1 640px; }
.cs-copy-media > figure img { width: 100%; height: auto; }

/* The Product */
.cs-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

.cs-feature { display: flex; flex-direction: column; gap: 24px; }

.cs-feature-img {
  position: relative;
  aspect-ratio: 690 / 472;
  border-radius: 8px;
  overflow: hidden;
}

.cs-feature-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma crops for two of the feature images */
.cs-feature-img img.crop-datasets    { inset: auto; left: -13.88%; top: -21.5%; width: 132.99%; height: 143%; max-width: none; }
.cs-feature-img img.crop-adjustments { inset: auto; left: -8.71%;  top: -9.07%; width: 120.9%;  height: 130%; max-width: none; }

.cs-feature-text {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.cs-feature-text img { width: 40px; height: 40px; flex-shrink: 0; }
/* trim the text to cap height so the 40px icon spans the first two lines (as in Figma) */
.cs-feature-text span { text-box: trim-both cap alphabetic; }
/* one line is shorter than the icon, so centre it; longer text still starts at the top */
.cs-feature-text span { align-self: center; }

/* Centauri logo: sits close under The Product */
.cs-section.cs-logo { padding: 20px 0 60px; }
.cs-logo-video { aspect-ratio: 1808 / 1096; background: #1a1f2b; }
.cs-logo-video video { width: 100%; height: 100%; object-fit: cover; }

/* After Launch */
.cs-after { display: flex; flex-direction: column; gap: 80px; }

.cs-figure { display: flex; flex-direction: column; gap: 16px; }
.cs-figure .cs-media { aspect-ratio: 664 / 322; }

.cs-synopsis img { width: 100%; height: auto; }

/* Saved Views */
.cs-saved .cs-media { align-self: stretch; min-height: 320px; max-height: 700px; }

/* Small bar chart card */
.cs-chart {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  background: var(--white);
  border-radius: 8px;
  line-height: 1.3;
  align-self: flex-start;
}

.cs-chart h3 { font-weight: 500; font-size: 20px; color: var(--black); }
.cs-chart .sub { margin-top: 4px; font-size: 13px; color: #61666e; }
.cs-chart-groups { display: flex; flex-direction: column; gap: 32px; }
.cs-chart-group { display: flex; flex-direction: column; gap: 6px; }
.cs-chart-group h4 { font-weight: 600; font-size: 14px; }
.cs-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; }
.cs-bar i { display: block; height: 18px; border-radius: 3px; flex-shrink: 0; width: var(--w); background: #3ee36b; }
.cs-bar.cost i { background: #00320d; }
.cs-chart .note { font-size: var(--text-min); color: #61666e; }

/* The Result */
.cs-result {
  position: relative;
  padding: 80px 0;
}

.cs-result::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../case-studies/centauri/hero-bg.png") center / cover no-repeat;
  opacity: 0.5;
}

.cs-result.is-plain::before { display: none; }

.cs-result > .cs-wrap { position: relative; display: flex; flex-direction: column; gap: 80px; }

.cs-numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-content: start;
}

.cs-number {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 164px;
  padding: 40px 32px;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(58, 124, 167, 0.05);
}

.cs-number strong {
  font-weight: 300;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.64px;
  color: var(--blue);
  text-box: trim-both cap alphabetic;
}

.cs-number span {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-box: trim-both cap alphabetic;
}

.cs-result-img { aspect-ratio: 1440 / 700; }

/* ── Alpha Design System ── */
.cs-copy p.gap { margin-top: 32px; }
.cs-copy .cs-bullets { margin-top: 28px; }

/* Bands that fade from light grey to white */
.cs-fade { background: linear-gradient(to bottom, var(--grey-bg), var(--white)); }

/* Copy beside an image at its natural ratio */
.cs-split.top { align-items: flex-start; }
.cs-split.top .cs-media img { height: auto; }

/* Hero: video on a deep blue gradient */
.cs-hero.is-alpha { background: linear-gradient(127.68deg, #2a4489 6.31%, #0c1720 80.67%); }
.cs-hero.is-alpha video { width: 75%; aspect-ratio: 1920 / 1096; }

/* Before and after diagram card */
.cs-silos {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: flex-start;
  padding: 32px;
  background: var(--white);
  border-radius: 8px;
  line-height: 1.3;
  color: #61666e;
}

.cs-silos h3 { font-weight: 500; font-size: 20px; color: var(--black); }
.cs-silos-head p { margin-top: 4px; font-size: 13px; }
.cs-silos .label { font-weight: 600; font-size: 11px; }
.cs-silos .note { font-size: var(--text-min); }

.cs-silos-apps { display: flex; gap: 10px; margin-top: 8px; }

.cs-silos-apps div {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: #f5f6f8;
  border: 1px solid #e3e6ea;
  border-radius: var(--r);
  overflow: hidden;
}

.cs-silos-apps div.dark { background: #1c2938; }
.cs-silos-apps i { display: block; height: 6px; border-radius: 3px; background: #d8dce5; }
.cs-silos-apps .dark i { background: #364050; }
.cs-silos-apps i.s { width: 30px; max-width: 100%; }
.cs-silos-apps b { display: block; height: 18px; width: var(--w); max-width: 100%; border-radius: var(--br); background: var(--bg, #4652c2); }

.cs-silos-after { display: flex; flex-direction: column; gap: 14px; }

.cs-silos-issues, .cs-silos-arrows { display: flex; gap: 8px; list-style: none; }

.cs-silos-issues li {
  flex: 1 1 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff1f1;
  color: #bf0000;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.cs-silos-arrows span { flex: 1 1 0; text-align: center; font-size: 18px; color: var(--blue); text-box: trim-both cap alphabetic; }

.cs-silos-alpha { padding: 16px 20px; border-radius: 8px; background: #29317c; }
.cs-silos-alpha h3 { font-weight: 600; font-size: 16px; color: var(--white); }
.cs-silos-alpha p { margin-top: 4px; font-size: 13px; color: #babee8; }

/* Before / after screens, 2 × 2 */
.cs-section.cs-compare { padding-top: 0; }

.cs-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

.cs-compare-grid figure { display: flex; flex-direction: column; gap: 12px; }

.cs-compare-grid figcaption {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.42px;
  color: var(--grey-dark);
}

.cs-compare-grid figcaption strong { font-weight: inherit; color: var(--black); }
.cs-compare-grid img { width: 100%; height: auto; border-radius: 4px; }
.cs-compare-grid img.bordered { border: 1px solid var(--grey-mid); }

/* Adoption: copy, then two screens at the same height */
.cs-adopt { display: flex; gap: 80px; align-items: flex-start; }
.cs-adopt > .cs-copy { flex: 1 1 0; min-width: 0; max-width: 700px; }
.cs-adopt-zh, .cs-adopt-shot { overflow: hidden; }
.cs-adopt-zh { flex: 0 0 352px; aspect-ratio: 352 / 323; }
.cs-adopt-shot { flex: 0 0 auto; height: 323px; aspect-ratio: 2730 / 1522; }
.cs-adopt img { width: 100%; height: 100%; object-fit: cover; }
.cs-adopt-zh img { object-position: 49% 50%; }

/* ── Refinitiv Wealth ── */
/* Same numbers, different reader (Figma 1151:4566) */
.cs-reader {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-self: flex-start;
  padding: 32px;
  background: var(--white);
  border-radius: 8px;
  color: #61666e;
}

.cs-reader-top { display: flex; flex-direction: column; gap: 20px; }
.cs-reader-head h3 { font-weight: 500; font-size: 20px; color: var(--black); }
.cs-reader-head p { margin-top: 4px; font-size: 14px; }

.cs-reader-compare { display: flex; gap: 24px; }
.cs-reader-compare > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-reader .label { font-weight: 600; font-size: 11px; white-space: nowrap; }
.cs-reader .label strong { font-weight: inherit; color: var(--black); }
.cs-reader .note { font-size: var(--text-min); }

.cs-reader-dense {
  height: 176px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #1c2938;
  font-size: 9px;
  color: #9ea8b8;
  overflow: hidden;
}

.cs-reader-dense .row { display: grid; grid-template-columns: 1fr 34px 28px 34px; gap: 6px; padding: 5px 0; }
.cs-reader-dense .row + .row { border-top: 1px solid #364050; }
.cs-reader-dense .row span:not(:first-child) { text-align: right; }
.cs-reader-dense .head { font-weight: 600; color: #61666e; }
.cs-reader .up { color: #33b873; }
.cs-reader .down { color: #db334d; }

.cs-reader-360 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 176px;
  padding: 20px;
  border: 1px solid var(--grey-mid);
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  container-type: inline-size;   /* figures scale with the panel */
}

.cs-reader-360 b { display: block; font-weight: 500; color: var(--black); }
.cs-reader-360 small { display: block; margin-top: 2px; font-size: 11px; }
.cs-reader-360 .total b { font-size: min(36px, 13.5cqi); line-height: 1.2; }
.cs-reader-360 .total b span { color: #33b873; }
.cs-reader-360 .stats { display: flex; gap: min(24px, 7cqi); }
.cs-reader-360 .stats b { font-size: min(18px, 7cqi); }
.cs-reader-360 .stats b.down { color: #db334d; }

/* Challenges: copy and three images, two by two */
.cs-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 660px));
  justify-content: space-between;
  gap: 40px 60px;
  align-items: start;
}

.cs-sketch-wide { aspect-ratio: 660 / 375; }
.cs-sketch-wide img { object-position: 50% 39%; }
.cs-sketch { aspect-ratio: 660 / 477; }
.cs-sketch img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Product screens shown whole, with a thin frame */
.cs-features.is-framed .cs-feature-img { aspect-ratio: auto; border: 1px solid var(--black); }
.cs-features.is-framed .cs-feature-img img { position: static; height: auto; }

/* A lighter UI, then offshore teams */
.cs-lighter { display: flex; flex-direction: column; gap: 60px; }


/* Result image: Figma crop of the card layouts */
.cs-result-img img.crop-alpha-cards { object-position: 50% 21%; }

/* Prev / next */
.cs-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

.cs-pager a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--grey-dark);
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
  transition: color 0.2s;
}

.cs-pager a > span { display: flex; flex-direction: column; gap: 8px; }
.cs-pager .name, .cs-pager small { text-box: trim-both cap alphabetic; }

.cs-pager small {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--blue);
}

.cs-pager img { width: 32px; height: 32px; transition: transform 0.25s var(--ease-out); }
.cs-pager .prev img { transform: rotate(180deg); }

@media (hover: hover) {
  .cs-pager a:hover { color: var(--black); }
  .cs-pager .prev:hover img { transform: rotate(180deg) translateX(4px); }
  .cs-pager .next:hover img { transform: translateX(4px); }
}

/* ── Motion: reveal on scroll (only once the script has added .motion) ── */
.motion [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}

.motion [data-reveal].is-in {
  transition: opacity var(--reveal-duration) var(--ease-out) calc(var(--i, 0) * var(--enter-stagger)),
              transform var(--reveal-duration) var(--ease-out) calc(var(--i, 0) * var(--enter-stagger));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .cs-split, .cs-cols { flex-direction: column; gap: 40px; }
  .cs-split > * { flex: none; max-width: none; }   /* flex-basis 0 collapsed aspect-ratio boxes to 0px */
  .cs-features { grid-template-columns: 1fr; }
  .cs-tldr-grid { grid-template-columns: 1fr; }
  .cs-saved .cs-split { flex-direction: column-reverse; }
  .cs-copy-media { flex-direction: column; gap: 40px; }
  .cs-copy-media > .cs-copy, .cs-copy-media > figure { flex: none; max-width: none; width: 100%; }
  .cs-chart { align-self: stretch; }
  .cs-silos { align-self: stretch; }
  .cs-compare-grid { gap: 40px; }
  .cs-grid-2 { grid-template-columns: 1fr; }
  .cs-reader { align-self: stretch; }
}

@media (max-width: 1360px) {
  .cs-adopt { flex-wrap: wrap; gap: 40px; }
  .cs-adopt > .cs-copy { flex-basis: 100%; max-width: none; }
  .cs-adopt > .cs-copy p { max-width: 700px; }
  .cs-adopt-zh { flex: 352 1 0; min-width: 0; }
  .cs-adopt-shot { flex: 579 1 0; min-width: 0; height: auto; }
}

@media (max-width: 640px) {
  :root { --pad: 24px; }
  .cs-header { padding-top: var(--pad); }
  .cs-header .logo img, .menu-top img { width: 48px; height: 48px; }
  /* Full-screen menu: smaller links so it fits short phone screens */
  .menu-links { gap: 40px; padding-top: 48px; }
  .menu-group { gap: 20px; }
  .menu-links a { font-size: 24px; line-height: 30px; letter-spacing: -0.48px; }
  .menu-overlay { padding-top: var(--pad); }
  /* Intro (Figma 944:5000): label beside value, small tags, square still */
  .cs-meta { flex-direction: column; gap: 12px; }
  .cs-meta div { flex-direction: row; align-items: center; gap: 16px; }
  /* same sizes as the pager: 13px label, 16px value */
  .cs-meta dt { min-width: 64px; font-size: 13px; line-height: 20px; }
  .cs-meta dd { font-size: 16px; line-height: 20px; }
  .cs-heading { gap: 24px; }
  .cs-badges li { height: 24px; padding: 0 8px; font-size: 14px; }
  .cs-hero { aspect-ratio: 1; }
  .cs-hero video, .cs-hero.is-alpha video { width: 88%; }
  .cs-bubble { flex: 0 1 auto; }
  .cs-bubble p { font-size: 24px; line-height: 28px; padding: 20px; }
  .cs-shrug { width: 76px; }
  .cs-chart { padding: 24px; }
  .cs-bar { white-space: normal; }
  .cs-challenges, .cs-flows, .cs-after { gap: 40px; }
  .cs-numbers { grid-template-columns: 1fr; }
  .cs-number { min-height: 0; padding: 28px 24px; }
  .cs-result-img { aspect-ratio: 4 / 3; }
  .cs-feature-text { gap: 16px; }
  .cs-feature-text img { width: 32px; height: 32px; }
  /* Pager: smaller type, tight wrapped lines, Next text hugs its arrow */
  .cs-pager { gap: 16px; }
  .cs-pager a { gap: 8px; line-height: 20px; }
  .cs-pager a > span { gap: 6px; }
  .cs-pager small { font-size: 13px; }
  .cs-pager .next > span { align-items: flex-end; text-align: right; }
  .cs-pager img { width: 28px; height: 28px; flex-shrink: 0; }
  .cs-silos { padding: 24px; }
  .cs-silos-apps { gap: 6px; }
  .cs-silos-issues { flex-wrap: wrap; }
  .cs-silos-issues li { flex: 1 1 40%; }
  .cs-silos-arrows { display: none; }
  .cs-compare-grid { grid-template-columns: 1fr; }
  .cs-adopt-zh, .cs-adopt-shot { flex: 1 1 100%; }
  .cs-reader { padding: 24px; }
  .cs-reader-compare { flex-direction: column; }
}