.case-page { padding-top: 22px; }
.case-back, .case-anchor {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--teal-dark);
  font-size: 14px;
  font-weight: 600;
  text-underline-offset: 5px;
}

.case-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  padding-block: 64px 70px;
}

.case-intro-label, .case-section-label {
  margin: 0 0 16px;
  color: var(--teal-dark);
  font-size: 14px;
  font-weight: 600;
}

.case-hero h1 {
  margin: 0 0 25px;
  font-size: clamp(36px, 4.1vw, 54px);
  line-height: 1.1;
}

.case-lead { max-width: 46ch; margin-bottom: 19px; font-size: 18px; line-height: 1.7; }
.case-hero-photo { min-width: 0; margin: 0; }
.case-hero-photo img { display: block; width: 100%; height: auto; border-radius: 16px; }
.case-hero-photo figcaption { margin-top: 12px; color: var(--ink-faint); font-size: 13px; }

.case-chapter {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 80px;
  padding-block: 58px;
  border-top: 1px solid var(--line);
}

.case-chapter h2, .case-daily h2, .case-onboarding h2, .case-closing h2 {
  margin: 0 0 22px;
  font-size: clamp(28px, 2.7vw, 36px);
  line-height: 1.2;
}

.case-prose { max-width: 60ch; }
.case-prose p { margin-bottom: 20px; font-size: 16px; line-height: 1.8; }
.case-prose p:last-child { margin-bottom: 0; }
.case-director { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr); gap: 80px; margin: 0; padding-block: 42px 48px; border-top: 1px solid var(--line); }
.case-director-name { margin: 0; }
.case-director-name strong { display: block; margin-bottom: 8px; color: var(--navy); font-size: 22px; }
.case-director-name span { display: block; max-width: 30ch; font-size: 14px; line-height: 1.6; }
.case-director blockquote { margin: 0; padding: 0; border: 0; color: var(--navy); }
.case-director blockquote p { margin: 0; font-size: 21px; line-height: 1.75; }
.case-daily { padding-block: 56px 62px; border-top: 1px solid var(--line); }
.case-use-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin-top: 36px; }
.case-use { border-top: 2px solid var(--teal); padding-top: 24px; }
.case-use-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; }
.case-use-title .icon { color: var(--teal); margin-top: 2px; }
.case-use-title h3 { margin: 0; font-size: 20px; line-height: 1.35; }
.case-use p { margin: 0; font-size: 16px; line-height: 1.8; }

.case-onboarding { margin-top: 12px; padding-block: 64px; background: var(--teal-pale); }
.case-onboarding-heading { max-width: 64ch; }
.case-onboarding-heading > p:last-child { margin: 0; font-size: 17px; line-height: 1.8; }
.case-start-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; margin: 38px 0 0; padding: 0; list-style: none; }
.case-start-list li { min-width: 0; }
.case-step-marker { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 20px; background: var(--teal); border-radius: 50%; color: white; font-weight: 600; }
.case-start-list h3 { margin: 0 0 14px; font-size: 21px; line-height: 1.3; }
.case-start-list p { margin: 0; font-size: 16px; line-height: 1.8; }

.case-closing { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-block: 64px; }
.case-closing h2 { margin-bottom: 16px; }
.case-closing p { max-width: 55ch; margin: 0; font-size: 16px; }
.case-closing .button { flex-shrink: 0; }


@media(max-width: 960px) {
  .case-hero { gap: 30px; padding-block: 42px 50px; }
  .case-hero h1 { font-size: 38px; }
  .case-lead { font-size: 16px; }
  .case-chapter, .case-director { gap: 40px; }
  .case-use-list, .case-start-list { gap: 24px; }
  .case-use-title { flex-direction: column; }
  .case-closing { align-items: flex-start; flex-direction: column; gap: 25px; }
}

@media(max-width: 760px) {
  .case-hero, .case-chapter, .case-director, .case-use-list, .case-start-list { grid-template-columns: minmax(0, 1fr); }
  .case-director { gap: 22px; padding-block: 32px 38px; }
  .case-director blockquote p { font-size: 18px; }
  .case-hero { gap: 30px; }
  .case-hero h1 { font-size: 38px; }
  .case-hero-photo { max-width: 600px; }
  .case-chapter { gap: 5px; padding-block: 38px; }
  .case-daily { padding-block: 38px; }
  .case-use-list { gap: 28px; margin-top: 28px; }
  .case-use-title { flex-direction: row; }
  .case-onboarding { padding-block: 40px; }
  .case-start-list { gap: 28px; margin-top: 30px; }
  .case-start-list li { display: flex; align-items: flex-start; gap: 17px; }
  .case-step-marker { margin: 0; flex-shrink: 0; }
  .case-closing { padding-block: 40px; }
}

@media(max-width: 480px) {
  .case-hero h1 { font-size: 34px; }
  .case-hero { padding-block: 35px 40px; }
  .case-hero-photo figcaption { font-size: 12px; }
  .case-intro-label { font-size: 13px; }
  .case-chapter h2, .case-daily h2, .case-onboarding h2, .case-closing h2 { font-size: 28px; }
  .case-onboarding-heading > p:last-child { font-size: 16px; }

}