@font-face { font-family: "DM Mono"; src: url("/assets/dm-mono-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
.case-page { --case-muted: #686868; --case-border: #aeaeae; --case-mat: #f4f4f4; }
[data-theme="dark"] .case-page { --case-muted: #b3b3b3; --case-border: #525252; --case-mat: #2b2b2b; }
.case-study { display: flex; flex-direction: column; gap: 40px; font: 400 18px/28px "SF Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.18px; }
.case-study * { min-width: 0; }
.case-study strong { font-weight: 600; }
.case-hero { position: relative; isolation: isolate; align-self: center; width: 100vw; height: 345px; margin: 0; }
.case-hero::before { content: ""; position: absolute; inset: -240px 0 0; z-index: -1; background: #ebe9ff; }
.case-hero img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: block; width: min(1000px, calc(100vw - 48px)); height: auto; }
[data-theme="dark"] .case-hero::before { background: #29233f; }
.case-intro { display: flex; flex-direction: column; gap: 34px; }
.case-title-group { display: flex; flex-direction: column; gap: 28px; }
.case-project-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.case-back-link { color: var(--case-muted); font-size: 14px; line-height: 22px; text-decoration: none; }
.case-back-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.case-source { overflow-wrap: anywhere; line-height: normal; }
.case-title { display: flex; flex-direction: column; gap: 22px; }
.case-title h1 { font: 400 26px/34px "DM Mono", var(--mono); letter-spacing: -.26px; }
.case-title > p { font-size: 20px; line-height: 32px; font-weight: 500; letter-spacing: -.2px; }
.case-divider { height: 1px; overflow: hidden; }
.case-divider img { display: block; }
.case-facts { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: 24px; margin: 0; }
.case-facts dt { font: 400 16px/28px var(--mono); letter-spacing: 0; }
.case-facts dd { margin: 6px 0 0; font-weight: 500; line-height: normal; }
.case-section { display: flex; flex-direction: column; gap: 15px; }
.case-section h2, .case-section h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.2px; }
.case-section .case-eyebrow { font-size: 16px; line-height: 28px; font-weight: 500; color: var(--case-muted); letter-spacing: 0; }
.case-section#overview h2, .case-takeaway { font-size: 24px; line-height: 36px; font-weight: 400; letter-spacing: 0; padding: 2px 0 10px; }
.case-study ul { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; margin: 0; }
.case-figure { display: flex; flex-direction: column; gap: 8px; margin: 0; width: 100%; }
.case-figure figcaption, .case-caption { font-size: 16px; line-height: 28px; letter-spacing: -.16px; color: var(--case-muted); text-align: center; }
.case-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 30px; }
.case-image-mat { width: 100%; padding: 3.4484%; border-radius: 7px; background: var(--case-mat); }
.case-image-crop { position: relative; width: 100%; aspect-ratio: 377.069 / 244.248; overflow: hidden; }
.case-image-crop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crop-table-actions img { width: 136.77%; height: 115.12%; left: -18.39%; top: -10.05%; }
.crop-default-buttons .case-image-crop { aspect-ratio: 377.069 / 244.351; }
.crop-status-tags img { width: 102.04%; left: -1.02%; }
.crop-button-explorations img { width: 101.5%; left: -.75%; }
.case-split { display: grid; grid-template-columns: minmax(0, 1fr) 424px; gap: 20px; padding-top: 15px; align-items: start; }
.case-copy { display: flex; flex-direction: column; gap: 15px; }
.crop-action-hierarchy .case-image-mat { padding: 0; border-radius: 10px; }
.crop-action-hierarchy .case-image-crop { aspect-ratio: 424 / 516; border-radius: 10px; }
.crop-action-hierarchy img { height: 100.5%; top: .06%; }
.case-full-image { display: block; width: 100%; height: auto; border-radius: 10px; }
.case-demo { width: 100%; align-self: center; border-radius: 10px; }
.case-demo { display: block; height: auto; margin-top: 16px; }
.case-study consensus-flow { --cf-font: "SF Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --cf-mono: "DM Mono", var(--mono); --cf-sticky-top: 108px; }
.case-study consensus-flow[type="participation"] { margin-top: 4px; }
.case-study consensus-flow[type="participation"] + figcaption { margin-top: 12px; }
.case-study consensus-flow[type="recertification"] { margin-top: 4px; }
.case-study consensus-flow[type="outliers"] { margin-top: 29px; }
[data-theme="dark"] .case-study consensus-flow { --cf-text: #f0f0f0; --cf-muted: #b3b3b3; --cf-surface: #2b2b2b; --cf-line: #686868; --cf-connector: #a0a0a0; --cf-accent: #b6aaff; --cf-soft: #39304f; --cf-warning: #44371b; --cf-warning-text: #f3d884; }
.case-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.case-metrics > div { display: flex; flex-direction: column; gap: 10px; min-height: 152px; padding: 24px; border: 1px solid var(--case-border); border-radius: 15px; text-align: center; }
.metric-value { font-size: 30px; line-height: 36px; font-weight: 700; flex: 1; }
.case-availability { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
.case-availability .case-image-mat { padding: 15px; border-radius: 7.808px; }
.case-availability figcaption strong { font-weight: 700; }
.crop-current-availability .case-image-crop { aspect-ratio: 374.769 / 94.473; }
.crop-current-availability img { width: 110.83%; top: .08%; }
.crop-octus-availability .case-image-crop { aspect-ratio: 374.769 / 92.912; }
.case-lesson { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 680px) {
  .case-hero { height: 260px; }
  .case-study { font-size: 16px; line-height: 26px; }
  .case-title h1 { font-size: 24px; line-height: 32px; }
  .case-title > p { font-size: 18px; line-height: 28px; }
  .case-facts { grid-template-columns: 1fr; gap: 18px; }
  .case-section#overview h2, .case-takeaway { font-size: 22px; line-height: 32px; }
  .case-image-grid, .case-split, .case-availability { grid-template-columns: 1fr; gap: 24px; }
  .crop-action-hierarchy { max-width: 424px; margin-inline: auto; }
  .case-metrics { grid-template-columns: 1fr; gap: 16px; }
  .case-metrics > div { min-height: 0; }
}