/* Tools graphics revision. Only artwork and its framing are changed. */
/* A consistent viewBox keeps the entire instrument/graph visible at every width. */
#tools-page .tl-card-art {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1200 / 444;
  object-fit:contain;
  object-position:center;
  background:#06151f;
  image-rendering:auto;
}
#tools-page .tl-hero-art {
  object-fit:contain;
  object-position:right bottom;
  image-rendering:auto;
}
/* The complete ball is never stretched, cover-cropped, or faded into the text. */
#tools-page .tl-cta-inner {
  min-height:180px;
  height:auto;
  grid-template-columns:39% 36% 25%;
  padding-block:15px;
  overflow:hidden;
}
#tools-page .tl-cta-art {
  width:39%;
  height:100%;
  left:0;
  bottom:0;
  object-fit:contain;
  object-position:left center;
  opacity:1;
  mask-image:none;
  -webkit-mask-image:none;
  margin:0;
}
#tools-page .tl-cta-copy {padding-left:27px}
#tools-page .tl-cta-inner:after {
  content:'';
  position:absolute;
  inset:0 0 0 auto;
  width:62.5%;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(90deg,transparent,#001015 3.5%,#001015);
}
#tools-page .tl-cta-copy,#tools-page .tl-cta-actions{z-index:1}
@media (min-width:1150px){
  #tools-page .tl-cta-inner{min-height:215px;padding-block:20px}
}
@media (min-width:761px) and (max-width:980px){
  #tools-page .tl-cta-inner {
    display:grid;
    grid-template-columns:39% 61%;
    grid-template-rows:auto auto;
    min-height:234px;
    padding:20px 25px 20px 0;
  }
  #tools-page .tl-cta-copy{grid-column:2;grid-row:1;padding-left:22px}
  #tools-page .tl-cta-actions{grid-column:2;grid-row:2;padding:15px 0 0 22px;max-width:330px}
  #tools-page .tl-cta-copy h2{white-space:normal;font-size:28px;line-height:33px}
  #tools-page .tl-cta-actions p{font-size:12px;line-height:16px}
  #tools-page .tl-cta-art{height:100%;width:39%;object-fit:contain}
}
@media (max-width:760px){
  #tools-page .tl-cta-inner {
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:0;
    padding:26px 25px 0;
  }
  #tools-page .tl-cta-copy{width:100%;padding:0;order:0}
  #tools-page .tl-cta-copy h2{white-space:normal}
  #tools-page .tl-cta-actions{width:100%;max-width:350px;padding:16px 0 0;align-self:flex-start;order:1}
  #tools-page .tl-cta-art {
    position:relative;
    order:2;
    width:calc(100% + 50px);
    height:auto;
    max-width:none!important;
    margin:20px -25px 0;
    object-fit:contain;
    aspect-ratio:351 / 180;
  }
  #tools-page .tl-cta-inner:after{display:none}
}
@media (max-width:520px){
  #tools-page .tl-cta-inner{padding:26px 20px 0}
  #tools-page .tl-cta-actions{max-width:none}
  #tools-page .tl-cta-art{width:calc(100% + 40px);margin:18px -20px 0}
}