/* Dashboards and more page. Loaded after styles.css, uses its tokens. */
.page-head { padding: 72px 0 40px; }
.page-head h1 { font-size: clamp(34px, 4.4vw, 50px); }
.page-head .lede { margin-bottom: 0; }
.redaction-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 15px; color: var(--fg-soft); }
.redaction-note .swatch { display: inline-block; width: 44px; height: 14px; border-radius: 3px; background: #c3cad3; }

.case { padding: 72px 0; }
.case-head { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; margin-bottom: 36px; }
@media (max-width: 860px) { .case-head { grid-template-columns: 1fr; gap: 12px; } }
.case-head .kicker { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--check); font-weight: 600; margin-bottom: 8px; }
.case-head p { color: var(--fg-soft); margin: 0 0 12px; }

.shot { margin: 0 0 40px; }
.shot a { display: block; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgb(14 23 33 / 6%), 0 8px 24px rgb(14 23 33 / 6%); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 12px; color: var(--fg-soft); font-size: 16px; max-width: 52em; }
.shot figcaption strong { color: var(--fg); }
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { .shot-pair { grid-template-columns: 1fr; } }

.placeholder { border: 2px dashed var(--hairline); border-radius: 10px; padding: 48px 24px; text-align: center; color: var(--muted); background: var(--surface); }

.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .more-grid { grid-template-columns: 1fr; } }
.more-grid .offer { padding: 28px; }
.more-grid .offer h3 { font-size: 21px; }

.cta-band { text-align: center; }
.cta-band .actions { justify-content: center; }