@import url("/css/base.css");

/* ---------- hero (image right) ---------- */
.hero-banner{padding:0 0 32px;background:var(--white)}
.hero-banner .hero-img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 30%;border-radius:0 0 18px 18px}
.hero-banner .hero-copy{max-width:70ch;margin:24px auto 0}
.hero-lead{margin-top:16px;font-size:16.5px;color:var(--stone);max-width:58ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
@media (max-width:860px){.hero-banner .hero-img{aspect-ratio:4/3}}

.section-lead{color:var(--stone);max-width:64ch;margin-top:10px;margin-bottom:24px}
.diag-grid .card{display:flex;flex-direction:column;gap:8px}

/* ---------- photo band (2x2, portrait) ---------- */
.photo-band{max-width:640px;margin:0 auto}
.photo-band figure img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:6px}

.tech-section{background:var(--paper)}
.tech-section p{max-width:76ch;color:var(--ink);margin-bottom:16px}
.tech-section p:last-child{margin-bottom:0}

.related-links{background:var(--white)}

.faq-section{background:var(--paper)}