/* why section — scoped under .why-wrap.
   White background inherited from .stage (hero.css); no override needed.
   Skipped: *, html/body resets, .stage. */

.why-wrap .section{max-width:1440px;margin-inline:auto;padding:110px 140px 90px}

.why-wrap .section h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:400;color:var(--ink);
            max-width:693px}
.why-wrap .section .lead{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;color:var(--ink);
               max-width:517px;margin-top:24px}

/* two columns: photo 367 left, cards 763 right; gap 30; starts 40 below lead */
.why-wrap .columns{display:flex;gap:30px;align-items:flex-start;margin-top:40px}

/* image 7822:21634 — 367×538, radius 20 */
.why-wrap .photo{flex:none;width:367px;height:538px;border-radius:20px;overflow:clip}
.why-wrap .photo img{display:block;width:100%;height:100%;object-fit:cover}

.why-wrap .right{flex:1;min-width:0}

/* Frame 1416 — 2 cols × 366/367, gap 30 (wraps 3 rows) */
.why-wrap .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}

/* card Frame 1358 — white, border, radius 12, padding 20, h120; row: icon + title, gap 20 */
.why-wrap .card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);padding:20px;
      height:120px;display:flex;align-items:center;gap:20px}
.why-wrap .card .icon{width:80px;height:80px;flex:none}
.why-wrap .card .icon img{display:block;width:100%;height:100%}
.why-wrap .card .title{font-size:var(--fs-body);line-height:24px;font-weight:500;color:var(--ink)}

/* paragraph 7822:61992 — body-sm, muted (lh 21 literal) */
.why-wrap .note{font-size:var(--fs-body-sm);line-height:21px;font-weight:400;color:var(--muted);margin-top:40px}

@media (max-width:1180px){
  .why-wrap .section{padding:64px 56px}
  .why-wrap .columns{flex-direction:column}
  .why-wrap .photo{width:100%;height:auto;aspect-ratio:367/538}
}
@media (max-width:560px){
  .why-wrap .section{padding:40px 20px}
  .why-wrap .columns{align-items:stretch}
  .why-wrap .cards{display:flex;gap:16px;margin-right:-20px;padding-right:20px;
         overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
         -ms-overflow-style:none;scrollbar-width:none}
  .why-wrap .cards::-webkit-scrollbar{display:none}
  .why-wrap .card{flex:0 0 270px;scroll-snap-align:start}
  .why-wrap .note{display:-webkit-box;-webkit-box-orient:vertical;
        -webkit-line-clamp:var(--mobile-text-lines);overflow:hidden}
}