.case {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px;
}

.case-body {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.case-hero {
  margin-bottom: 48px;
}

.case-hero h1 {
    font-size: var(--font-size-32);
    line-height: var(--line-height-small);
    letter-spacing: var(--letter-spacing-small);
    color: var(--color-text-primary);
}

.case-one-liner {
  font-size: var(--font-size-20);
  letter-spacing: var(--letter-spacing-small);
  line-height: var(--line-height-large);
  color: var(--color-text-tertiary);
}

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3rem;
  margin-bottom: 8rem;
}

@media (max-width: 768px) {
  .snapshot-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.snapshot-grid dt {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-large);
  line-height: var(--line-height-small);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.snapshot-grid dd {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-medium);
    line-height: var(--line-height-large);
    margin: 1rem 0 0;
}

.prose h2 {
    margin-top: 4rem;
    margin-bottom: 2rem;
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-small);
    letter-spacing: var(--letter-spacing-medium);
    color: var(--color-text-secondary)
}

.prose h3 {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-small);
    letter-spacing: var(--letter-spacing-small);
    margin-top: 4rem;
    color: var(--color-text-secondary)
}

.prose p {
  margin-bottom: 2rem;
  font-size: var(--font-size-16);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-large);
  color: var(--color-text-primary)
}

strong,
b {
    font-weight: var(--font-weight-semibold);
}


/* LIST STYLES */
.prose ul {
  margin-bottom: 2rem;
  padding-left: 3rem;
  font-size: var(--font-size-16);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  color: var(--color-text-primary);
  list-style: disc;
  margin: 1rem 0;
}

.prose ol {
  margin-bottom: 2rem;
  padding-left: 3rem;
  font-size: var(--font-size-16);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-small);
  color: var(--color-text-primary);
  list-style: disc;
  margin: 1rem 0;
}

/* LINK STYLES */
.prose a {
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    color: inherit;
}

.prose a:hover {
    color: var(--color-text-brand);
}





/* TEXT STYLES */















/* IMAGE STYLES */



.prose img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.prose p img {
    margin-left: auto;
    margin-right: auto;
}

/* LAYOUT */
.two-col {
  display: flex;
  flex-direction: row;
  justify-content: top;
  gap: 4rem;
  font-size: var(--font-size-16);
  line-height: var(--line-height-large);
  color: var(--color-text-primary)
}

.two-col > p {
    margin: 0;
}

@media (max-width: 768px) {
    .two-col {
        flex-direction: column;
    }
}


/* MISC STYLES */

.prose blockquote {
    border-left: 4px solid var(--color-border-primary);
    padding-left: 2rem;
    margin: 4rem 0;
    font-size: var(--font-size-16);
    line-height: var(--line-height-large);
}

.case-study pre {
  padding: 2rem 2.5rem;
  border-radius: 8px;
  overflow-x: auto;
  font-size: var(--font-size-16);
}

.case-study code {
  font-size: var(--font-size-16);
}

.impact {
  background: var(--color-surface-tertiary);
  padding: 4rem;
  border-radius: 12px;
  margin: 8rem 0;
}

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.full-bleed img {
  width: 100%;
  height: auto;
  display: block;
}