.case-hero { padding: clamp(56px, 8vw, 110px) 0; }
.case-hero-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 920px) { .case-hero-grid { grid-template-columns: 1fr; } }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.22rem); color: var(--ink-2); max-width: 38em; }
.facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 40px; list-style: none; padding: 24px 0 0; margin: 30px 0 0; border-top: 1px solid var(--night-line); }
.facts span { display: block; font: 500 .68rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .28em; color: var(--brass); margin-bottom: 10px; }
.facts strong { font: 500 1.35rem/1 var(--f-head); letter-spacing: -.02em; }
@media (max-width: 560px) { .facts { grid-template-columns: repeat(2, auto); } }

.buy { padding: 32px; position: sticky; top: 92px; color: var(--char); }
.buy p, .buy li { color: var(--ink-2); }
.buy strong { color: var(--char); }
.stamp--file { color: var(--ink-2); font-size: .8rem; margin-bottom: 14px; }
.buy-title { font-size: 1.8rem; margin-bottom: 6px; }
.buy-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.buy-price strong { font: 600 3rem/1 var(--f-head); letter-spacing: -.04em; }
.buy-price span { color: var(--ink-2); }
.buy-btn { width: 100%; margin: 6px 0 12px; }
.buy-note { font-size: .92rem; color: var(--ink-2); background: var(--gray); padding: 10px 12px; border-radius: var(--r-sm); }
.buy-list { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; color: var(--ink-2); font-size: .97rem; }
.buy-list li::before { content: "✓"; color: var(--char); font-weight: 800; margin-right: 8px; }
.buy-have { font-size: .95rem; margin: 0; padding-top: 14px; border-top: 1px dashed var(--gray-2); }

.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .roles { grid-template-columns: 1fr; } }
.role { padding: 36px; }
.role-ico { width: 64px; height: 64px; border-radius: 0; background: var(--tape); display: grid; place-items: center; margin-bottom: 18px; }
.role-ico svg { width: 38px; }
.role h3 { margin-top: 14px; font-size: 1.6rem; }
.role p { color: var(--ink-2); }
.best { font-size: .85rem; color: var(--mute); margin: 0; text-transform: uppercase; letter-spacing: .08em; }

.poi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 960px) { .poi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .poi { grid-template-columns: 1fr; } }
.poi-card { border-top: 1px solid var(--brass-ink); padding-top: 22px; }
.poi-tag { font: 500 .68rem/1 var(--f-body); color: var(--brass-ink); text-transform: uppercase; letter-spacing: .28em; }
.poi-card h3 { margin: 8px 0; }
.poi-card p { color: var(--ink-2); font-size: .98rem; }

.need { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
@media (max-width: 760px) { .need { grid-template-columns: 1fr; } }
.need-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.need-list li { background: #fff; border: 1px solid var(--gray-2); border-radius: var(--r-sm); padding: 16px 18px; color: var(--ink-2); }
.need-list strong { color: var(--char); }

.final-cta { text-align: center; }
.final-cta h2 { max-width: 18ch; margin: 0 auto 28px; }
.content-note { color: var(--mute); font-size: .92rem; margin-top: 20px; }

.dark .lede { color: var(--night-muted); }

/* night versions of the case page cards */
.dark .paper { background: transparent; border-color: var(--night-line); }
.dark .role p, .dark .best { color: var(--night-muted); }
.dark .role-ico { background: transparent; border: 1px solid var(--night-line); }
.dark .role-ico svg * { stroke: var(--brass); }
.dark .role .chip { border-color: var(--night-line); color: var(--brass); }
.dark .need-list li { background: transparent; border-color: var(--night-line); color: var(--night-muted); }
.dark .need-list strong { color: var(--night-text); }
.dark .content-note { color: var(--night-muted); }
.dark .buy { color: var(--night-text); }
.dark .buy p, .dark .buy li { color: var(--night-muted); }
.dark .buy strong, .dark .buy-title { color: var(--night-text); }
.dark .buy-note { background: #ffffff0d; color: var(--night-muted); }
.dark .buy-list li::before { color: var(--brass); }
.dark .buy-have { border-top-color: var(--night-line); }
.dark .stamp--file { color: var(--brass); }
.dark .buy-price span { color: var(--night-muted); }
.buy-price strong { font: 700 3rem/1 var(--f-name); letter-spacing: 0; }
body.mid .need-list li { background: color-mix(in srgb, var(--night) 22%, transparent); }