.case-seven {
  --navy: #063653;
  --navy-soft: #07557d;
  --blue: #0b78ad;
  --lilac: #62b4dc;
  --lilac-soft: #eaf6fb;
  --paper: #f5f9fb;
  --ink: #111719;
  --muted: #5d6e77;
  --line: #cbdde6;
  --signal: #d62d20;
  --signal-bright: #d9eff9;
}

.case-health {
  --navy: #18392b;
  --navy-soft: #244b36;
  --blue: #4f8561;
  --lilac: #8c9b6f;
  --lilac-soft: #edf3e9;
  --paper: #f6f1e8;
  --ink: #1f2d26;
  --muted: #756b5b;
  --line: #ddd2c1;
  --signal: #b96846;
  --signal-bright: #e5d6b9;
}

.case-seven .case-hero {
  background:
    radial-gradient(circle at 84% 18%, rgb(98 180 220 / 20%), transparent 34%),
    var(--navy);
}

.case-health .case-hero {
  background:
    radial-gradient(circle at 83% 14%, rgb(140 155 111 / 22%), transparent 32%),
    var(--navy);
}

.case-seven .screen-bar {
  color: #426779;
  background: #e4f1f7;
}

.case-health .screen-bar {
  color: #756b5b;
  background: #efe7da;
}

.case-health .hero-screen {
  background: #f6f1e8;
}

.case-health .hero-screen img {
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.decision-grid-three {
  grid-template-columns: repeat(3, 1fr);
}

.decision-grid-three .decision {
  min-height: 310px;
}

.comparison {
  background: var(--white);
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.comparison-card {
  margin: 0;
}

.comparison-card button,
.feature-screen button,
.mobile-screen button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: zoom-in;
  background: var(--lilac-soft);
  box-shadow: 0 22px 62px rgb(8 28 51 / 12%);
}

.comparison-card button {
  aspect-ratio: 16 / 10;
}

.comparison-card img,
.feature-screen img,
.mobile-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform 700ms var(--ease), filter 400ms ease;
}

.comparison-card button:hover img,
.feature-screen button:hover img,
.mobile-screen button:hover img {
  transform: scale(1.012);
  filter: brightness(.96);
}

.comparison-card figcaption {
  display: grid;
  gap: 7px;
  padding-top: 18px;
}

.comparison-card figcaption span,
.feature-copy .feature-label,
.scope-note strong {
  color: var(--blue);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 10px;
  text-transform: uppercase;
}

.comparison-card figcaption p {
  margin-bottom: 0;
  color: var(--muted);
}

.feature {
  background: var(--lilac-soft);
}

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  align-items: center;
  gap: 72px;
}

.feature-screen {
  margin: 0;
}

.feature-screen button {
  aspect-ratio: 16 / 9.35;
}

.feature-copy h2 {
  margin: 18px 0 22px;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 46px;
  font-weight: 600;
}

.feature-copy p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
}

.adaptive {
  background: var(--white);
}

.adaptive-grid {
  display: grid;
  grid-template-columns: minmax(230px, .42fr) minmax(0, 1.58fr);
  align-items: center;
  gap: 78px;
}

.mobile-screen {
  width: min(100%, 340px);
  margin: 0 auto;
}

.mobile-screen button {
  height: auto;
  aspect-ratio: 390 / 710;
  border: 8px solid #102d4b;
  border-radius: 28px;
  background: #063653;
  box-shadow: 0 30px 76px rgb(8 28 51 / 20%);
}

.mobile-screen img {
  object-fit: contain;
  object-position: center;
}

.adaptive-copy h2 {
  margin: 0 0 24px;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 52px;
  font-weight: 600;
}

.adaptive-copy > p {
  max-width: 680px;
  color: var(--muted);
  font-size: 18px;
}

.adaptive-copy figure {
  margin: 38px 0 0;
  border: 1px solid var(--line);
  background: var(--lilac-soft);
  box-shadow: 0 18px 52px rgb(8 28 51 / 10%);
}

.adaptive-copy figure img {
  width: 100%;
}

.scope {
  background: var(--white);
}

.scope-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  align-items: start;
  gap: 96px;
}

.scope-copy h2 {
  margin: 0 0 24px;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 50px;
  font-weight: 600;
}

.scope-copy > p {
  max-width: 610px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
}

.scope-notes {
  display: grid;
  border-top: 1px solid var(--line);
}

.scope-note {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.scope-note p {
  margin: 0;
}

.case-health .outcomes {
  background: #edf3e9;
}

.case-health .case-result {
  background: #e5d6b9;
}

.case-seven .case-result {
  background: #d9eff9;
}

.case-result .hero-actions {
  flex-wrap: wrap;
}

.case-seven .button-signal {
  color: var(--white);
  background: var(--signal);
}

.case-seven .button-signal:hover {
  color: var(--navy);
  background: var(--white);
}

.text-link-dark {
  color: var(--navy);
  border-color: rgb(6 54 83 / 48%);
}

.text-link-dark:hover {
  color: var(--blue);
}

.result-download {
  padding: 7px 0;
  color: rgb(6 54 83 / 68%);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.result-download:hover {
  color: var(--navy);
}

@media (max-width: 980px) {
  .decision-grid-three {
    grid-template-columns: 1fr 1fr;
  }

  .decision-grid-three .decision:last-child {
    grid-column: 1 / -1;
  }

  .feature-grid,
  .adaptive-grid,
  .scope-grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .mobile-screen {
    width: min(100%, 300px);
  }
}

@media (max-width: 700px) {
  .decision-grid-three {
    grid-template-columns: 1fr;
  }

  .decision-grid-three .decision:last-child {
    grid-column: auto;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .feature-copy h2,
  .adaptive-copy h2,
  .scope-copy h2 {
    font-size: 36px;
    line-height: 1.08;
  }

  .feature-copy p,
  .adaptive-copy > p,
  .scope-copy > p {
    font-size: 16px;
  }

  .mobile-screen button {
    height: auto;
  }

  .scope-note {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}