/* Verikai case study. Loaded after home-haptic.css and pages-haptic.css; adds the
   screen and artifact figures, the four-step marketing story, and the results columns. */

.page-hero__logo--icon { width: 64px; height: 64px; border-radius: 14px; }

/* Screens and artifacts: two-up grid, captions under each image */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; margin-top: 72px; }
.shot { margin: 0; }
.shot--wide { grid-column: 1 / -1; }
.shot img { display: block; width: 100%; height: auto; background: #ece9f5; }
.shot figcaption { max-width: 64ch; margin-top: 14px; font-size: 15px; line-height: 1.45; letter-spacing: -0.01em; color: var(--muted); }
.shot figcaption b { font-weight: 600; color: var(--ink); }
.sec--black .shot figcaption b, .sec--brown .shot figcaption b { color: #f0f0f0; }
.sub { margin: 120px 0 0; max-width: 980px; font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.1; letter-spacing: -0.05em; }
.sub + .prose { margin-top: 40px; }

/* Starting problem → intervention → execution → result */
.steps { --cols: 4; list-style: none; padding: 0; margin-top: 72px; }
.steps .step-label { font-size: 14px; letter-spacing: -0.02em; color: var(--muted); }
.steps ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.45; color: var(--body); }
.steps .figure { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.06em; }

/* Results, attributed by source */
.attributed, .cols--3 { --cols: 3; }
.attributed .figure { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 4vw, 60px); line-height: 1; letter-spacing: -0.06em; }
.attributed .figure + p { margin-top: -4px; }

@media (max-width: 991px) {
    .steps { --cols: 2; }
    /* keep three columns on tablets: undo the shared two-column border rules */
    .cols--3 > :nth-child(2n), .attributed > :nth-child(2n) { border-right: 1px solid var(--line); }
    .cols--3 > :nth-child(n + 3), .attributed > :nth-child(n + 3) { border-top: 0; }
    .cols--3 > :last-child, .attributed > :last-child { border-right: 0; }
}

@media (max-width: 767px) {
    .steps, .attributed, .cols--3 { --cols: 1; }
    .cols--3 > *, .attributed > * { border-right: 0; }
    .cols--3 > * + *, .attributed > * + * { border-top: 1px solid var(--line); }
    .shots { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
    .sub { margin-top: 80px; }
}

/* Platform composite under the hero */
.page-media--shot { margin: 0; background: #a9a5c7; }
.page-media--shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }