/* why: centrepiece of "What you get": one tinted panel, items split by space only. */
.csys{background:var(--accent-tint);border:1px solid var(--line);border-radius:var(--r-container);padding:var(--s-48);margin:0 0 var(--s-64)}
.csys__head{max-width:var(--measure);margin:0 0 var(--s-32)}
.csys__head h3{font-size:var(--t-28);line-height:1.2;font-weight:500;margin:0 0 var(--s-8)}
.csys__head p{font-size:var(--t-20);line-height:1.5;color:var(--ink-2);margin:0}
.csys__list{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s-48)}
.csys__item{min-width:0;display:flex;flex-direction:column}
.csys__item .sys-shot{margin:0 0 var(--s-24)}
.csys__item .sys-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:var(--field)}
.csys__item h4{font-size:var(--t-20);line-height:1.25;font-weight:500;margin:0 0 var(--s-8)}
.csys__item p{color:var(--ink-2);line-height:1.6;margin:0 0 var(--s-12)}
.csys__more{align-self:flex-start;margin-top:auto;padding:var(--s-8) 0;font:500 var(--t-14)/1.4 var(--sans);color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.csys__more:hover{color:var(--accent-ink-hover)}
.csys__more--quiet{color:var(--ink-2)}
.csys__more--quiet:hover{color:var(--ink)}

/* why: sheet on phones, centred panel on desktop; body scrolls inside (as lp-modal.css). */
dialog.csm{padding:0;border:1px solid var(--line);border-radius:var(--r-container);background:var(--bg);color:var(--ink);width:min(60rem,calc(100% - 48px));max-width:none;max-height:min(52rem,calc(100dvh - 48px));overflow:hidden}
dialog.csm[open]{display:flex;flex-direction:column}
dialog.csm::backdrop{background:rgba(22,30,47,.6)}
html.csm-lock{overflow:hidden}
.csm__bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);padding:var(--s-8) var(--s-8) var(--s-8) var(--s-24);border-bottom:1px solid var(--line);background:var(--tint)}
.csm__t{margin:0;font:500 var(--t-16)/1.3 var(--sans);color:var(--ink)}
.csm__x{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--r-control);background:none;color:var(--ink-2);cursor:pointer}
.csm__x:hover{color:var(--ink);background:var(--line)}
.csm__x svg{width:20px;height:20px}
.csm__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.csm__body:focus-visible{outline-offset:-2px}
.csm__head{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-48);align-items:start;padding:var(--s-48) var(--s-32) var(--s-16)}
.csm__head h2{font-size:var(--t-28);line-height:1.2;margin:0 0 var(--s-16)}
.csm__lead{font-size:var(--t-18);line-height:1.5;color:var(--ink-2);margin:0}
.csm__head .lp-facts{max-width:none}
.csm .wrap{padding-inline:var(--s-32)}
.csm .band{padding:var(--s-32) 0}
.csm .sys-band h2{font-size:var(--t-28);line-height:1.2;margin:0 0 var(--s-24)}
.csm .sys-band--shot{padding-top:0;border-top:0}
.csm .lp-lede{font-size:var(--t-16);line-height:1.6;margin-bottom:var(--s-12)}
.csm .sys-steps{grid-template-columns:1fr 1fr 1fr}
.csm__foot{display:flex;flex-wrap:wrap;gap:var(--s-24);padding:var(--s-16) var(--s-32) var(--s-24);border-top:1px solid var(--line)}
@media(max-width:900px){
.csys{padding:var(--s-32)}
.csys__list{grid-auto-flow:row;grid-auto-columns:auto;gap:var(--s-32)}
.csm__head{grid-template-columns:1fr;gap:var(--s-24)}
}
@media(max-width:600px){
.csys{padding:var(--s-24);margin-bottom:var(--s-48)}
.csys__head p{font-size:var(--t-18)}
dialog.csm{width:100%;height:100dvh;max-height:none;border:0;border-radius:0}
.csm__bar{padding-left:var(--s-16)}
.csm__head{padding:var(--s-32) var(--s-16) var(--s-8)}
.csm .wrap{padding-inline:var(--s-16)}
.csm__foot{padding-inline:var(--s-16)}
}