.screen-hero { grid-template-columns: minmax(0, 860px) 210px; }
.walkthrough { max-width: 1500px; margin: auto; padding: 0 clamp(20px, 5vw, 72px) 100px; }
.walkthrough-section { scroll-margin-top: 90px; margin-bottom: 80px; }
.walkthrough-heading { max-width: 850px; margin: 0 auto 32px; text-align: center; padding: 30px; border-radius: 24px; background: rgba(255,255,249,.94); box-shadow: 0 18px 45px rgba(8,75,53,.12); }
.walkthrough-heading p:last-child { font-size: 1.08rem; line-height: 1.65; }
.screen-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 24px 0; padding: 22px; border: 1px solid rgba(8,100,71,.16); border-radius: 24px; background: rgba(255,255,249,.95); box-shadow: 0 16px 40px rgba(8,75,53,.11); }
.pair-copy { grid-column: 1/-1; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.pair-copy span { grid-row: 1/3; display: grid; place-items: center; min-width: 70px; height: 70px; border-radius: 50%; color: white; background: var(--green); font-weight: 900; }
.pair-copy h3 { font-family: Georgia,serif; font-size: 1.65rem; margin: 0; }
.pair-copy p { margin: 4px 0 0; line-height: 1.6; color: #496656; }
.screen-pair figure { margin: 0; overflow: hidden; border: 1px solid rgba(8,100,71,.2); border-radius: 16px; background: #061d16; }
.screen-pair figcaption { padding: 10px 14px; color: white; background: var(--green); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.screen-pair a { display: block; }
.screen-pair img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: contain; background: #050505; transition: transform .2s ease; }
.screen-pair a:hover img { transform: scale(1.015); }
@media (max-width: 850px) { .screen-hero { grid-template-columns: 1fr; } .screen-pair { grid-template-columns: 1fr; } .pair-copy { grid-template-columns: 56px 1fr; } .pair-copy span { min-width: 52px; height: 52px; font-size: .82rem; } .pair-copy h3 { font-size: 1.35rem; } }