/* Benefits section: six items */
.intro-section .benefits{row-gap:56px}
@media(max-width:900px){.intro-section .benefits{grid-template-columns:repeat(2,1fr);gap:40px 28px}.intro-section .benefits article{padding-left:24px}.intro-section .benefits h3{font-size:21px}.intro-section .benefits p{font-size:14px}}
@media(max-width:650px){.intro-section .benefits{grid-template-columns:1fr;gap:27px}.intro-section .benefits article{padding:3px 0 3px 65px}.intro-section .benefits h3{font-size:23px}}

/* Yellow underline in the benefits heading, matching the hero's */
.intro-section h2 .ul,.system-section h2 .ul{position:relative;white-space:nowrap}
.intro-section h2 .ul:after,.system-section h2 .ul:after{content:'';position:absolute;left:0;right:0;bottom:-8px;background:var(--yellow);height:5px;border-radius:50%;transform:rotate(-1deg)}
.intro-section h2{text-wrap:balance}
@media (max-width:650px){.intro-section h2 .ul:after,.system-section h2 .ul:after{height:4px;bottom:-6px}}