/* page: How it works (WEB-18 S3); loaded by features.html only. The shell, rows, screens and (i) are in site.css */
.rows .pill,.rows .aside{grid-column:2;grid-row:1;align-self:start;margin-top:2px}
.rows .aside{display:flex;align-items:center;gap:var(--s1);margin-top:0}
.rows .aside .pill{margin-top:0}
.rows .aside .info{margin:-10px -6px -10px 0}
.rows>li.planned .claim{color:var(--text-secondary)}
.rows-narrow{max-width:760px}
.split-pic{align-self:start}
.excerpt{width:100%;max-width:420px;margin:0}
.excerpt .thread{padding:var(--s5);border-radius:24px;background:var(--bg-surface);box-shadow:var(--frame-ring)}
.excerpt figcaption{margin-top:var(--s4);font:600 1.0625rem/1.4 var(--font-family);text-align:center}
.outcomes-row{display:grid;gap:var(--s5)}
.outcomes-row li{display:grid;justify-items:start;gap:var(--s2)}
.outcomes-row .line{margin:0}
.fold{border-block:1px solid var(--border-subtle)}
.fold summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;list-style:none;cursor:pointer;font:var(--type-body-strong)}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(45deg)}
.fold[open] summary::after{transform:rotate(-135deg)}
.fold-grid{display:grid;gap:var(--s8);padding:var(--s4) 0 var(--s8)}
.sub{margin-bottom:var(--s3);color:var(--text-tertiary);font:var(--type-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase}
.plain{display:grid;gap:var(--s3);color:var(--text-secondary);font:400 1.0625rem/1.5 var(--font-family)}
.plain li{padding-left:var(--s4);position:relative}
.plain li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--text-tertiary)}
@media (min-width:600px){
.outcomes-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
.split-pic{position:sticky;top:96px}
.outcomes-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
.fold-grid{grid-template-columns:1fr 1fr;gap:96px}
}
@media (prefers-reduced-motion:no-preference){
.fold summary::after{transition:transform var(--motion-fast) var(--ease-out)}
}