.case-hero { padding-top: 54px; padding-bottom: 52px; }
.case-hero h1 { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.3; }
.case-subtitle { color: var(--white); font-size: 20px; line-height: 1.6; margin-top: 14px; }
.case-byline { color: #a7afb7; font-size: 14px; line-height: 1.7; margin-top: 26px; }
.case-byline span { padding-inline: 10px; }
.case-body { background: var(--paper); padding-top: 48px; }
.case-body figure { margin: 0; min-width: 0; }
.case-body figcaption { color: #626d74; font-size: 13px; line-height: 1.6; margin-top: 13px; }
.case-body figure img { width: 100%; height: auto; }
.dashboard-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.case-introduction { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; padding-block: 76px 86px; }
.case-copy h2 { font-size: 25px; font-weight: 500; line-height: 1.4; letter-spacing: -.025em; margin-bottom: 20px; }
.case-copy p { font-size: 17px; line-height: 1.75; color: #465560; }
.case-copy p + p { margin-top: 20px; }
.case-role { max-width: 370px; }
.case-responsibilities { margin: 0; padding-left: 19px; color: #465560; font-size: 17px; line-height: 1.75; }
.case-responsibilities li + li { margin-top: 16px; }
.case-responsibilities strong { color: var(--ink); font-weight: 500; }
.case-video { display: inline-block; margin-top: 20px; padding-block: 8px; font-size: 14px; line-height: 1.6; }
.case-video:hover { color: #85602b; }
.product-story { padding-block: 0 86px; }
.product-detail { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 80px; }
.product-switch { padding-top: 40px; }
.case-leadership { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; padding-bottom: 86px; }
.screen-story { padding-bottom: 50px; }
.screen-intro { max-width: 660px; margin-bottom: 34px; }
.screen-overview > img { background: #e7ebed; }
.case-navigation { display: flex; justify-content: center; padding-bottom: 62px; }
.button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border: 1px solid #aeb5b8; border-radius: 4px; font-size: 16px; line-height: 1.5; }
.button-secondary:hover { border-color: var(--ink); background: #edece8; }

@media (max-width: 1000px) {
  .case-introduction { gap: 42px; }
  .case-leadership { gap: 42px; }
  .product-detail { gap: 40px; }
}
@media (max-width: 700px) {
  .case-hero { padding-top: 36px; padding-bottom: 36px; }
  .case-hero h1 { font-size: clamp(25px, 5.3vw, 34px); line-height: 1.4; }
  .case-subtitle { font-size: 18px; margin-top: 13px; }
  .case-byline { margin-top: 22px; }
  .case-byline span { padding-inline: 3px; }
  .case-body { padding-top: 28px; }
  .dashboard-comparison { grid-template-columns: 1fr; gap: 26px; }
  .case-body figcaption { margin-top: 10px; }
  .case-introduction { grid-template-columns: 1fr; gap: 34px; padding-block: 46px 52px; }
  .case-copy h2 { font-size: 23px; margin-bottom: 16px; }
  .case-copy p { font-size: 16px; }
  .case-responsibilities { font-size: 16px; }
  .case-role { max-width: none; }
  .product-story { padding-bottom: 52px; }
  .product-detail { grid-template-columns: 1fr; gap: 26px; }
  .account-detail { max-width: 440px; }
  .product-switch { padding-top: 24px; }
  .case-leadership { grid-template-columns: 1fr; gap: 34px; padding-bottom: 52px; }
  .screen-intro { margin-bottom: 26px; }
  .screen-story { padding-bottom: 28px; }
  .case-navigation { padding-bottom: 36px; }
}