/* why: Systems preview; reuses car.css and lp.css, adds sub-nav, hero, rows, split, closer.
   trap: lp.css .lp-form has grid-area:form; reset it inside our own closer grid. */
.sys-nav{border-bottom:1px solid var(--line);background:var(--bg)}
.sys-nav .wrap{display:flex;align-items:center;gap:var(--s-32);min-height:56px}
.sys-nav__t{font:500 var(--t-16)/1 var(--serif);color:var(--ink);white-space:nowrap}
.sys-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s-24);overflow-x:auto}
.sys-nav a{display:block;padding:var(--s-16) 0;color:var(--ink-2);font-size:var(--t-14);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.sys-nav a:hover{color:var(--ink)}
.sys-nav a[aria-current]{color:var(--ink);font-weight:500;border-bottom-color:var(--accent-ink)}
.sys-hero__grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-64);align-items:end}
.sys-band h2{margin-bottom:var(--s-32)}
.sys-grid--2{grid-template-columns:1fr 1fr}
.sys-rows{border-bottom:1px solid var(--line-strong)}
.sys-row{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-64);padding:var(--s-48) 0;border-top:1px solid var(--line-strong)}
.sys-row h3{font-size:var(--t-28);line-height:1.2;font-weight:500;margin:0 0 var(--s-12)}
.sys-row p{color:var(--ink-2);line-height:1.6;max-width:28rem;margin:0 0 var(--s-24)}
.sys-row ul,.sys-split>ul{list-style:none;margin:0;padding:0}
.sys-row li,.sys-split li{padding:var(--s-12) 0;border-top:1px solid var(--line);line-height:1.5}
.sys-row li:first-child,.sys-split li:first-child{border-top:0;padding-top:0}
.sys-split{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-64);align-items:start}
.sys-split h2{margin-bottom:var(--s-24)}
.sys-split .lp-lede{margin-bottom:var(--s-16)}
.sys-steps{grid-template-columns:repeat(5,1fr)}
.sys-closer{background:var(--tint)}
.sys-closer__grid{display:grid;grid-template-columns:6fr 6fr;gap:var(--s-64);align-items:start}
.sys-closer .lp-form{grid-area:auto;background:var(--bg)}
.sys-band--shot{padding-top:0}
.sys-shots{display:grid;gap:var(--s-32);justify-items:center}
.sys-shot{margin:0;max-width:100%}
.sys-shot img{display:block;max-width:100%;height:auto}
.sys-shot--window img{border:1px solid var(--line);border-radius:var(--r-container);box-shadow:0 1px 3px rgba(22,30,47,.08)}
.sys-shot--device{width:100%;background:var(--tint);border-radius:var(--r-container);padding:var(--s-48) var(--s-24);display:flex;justify-content:center}
.sys-shot--device img{width:auto;max-height:640px}
@media(max-width:600px){.sys-shot--device.sys-shot--m{padding:var(--s-24) 0}.sys-shot--device.sys-shot--m img{width:100%;max-height:none}}
.sys-row__side{min-width:0}
.sys-row__side .sys-shot{margin-bottom:var(--s-24)}
.sys-row__side .sys-shot img{width:100%}
@media(max-width:900px){
.sys-hero__grid,.sys-row,.sys-split,.sys-closer__grid{grid-template-columns:1fr;gap:var(--s-32)}
.sys-steps{grid-template-columns:1fr 1fr}
.sys-row{padding:var(--s-32) 0}
}
@media(max-width:760px){
.sys-nav .wrap{flex-direction:column;align-items:flex-start;gap:0;padding-top:var(--s-12)}
.sys-nav ul{max-width:100%;gap:var(--s-16)}
.sys-grid--2,.sys-steps{grid-template-columns:1fr}
.sys-row h3{font-size:var(--t-20)}
}