/* Predictive performance management page (/solutions/predictive-performance-management/).

   1. The mock-ups sit inside a .ph wrapper, and the shared ".ph span" rule (written for placeholder captions) was
      uppercasing, centring and letter-spacing every span inside them. The "Time to change the outcome" timeline
      was the worst hit: its stage names and notes were squeezed into a narrow centred column.
   2. The wrappers were forced to a fixed aspect ratio (16:7 and 4:3), taller than the mock-up inside, which left
      150-180px of empty space under each card before the next line. They now take the height of their content. */

/* ---- wrappers take the height of the mock-up ---- */
#page#page#page#page > section[screen="Scout anticipates"] .ph--ant,
#page#page#page#page > section[screen="Review draft"] .ph--wide{
  aspect-ratio:auto !important; height:auto !important}

/* ---- "Time to change the outcome" timeline: undo the caption styling ---- */
#pred-tl-mock#pred-tl-mock .ptl-card{height:auto !important}
#pred-tl-mock#pred-tl-mock .ptl-card span{
  text-transform:none !important; letter-spacing:normal !important;
  text-align:left !important; max-width:none !important; line-height:1.4 !important}
#pred-tl-mock#pred-tl-mock .ptl-crumb{font-size:15px !important; font-weight:400 !important}
#pred-tl-mock#pred-tl-mock .ptl-crumb b{font-weight:600 !important}
#pred-tl-mock#pred-tl-mock .ptl-badge{font-size:13px !important; font-weight:600 !important}
#pred-tl-mock#pred-tl-mock .ptl-stage{font-size:17px !important; font-weight:700 !important}
#pred-tl-mock#pred-tl-mock .ptl-note{font-size:14px !important; font-weight:400 !important; line-height:20px !important; color:#6F6A62 !important}
#pred-tl-mock#pred-tl-mock .ptl-stage.now{color:#A83C3C !important}

/* wide screens: the four stages run left to right, so the card fills its width */
@media (min-width:901px){
  #pred-tl-mock#pred-tl-mock .ptl-crumb{font-size:18px !important}
  #pred-tl-mock#pred-tl-mock .ptl-badge{font-size:15px !important; padding:8px 16px !important}
  #pred-tl-mock#pred-tl-mock .ptl-stage{font-size:21px !important}
  #pred-tl-mock#pred-tl-mock .ptl-note{font-size:16px !important; line-height:23px !important}
  #pred-tl-mock#pred-tl-mock .ptl-node{width:14px !important; height:14px !important; margin-top:4px !important}
  #pred-tl-mock#pred-tl-mock .ptl-body{padding:46px 44px 52px !important}
  #pred-tl-mock#pred-tl-mock .ptl-trail{flex-direction:row !important; justify-content:flex-start !important; gap:0 !important}
  #pred-tl-mock#pred-tl-mock .ptl-item{flex:1 1 0 !important; min-width:0 !important; flex-direction:column !important; gap:16px !important; padding-right:28px}
  #pred-tl-mock#pred-tl-mock .ptl-thread{left:28px !important; right:10px !important; top:11px !important; bottom:auto !important; width:auto !important; height:1px !important}
}

/* phone and tablet: keep the vertical trail the mock-up was drawn with */
@media (max-width:900px){
  #pred-tl-mock#pred-tl-mock .ptl-body{padding:24px 24px !important}
  #pred-tl-mock#pred-tl-mock .ptl-trail{gap:22px !important}
  #pred-tl-mock#pred-tl-mock .ptl-thread{bottom:-22px !important}
}
@media (max-width:640px){
  #pred-tl-mock#pred-tl-mock .ptl-crumb{font-size:12px !important}
  #pred-tl-mock#pred-tl-mock .ptl-badge{font-size:10px !important}
  #pred-tl-mock#pred-tl-mock .ptl-stage{font-size:14px !important}
  #pred-tl-mock#pred-tl-mock .ptl-note{font-size:12px !important; line-height:17px !important}
  #pred-tl-mock#pred-tl-mock .ptl-body{padding:18px 20px !important}
}

/* ---- "Focus attention" Slack card: the three context lines ran together as one paragraph ----
   (the stacked, left-ruled style existed only for cards inside .brief; this card is not in one) */
#page#page#page#page .slk--thread .slk-ctx{
  display:flex !important; flex-direction:column !important; gap:3px !important;
  margin-top:9px !important; padding-left:11px !important; border-left:4px solid #DDDDDE !important}
#page#page#page#page .slk--thread .slk-ctx > span{
  display:block !important; font-size:12.5px !important; line-height:20px !important; color:#616061 !important}
/* a space between each label and its sentence ("Focus Know where to look.") */
#page#page#page#page .split2--slack .does li b{margin-right:.35em}

/* Spacing between sections: each section had about 100px of padding above and below, so two neighbouring sections left
   about 200px of empty space between their contents. They now leave about 128px, matching the home page (ticket 71).
   Desktop only; phones keep their own spacing. */
@media (min-width:901px){
  #page#page#page#page > section[screen="Botless capture"],
  #page#page#page#page > section[screen="Drivers"],
  #page#page#page#page > section[screen="From Slack"],
  #page#page#page#page > section[screen="Review draft"],
  #page#page#page#page > section[screen="Scout anticipates"],
  #page#page#page#page > section[screen="Why it works"]{padding-bottom:64px !important}
  #page#page#page#page > section[screen="Drivers"],
  #page#page#page#page > section[screen="From Slack"],
  #page#page#page#page > section[screen="Review draft"],
  #page#page#page#page > section[screen="Scout anticipates"],
  #page#page#page#page > section[screen="Why it works"]{padding-top:64px !important}
}