/* Loaded only by Telderi. Keep shared layout, navigation and media sizing intact. */
.case-page {
  --font-size-h1: clamp(34px, 4.2vw, 48px);
  --font-size-h2: 18px;
  --font-size-card-title: 22px;
  --font-size-lead: 18px;
  --font-size-body: 18px;
  --font-size-caption: 16px;
  --line-height-h1: 1.12;
  --line-height-h2: 25px;
  --line-height-body: 28px;
  --line-height-lead: 1.55;
  --space-section: var(--case-rhythm-section);
  --space-block: var(--case-rhythm-internal);
  --space-inner: 20px;
  --case-ui-padding: 20px;
}

.case-page .case-hero h1 {
  font-size: var(--font-size-h1);
  font-weight: 650;
  line-height: var(--line-height-h1);
}

.case-page .case-section__head,
.case-page #task.case-section--task-frame .case-section__head {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 0;
  margin-inline-start: 0;
}

.case-page .case-section__title,
.case-page :is(#solution, #tests).case-section--editorial .case-section__title {
  grid-column: 1;
  grid-row: auto;
  align-self: start;
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: 500;
  line-height: var(--line-height-h2);
}

.case-page .case-lead {
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: var(--line-height-lead);
}

.case-page :is(.section-lead, .case-body-copy, .pull) {
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.5;
}

.case-page .pull {
  text-wrap: pretty;
}

/* Keep the section lead prominent; supporting methods use compact body copy. */
.case-page #analytics .research-brief__intro > .pull {
  max-width: var(--telderi-copy-width);
  color: rgba(241, 241, 239, 0.9);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 27px;
}

.case-page #analytics .research-brief__details {
  max-width: 64ch;
  font-size: 16px;
}

.case-page #analytics .research-brief__details > p {
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.case-page #analytics .research-brief__intro > .pull {
  padding-left: 0;
  border-left: 0;
}

.case-page .case-service-line:empty {
  display: none;
}

.case-page .case-body-copy strong {
  font-weight: 500;
}

.case-page :is(.verification-pairs h3, .case-media-block__caption > span) {
  font-size: var(--font-size-card-title);
  font-weight: 600;
  line-height: 1.35;
}

/* Research items use a local heading and compact supporting copy. */
.case-page #analytics :is(#findings-panel .research-insight-card__insight, #segments-panel .research-scenario-card .telderi-subtitle, #barriers-panel .research-barrier-card .telderi-subtitle) {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-wrap: pretty;
}

.case-page :is(.case-eyebrow, .case-before-label, .case-service-lines > p, .case-media-caption, .research-footer-note, .case-result-closing > span) {
  font-size: var(--font-size-caption);
  font-weight: 500;
  line-height: 1.45;
}

.case-page #analytics :is(#findings-panel .research-insight-card__decision, #segments-panel .research-scenario-card .telderi-copy, #barriers-panel .research-barrier-card .telderi-copy) {
  font-size: 16px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
}

/* Neutral facts use the shared layout and existing separators. */
.case-page .case-project-meta {
  backdrop-filter: blur(6px);
}

.case-page .case-project-meta > .case-project-meta__item dt {
  color: var(--muted-light);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.case-page .case-project-meta > .case-project-meta__item dd {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* Local text roles; keep the existing copy scale and semantic emphasis. */
.case-page #task.case-section--task-frame .telderi-thesis {
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
}

/* Task labels reuse the project metadata's service-text role. */
.case-page #task.case-section--task-frame .telderi-label {
  color: var(--muted-light);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.case-page .case-next-project__title {
  font-size: var(--font-size-card-title);
  font-weight: 600;
  line-height: 1.35;
}

.case-page .case-hero {
  gap: 32px;
}

/* Hero identity stays local; the shared cover owns composition and sizing. */
.case-page--telderi .case-hero {
  --case-accent: #7599e6;
}

.case-page--telderi .case-hero .case-eyebrow {
  color: var(--case-accent);
}

.case-page--telderi figure.case-cover.case-cover--telderi {
  --case-cover-hue: 222;
  --case-cover-background: linear-gradient(
    145deg,
    hsl(var(--case-cover-hue) 42% 21%) 0%,
    hsl(var(--case-cover-hue) 43% 16%) 48%,
    hsl(var(--case-cover-hue) 42% 12%) 100%
  );
}

/* Local content axes; panel surfaces are reserved for media groups. */
.case-page--telderi .telderi-content {
  --font-size-body: 18px;
  --telderi-panel-surface: #1b1b19;
  --telderi-panel-line: rgba(255, 255, 255, 0.1);
  --telderi-panel-radius: 30px;
  --telderi-panel-inset: 28px;
  --telderi-content-inset: calc(var(--telderi-panel-inset) + 1px);
  --telderi-column-gap: 32px;
  --telderi-copy-width: 66ch;
  /* Soften the page decoration behind the reading area without a new surface. */
  backdrop-filter: blur(6px);
}

/* Natural prose wrapping; introductions share a measure without balancing lines. */
.case-page--telderi .telderi-content .telderi-copy,
.case-page--telderi .case-media-caption {
  text-wrap: pretty;
}

.case-page .telderi-content > :is(#context, #task, #tests, #annotations, #results) {
  --case-section-anchor-inset: 0px;
  gap: var(--case-rhythm-internal);
  margin-block: 0;
  padding-top: 0;
  border-top: 0;
}

.case-page .telderi-content > :is(#analytics, #solution) {
  --case-section-anchor-inset: 0px;
  gap: var(--case-rhythm-internal);
  margin-block: 0;
  padding: 0 var(--telderi-content-inset);
  border-top: 0;
}

.case-page .telderi-content .telderi-panel {
  min-width: 0;
  padding: var(--telderi-panel-inset);
  border: 1px solid var(--telderi-panel-line);
  border-radius: var(--telderi-panel-radius);
  background: var(--telderi-panel-surface);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.18);
}

/* Open explanation, followed by one shared before-gallery surface. */
.case-page #context {
  padding-bottom: 0;
}

.case-page #context::after {
  content: none;
}

.case-page #context > :is(.case-section__head, .case-copy),
.case-page #annotations > .case-section__head,
.case-page #annotations .case-final-showcase__summary {
  margin-inline: var(--telderi-content-inset);
}

.case-page #context .case-copy {
  max-width: none;
  gap: 16px;
}

.case-page #context .case-body-copy {
  width: 100%;
  max-width: 720px;
}

/* A compact takeaway on the existing copy axis; enabled only in Telderi. */
.case-page .case-takeaway {
  display: grid;
  gap: var(--case-rhythm-local);
  margin-block-start: var(--case-rhythm-emphasis);
  padding: var(--space-inner);
  border-left: 1px solid var(--line-strong);
  background: var(--case-ui-surface);
}

.case-page .case-takeaway__label {
  color: var(--muted-light);
  font-size: var(--font-size-eyebrow);
  font-weight: 400;
  line-height: var(--line-height-eyebrow);
}

.case-page .case-takeaway > p {
  margin: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}

.case-page #context .case-before-evidence {
  gap: 20px;
  margin-top: 8px;
}

.case-page #context .case-gallery--before {
  gap: var(--telderi-column-gap);
  align-items: start;
}

.case-page #context .case-gallery--before .case-media-card {
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.case-page #context .case-gallery--before .case-figure__media {
  min-height: 0;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

.case-page #context .case-gallery--before .case-figure__media img {
  object-fit: contain;
}

.case-page #context .case-gallery--before .case-media-caption {
  margin: 0;
}

/* Keep the research tabs as a functional module below the open introduction. */
.case-page #analytics .research-brief__intro {
  gap: var(--case-rhythm-internal);
}

.case-page #analytics .research-brief__details {
  gap: var(--case-rhythm-local);
}

.case-page #analytics .case-tabs {
  max-width: none;
  padding: var(--case-rhythm-internal) 0 0;
  gap: var(--case-rhythm-internal);
  border: 0;
  border-top: 1px solid var(--telderi-panel-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.case-page #analytics .case-tabs__buttons {
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
}

.case-page #analytics .case-tab.is-active {
  background: #3a3a37;
  color: var(--text);
}

.case-page #analytics .case-tab-panel.is-active {
  gap: var(--case-rhythm-internal);
}

.case-page #analytics #findings-panel .research-insight-list,
.case-page #analytics #barriers-panel .research-barrier-grid {
  gap: var(--case-rhythm-internal) var(--telderi-column-gap);
}

.case-page #analytics #findings-panel .research-insight-list {
  row-gap: var(--telderi-column-gap);
}

.case-page #analytics #findings-panel .research-insight-card__insight.telderi-subtitle {
  min-height: 0;
  color: rgba(241, 241, 239, 0.96);
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.5;
}

/* Four existing findings form open observation → design pairs, two per row. */
.case-page #analytics #findings-panel .research-insight-card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: var(--case-rhythm-local);
}

.case-page #analytics #findings-panel .research-insight-card__index {
  display: block;
  grid-row: auto;
  color: var(--muted-light);
  font-size: var(--font-size-eyebrow);
  font-weight: 400;
  line-height: var(--line-height-eyebrow);
}

.case-page #analytics #findings-panel .research-insight-card__decision.telderi-copy {
  display: block;
  grid-column: 1;
  color: #b7b5ad;
  font-weight: 400;
}

@media (max-width: 620px) {
  .case-page #analytics #findings-panel .research-insight-list {
    row-gap: calc(var(--case-rhythm-internal) + var(--case-rhythm-flow));
  }
}

.case-page #analytics #segments-panel .research-scenario-grid {
  grid-template-columns: repeat(var(--telderi-scenario-columns, 3), minmax(0, 1fr));
  gap: var(--case-rhythm-internal) var(--telderi-column-gap);
}

.case-page #analytics #segments-panel .research-scenario-card .telderi-subtitle {
  min-height: 0;
}

@media (max-width: 900px) {
  .case-page #analytics #segments-panel .research-scenario-grid {
    --telderi-scenario-columns: 2;
  }
}

@media (max-width: 620px) {
  .case-page #analytics #segments-panel .research-scenario-grid {
    --telderi-scenario-columns: 1;
  }
}

/* Task and verification share the solution's inner edges. */
.case-page .telderi-content > :is(#task, #tests) {
  padding-inline: var(--telderi-content-inset);
}

.case-page .telderi-content > #task.case-section--task-frame {
  /* Add a small outer pause without changing the thesis or its three columns. */
  margin-block: var(--case-rhythm-emphasis);
  gap: 16px;
}

.case-page #task.case-section--task-frame .case-task-thesis {
  max-width: 42ch;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-wrap: balance;
}

.case-page #task.case-section--task-frame .case-task-summary {
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1.3fr));
  align-items: start;
  width: 100%;
  max-width: 890px;
  gap: 24px var(--telderi-column-gap);
  margin-top: 8px;
}

/* One open row; longer aspects get more width without separate surfaces. */
.case-page #task.case-section--task-frame .case-task-summary .case-task-frame__item {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.case-page #task.case-section--task-frame .case-task-frame__item dd {
  max-width: none;
  /* Existing compact body role, also used by the project metadata. */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

@media (min-width: 621px) and (max-width: 1100px) {
  .case-page #task.case-section--task-frame .case-task-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-page #task.case-section--task-frame .case-task-frame__item:last-child {
    grid-column: 1 / -1;
    max-width: 66ch;
  }
}

@media (max-width: 620px) {
  .case-page #task.case-section--task-frame .telderi-thesis {
    font-size: var(--font-size-card-title);
    line-height: 1.4;
  }

  .case-page #task.case-section--task-frame .case-task-summary {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
}

/* Full-size narrative copy; interface explanations use the caption role below. */
.case-page #solution.case-section--editorial .case-solution-intro .telderi-copy,
.case-page #tests.case-section--editorial .telderi-copy {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

.case-page #solution .case-solution-intro {
  gap: calc(var(--case-rhythm-internal) + var(--case-rhythm-local));
  margin-bottom: 0;
}

/* One editorial decision, followed by the existing catalog as evidence. */
.case-page #solution .telderi-tradeoff {
  display: grid;
  gap: var(--case-rhythm-local);
  max-width: var(--telderi-copy-width);
}

.case-page #solution .telderi-tradeoff__label {
  margin: 0;
  color: var(--muted-light);
  font-size: var(--font-size-eyebrow);
  font-weight: 400;
  line-height: var(--line-height-eyebrow);
}

.case-page #solution .telderi-tradeoff .telderi-subtitle {
  margin: 0;
  color: var(--ink);
  font-size: var(--font-size-h2);
  font-weight: 500;
  line-height: var(--line-height-h2);
  text-wrap: pretty;
}

.case-page #solution .telderi-tradeoff .case-body-copy {
  margin-top: var(--case-rhythm-local);
  color: var(--ink-soft);
}

.case-page #solution .case-solution-intro > .section-lead,
.case-page #tests .case-verification-prototypes p {
  max-width: var(--telderi-copy-width);
  color: rgba(241, 241, 239, 0.9);
}

.case-page #solution .scenario-interface {
  gap: var(--case-rhythm-local);
}

.case-page #solution .scenario-interface__screen {
  display: grid;
  gap: var(--case-rhythm-local);
  padding: 0;
}

.case-page #solution .scenario-interface .case-media-caption {
  margin: 0;
  max-width: var(--telderi-copy-width);
  color: var(--muted-light);
  font-weight: 400;
}

.case-page #solution .scenario-interface__mockup > img {
  height: auto;
  object-fit: contain;
}

.case-page #solution .scenario-interface__pin {
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(24, 49, 96, 0.2);
  transform: none;
  pointer-events: auto;
}

/* Enlarge the hit area without moving the image-relative marker. */
.case-page #solution .scenario-interface__pin::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.case-page #solution .scenario-interface__pin:focus-visible {
  outline: 3px solid #7ecbff;
  outline-offset: 4px;
}

.case-page #solution .scenario-interface__pin[aria-expanded="true"] {
  background: #2159cf;
}

/* The comparison strip is at y=560–652 in the 2880 × 2000 image. */
.case-page #solution .scenario-interface__pin--compare {
  top: 30.3%;
  transform: translateY(-50%);
}

.case-page #solution .scenario-interface__pins {
  display: none;
  pointer-events: none;
}

.case-page #solution .scenario-interface[data-explanations-mode="cards"] .scenario-interface__pins {
  display: block;
}

.case-page #solution .scenario-interface__details {
  min-width: 0;
  margin-top: var(--case-rhythm-internal);
}

.case-page #solution .scenario-interface__details > summary {
  width: fit-content;
  color: rgba(241, 241, 239, 0.9);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
}

.case-page #solution .scenario-interface__details > summary:focus-visible {
  outline: 2px solid #7ecbff;
  outline-offset: 6px;
  border-radius: 2px;
}

.case-page #solution .scenario-interface__details[open] > summary {
  margin-bottom: 24px;
}

.case-page #solution .scenario-interface[data-explanations-mode="list"] .scenario-interface__details > summary {
  display: none;
}

/* Mounted on body so the content column's backdrop-filter cannot clip it. */
.telderi-explanation {
  --explanation-surface: #232321;
  --explanation-border: #4b4b49;
  position: fixed;
  z-index: 19;
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border: 1px solid var(--explanation-border);
  border-radius: 10px;
  background: var(--explanation-surface);
  color: rgba(241, 241, 239, 0.94);
  overflow-wrap: break-word;
}

.telderi-explanation[hidden] {
  display: none;
}

.telderi-explanation__anchor {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: visible;
  fill: var(--explanation-surface);
  stroke: var(--explanation-border);
  stroke-width: 1px;
  stroke-linejoin: round;
  pointer-events: none;
}

.telderi-explanation strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.telderi-explanation p {
  margin: 6px 0 0;
  color: rgba(241, 241, 239, 0.9);
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  text-wrap: pretty;
}

.case-page #solution .scenario-interface__legend {
  gap: 24px var(--telderi-column-gap);
}

.case-page #solution .scenario-interface__legend li {
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.case-page #solution .scenario-interface__legend li > span {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: rgba(213, 211, 204, 0.9);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.case-page #solution .scenario-interface__legend-copy {
  gap: 4px;
}

.case-page #solution .scenario-interface__legend-copy strong {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.case-page #solution .scenario-interface__legend-copy .telderi-copy {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.case-page #tests.case-section--editorial {
  container: telderi-verification / inline-size;
}

.case-page #tests .case-verification-prototypes {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.case-page #tests.case-section--editorial :is(.case-verification-prototypes, .case-variant-compare) > .telderi-subtitle {
  margin: 0;
  color: rgba(241, 241, 239, 0.92);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}

.case-page #tests .case-variant-compare--open {
  max-width: var(--telderi-copy-width);
  font-size: var(--font-size-body);
  gap: 24px;
  margin-top: 12px;
}

.case-page #tests.case-section--editorial .case-variant-compare__grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  grid-auto-rows: auto;
  gap: 0;
}

.case-page #tests.case-section--editorial .case-variant-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  height: auto;
  gap: 8px;
  padding: 18px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.case-page #tests.case-section--editorial .case-variant-card:first-child {
  padding-top: 0;
}

.case-page #tests.case-section--editorial .case-variant-card + .case-variant-card:not(.case-variant-card--selected) {
  border-top: 1px solid var(--line);
}

.case-page #tests.case-section--editorial .case-variant-card--selected {
  border-color: var(--case-callout-border);
  border-radius: var(--case-card-radius);
}

.case-page #tests.case-section--editorial .case-variant-card__heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.case-page #tests.case-section--editorial .case-variant-card > .telderi-copy {
  max-width: none;
}

.case-page #tests.case-section--editorial .case-variant-card .telderi-subtitle {
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
}

.case-page #tests.case-section--editorial .case-variant-card__selection {
  color: var(--muted-light);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* A narrow label track leaves the explanation readable alongside the sidebar. */
@container telderi-verification (min-width: 600px) {
  .case-page #tests.case-section--editorial .case-variant-card {
    grid-template-columns: 176px minmax(0, 1fr);
    column-gap: 28px;
  }
}

/* One adaptive gallery, with full frames and captions on the shared surface. */
.case-page #annotations .case-final-showcase {
  gap: 28px;
}

.case-page #annotations .case-final-showcase__summary {
  max-width: none;
}

.case-page #annotations .case-final-showcase__summary > .section-lead {
  max-width: var(--telderi-copy-width);
}

.case-page #annotations .case-final-crops {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--telderi-column-gap);
}

.case-page #annotations .case-final-media-block {
  align-self: stretch;
  grid-template-rows: 1fr auto;
  gap: 20px;
}

.case-page #annotations .case-final-media-block__frame {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.case-page #annotations .case-final-media-block--tablet .case-final-media-block__frame img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.case-page #annotations .case-final-media-block--mobile .case-final-media-block__frame {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.case-page #annotations .case-final-media-block--mobile .case-final-media-block__mockup {
  width: 100%;
  max-width: 190px;
  height: auto;
  max-height: none;
  justify-self: center;
}

.case-page #annotations .case-final-media-block__caption {
  padding: 0;
}

/* One implementation surface, then a single reading flow on its text axis. */
.case-page .telderi-content > #results {
  gap: 0;
}

.case-page #results .telderi-results-module {
  display: grid;
  gap: var(--space-block);
  padding-inline: var(--telderi-content-inset);
}

.case-page #results :is(.telderi-results-implementation, .telderi-results-block) {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.case-page #results .telderi-results-implementation {
  padding: var(--space-block);
  border-radius: var(--case-panel-radius);
  background: var(--surface-3);
}

.case-page--telderi #results .telderi-results-flow {
  display: flex;
  flex-direction: column;
  gap: var(--telderi-column-gap);
  max-width: calc(60ch + var(--space-block) + var(--space-block));
  padding-inline: var(--space-block);
  font-size: var(--font-size-body);
}

.case-page #results :is(.telderi-results-heading, .telderi-copy) {
  margin: 0;
  color: rgba(241, 241, 239, 0.9);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 27px;
  text-wrap: pretty;
}

.case-page #results .telderi-results-heading {
  font-weight: 500;
}

.case-page #results .telderi-results-metrics {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-page #results .telderi-results-value {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  white-space: nowrap;
}

.case-page #results .telderi-results-note {
  margin-top: 8px;
}

.case-page #results > .telderi-results-module + .case-next-project {
  margin-top: 48px;
}

@media (max-width: 860px) {
  .case-page #annotations .case-final-crops {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .case-page #annotations .case-final-media-block--mobile .case-final-media-block__frame {
    justify-content: start;
    grid-template-columns: repeat(2, minmax(0, 190px));
  }
}

@media (max-width: 620px) {
  .case-page {
    --font-size-card-title: 20px;
    --font-size-body: 17px;
    --font-size-caption: 15px;
    --line-height-body: 27px;
    --space-section: var(--case-rhythm-section);
    --space-inner: 16px;
  }

  .case-page--telderi .telderi-content {
    --telderi-panel-inset: 20px;
    --telderi-panel-radius: 24px;
    --telderi-column-gap: 24px;
  }

  .case-page #analytics .case-tabs {
    padding-top: var(--case-rhythm-internal);
    gap: var(--case-rhythm-internal);
  }

  .case-page #analytics .case-tab {
    padding-inline: 10px;
  }

  .case-page #solution .scenario-interface__pin {
    width: 24px;
    height: 24px;
  }
}