/* Illustrated service benefits: shared service page treatment. */
.service-benefits{padding-block:88px;scroll-margin-top:110px}
.service-benefits h2{max-width:850px;margin:0 auto 64px;text-wrap:balance}
.service-benefits .why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px;margin-bottom:0}
.service-benefits .why-card,.service-benefits .why-card:hover{padding:0;background:transparent;border:0;border-radius:0;transition:none;min-width:0}
.service-benefits .benefit-art{position:relative;color:var(--amber);border-bottom:1px solid var(--rule);background:radial-gradient(ellipse at 50% 80%,rgba(240,192,116,.055),transparent 70%);padding:34px 0 12px}
.service-benefits .benefit-index{position:absolute;top:0;left:0;font-family:var(--sans,sans-serif);font-size:10px;letter-spacing:.2em;color:var(--ink-dim)}
.service-benefits svg{display:block;width:100%;height:auto;overflow:visible;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.service-benefits .draft{stroke-opacity:.5}
.service-benefits .fine{stroke-opacity:.3;stroke-width:1;stroke-dasharray:3 5}
.service-benefits .detail{stroke-opacity:.9}
.service-benefits .beam{fill:currentColor;fill-opacity:.12;stroke-opacity:.15}
.service-benefits .points{fill:currentColor;stroke:none}
.service-benefits .control{fill:currentColor;fill-opacity:.08;stroke-opacity:.85}
.service-benefits .lens{fill:currentColor;fill-opacity:.16}
.service-benefits .benefit-copy{padding-top:25px}
.service-benefits .why-card h3{font-size:29px;line-height:1.15;margin-bottom:16px;text-wrap:balance}
.service-benefits .why-card p{font-size:16px;line-height:1.75;max-width:55ch;margin:0}
@media(prefers-reduced-motion:no-preference){
 .service-benefits .is-revealed .step-a{animation:benefit-illuminate 1.4s ease both}
 .service-benefits .is-revealed .step-b{animation:benefit-illuminate 1.4s .25s ease both}
 .service-benefits .is-revealed .step-c{animation:benefit-illuminate 1.4s .5s ease both}
 @keyframes benefit-illuminate{from{opacity:.12}to{opacity:1}}
}
@media(max-width:700px){
 .service-benefits{padding:56px 24px}
 .service-benefits h2{font-size:34px;margin-bottom:42px;text-align:left}
 .service-benefits .why-grid{grid-template-columns:1fr;gap:44px}
 .service-benefits .why-card h3{font-size:27px}
 .service-benefits .benefit-art{padding-top:26px}
}