@media (max-width: 800px) {
  #overview-title {
    font-size: clamp(30px, 10.5vw, 46px);
    letter-spacing: -.04em;
    text-wrap: balance;
  }

  #science-title,
  .module-liver .liver-flow .section-heading h3,
  .module-recommendation .recommendation-flow .section-heading h3 {
    font-size: clamp(18px, 5.5vw, 28px);
    line-height: 1.45;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  #science-title br {
    display: none;
  }

  .module-liver .liver-flow .section-heading,
  .module-recommendation .recommendation-flow .section-heading {
    display: grid;
    gap: 14px;
  }

  .module-liver .liver-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .module-liver .liver-metrics > div {
    min-width: 0;
    padding: 16px 12px;
  }

  .module-liver .liver-metrics strong {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 4px;
    max-width: 100%;
    font-size: clamp(21px, 5.8vw, 28px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .module-liver .liver-metrics strong span {
    margin-left: 0;
    font-size: 11px;
  }

  .module-liver .liver-metrics small {
    margin-top: 12px;
    overflow-wrap: anywhere;
  }

  .module-liver .liver-metrics > div:hover strong {
    transform: none;
  }

  .module-recommendation .recommendation-visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 24px;
    height: auto;
    min-height: 0;
    padding: 22px 18px;
  }

  .module-recommendation .rec-stage-label,
  .module-recommendation .rec-signal-stack,
  .module-recommendation .rec-model-core,
  .module-recommendation .rec-ranked-list,
  .module-recommendation .rec-feedback {
    position: relative;
    inset: auto;
  }

  .module-recommendation .rec-stage-label {
    justify-self: start;
  }

  .module-recommendation .rec-signal-stack {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .module-recommendation .rec-signal {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'n' 'b' 's';
    gap: 5px;
    overflow-wrap: anywhere;
  }

  .module-recommendation .rec-model-core {
    width: 178px;
    height: 178px;
    transform: none;
  }

  .module-recommendation .rec-ranked-list {
    width: min(100%, 280px);
    padding: 14px 18px;
  }

  .module-recommendation .rec-feedback {
    width: 100%;
    flex-wrap: wrap;
  }

  .module-recommendation .rec-flow-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 2px 14px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #7fab83 #edf2e9;
  }

  .module-recommendation .rec-flow-track > div {
    flex: 0 0 clamp(160px, 55vw, 220px);
    min-width: 0;
    scroll-snap-align: start;
    overflow-wrap: anywhere;
  }

  .module-recommendation .rec-flow-track > svg,
  .module-recommendation .rec-flow-track > i {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    align-self: center;
    color: #315744;
  }

  .module-recommendation .rec-flow-track:focus-visible {
    outline: 2px solid #7fab83;
    outline-offset: 4px;
  }
}

@media (max-width: 900px) {
  .physiology-art {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: center;
    gap: 18px;
    height: auto;
    min-height: 330px;
    padding: 28px 18px 38px;
  }

  .physiology-art .face-tracking {
    width: 112px;
    height: 112px;
    min-width: 0;
  }

  .physiology-art .face-model-canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .physiology-art .sample-metric {
    width: min(100%, 240px);
    min-width: 0;
  }

  .physiology-art .sample-metric > span {
    justify-content: center;
    white-space: normal;
  }

  .physiology-art .vital-readouts {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
  }

  .physiology-art .vital-readouts strong {
    white-space: nowrap;
  }

  .physiology-art .signal-meta {
    gap: 12px;
    flex-wrap: wrap;
  }
}

@media (max-width: 360px) {
  .module-liver .liver-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}