/* Floating downtime calculator.
   The point is that someone can test their own fleet without leaving the page
   they are reading, so it has to stay out of the way: one corner, never the
   middle, collapsible to a pill, and silent for two weeks once dismissed.
   Corners are contested on this site - the "Talk to a Fleet Specialist" button
   owns bottom-left and the reCAPTCHA badge sits bottom-right - so this clears
   the badge with bottom:90px. */
.ocm-dt, .ocm-dt *{ box-sizing:border-box; }
.ocm-dt{
  position:fixed; right:24px; bottom:90px; width:344px; max-width:calc(100vw - 32px);
  background:#fff; color:#1F2124; border:1px solid #E2E0DA; border-top:3px solid #E63946;
  border-radius:7px; box-shadow:0 14px 38px -14px rgba(31,33,36,.4), 0 2px 8px rgba(31,33,36,.08);
  font-family:Raleway,-apple-system,"Segoe UI",sans-serif; line-height:1.45; z-index:9998;
  /* Presence is display, not opacity. CSS transitions do not advance in a tab
     that is not being painted, so anything whose VISIBILITY depends on a
     transition can stick at its start value - a panel in the DOM that nobody can
     see. Only the 14px slide is animated, and if that never runs the panel is
     simply 14px lower than intended. */
  display:none; transform:translateY(14px);
  transition:transform .4s cubic-bezier(.16,.84,.44,1);
}
.ocm-dt.is-open{ display:block; transform:none; }

.ocm-dt__head{ padding:15px 44px 12px 18px; border-bottom:1px solid #EFEDE9; }
.ocm-dt__eyebrow{ font-size:.65rem; letter-spacing:.15em; text-transform:uppercase;
  color:#8A8F95; font-weight:700; display:block; }
.ocm-dt__title{ font-family:Sora,Raleway,sans-serif; font-size:1.02rem; font-weight:600;
  margin:3px 0 0; line-height:1.25; }

.ocm-dt__body{
  padding:14px 18px 16px;
  /* On a short laptop window the panel plus its 90px offset can exceed the
     viewport. Cap it and let the body scroll rather than pushing the CTA off
     the bottom of the screen, which is where the whole point of it lives. */
  max-height:calc(100vh - 210px); overflow-y:auto;
}
.ocm-dt__grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px 10px; }
.ocm-dt__grid label{ display:flex; flex-direction:column; gap:3px;
  font-size:.72rem; font-weight:700; color:#5A6066; letter-spacing:.01em; }
.ocm-dt__grid label.is-wide{ grid-column:1 / -1; }
.ocm-dt__grid input{ font:inherit; font-size:.95rem; padding:.45rem .55rem; width:100%;
  border:1px solid #CFCCC5; border-radius:4px; background:#fff; font-variant-numeric:tabular-nums; }
.ocm-dt__grid input:focus{ outline:2px solid #E63946; outline-offset:1px; border-color:#E63946; }

.ocm-dt__result{ margin-top:13px; padding:12px 14px; background:#F7F6F3;
  border:1px solid #E7E5E0; border-radius:5px; }
.ocm-dt__resultlab{ font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:#797F85; font-weight:700; }
.ocm-dt__total{ display:block; font-family:Sora,Raleway,sans-serif; font-weight:700;
  font-size:2rem; line-height:1.05; color:#E63946; font-variant-numeric:tabular-nums; margin:2px 0 3px; }
.ocm-dt__sub{ font-size:.76rem; color:#6C7076; }

/* The pitch only appears once they have made the numbers their own. Before that
   it would be a sales box with a calculator attached, which is the thing people
   close without reading. */
.ocm-dt__cta{ margin-top:12px; display:none; }
.ocm-dt.is-engaged .ocm-dt__cta{ display:block; }
.ocm-dt__ctatext{ font-size:.82rem; color:#41464B; margin:0 0 9px; }
.ocm-dt__btns{ display:flex; gap:8px; flex-wrap:wrap; }
.ocm-dt__btn{ flex:1 1 auto; text-align:center; text-decoration:none; font-weight:700;
  font-size:.85rem; padding:.6rem .8rem; border-radius:4px; background:#E63946; color:#fff; white-space:nowrap; }
.ocm-dt__btn:hover,.ocm-dt__btn:focus{ background:#C92C38; color:#fff; }
.ocm-dt__btn--ghost{ background:#fff; color:#1F2124; border:1px solid #CFCCC5; }
.ocm-dt__btn--ghost:hover,.ocm-dt__btn--ghost:focus{ background:#F2F1EE; color:#1F2124; }
.ocm-dt__more{ display:block; margin-top:9px; font-size:.75rem; color:#6C7076; }

.ocm-dt__close{ position:absolute; top:9px; right:9px; width:30px; height:30px; border:0;
  background:transparent; color:#9AA0A6; font-size:19px; line-height:1; border-radius:4px; cursor:pointer; }
.ocm-dt__close:hover{ background:#F2F1EE; color:#41464B; }
.ocm-dt__close:focus-visible,.ocm-dt__btn:focus-visible,.ocm-dt__min:focus-visible{ outline:2px solid #E63946; outline-offset:2px; }

/* Collapsed pill: gets it out of the way without dismissing it for good. */
.ocm-dt__min{ position:absolute; top:9px; right:41px; width:30px; height:30px; border:0;
  background:transparent; color:#9AA0A6; font-size:17px; line-height:1; border-radius:4px; cursor:pointer; }
.ocm-dt__min:hover{ background:#F2F1EE; color:#41464B; }
.ocm-dt.is-min{ width:auto; max-width:320px; }
.ocm-dt.is-min .ocm-dt__body, .ocm-dt.is-min .ocm-dt__min{ display:none; }
.ocm-dt.is-min .ocm-dt__head{ border-bottom:0; padding:12px 42px 12px 16px; cursor:pointer; }
.ocm-dt.is-min .ocm-dt__title{ font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width:600px){
  /* Phones open to the pill by default; expanding is one tap. An expanded panel
     here covered nearly half the screen, which is exactly the behaviour that
     makes these things feel like popups. */
  .ocm-dt{ right:8px; left:8px; bottom:8px; width:auto; max-width:none; }
  .ocm-dt.is-min{ left:auto; max-width:calc(100vw - 16px); }
  .ocm-dt__total{ font-size:1.7rem; }
  .ocm-dt__grid{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){ .ocm-dt{ transition:opacity .2s ease, visibility .2s; transform:none; } }