/* The meter against the plan. The page wears the fleet wall's classes (.fw)
   so the two pages look like one family, and everything added here is scoped
   under .pm so it cannot reach any other page. */
.pm .wall{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:22px 18px}
.pm .cell .nm{height:2.6em}
.pm .cell .mw{min-height:2.7em;line-height:1.35}
.pm .cell .mw.hot{color:var(--ink,#005871);font-weight:600}
.pm .cell svg{margin-top:6px;border-radius:2px}
.pm .key .ln{display:inline-block;width:18px;height:0;border-top:2px solid;margin-right:6px;vertical-align:4px}
.pm .detail h3 a{color:inherit;text-decoration:underline;text-decoration-color:var(--hair,#DCE4E2);text-underline-offset:3px}
.pm .detail h4{font-size:15px;font-weight:600;margin:26px 0 8px}
.pm .detail .ctl button[disabled]{opacity:.45;cursor:default}
.pm #pm-chart svg{display:block;width:100%;height:auto;font-family:inherit}
.pm .read{font-size:13px;color:var(--muted,#4E6B76);margin:6px 0 0;min-height:1.4em}
.pm .prods{margin:0;padding-left:18px;font-size:14px;line-height:1.55;max-width:46em}
.pm .prods li{margin:0 0 4px}
.pm .tscroll{overflow-x:auto}
@media(max-width:700px){
  .pm .wall{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
/* The hero and the page body share one outer width and the site's own side
   padding, so their left edges meet at every screen size. The fleet wall's .fw
   drops the padding, which is why .fw sits inside a .wrap here and not on it. */
.pmhero,.pmwide{max-width:1176px}
.pmhero h1{max-width:24em}