/* AI-Author: ZCode (Z.ai ZCode) — Vision page. Layout only; the shared design
   system (base.css) provides sections, type, buttons, motion. */

.page-hero { padding-top: calc(var(--section-pad) + 3rem); }

/* Section 2: copy left, image right. */
.problem-grid { align-items: center; }
.problem-copy { grid-column: span 7; }
.problem-media { grid-column: span 5; aspect-ratio: 4 / 5; }

/* Section 3: the big moment — two large serif lines with generous space. */
.belief .mega { max-width: 14ch; }
.belief-second { margin: clamp(1.5rem, 5vh, 3.5rem) 0 0; }

/* Section 4: copy left, image right. */
.era-grid { align-items: center; }
.era-copy { grid-column: span 7; }
.era-media { grid-column: span 5; aspect-ratio: 4 / 5; }
.era-close { margin: 2.5rem 0 0; }

/* Section 5: closing line after the lede. */
.begin-stop { margin: 3rem 0 0; }

@media (max-width: 860px) {
  .problem-copy, .problem-media, .era-copy, .era-media { grid-column: 1 / -1; }
  .problem-media, .era-media { margin-top: 3rem; }
}

/* "What we believe": the brain image as a quiet background on the right, so the
   big statement keeps the left side clear (moved here 2026-10-06). */
.belief { position: relative; overflow: hidden; }
.belief-media { left: auto; width: min(52%, 46rem); }
.belief-media img { object-position: center 30%; opacity: .5; }
.belief-media::after { background: linear-gradient(90deg, var(--black), rgba(0,0,0,0) 45%), linear-gradient(180deg, rgba(0,0,0,0) 70%, var(--black)); }
@media (max-width: 860px) {
  .belief-media { width: 100%; }
  .belief-media img { opacity: .28; }
  .belief-media::after { background: linear-gradient(180deg, rgba(0,0,0,.35), var(--black) 96%); }
}
/* Phones: drop the browser's default 40px figure side margins (Codex mobile audit 2026-10-13). */
@media (max-width: 860px) { .problem-media, .era-media { margin-left: 0; margin-right: 0; } }
@media (max-width: 860px) { .problem-media, .era-media { margin-top: 2rem; } }