/* v22p.3: 'Three ways to read the price' fits one screen on desktop (>700px). Mobile untouched.
   Visuals x0.80 (lens width, chart, big figures, chips); text x0.95; spacing tightened.
   Chart also caps to the viewport height so the whole section fits on 800px-tall screens. */
@media (min-width:701px){
.enhanced #lenses .lens-grid{max-width:832px!important}                                  /* 1040 x .80 */
#lenses .ix-chart{height:clamp(200px,min(27.2vw,calc(100vh - 590px)),320px);margin-top:14px} /* 400 x .80, vh-capped */
.enhanced #lenses .lens .figure,.enhanced #lenses .prob-pair strong{font-size:clamp(45px,4.8vw,67px)} /* 84 x .80 */
#lenses .lens .figure{margin-top:6px!important}
#lenses .lens h3{font-size:11.4px;margin-bottom:8px!important}
#lenses .pa-change{margin-top:6px!important}
#lenses .tf-chips{zoom:.8}
#lenses .pa-stats{font-size:11.4px;margin-top:12px;padding-top:10px}
#lenses .chapter-heading h2{font-size:calc(clamp(40px,3.6vw,52px)*.95)!important}           /* x .95 */
#lenses .chapter-heading>p{font-size:14.25px;margin-top:10px!important}
#lenses .chapter-heading>.wordmark{font-size:20.9px;margin-bottom:8px!important}
#lenses .controls{zoom:.9}
#lenses .lens-explanation{font-size:19px!important;margin-top:12px!important;min-height:0!important}
#lenses .disclosure{margin-top:8px!important;font-size:10.45px}
#lenses .scene-body{padding-top:20px!important;padding-bottom:20px!important}
#lenses .chapter-heading{margin-bottom:14px!important}
#lenses .controls{margin-bottom:14px!important}
}
/* v22.1: widen the lenses panel ~18% (832 -> 980px); chart grows with the viewport where it fits. */
@media (min-width:701px){
.enhanced #lenses .lens-grid{max-width:min(980px,calc(100vw - 120px))!important}
#lenses .ix-chart{height:clamp(200px,min(27.2vw,calc(100vh - 556px)),377px)}
#lenses .scene-body{padding-top:16px!important;padding-bottom:16px!important}
#lenses .lens-explanation{margin-top:10px!important}
}