/* Shared with the homepage's Geist + Caveat visual language. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/caveat-latin.woff2") format("woff2");
}

:root {
  --sans: "Geist Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --page: #fbfcfe;
  --ink: #1d1d1f;
  --muted: #56585e;
  --panel: rgba(242, 246, 252, .82);
  --panel-strong: rgba(255, 255, 255, .86);
  --line: rgba(29, 29, 31, .1);
  --signal: #0877db;
  --signal-dark: #0758a2;
  --scribble: #126fc3;
  --tint: #b8d7ff;
  --soft: color-mix(in srgb, var(--tint) 15%, var(--page));
  --case-surface: var(--panel);
  --case-hero-surface: var(--panel);
  --brand-display: 64px;
  --brand-title: 40px;
  --brand-heading: 26px;
  --brand-body: 18.5px;
  --brand-small: 15px;
  --brand-note: 26px;
  --brand-chapter-note: 32px;
  --brand-break-note: 64px;
  --brand-radius: 8px;
  --brand-section-gap: 80px;
  --case-title: var(--brand-title);
  --case-body: var(--brand-body);
  --case-small: var(--brand-small);
  --sz-body: var(--brand-body);
  --sz-small: var(--brand-small);
  --sz-heading: var(--brand-heading);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d0f12;
    --ink: #f5f5f7;
    --muted: #9ea3ab;
    --panel: rgba(28, 33, 42, .8);
    --panel-strong: rgba(31, 37, 47, .88);
    --line: rgba(255, 255, 255, .12);
    --signal: #68b5ff;
    --signal-dark: #9dd0ff;
    --scribble: #82c3ff;
    --soft: color-mix(in srgb, var(--tint) 8%, var(--page));
  }
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--brand-body);
  line-height: 1.65;
  letter-spacing: 0;
}

h1, h2, h3, h4, button, input, select, textarea {
  font-family: var(--sans);
  letter-spacing: 0;
}

.case-hero h1 {
  font-size: var(--brand-display);
  line-height: 1.08;
  letter-spacing: 0;
}

.chapter-title h2, .detail-intro h2, .flow-intro h2, .result-head h2, .closing h2 {
  font-size: var(--brand-title);
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: pretty;
}

.body-copy, .chapter-title > p, .detail-intro p, .result-head p, .closing-copy p {
  font-size: var(--brand-body);
  line-height: 1.65;
  letter-spacing: 0;
}

.hand-note, .chapter-index .label, .detail-intro .label, .flow-intro .label,
.decision .marker, .process-dot, .quick-scan-kicker, .closing .chapter-label {
  font-family: var(--hand);
  font-size: var(--brand-note);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--scribble);
  text-transform: none;
  transform: rotate(-2deg);
}

.chapter-index .label, .detail-intro .label, .flow-intro .label {
  display: block;
  font-size: var(--brand-chapter-note);
  padding-bottom: 4px;
}

.case-hero::after, .marketing-visual::before {
  display: none;
}

.marketing-visual.has-cover, .full-figure .shot, .screen-shot .shot, .media-frame {
  background: var(--panel);
  border-radius: var(--brand-radius);
  box-shadow: none;
}

.media-frame img, .screen-shot img, .full-figure img {
  box-shadow: none;
}

.chapter.alt, .detail-chapter.alt, .closing {
  background: var(--panel);
}

.chapter, .detail-chapter, .results, .closing {
  padding-block: var(--brand-section-gap);
}

.hero-grid, .chapter-head, .detail-intro, .result-head, .closing-grid {
  min-width: 0;
}

.hero-grid > *, .chapter-head > *, .detail-intro > *, .result-head > *, .closing-grid > * {
  min-width: 0;
}

.hero-grid {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}

.story-break, .tabs-ready .case-panel > .story-break {
  display: block;
  padding: 32px 0 16px;
  background: var(--panel);
}

.story-break .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
}

.story-break .wrap::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.story-break h2 {
  margin: 0;
  color: var(--scribble);
  font: 600 var(--brand-break-note)/1.15 var(--hand);
  letter-spacing: 0;
  transform: rotate(-2deg);
  padding-bottom: 4px;
}

@media (max-width: 800px) {
  :root {
    --brand-display: 48px;
    --brand-title: 32px;
    --brand-heading: 24px;
    --brand-body: 17px;
    --brand-note: 24px;
    --brand-chapter-note: 28px;
    --brand-break-note: 48px;
    --brand-section-gap: 56px;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .chapter-head, .detail-intro {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  :root {
    --brand-display: 40px;
    --brand-title: 28px;
    --brand-break-note: 44px;
  }
}