/* Case study pieces: phone screens, charts and the situations list. */
.cs-lead{font-size:clamp(21px,1.4vw + 14px,27px);line-height:1.5;max-width:40ch}
.cs-screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin:44px 0 18px;padding:0;list-style:none}
.cs-screens li{margin:0}
.cs-screens figure,.cs-wide,.cs-phone{margin-left:0;margin-right:0}
.cs-screens img,.cs-phone img{display:block;width:100%;height:auto;border-radius:22px;background:#0a0a0b;border:1px solid var(--line)}
.cs-screens figcaption,.cs-phone figcaption,.cs-wide figcaption{font:400 15px/1.45 var(--mono);color:var(--muted);margin-top:12px}
.cs-wide{margin:28px 0 64px}
.cs-wide img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px}
.cs-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);gap:clamp(28px,4vw,56px);align-items:start;margin:30px 0 56px}
.cs-pair p:last-child{margin-bottom:0}
.cs-phone{margin:0}
.cs-figure{margin:58px 0 70px;padding:clamp(20px,3vw,44px);background:var(--cream);border-top:4px solid var(--cobalt)}
.cs-figure h3{margin:0 0 10px!important}
.cs-figure>p{font-size:clamp(17px,1.5vw,21px);max-width:52ch;margin-bottom:22px}
.cs-chart{background:var(--white);border:1px solid var(--line);padding:clamp(10px,2vw,22px)}
.cs-svg{display:block;width:100%;height:auto;font-family:var(--font)}
.cs-tall{display:none}
.cs-legend{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0!important;margin:18px 0 0!important;font:400 15px/1.4 var(--font)}
.cs-legend li{display:flex;align-items:center;gap:9px;margin:0!important}
.cs-legend svg{flex:none}
.cs-figure figcaption{font:400 clamp(16px,1.3vw,19px)/1.5 var(--font);max-width:62ch;margin-top:18px}
/* Situations: a large number beside each one, the result as a pill. */
.article .cs-steps{list-style:none;padding:0;margin:30px 0 64px;display:grid;gap:clamp(34px,4vw,48px)}
.article .cs-steps li{display:grid;grid-template-columns:clamp(48px,6vw,72px) minmax(0,1fr);gap:clamp(16px,2.4vw,28px);margin:0}
.cs-num{font:600 clamp(48px,5.4vw,72px)/.9 var(--display);color:var(--cobalt)}
.article .cs-said{font:700 clamp(21px,1.6vw + 12px,27px)/1.25 var(--font);letter-spacing:-.02em;margin:0 0 10px}
.article .cs-steps p:not(.cs-said){font-size:clamp(17px,.6vw + 13px,20px);line-height:1.55;margin:0 0 14px;color:#383744}
.cs-pill{display:inline-block;font:600 15px/1 var(--font);padding:9px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ink)}
.cs-pill.is-sent{background:var(--acid);box-shadow:none}
.cs-rules li{margin-bottom:12px}
@media(max-width:760px){
 .cs-wide-only{display:none}
 .cs-tall{display:block}
 .cs-screens{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
 .cs-screens li{scroll-snap-align:start}
 .cs-pair{grid-template-columns:1fr}
 .cs-pair .cs-phone{max-width:300px}
}