/* ==========================================
   Case study v2 — test layout for the MAIA case (case-maia-v2.html).
   Structure follows an editorial case format (title + meta row, full-bleed
   hero, heading-left / text-right sections, cards, before/after, big
   numbers); visual identity is the portfolio's own (dark, Instrument Serif,
   Roboto Condensed, Kode Mono labels). Everything is prefixed cv-.
   ========================================== */
:root {
  --cv-bg: #0f0d0f;
  --cv-surface: #1a1a1a;
  --cv-surface-2: #141414;
  --cv-surface-3: #282828; /* raised cards: callouts, questions, fork branches */
  --cv-line: #2e2e2e;
  --cv-line-strong: #707070;
  --cv-text: #fff;
  --cv-muted: #7b7b7b;
  --cv-soft: #b5b5b5;
  --cv-accent: #4d8dff; /* MAIA blue, used sparingly */
  --cv-radius: 20px;
  --cv-gutter: 40px;
}

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

html {
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--cv-bg);
  color: var(--cv-text);
  font-family: 'Roboto Condensed', sans-serif;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.cv-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--cv-gutter);
}

/* Scroll fade-in (toggled by main.js) */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Header ───────────────────────────────── */
.cv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 40px 0 16px;
}

.cv-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cv-logo img {
  width: 34px;
  height: 40px;
  object-fit: contain;
}

.cv-logo span {
  font-family: 'Instrument Serif', serif;
  font-size: 21px;
  line-height: 1.1;
}

.cv-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.cv-nav a {
  padding: 4px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--cv-muted);
  white-space: nowrap;
  transition: color 0.2s;
}

.cv-nav a:hover,
.cv-nav a.is-active {
  color: var(--cv-text);
}

/* ── Shared type ──────────────────────────── */
.cv-label {
  font-family: 'Kode Mono', monospace;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--cv-muted);
  text-transform: uppercase;
}

/* Labels inside boxes keep the label size, not the box's paragraph size */
.cv-page .cv-label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cv-muted);
}

.cv-h2 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.95;
}

.cv-h3 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05;
}

.cv-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 21px;
  line-height: 1.5;
  color: var(--cv-soft);
}

.cv-body strong {
  color: var(--cv-text);
  font-weight: 500;
}

.cv-body--loose {
  gap: 28px;
}

/* When the heading has a label above it, the body starts level with the heading */
.cv-split--labeled > .cv-body {
  padding-top: 41px;
}

.cv-split--labeled > .cv-body--loose {
  padding-top: 49px;
}

/* ── Hero ─────────────────────────────────── */
.cv-hero {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 120px 0 100px;
}

.cv-hero-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cv-title {
  max-width: 1050px;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(52px, 8vw, 104px);
  line-height: 0.95;
}

.cv-rule {
  height: 1px;
  background: var(--cv-line-strong);
}

/* Lead on the left, meta columns on the right */
.cv-meta {
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 20px;
}

.cv-meta-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cv-meta dt {
  margin-bottom: 6px;
  font-size: 18px;
  color: var(--cv-text);
}

.cv-meta dd {
  font-size: 18px;
  line-height: 1.4;
  color: var(--cv-muted);
}

.cv-meta-lead {
  max-width: 403px;
  padding-top: 25px;
  font-size: 21px;
  line-height: 1.45;
  color: var(--cv-text);
}

.cv-hero-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 760;
  object-fit: cover;
}

.cv-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 516;
  object-fit: cover;
}

.cv-photo-frame {
  border-radius: 8px;
}

/* Parallax: the frame clips, the image is slightly enlarged and drifts
   slower than the scroll. case-v2.js sets --py; off with reduced motion. */
.cv-parallax {
  display: block;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: keep rounded corners clipping */
  mask-image: radial-gradient(white, black); /* fully opaque: no visual effect */
}

.cv-parallax img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
  will-change: transform;
}

.cv-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Sections ─────────────────────────────── */
.cv-section {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 160px 0 0;
}

.cv-section--first {
  padding-top: 100px;
}

.cv-section--loose {
  gap: 60px;
}

.cv-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.cv-split-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cv-sub {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 40px;
}

/* Cards */
.cv-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cv-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: var(--cv-radius);
  background: var(--cv-surface);
}

.cv-card p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--cv-soft);
}

.cv-card--question {
  justify-content: center;
  padding: 24px 32px 28px;
  background: var(--cv-surface-3);
}

.cv-card--question p {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  color: var(--cv-text);
}

/* Product hypotheses: numbered label + statement */
.cv-cards-label {
  grid-column: 1 / -1;
}

.cv-card--hypothesis {
  gap: 12px;
  padding: 24px 32px 28px;
  background: var(--cv-surface-3);
}

.cv-card .cv-hypothesis {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  color: var(--cv-text);
}

/* Big numbers */
.cv-stat .cv-stat-value {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(64px, 8vw, 112px);
  line-height: 0.9;
  color: var(--cv-text);
}

.cv-stat p:not(.cv-stat-value) {
  max-width: 460px;
  margin-top: 12px;
  font-size: 21px;
  line-height: 1.4;
  color: var(--cv-soft);
}

.cv-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.cv-stats--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cv-source {
  font-size: 16px;
  color: var(--cv-muted);
}

/* Callouts (trade-off, editorial notes) */
.cv-callout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 28px 28px;
  border-radius: 12px;
  background: var(--cv-surface-3);
}

.cv-callout p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--cv-soft);
}

.cv-note {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border: 1px dashed #8a6d1f;
  border-radius: 10px;
  background: rgba(255, 196, 0, 0.06);
  font-size: 15px;
  line-height: 1.5;
  color: #e8c66a;
}

.cv-note::before {
  content: '!';
  flex-shrink: 0;
  font-family: 'Kode Mono', monospace;
  font-weight: 600;
}

/* ── Trade-off box (section 05) ───────────── */
/* A .cv-callout with: heading, gave-up × gained columns, how it was
   balanced, and the before/after logic (linear vs. branching). */
.cv-tradeoff {
  gap: 32px;
  padding: 32px;
}

.cv-tradeoff-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cv-tradeoff-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cv-tradeoff-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: 12px;
  background: var(--cv-surface);
}

.cv-callout .cv-tradeoff-title {
  font-family: 'Instrument Serif', serif;
  font-size: 26px;
  line-height: 1.1;
  color: var(--cv-text);
}

.cv-tradeoff-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid #3a3a3a;
}

.cv-callout .cv-tradeoff-quote {
  max-width: 760px;
  font-family: 'Instrument Serif', serif;
  font-size: 32px;
  line-height: 1.1;
  color: var(--cv-text);
}

/* Before | After side by side (stacked on phones), each with its label on top */
.cv-logic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
  padding-top: 8px;
}

.cv-logic-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cv-callout .cv-logic-when {
  font-family: 'Kode Mono', monospace;
  font-weight: 600;
  font-size: 14px;
  color: var(--cv-muted);
  text-transform: uppercase;
}

/* Before: plain linear sequence, no pills */
.cv-logic-seq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  list-style: none;
  font-size: 17px;
  line-height: 1.4;
  color: var(--cv-text);
}

.cv-logic-seq li:not(:last-child)::after {
  content: '›';
  margin-left: 10px;
  color: var(--cv-muted);
}

/* After: Transcrever → fork → two options. Reuses the .cv-fork-link
   connector (diagram in section 06), sized by these variables. */
.cv-logic-tree {
  --fork-gap: 8px;
  --fork-line: var(--cv-line-strong);
  display: grid;
  grid-template-columns: auto 48px auto;
  justify-content: start;
}

.cv-logic-tree .cv-logic-node--root {
  align-self: center;
}

.cv-logic-branches {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--fork-gap);
}

.cv-logic-node {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px dashed var(--cv-accent);
  border-radius: 10px;
}

.cv-logic-node--root {
  border-style: solid;
  background: rgba(77, 141, 255, 0.1);
}

.cv-logic-name {
  font-size: 17px;
  line-height: 1.3;
  color: var(--cv-text);
}

.cv-logic-note {
  font-size: 14px;
  line-height: 1.3;
  color: var(--cv-soft);
}

/* ── Image placeholder ────────────────────── */
/* Each slot says what image goes there and how to produce it. */
.cv-ph {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cv-ph-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  aspect-ratio: var(--ar, 16 / 9);
  padding: clamp(20px, 3vw, 36px);
  overflow: hidden;
  border: 1px dashed #4a4a4a;
  border-radius: var(--cv-radius);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 12px, transparent 12px 24px),
    var(--ph-bg, var(--cv-surface));
}

.cv-ph-tag {
  position: absolute;
  top: clamp(16px, 2vw, 24px);
  left: clamp(16px, 2vw, 24px);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  font-family: 'Kode Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  color: var(--cv-soft);
  text-transform: uppercase;
}

.cv-ph-title {
  max-width: 640px;
  font-family: 'Instrument Serif', serif;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  color: var(--cv-text);
}

.cv-ph-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 640px;
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
  color: var(--cv-soft);
}

.cv-ph-notes li {
  position: relative;
  padding-left: 16px;
}

.cv-ph-notes li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--cv-muted);
}

.cv-ph figcaption,
.cv-figcap {
  font-size: 16px;
  line-height: 1.5;
  color: var(--cv-muted);
}

/* Full-width figure (Mixpanel analysis, Figma overview) */
.cv-figure {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cv-figure-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Groups of screens inside a feature. Column widths follow each image's
   aspect ratio so the screens in a row share one height. */
.cv-shots img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.cv-shots--row {
  display: grid;
  grid-template-columns: 0.687fr 0.618fr 0.618fr; /* 629/915, 483/782, 483/782 */
  gap: 12px;
  align-items: start;
}

.cv-shots--assoc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}

.cv-shots-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Side-by-side features: image groups fill the same height (centered),
   so the titles below line up */
.cv-feature > .cv-shots {
  flex: 1;
  align-content: center;
}

/* Product shot on a box (transparent PNG) */
.cv-shot {
  padding: clamp(24px, 5vw, 64px);
  border-radius: var(--cv-radius);
  background: var(--cv-surface);
}

.cv-shot img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
}

/* Grid of placeholders */
.cv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* ── Before / after comparison ────────────── */
/* Geometry from the Figma frame (1200 × 801): phone at 452,91 (296 wide),
   labels vertically centered at ~48% */
.cv-compare {
  position: relative;
  aspect-ratio: 1200 / 801;
  overflow: hidden;
  border-radius: 8px;
  container-type: inline-size;
  --pos: 50%;
}

.cv-compare-pane {
  position: absolute;
  inset: 0;
}

.cv-compare-pane--before {
  background: #f4f4f4;
}

.cv-compare-pane--after {
  background: #1a73e8;
  clip-path: inset(0 0 0 var(--pos));
}

.cv-compare-pane img {
  position: absolute;
  top: 11.36%;
  left: 37.67%;
  width: 24.67%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}

.cv-compare-label {
  position: absolute;
  top: 47.8%;
  font-weight: 600;
  font-size: 2.47cqw;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.cv-compare-pane--before .cv-compare-label {
  left: 11.4%;
  color: #cccccc;
}

.cv-compare-pane--after .cv-compare-label {
  left: 74.3%;
  color: rgba(0, 0, 0, 0.2);
}

.cv-compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--cv-text);
  transform: translateX(-1px);
  pointer-events: none;
}

.cv-compare-handle::after {
  content: '↔';
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cv-text);
  color: #000;
  font-size: 18px;
  transform: translate(-50%, -50%);
}

.cv-compare input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}

/* Drag zone: full height, 88px wide, centered on the divider (case-v2.js).
   The native input stays underneath for keyboard/screen readers only. */
.cv-compare-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 88px;
  transform: translateX(-50%);
  cursor: ew-resize;
  touch-action: pan-y;
  z-index: 2;
}

.cv-compare input {
  pointer-events: none;
}

.cv-compare:focus-within .cv-compare-handle::after {
  outline: 2px solid var(--cv-accent);
  outline-offset: 3px;
}

/* ── Flow comparison ──────────────────────── */
/* No box: label + pills sit directly on the page */
.cv-flows {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cv-flow {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

/* Before flow as a carousel of the 10 old screens (case-v2.js wires the arrows) */
.cv-flow--carousel {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* .cv-flow centers; the track must take the column width to scroll */
  gap: 16px;
  min-width: 0;
}

.cv-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cv-carousel-nav {
  display: flex;
  gap: 8px;
}

.cv-carousel-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--cv-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--cv-text);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.cv-carousel-btn:hover:not(:disabled) {
  background: var(--cv-surface-3);
}

.cv-carousel-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.cv-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  list-style: none;
  scrollbar-width: none;
}

.cv-carousel::-webkit-scrollbar {
  display: none;
}

.cv-carousel:focus-visible {
  outline: 2px solid var(--cv-accent);
  outline-offset: 4px;
}

.cv-carousel-item {
  display: flex;
  flex: 0 0 203px; /* screens are 406px wide: 2× */
  flex-direction: column;
  gap: 10px;
  scroll-snap-align: start;
}

/* Screens come in slightly different sizes (393–425px wide): one shared
   proportion keeps heights and captions aligned; the crop is ~1–4%, from the top */
.cv-carousel-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 393 / 852;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
  background: #fff;
}

/* Animated screen: frames stacked, each shown for 1.5s with a short crossfade */
.cv-carousel-anim {
  position: relative;
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.cv-carousel-anim img {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
  opacity: 0;
  animation: cv-frames 4.5s infinite both;
}

.cv-carousel-anim img:nth-child(1) { animation-delay: 0s; }
.cv-carousel-anim img:nth-child(2) { animation-delay: 1.5s; }
.cv-carousel-anim img:nth-child(3) { animation-delay: 3s; }

@keyframes cv-frames {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  33%  { opacity: 1; }
  37%  { opacity: 0; }
  100% { opacity: 0; }
}

.cv-carousel-cap {
  font-family: 'Kode Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cv-muted);
  text-transform: uppercase;
}

.cv-flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
}

.cv-flow-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  line-height: 1.3;
}

.cv-flow-steps li:not(:last-child)::after {
  content: '→';
  color: var(--cv-muted);
}

.cv-step {
  padding: 10px 14px;
  border: 1px solid var(--cv-line-strong);
  border-radius: 10px;
  white-space: nowrap;
}

.cv-flow--after .cv-step {
  border-color: var(--cv-accent);
  background: rgba(77, 141, 255, 0.1);
}

.cv-step--optional {
  border-style: dashed !important;
  background: none !important;
  color: var(--cv-soft);
}

/* ── Simulation ───────────────────────────── */
/* No box: sits directly on the page */
.cv-sim {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cv-sim-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cv-sim-control .cv-sim-label {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
}

/* Taller touch/drag zone around the slider (case-v2.js); the negative
   margin keeps the layout where it was */
.cv-range-hit {
  padding: 14px 0;
  margin: -14px 0;
  cursor: pointer;
  touch-action: pan-y;
}

.cv-range-hit input {
  display: block;
  pointer-events: none;
}

.cv-sim-control output {
  font-family: 'Kode Mono', monospace;
  font-weight: 600;
}

.cv-sim input[type='range'] {
  width: 100%;
  accent-color: var(--cv-accent);
}

.cv-sim-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cv-sim-result .cv-stat .cv-stat-value {
  font-size: clamp(48px, 6vw, 80px);
}

/* ── Fork diagram: Acesso → fork → experience (horizontal) ─── */
/* Three columns: entry card | connector | two stacked, equal-height cards.
   The connector is drawn with borders, so it follows the cards' real height:
   a stub from the entry card to the middle, then an up and a down branch
   with rounded corners, each ending in an arrowhead at a card's left edge. */
.cv-fork {
  --fork-gap: 16px;           /* space between the two destination cards */
  --fork-line: var(--cv-line-strong);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) 72px minmax(0, 1.2fr);
  align-items: stretch; /* no outer box: the cards sit directly on the page */
}

.cv-fork-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border-radius: 14px;
  background: var(--cv-surface-3);
}

.cv-fork-card p {
  font-size: 17px;
  line-height: 1.45;
  color: var(--cv-soft);
}

.cv-fork-root {
  align-self: center;
}

.cv-fork-branches {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--fork-gap);
}

.cv-fork-link {
  position: relative;
}

/* Stub: entry card → middle of the connector */
.cv-fork-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 50%;
  border-top: 1px solid var(--fork-line);
}

/* Branches start at the middle and end at each card's vertical center */
.cv-fork-link-up,
.cv-fork-link-down {
  position: absolute;
  left: 50%;
  right: 6px; /* room for the arrowhead */
  border-left: 1px solid var(--fork-line);
}

.cv-fork-link-up {
  top: calc((100% - var(--fork-gap)) / 4);
  bottom: 50%;
  border-top: 1px solid var(--fork-line);
  border-top-left-radius: 12px;
}

.cv-fork-link-down {
  top: 50%;
  bottom: calc((100% - var(--fork-gap)) / 4);
  border-bottom: 1px solid var(--fork-line);
  border-bottom-left-radius: 12px;
}

/* Arrowheads */
.cv-fork-link-up::after,
.cv-fork-link-down::after {
  content: '';
  position: absolute;
  right: -7px;
  border-left: 7px solid var(--fork-line);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.cv-fork-link-up::after { top: -4.5px; }
.cv-fork-link-down::after { bottom: -4.5px; }

/* ── Feature blocks (solution) ────────────── */
.cv-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 20px;
}

.cv-feature {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cv-feature--wide {
  grid-column: 1 / -1;
}

.cv-feature-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cv-feature-text p {
  max-width: 620px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--cv-soft);
}

/* ── Results bar ──────────────────────────── */
.cv-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: var(--cv-radius);
  background: var(--cv-surface);
}

.cv-bar {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 48px;
  gap: 16px;
  align-items: center;
  font-size: 17px;
}

.cv-bar-track {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: var(--cv-surface-2);
  overflow: hidden;
}

.cv-bar-fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: var(--cv-line-strong);
}

.cv-bar--after .cv-bar-fill {
  background: var(--cv-accent);
}

.cv-bar-value {
  font-family: 'Kode Mono', monospace;
  font-weight: 600;
  text-align: right;
}

/* ── Closing quote ────────────────────────── */
.cv-quote {
  max-width: 1000px;
  padding-top: 40px;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1;
}

/* ── End of case: bigger gap + divider before "Outros projetos" ── */
.cv-end-rule {
  height: 1px;
  margin: 240px 0 0;
  border: 0;
  background: var(--cv-line-strong);
}

.cv-section--after-end {
  padding-top: 120px;
}

/* ── Other projects ───────────────────────── */
.cv-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cv-next-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cv-next-img {
  aspect-ratio: 626 / 380;
  overflow: hidden;
  border-radius: 8px;
}

.cv-next-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cv-next-card:hover .cv-next-img img {
  transform: scale(1.04);
}

.cv-next-card h3 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
}

/* Footer wrapper (footer.css styles; same breakpoint as the product pages) */
.cv-footer--d {
  display: none;
}

.cv-footer--d .d-footer-block {
  max-width: 1280px;
  margin: 0 auto;
  padding: 160px var(--cv-gutter) 0;
}

@media (min-width: 1024px) {
  .cv-footer--m { display: none; }
  .cv-footer--d { display: block; }
}

/* Phone-only bits of the current mobile case header (shown < 768px) */
.cv-back,
.cv-overview-label {
  display: none;
}

.cv-back {
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 28px;
  background: var(--cv-surface);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  color: var(--cv-text);
}

.cv-back svg {
  width: 14px;
  height: 14px;
}

/* ── Phone top: the current case's image grid (from styles.css) ─── */
/* Hidden by default; shown below 768px, where it replaces the header.
   The page wrapper (.cv-page) overlaps it like on the current mobile case. */
.cv-mgrid {
  display: none;
}

.case-hero-grid {
  flex-direction: column;
  gap: 4px;
  width: 100%;
  position: relative;
  z-index: 1;
  transform-origin: center top;
}

.case-hero-row {
  display: flex;
  gap: 4px;
  width: 100%;
  height: 213px;
}

.case-hero-cell--narrow {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0 12px 12px;
}

.case-hero-cell--wide {
  width: 267px;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: 20% 0%;
  border-radius: 0 0 12px 12px;
}

.case-hero-cell--full {
  width: 100%;
  height: 209px;
  object-fit: cover;
  object-position: 50% 80%;
  border-radius: 12px 12px 0 0;
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 1023px) {
  :root { --cv-gutter: 24px; }

  .cv-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .cv-meta-lead {
    max-width: 560px;
    padding-top: 0;
  }
}

/* ── Phone (< 768px): structure and tokens of the current mobile case
   (styles.css .case-*), with the v2 content, boxes and images ─────── */
@media (max-width: 767px) {
  :root { --cv-gutter: 20px; }

  /* Image grid on top instead of the header */
  .cv-mgrid { display: flex; }

  .cv-header,
  .cv-rule { display: none; }

  /* Phone version of the hero image (MAIA motion piece, via <picture>):
     edge to edge, right before Contexto, at its own proportion */
  .cv-hero-frame { margin-top: 36px; }

  .cv-hero-img {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* .case-body: dark sheet that slides over the grid */
  .cv-page {
    position: relative;
    z-index: 2;
    margin-top: -40px;
    border-radius: 40px 40px 0 0;
    background: var(--cv-bg);
  }

  /* Header block: back button, label + title, lead, project overview */
  .cv-back { display: inline-flex; }
  .cv-overview-label { display: block; }

  .cv-hero { padding: 20px 0 0; gap: 20px; }
  .cv-hero-top { gap: 4px; }
  .cv-title { font-size: 36px; line-height: 1.1; }

  .cv-label { letter-spacing: 0; }

  .cv-meta { gap: 28px; }

  .cv-meta-lead {
    max-width: none;
    font-size: 18px;
    line-height: 1.5;
  }

  .cv-overview {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cv-meta-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cv-meta-list > div {
    display: flex;
    gap: 10px;
  }

  .cv-meta dt,
  .cv-meta dd {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
  }

  .cv-meta dt {
    flex-shrink: 0;
    width: 120px;
    color: var(--cv-muted);
  }

  .cv-meta dd {
    flex: 1;
    color: var(--cv-text);
  }

  /* Sections: label on top, 28px heading, 18px white body; 36px apart */
  .cv-section,
  .cv-section--loose,
  .cv-section--first { padding-top: 36px; gap: 28px; }

  /* End of case: still clearly bigger than the 36px between sections */
  .cv-end-rule { margin-top: 96px; }
  .cv-section--after-end { padding-top: 48px; }

  .cv-split,
  .cv-cards,
  .cv-grid,
  .cv-stats,
  .cv-stats--two,
  .cv-features,
  .cv-fork-branches,
  .cv-next {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-split { gap: 20px; }
  .cv-split-head { gap: 4px; }

  .cv-h2 { font-size: 28px; line-height: 1.1; }

  /* Headings shown as section labels on phones (Contexto, Cenário, Desafio):
     big Instrument Serif on desktop, cv-label look here */
  .cv-h2--mlabel {
    font-family: 'Kode Mono', monospace;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cv-muted);
    text-transform: uppercase;
  }
  .cv-h3 { font-size: 28px; line-height: 1.1; }

  .cv-body,
  .cv-body--loose {
    gap: 18px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--cv-text);
  }

  .cv-split--labeled > .cv-body,
  .cv-split--labeled > .cv-body--loose { padding-top: 0; }

  /* Boxes: same content, phone-sized */
  .cv-card,
  .cv-callout,
  .cv-bars { padding: 20px; }

  .cv-card--question p { font-size: 24px; }
  /* Plain callout text only (not the trade-off titles, quote or labels) */
  .cv-callout p:not([class]) { font-size: 16px; }

  .cv-stats { gap: 28px; }
  .cv-stat .cv-stat-value { font-size: 64px; }
  .cv-sim-result .cv-stat .cv-stat-value { font-size: 56px; }
  .cv-stat p:not(.cv-stat-value) { font-size: 18px; }

  .cv-source,
  .cv-ph figcaption,
  .cv-figcap { font-size: 14px; }

  .cv-features { gap: 36px; }
  .cv-feature-text p { font-size: 18px; }

  .cv-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .cv-step { white-space: normal; }

  /* Carousel: edge to edge, swipe (no arrows) */
  .cv-carousel-nav { display: none; }

  .cv-carousel {
    gap: 12px;
    margin: 0 calc(-1 * var(--cv-gutter));
    padding: 0 var(--cv-gutter);
    scroll-padding-inline: var(--cv-gutter);
  }

  .cv-carousel-item { flex-basis: 150px; }

  /* Fork stays horizontal: narrower columns, tighter cards */
  .cv-fork {
    --fork-gap: 10px;
    grid-template-columns: minmax(0, 0.8fr) 30px minmax(0, 1.2fr);
  }

  .cv-fork-card { gap: 6px; padding: 14px 12px; border-radius: 12px; }
  .cv-fork-card .cv-h3 { font-size: 21px; }
  .cv-page .cv-fork-card .cv-label { font-size: 12px; } /* fits on one line in the narrow card */
  .cv-fork-card p { font-size: 14px; line-height: 1.4; }
  .cv-fork-link-up { border-top-left-radius: 8px; }
  .cv-fork-link-down { border-bottom-left-radius: 8px; }

  .cv-bar { grid-template-columns: 70px minmax(0, 1fr) 40px; }

  /* Clinician photo (clinician-mobile, via <picture>): taller, so the
     image zooms in on the phone */
  .cv-photo {
    aspect-ratio: auto;
    height: 530px;
    object-position: 45% 50%; /* keeps the whole phone in frame */
  }

  /* Taller compare: phone sized by height (618/801 of the Figma frame) and
     centered; labels move to the top corners so the phone doesn't cover them */
  .cv-compare {
    aspect-ratio: auto;
    height: 600px;
  }

  .cv-compare-pane img {
    top: 50%;
    left: 50%;
    width: auto;
    height: 77%;
    transform: translate(-50%, -50%);
  }

  .cv-compare-label {
    top: 20px;
    font-size: 16px;
  }

  .cv-compare-pane--before .cv-compare-label { left: 20px; }
  .cv-compare-pane--after .cv-compare-label { left: auto; right: 20px; }

  /* Placeholders need room for their notes on narrow screens */
  .cv-ph-box {
    aspect-ratio: auto;
    min-height: 320px;
  }

  .cv-quote { padding-top: 8px; font-size: 36px; line-height: 1.1; }
  .cv-next-card h3 { font-size: 24px; }


  /* Trade-off box: stacked */
  .cv-tradeoff { gap: 24px; padding: 20px; }
  .cv-tradeoff-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cv-tradeoff-col { padding: 16px; }
  .cv-callout .cv-tradeoff-title { font-size: 22px; }
  .cv-callout .cv-tradeoff-quote { font-size: 24px; }
  .cv-tradeoff-block { padding-top: 24px; }
  .cv-logic { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cv-logic-row { gap: 8px; }

  /* Fork stays horizontal, with a shorter connector */
  .cv-logic-tree { grid-template-columns: auto 28px minmax(0, auto); }
  .cv-logic-seq { font-size: 16px; }

  /* Boxes and images sit 12px from the screen edge (text keeps the 20px
     gutter): pull them 8px out on each side */
  .cv-card,
  .cv-callout,
  .cv-compare,
  .cv-bars,
  .cv-fork,
  .cv-shot,
  .cv-shots,
  .cv-ph-box,
  .cv-next-img {
    margin-left: -8px;
    margin-right: -8px;
  }

  .cv-photo-frame {
    margin-left: -8px;
    margin-right: -8px;
  }

  .cv-figure-img {
    width: calc(100% + 16px);
    max-width: none;
    margin-left: -8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .cv-parallax img { transform: none; }

  /* Animated screen: show only the last frame (Concluído) */
  .cv-carousel-anim img { animation: none; }
  .cv-carousel-anim img:last-child { opacity: 1; }
}