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

/* ---------- hero (image left) ---------- */
.hero{padding:22px 0 30px;background:var(--paper)}
.hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center}
.hero-lead{margin-top:18px;font-size:16.5px;color:var(--stone);max-width:58ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-compare figure{position:relative;margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.hero-compare img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hero-compare figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--white);background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-compare{order:-1}}

.section-white{background:var(--white)}
.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 (4-up, portrait) ---------- */
.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}

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