/* Retention page (/solutions/improve-employee-retention/).

   The "Meet Scout" band had lost its right-hand column, so the page forced the band into three columns. The column is
   back (the same boxes as on the other pages), so the band uses the same five columns as the other pages again. */
@media (min-width:901px){
  html body #shell #page#page#page#page#page#page .scb .scb-flow{
    grid-template-columns:minmax(0,1.05fr) 118px minmax(0,.62fr) 84px minmax(0,1.3fr) !important}
}

/* ---- Mock-ups (ticket 44) ----
   The three mock-ups (Watch list, Team, Retention forecast) sit in a .ph wrapper, and the shared ".ph span" rule (written
   for placeholder captions) uppercased, centred and letter-spaced every span in them and forced them to 16px: names and
   column headings wrapped onto two lines, and the Watch list card spilled out of its box and under the line below it.
   Their wrappers were also forced to a fixed ratio that did not match the card inside (empty space under the card, or
   the card running over the next line). So: the caption styling is undone, each card takes its own height, and the text
   is a little larger on desktop because the page is drawn big and scaled down (--ms is the text scale). */
#watch-mock#watch-mock, #orf-ret-mock#orf-ret-mock, #ret-risk-mock#ret-risk-mock{--ms:1}
@media (min-width:901px){
  #watch-mock#watch-mock, #orf-ret-mock#orf-ret-mock, #ret-risk-mock#ret-risk-mock{--ms:1.3}
}
@media (max-width:640px){
  #watch-mock#watch-mock, #orf-ret-mock#orf-ret-mock, #ret-risk-mock#ret-risk-mock{--ms:.88}
}

/* wrappers and cards take the height of their content */
#page#page#page#page > section[screen="Botless capture"] .ph--wide,
#page#page#page#page > section[screen="Review draft"] .ph--wide,
#page#page#page#page > section[screen="Scout anticipates"] .ph--ant{
  aspect-ratio:auto !important; height:auto !important; max-width:none !important}
#watch-mock#watch-mock .watch-card, #orf-ret-mock#orf-ret-mock .orf-card, #ret-risk-mock#ret-risk-mock .ret-card{
  height:auto !important; min-height:0 !important}

/* undo the caption styling on every span in the three cards */
#watch-mock#watch-mock span, #orf-ret-mock#orf-ret-mock span, #ret-risk-mock#ret-risk-mock span{
  text-transform:none !important; letter-spacing:normal !important; text-align:left !important;
  max-width:none !important; line-height:1.35 !important}

/* Watch list */
#watch-mock#watch-mock .watch-top{padding:calc(14px*var(--ms)) calc(20px*var(--ms)) !important}
#watch-mock#watch-mock .watch-title{font-size:calc(13px*var(--ms)) !important; font-weight:600 !important}
#watch-mock#watch-mock .watch-count{font-size:calc(11px*var(--ms)) !important; padding:calc(5px*var(--ms)) calc(10px*var(--ms)) !important; white-space:nowrap}
#watch-mock#watch-mock .watch-thead{grid-template-columns:1.45fr 1.35fr .9fr !important; padding:calc(10px*var(--ms)) calc(20px*var(--ms)) !important}
#watch-mock#watch-mock .watch-row{grid-template-columns:1.45fr 1.35fr .9fr !important; padding:calc(13px*var(--ms)) calc(20px*var(--ms)) !important}
#watch-mock#watch-mock .watch-th{font-size:calc(10.5px*var(--ms)) !important; text-transform:uppercase !important; letter-spacing:.05em !important; font-weight:700 !important; white-space:nowrap}
#watch-mock#watch-mock .watch-th:last-child, #watch-mock#watch-mock .watch-date{text-align:right !important}
#watch-mock#watch-mock .watch-name{font-size:calc(13px*var(--ms)) !important; white-space:nowrap}
#watch-mock#watch-mock .watch-tag{font-size:calc(11.5px*var(--ms)) !important; white-space:nowrap}
#watch-mock#watch-mock .watch-tag svg{width:calc(12px*var(--ms)); height:calc(12px*var(--ms))}
#watch-mock#watch-mock .watch-date{font-size:calc(11.5px*var(--ms)) !important; white-space:nowrap}
#watch-mock#watch-mock .watch-avatar{width:calc(26px*var(--ms)); height:calc(26px*var(--ms)); font-size:calc(10px*var(--ms)) !important; text-align:center !important}
#watch-mock#watch-mock .watch-person{gap:calc(9px*var(--ms))}

/* Retention forecast */
#orf-ret-mock#orf-ret-mock .orf-top{padding:calc(14px*var(--ms)) calc(20px*var(--ms)) !important}
#orf-ret-mock#orf-ret-mock .orf-crumb{font-size:calc(12.5px*var(--ms)) !important}
#orf-ret-mock#orf-ret-mock .orf-badge{font-size:calc(11px*var(--ms)) !important; padding:calc(5px*var(--ms)) calc(10px*var(--ms)) !important}
#orf-ret-mock#orf-ret-mock .orf-body{padding:calc(14px*var(--ms)) calc(24px*var(--ms)) calc(10px*var(--ms)) !important; gap:0 !important}
#orf-ret-mock#orf-ret-mock .orf-thead{grid-template-columns:1.4fr .7fr 1.3fr .9fr !important; padding:calc(8px*var(--ms)) 0 !important}
#orf-ret-mock#orf-ret-mock .orf-row{grid-template-columns:1.4fr .7fr 1.3fr .9fr !important; padding:calc(11px*var(--ms)) 0 !important}
#orf-ret-mock#orf-ret-mock .orf-rows{justify-content:flex-start !important; gap:0 !important}
#orf-ret-mock#orf-ret-mock .orf-th{font-size:calc(10px*var(--ms)) !important; text-transform:uppercase !important; letter-spacing:.05em !important; font-weight:700 !important}
#orf-ret-mock#orf-ret-mock .orf-team{font-size:calc(13px*var(--ms)) !important}
#orf-ret-mock#orf-ret-mock .orf-count{font-size:calc(13px*var(--ms)) !important}
#orf-ret-mock#orf-ret-mock .orf-driver{font-size:calc(11.5px*var(--ms)) !important}
#orf-ret-mock#orf-ret-mock .orf-trend{font-size:calc(11.5px*var(--ms)) !important}
#orf-ret-mock#orf-ret-mock .orf-trend svg{width:calc(11px*var(--ms)); height:calc(11px*var(--ms))}

/* Team (Maria Torres) */
#ret-risk-mock#ret-risk-mock .ret-top{padding:calc(14px*var(--ms)) calc(20px*var(--ms)) !important}
#ret-risk-mock#ret-risk-mock .ret-crumb{font-size:calc(12.5px*var(--ms)) !important}
#ret-risk-mock#ret-risk-mock .ret-badge{font-size:calc(11px*var(--ms)) !important; padding:calc(5px*var(--ms)) calc(10px*var(--ms)) !important}
#ret-risk-mock#ret-risk-mock .ret-body{padding:calc(22px*var(--ms)) calc(24px*var(--ms)) !important}
#ret-risk-mock#ret-risk-mock .ret-avatar{width:calc(38px*var(--ms)); height:calc(38px*var(--ms)); font-size:calc(13px*var(--ms)) !important; text-align:center !important}
#ret-risk-mock#ret-risk-mock .ret-name{font-size:calc(15px*var(--ms)) !important}
#ret-risk-mock#ret-risk-mock .ret-role{font-size:calc(11.5px*var(--ms)) !important}
#ret-risk-mock#ret-risk-mock .ret-risk{margin-top:calc(16px*var(--ms)) !important; padding:calc(9px*var(--ms)) calc(13px*var(--ms)) !important}
#ret-risk-mock#ret-risk-mock .ret-risk span{font-size:calc(12.5px*var(--ms)) !important}
#ret-risk-mock#ret-risk-mock .ret-drivers{margin-top:calc(14px*var(--ms)) !important; gap:calc(9px*var(--ms)) !important}
#ret-risk-mock#ret-risk-mock .ret-driver p{font-size:calc(12.5px*var(--ms)) !important; line-height:1.45 !important}
#ret-risk-mock#ret-risk-mock .ret-action{margin-top:calc(20px*var(--ms)) !important; padding:calc(12px*var(--ms)) calc(14px*var(--ms)) !important}
#ret-risk-mock#ret-risk-mock .ret-action p{font-size:calc(12.5px*var(--ms)) !important}

/* finishing touches */
/* an earlier page rule pins this label at 12.5px; it follows the text scale like the rest of the card */
html body #shell #page#page#page#page#page #ret-risk-mock .ret-risk span{font-size:calc(12.5px*var(--ms)) !important}
#orf-ret-mock#orf-ret-mock .orf-trend svg{stroke:currentColor}
#orf-ret-mock#orf-ret-mock .orf-driver, #watch-mock#watch-mock .watch-date, #ret-risk-mock#ret-risk-mock .ret-role,
#orf-ret-mock#orf-ret-mock .orf-crumb{font-weight:400 !important}

/* "Understand what may be driving the risk": the four boxes were bottom-aligned inside their rows so each column
   started at a different height, the small label above the heading was centred in its column while the heading was
   not, and the heading ran up to the first box. */
#page#page#page#page > section[screen="Drivers"] .split2--slack{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important; column-gap:64px !important; align-items:start !important}
#page#page#page#page > section[screen="Drivers"] .split2--slack > div{align-items:stretch !important}
#page#page#page#page > section[screen="Drivers"] .split2--slack .does{
  width:100% !important; max-width:none !important; align-items:start !important; row-gap:12px !important}
/* a leftover speech-bubble tail showed as a stray white triangle on two boxes, and each box was pinned to the bottom of its row */
#page#page#page#page > section[screen="Drivers"] .split2--slack .does li{align-self:start !important}
#page#page#page#page > section[screen="Drivers"] .split2--slack .does li::after{display:none !important}

/* phones: the column headings stacked into a pile above rows that are already stacked, so the heading row is dropped;
   in the forecast each row reads "Team ... trend" with "6 at risk . driver" under it */
@media (max-width:640px){
  #watch-mock#watch-mock .watch-thead, #orf-ret-mock#orf-ret-mock .orf-thead{display:none !important}
  #orf-ret-mock#orf-ret-mock .orf-row{display:grid !important; grid-template-columns:auto 1fr auto !important; column-gap:6px !important; row-gap:3px !important; align-items:baseline !important; padding:calc(11px*var(--ms)) 0 !important}
  #orf-ret-mock#orf-ret-mock .orf-team{grid-column:1 / 3; grid-row:1}
  #orf-ret-mock#orf-ret-mock .orf-trend{grid-column:3; grid-row:1; justify-self:end}
  #orf-ret-mock#orf-ret-mock .orf-count{grid-column:1; grid-row:2}
  #orf-ret-mock#orf-ret-mock .orf-count::after{content:" at risk"; font-weight:600}
  #orf-ret-mock#orf-ret-mock .orf-driver{grid-column:2 / 4; grid-row:2}
  #orf-ret-mock#orf-ret-mock .orf-driver::before{content:"\00b7\00a0"}
}

/* 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}
}