/* page: trades, demo and about (WEB-15 S6, WEB-18 S5 and S6); loaded by the three trade pages, demo.html and about.html only. The shell, rows, photos and (i) are in site.css */
.trade-hero{display:grid;gap:var(--s8);align-items:center}
.trade-hero .page-title{margin-top:var(--s3)}
.trade-hero .lede{margin-top:var(--s4);max-width:28em}
.trade-hero .actions{margin-top:var(--s6)}
.hero-photo{aspect-ratio:4/3;border-radius:28px}
.call-note{max-width:720px;margin-top:var(--s6);color:var(--text-secondary);font:var(--type-callout)}
.two-col{display:grid;gap:var(--s6)}
.end-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5);padding-block:var(--s8);border-top:1px solid var(--border-subtle)}
.end-row .title{font:var(--type-title);letter-spacing:var(--tracking-title)}
.sec-last{padding-bottom:var(--s16)}
.demo-head .lede{margin-top:var(--s3)}
.about-col{max-width:640px}
.about-col .page-title{margin-top:0}
.about-col .title{margin-top:var(--s10)}
.about-why{display:grid;gap:var(--s4);margin-top:var(--s4);font:var(--type-lede);text-wrap:pretty}
.about-who{margin-top:var(--s4);font:var(--type-lede)}
.about-col .more{margin-top:var(--s8)}
@media (min-width:960px){
 .trade-hero{grid-template-columns:7fr 5fr;gap:var(--s16)}
 .two-col{grid-template-columns:5fr 7fr;gap:var(--s12)}
 .sec-last{padding-bottom:96px}
}