/* ============================================================
   Case study pages — putranugra.com
   Loads on top of styles.css, which carries the tokens, the
   shell, the footer and the laptop/slide mockup chrome.
   ============================================================ */

/* Figma sets 60px between sections here, where the homepage runs 80. */
.shell--case { --stack-gap: 60px; }

/* ── HEAD ──────────────────────────────────────────────────── */

/* stays reachable however far down the case study you are. Sticky needs an
   opaque plate of its own, otherwise the copy scrolls straight through it. */
.cs-back {
  position: sticky;
  top: 24px;
  z-index: 10;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  /* solid ink, so it reads as a button against the copy it floats over.
     The arrow is a text glyph, so it takes this colour with the label. */
  background: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-card);
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-line);
  letter-spacing: var(--heading-md-track);
  font-weight: 500;
  color: var(--base-white);
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}

.cs-back:hover {
  background: var(--btn-hover);
  border-color: var(--btn-hover);
}

.cs-back__arrow {
  transition: transform var(--dur-small) var(--ease-out);
}

.cs-back:hover .cs-back__arrow { transform: translateX(-3px); }

.cs-back:focus-visible {
  outline: 1px solid var(--text-primary);
  outline-offset: 3px;
}

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

.cs-head__title,
.cs-head__meta {
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-line);
  letter-spacing: var(--heading-md-track);
  font-weight: 500;
}

.cs-head__title { color: var(--text-primary); }
.cs-head__meta { color: var(--text-secondary); }

/* ── SECTIONS ──────────────────────────────────────────────── */

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

.cs-section__head {
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-line);
  letter-spacing: var(--heading-md-track);
  font-weight: 500;
  color: var(--text-primary);
}

.cs-quote {
  font-weight: 200;
  color: var(--text-primary);
}

/* ── CARDS ─────────────────────────────────────────────────── */

.cs-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--base-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

/* metric cards breathe a little more than problem cards */
.cs-card--metric { gap: 16px; }

.cs-card__label {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--text-secondary);
}

.cs-card__value {
  font-size: var(--heading-xl-size);
  line-height: var(--heading-xl-line);
  letter-spacing: var(--heading-xl-track);
  font-weight: 500;
  color: var(--text-primary);
}

.cs-card__title {
  font-size: var(--heading-lg-size);
  line-height: var(--heading-lg-line);
  letter-spacing: var(--heading-lg-track);
  font-weight: 500;
  color: var(--text-primary);
}

.cs-card__note {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--text-secondary);
}

/* card groups sit 24px clear of the prose, 12px from each other */
.cs-cardrow {
  display: flex;
  gap: 24px;
  margin: 12px 0;
}

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

.cs-cardstack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.cs-solo { margin: 12px 0; }

/* ── PROJECT OVERVIEW ──────────────────────────────────────── */

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

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

.cs-overview__label {
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-line);
  letter-spacing: var(--heading-md-track);
  font-weight: 500;
  color: var(--text-primary);
}

.cs-overview__value { color: var(--text-secondary); }

/* ── FLOW CHARTS ───────────────────────────────────────────── */

.cs-chart {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px;
  background: var(--base-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

/* 3 equal columns 20px apart, on 60px rows 40px apart. The connectors are
   absolutely positioned against those numbers, so --colw has to mirror the
   track width exactly. */
.cs-graph {
  --colw: calc((100% - 40px) / 3);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 60px;
  column-gap: 20px;
  row-gap: 40px;
}

.cs-node {
  grid-column: var(--c);
  grid-row: var(--r);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: var(--base-white);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  text-align: center;
}

.cs-node__title,
.cs-node__sub {
  font-size: var(--label-size);
  line-height: var(--label-line);
}

.cs-node__title { font-weight: 500; color: var(--text-primary); }
.cs-node__sub { font-weight: 300; color: var(--text-secondary); }

.cs-node--success { background: var(--success-bg); border-color: var(--success); }
.cs-node--success .cs-node__title,
.cs-node--success .cs-node__sub { color: var(--success-fg); }

.cs-node--danger { background: var(--danger-bg); border-color: var(--danger); }
.cs-node--danger .cs-node__title,
.cs-node--danger .cs-node__sub { color: var(--danger-fg); }

/* connectors ------------------------------------------------ */

.cs-link { position: absolute; background: var(--border-strong); }

.cs-link::after {
  content: "";
  position: absolute;
  border: 4px solid transparent;
}

/* horizontal: sits in the 20px gap to the right of column --c */
.cs-link--h {
  height: 1px;
  width: 20px;
  left: calc(var(--colw) * var(--c) + 20px * (var(--c) - 1));
  top: calc(100px * (var(--r) - 1) + 30px);
}

.cs-link--h::after {
  left: 100%;
  top: 50%;
  margin-left: -4px;
  transform: translateY(-50%);
  border-left-color: var(--border-strong);
}

/* same track, arrow on the other end — the review step points back.
   The left-facing colour has to be cleared too, or the two coloured borders
   render as a bowtie and the connector reads as pointing both ways. */
.cs-link--hl::after {
  left: 0;
  top: 50%;
  margin-left: -4px;
  transform: translateY(-50%);
  border-left-color: transparent;
  border-right-color: var(--border-strong);
}

/* vertical: sits in the 40px gap below row --r, centred on column --c */
.cs-link--v {
  width: 1px;
  height: 40px;
  left: calc(var(--colw) * (var(--c) - 0.5) + 20px * (var(--c) - 1));
  top: calc(100px * (var(--r) - 1) + 60px);
}

.cs-link--v::after {
  top: 100%;
  left: 50%;
  margin-top: -4px;
  transform: translateX(-50%);
  border-top-color: var(--border-strong);
}


/* ── ELBOWS ──────────────────────────────────────────────────
   One element per turn: two borders of a box plus a corner
   radius, so the bend is rounded the way Figma draws connectors.
   Two straight spans could never round the corner between them.
   ────────────────────────────────────────────────────────── */

.cs-elbow {
  position: absolute;
  border: 0 solid var(--border-strong);
  pointer-events: none;
}

.cs-elbow::after {
  content: "";
  position: absolute;
  border: 4px solid transparent;
}

/* left out of the row 2 decision, then down into column 1 of row 3 */
.cs-elbow--ld {
  left: calc(var(--colw) * 0.5);
  top: 130px;
  width: calc(var(--colw) * 0.5 + 20px);
  height: 70px;
  border-top-width: 1px;
  border-left-width: 1px;
  border-top-left-radius: 8px;
}

.cs-elbow--ld::after {
  left: -4px;
  bottom: -4px;
  border-top-color: var(--border-strong);
}

/* up out of the row 2 decision, then right into row 1 */
.cs-elbow--up {
  left: calc(var(--colw) * 1.5 + 20px);
  top: 30px;
  width: calc(var(--colw) * 0.5 + 20px);
  height: 70px;
  border-top-width: 1px;
  border-left-width: 1px;
  border-top-left-radius: 8px;
}

.cs-elbow--up::after {
  right: -4px;
  top: -4px;
  border-left-color: var(--border-strong);
}

/* down out of the row 2 decision, then right into row 3 */
.cs-elbow--down {
  left: calc(var(--colw) * 1.5 + 20px);
  top: 160px;
  width: calc(var(--colw) * 0.5 + 20px);
  height: 70px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-bottom-left-radius: 8px;
}

.cs-elbow--down::after {
  right: -4px;
  bottom: -4px;
  border-left-color: var(--border-strong);
}

/* right out of the row 2 decision, then down into row 3 of column 3 */
.cs-elbow--rd {
  left: calc(var(--colw) * 2 + 20px);
  top: 130px;
  width: calc(var(--colw) * 0.5 + 20px);
  height: 70px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-top-right-radius: 8px;
}

.cs-elbow--rd::after {
  right: -4px;
  bottom: -4px;
  border-top-color: var(--border-strong);
}

.cs-flag {
  position: absolute;
  padding: 0 4px;
  background: var(--base-white);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-track);
  color: var(--text-secondary);
}

.cs-flag--reject { left: calc(var(--colw) * 0.55); top: 107px; }
.cs-flag--approve { left: calc(var(--colw) * 1.5 + 26px); top: 168px; }


/* the one upward arrow on the page: the scan feeds the check above it */
.cs-link--vu::after {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -4px;
  border-top-color: transparent;
  border-bottom-color: var(--border-strong);
}

.cs-flag--yes-up    { left: calc(var(--colw) * 1.72 + 20px); top: 12px; }
.cs-flag--no-down   { left: calc(var(--colw) * 1.74 + 20px); top: 212px; }
.cs-flag--yes-mid   { left: calc(var(--colw) * 1.5 + 20px); top: 168px; transform: translateX(-50%); }
.cs-flag--no-right  { left: calc(var(--colw) * 2.28 + 20px); top: 114px; }

/* ── NOTE PANEL CHART ──────────────────────────────────────────
   One row: two normal nodes at the top, a full-height note beside
   them. Auto rows so the note sets the height and the 60px nodes
   keep the connector at y=30 where the other charts put it.
   ────────────────────────────────────────────────────────────── */

.cs-graph--panel {
  grid-auto-rows: auto;
  align-items: start;
}

.cs-node--note {
  align-self: stretch;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  text-align: left;
}

.cs-node--note p {
  font-size: var(--label-size);
  line-height: var(--label-line);
  font-weight: 300;
  color: var(--text-secondary);
}

/* ── BULLETED CARD LISTS ───────────────────────────────────── */

.cs-bullets {
  padding-left: 21px;
  list-style: disc;
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  color: var(--text-secondary);
}

.cs-bullets--spaced li + li { margin-top: 16px; }

.cs-chart__caption {
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-track);
  color: var(--text-secondary);
  text-align: center;
}

/* the verdict under a flow sits at the end of the row it judges, not
   centred like the chart's own title */
.cs-chart__caption--danger { color: var(--danger); text-align: right; }
.cs-chart__caption--success { color: var(--success-fg); text-align: right; }

/* ── VERTICAL MINI FLOW (inside a card) ────────────────────── */

/* one column of nodes 40px apart; each node after the first draws its own
   connector upward, so the markup stays a plain list */
.cs-vflow {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cs-vflow .cs-node {
  position: relative;
  grid-column: auto;
  grid-row: auto;
}

.cs-vflow .cs-node + .cs-node::before,
.cs-vflow .cs-node + .cs-node::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
}

.cs-vflow .cs-node + .cs-node::before {
  width: 1px;
  height: 40px;
  background: var(--border-strong);
}

.cs-vflow .cs-node + .cs-node::after {
  margin-bottom: -4px;
  border: 4px solid transparent;
  border-top-color: var(--border-strong);
}

.cs-minilabel {
  font-size: var(--label-size);
  line-height: var(--label-line);
  color: var(--text-secondary);
  text-align: center;
}

.cs-minilabel--danger { color: var(--danger); }

/* the chart title sits 40px clear, the footnote only 16px under the graph */
.cs-chart__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── TWIN PHONE PANEL ──────────────────────────────────────── */

.cs-phones {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 24px;
  background: var(--base-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

.cs-phones__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}

.cs-phones .phone { margin-top: 24px; }

.cs-phones__label {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
}

.cs-phones__sub {
  font-size: var(--label-size);
  line-height: var(--label-line);
  color: var(--text-secondary);
  text-align: center;
}

/* ── REVIEW CARDS ──────────────────────────────────────────── */

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

.cs-review__name {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  font-weight: 500;
  color: var(--text-primary);
}

.cs-review__date {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--text-secondary);
}

.cs-stars { display: flex; gap: 2px; }
.cs-stars svg { display: block; fill: var(--star); }

.cs-md {
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  color: var(--text-secondary);
}

/* ── STORE LINKS ───────────────────────────────────────────── */

.cs-stores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* the official store badges carry their own artwork, so the link is just
   a wrapper — no border or padding of ours on top */
.cs-store {
  display: inline-block;
  border-radius: 6px;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.cs-store img { display: block; width: 140px; height: 41px; }

.cs-store:hover { opacity: 0.82; }

.cs-store:focus-visible {
  outline: 1px solid var(--text-primary);
  outline-offset: 3px;
}


/* ── SUB HEADING ───────────────────────────────────────────── */

.cs-subhead {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line);
  font-weight: 500;
  color: var(--text-primary);
}

/* ── SCROLL-SYNCED PHONE ───────────────────────────────────── */

.cs-craft {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px;
  background: var(--base-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

.cs-craft__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.cs-craft__step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color var(--dur-small) var(--ease-out),
              background var(--dur-small) var(--ease-out);
}

.cs-craft__step.is-active {
  background: var(--bg-muted);
  border-color: var(--border-default);
}

.cs-craft__num {
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-track);
  color: var(--text-secondary);
}

.cs-craft__title {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  font-weight: 500;
  color: var(--text-primary);
}

.cs-craft__desc {
  font-size: var(--label-size);
  line-height: var(--label-line);
  color: var(--text-secondary);
}

/* the site's standard handset, taller and scrollable by hand */
.cs-craft .phone { width: 236px; height: 480px; }

.cs-craft .phone__screen {
  overflow-y: auto;
  scrollbar-width: none;
}

.cs-craft .phone__screen::-webkit-scrollbar { display: none; }
.cs-craft .phone__screen img { width: 100%; height: auto; }

.cs-craft__caption {
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-track);
  color: var(--text-secondary);
  text-align: center;
}

/* ── BAR CHARTS ────────────────────────────────────────────── */

.cs-chart--data { gap: 24px; }

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

.cs-chart__title {
  font-size: var(--heading-lg-size);
  line-height: var(--heading-lg-line);
  letter-spacing: var(--heading-lg-track);
  font-weight: 500;
  color: var(--text-primary);
}

.cs-chart__sub {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--text-secondary);
}

.cs-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  /* headroom so the tallest bar's value clears the top of the scale */
  padding-top: 22px;
}

/* Two bars, but sized off the six-bar chart above so the pair reads as the
   same scale. `margin: 0 auto` here would collapse the row to its intrinsic
   width, which with `flex-basis: 0` is just the width of the value label. */
.cs-bars--pair { justify-content: center; }

.cs-bars--pair .cs-bar { flex: 0 0 calc((100% - 60px) / 6); }

.cs-bar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* the track is the measured 200px, so --h can be a plain percentage of the
   tallest month. Both the fill and its value hang off the same --h, which
   keeps the number pinned to the top of its own bar instead of floating at
   the top of the panel. */
.cs-bar__track {
  position: relative;
  width: 100%;
  height: 200px;
}

/* Drawn at full height by default. The flattening is opt-in from JS, so a
   bar can never be left invisible by an animation that never ran. */
.cs-bar__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: var(--border-strong);
  transform-origin: bottom;
}

.cs-bar__value {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--h);
  margin-bottom: 6px;
  text-align: center;
}

/* Transitions, not keyframes: a keyframe with `fill-mode: both` holds its
   `from` state until the clock starts, so a bar or a number could be left
   invisible. A transition's resting state is the visible one. */
.cs-bar__fill {
  transition: transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* the value rides at the bar's final height, so it waits for the bar to
   arrive rather than hanging over an empty column */
.cs-bar__value {
  transition: opacity 300ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 420ms);
}

.cs-bar.is-pending .cs-bar__fill {
  transform: scaleY(0);
  transition: none;
}

.cs-bar.is-pending .cs-bar__value {
  opacity: 0;
  transition: none;
}

.cs-bar--after .cs-bar__fill { background: var(--success); }

.cs-bar__value,
.cs-bar__label {
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-track);
  color: var(--text-secondary);
}


.cs-legend { display: flex; gap: 20px; }

.cs-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--text-secondary);
}

.cs-legend__dot { width: 10px; height: 10px; border-radius: 2px; }
.cs-legend__dot--before { background: var(--border-strong); }
.cs-legend__dot--after { background: var(--success); }

.cs-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

.cs-badge__label {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--text-secondary);
}

.cs-badge__value {
  font-size: var(--heading-xl-size);
  line-height: var(--heading-xl-line);
  letter-spacing: var(--heading-xl-track);
  font-weight: 500;
  color: var(--text-primary);
}

/* ── CONSTRAINTS TABLE ─────────────────────────────────────── */

/* the frame lives on the wrapper so the corners can be rounded — a
   border-collapse table can't clip its own cell backgrounds */
.cs-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

.cs-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.cs-table th,
.cs-table td {
  /* 16px, not 17: the cell borders eat 2px of the fixed track and the
     longest header would otherwise wrap to two lines */
  padding: 16px;
  border: 1px solid var(--border-default);
  font-size: var(--label-size);
  line-height: var(--label-line);
  font-weight: 500;
  text-align: left;
  color: var(--text-primary);
}

/* drop the edges that would double up against the wrapper */
.cs-table tr > *:first-child { border-left: 0; }
.cs-table tr > *:last-child { border-right: 0; }
.cs-table thead tr > * { border-top: 0; }
.cs-table tbody tr:last-child > * { border-bottom: 0; }

/* only the header strip is tinted; the idea column stays white */
.cs-table thead th { background: var(--bg-muted); }
.cs-table tbody th,
.cs-table td { background: var(--base-white); }

/* scoped past `.cs-table td`, which would otherwise win on specificity
   and repaint the verdicts back to the default ink */
.cs-table .cs-yes { color: var(--success); }
.cs-table .cs-no  { color: var(--danger); }

/* ── MOCKUPS ───────────────────────────────────────────────── */

.cs-mockups {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 12px;
}

.cs-mockup {
  --laptop-w: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* a device coming off body copy — or off another device — needs more air
   than the section's 12px, or its label reads as part of the paragraph
   above it and two mockups run together as one block */
p + .cs-mockup,
.cs-mockup + .cs-mockup { margin-top: 12px; }

.cs-mockup__label {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--text-secondary);
}

/* a 700px lid needs a slightly heavier bezel than the 470px one on the
   homepage, or it reads as a thin outline */
.cs-mockup .laptop {
  border-radius: 14px;
  padding: 0 8px 10px;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */

@media (max-width: 720px) {
  .cs-overview { grid-template-columns: 1fr; }
  .cs-back { top: 16px; }
  .cs-cardrow { flex-direction: column; }

  /* diagrams and the matrix keep their proportions and scroll inside
     themselves rather than squeezing 12px labels into 90px columns */
  .cs-chart { overflow-x: auto; }
  .cs-graph { min-width: 560px; }
  .cs-table { min-width: 560px; }

  /* the bar charts reflow fine, so they must not inherit that scroll */
  .cs-chart--data { overflow-x: visible; }

  .cs-craft { flex-direction: column; align-items: stretch; }
  .cs-craft .phone { align-self: center; }

  /* two 190px handsets will not sit side by side in a 335px column —
     they overlap and break out of the panel */
  .cs-phones { flex-direction: column; align-items: center; }
  .cs-phones__col { width: 100%; }
}

/* ── STICKY ACTION BAR ────────────────────────────────────────
   Back-to-home on the left, the section jump on the right. The
   bar is what sticks now; the two buttons carry their own opaque
   plates, so the copy scrolls through the gap between them the
   way Figma draws it.
   ────────────────────────────────────────────────────────── */

.cs-actions {
  position: sticky;
  top: 24px;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* the button is sticky on its own everywhere else, so the override
   is scoped to the bar rather than rewritten on .cs-back */
.cs-actions .cs-back {
  position: static;
  align-self: auto;
}

/* ── SECTION JUMP ──────────────────────────────────────────── */

.cs-jump { position: relative; }

.cs-jump__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--base-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  font-family: inherit;
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-line);
  letter-spacing: var(--heading-md-track);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              background var(--dur-micro) var(--ease-out);
}

.cs-jump__btn:hover { border-color: var(--border-strong); }

.cs-jump__btn:focus-visible {
  outline: 1px solid var(--text-primary);
  outline-offset: 3px;
}

.cs-jump__chevron {
  display: flex;
  color: var(--text-secondary);
  transition: transform var(--dur-small) var(--ease-out);
}

.cs-jump__btn[aria-expanded="true"] .cs-jump__chevron { transform: rotate(180deg); }

/* the menu hangs off the button's right edge so it never runs past
   the 700px column */
.cs-jump__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--base-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.10);
  list-style: none;

  /* hidden state kept paintable, so opening can animate */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}

.cs-jump.is-open .cs-jump__menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cs-jump__item {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  font-weight: 400;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}

.cs-jump__item:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

.cs-jump__item[aria-current="true"] {
  background: var(--bg-muted);
  color: var(--text-primary);
  font-weight: 500;
}

.cs-jump__item:focus-visible {
  outline: 1px solid var(--text-primary);
  outline-offset: -1px;
}

/* jumping should land the heading clear of the sticky bar above it */
.cs-section[id] { scroll-margin-top: 88px; }

html { scroll-behavior: smooth; }

/* ── EMPHASISED LINE ──────────────────────────────────────────
   The conclusions Figma sets in the heavier weight — the ones the
   surrounding copy is building toward — as opposed to .cs-quote,
   which is a voice being reported.
   ────────────────────────────────────────────────────────── */

.cs-quote--strong {
  font-weight: 500;
  color: var(--text-primary);
}

@media (max-width: 720px) {
  .cs-actions { top: 16px; }
  .cs-section[id] { scroll-margin-top: 72px; }
}

/* ── FULL-WIDTH FIGURE ────────────────────────────────────────
   Exported artwork that already carries its own background and
   captions, so it only needs the column width and the card frame.
   Clicking one opens it in the lightbox below.
   ────────────────────────────────────────────────────────── */

.cs-figure { margin: 0; }

/* the button is only a hit target — it must not add a plate of its own
   between the figure and the artwork */
.cs-figure__zoom {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-card);
  cursor: zoom-in;
}

.cs-figure__zoom:focus-visible {
  outline: 1px solid var(--text-primary);
  outline-offset: 3px;
}

.cs-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

/* a heading coming off the hard edge of an image needs more air than the
   section's 12px, or it reads as belonging to the picture above it */
.cs-figure + .cs-section__head { margin-top: 12px; }

/* ── LIGHTBOX ─────────────────────────────────────────────────
   Built by main.js on first use. The overlay is the scroll surface,
   so artwork wider than the viewport can be panned rather than
   shrunk back to the size it was already too small at.
   ────────────────────────────────────────────────────────── */

.cs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  padding: 24px;
  background: rgba(12, 10, 9, 0.88);
  overflow: auto;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity var(--dur-small) var(--ease-out);
}

.cs-lightbox.is-open { opacity: 1; }

/* auto margins centre the image without the clipped-overflow bug that
   justify-content: center causes once it is wider than the overlay.
   Both maxes are caps, so the intrinsic ratio survives either one:
   1200px keeps a wide monitor from blowing the artwork up to the full
   width of the screen, and 100% height keeps it inside the viewport. */
.cs-lightbox__img {
  flex: none;
  max-width: min(100%, 1200px);
  max-height: 100%;
  width: auto;
  height: auto;
  margin: auto;
  border-radius: var(--radius-card);
  cursor: zoom-out;
}

.cs-lightbox__close {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(250, 250, 249, 0.12);
  border: 1px solid rgba(250, 250, 249, 0.24);
  border-radius: 50%;
  color: #fafaf9;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out);
}

.cs-lightbox__close:hover { background: rgba(250, 250, 249, 0.22); }

.cs-lightbox__close:focus-visible {
  outline: 1px solid #fafaf9;
  outline-offset: 2px;
}

/* on a phone, fitting the artwork to the viewport is the size it was already
   too small at, so it gets a modest floor of roughly twice the screen and the
   overlay pans. Nowhere near the full-bleed blow-up a wide monitor would give
   it, but enough that tapping to zoom actually shows something. */
@media (max-width: 720px) {
  .cs-lightbox { padding: 12px; }

  .cs-lightbox__img {
    max-width: none;
    max-height: none;
    width: 720px;
  }
}