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

.hero{padding:16px 0 24px;background:var(--white)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero-lead{margin-top:18px;font-size:16.5px;color:var(--stone);max-width:58ch}
.hero-media{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px}
.hero-img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}

.section-lead{color:var(--stone);max-width:64ch;margin-top:10px;margin-bottom:24px}

.effect-grid{background:var(--paper)}
.effect-grid .table-wrap{margin-top:24px}
.concept{background:var(--white)}
.concept p{max-width:70ch;margin-top:14px;color:var(--ink)}
.concept p:first-of-type{margin-top:18px}

.before-after-section{background:var(--paper)}
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ba-image-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ba-card{background:var(--white);border:1px solid var(--hairline);border-radius:12px;padding:18px}
.ba-desc{margin-top:12px;color:var(--stone);font-size:14px}
@media (max-width:760px){.ba-grid{grid-template-columns:1fr}}

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