/* "Back to all solutions" button for the AI product pages, in two places:
   1. .solution-back: the page's own link at the top of the hero, shown as a button.
   2. .solution-float: a copy that follows the visitor down, sticky. While its resting
      spot (just above the closing call-to-action band) is below the screen it stays
      pinned to the bottom-left corner; when scrolling reaches the spot it rests there
      and moves with the page; scrolling back up pins it again. It is invisible until
      the top link has scrolled out of view, and it takes no layout space. */
.solution-back, .solution-float{
  --sf-h:28px; --sf-gap:12px;
  display:inline-flex; align-items:center; gap:5px; box-sizing:border-box;
  height:var(--sf-h); padding:0 10px; white-space:nowrap;
  border-radius:var(--jjw-radius-control, 7px);
  background:var(--jjw-navy, #1E3A5F);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 3px 10px rgba(9,18,30,.24);
  font:600 12px/1 inherit;
  /* !important: the product pages colour every link inside their container teal */
  color:#fff !important; text-decoration:none !important;
  transition:background-color .15s ease;
}
.solution-back:hover, .solution-float:hover{background:var(--jjw-accent-blue, #2E5F8A); color:#fff !important;}
.solution-back:focus-visible, .solution-float:focus-visible{
  outline:3px solid var(--jjw-accent-blue, #2E5F8A) !important; outline-offset:2px !important;
  border-radius:var(--jjw-radius-control, 7px) !important;
}
/* the top button sits a little higher, closer to the header */
.solution-back{position:relative; top:calc(-1 * clamp(14px, 2.8vw, 40px));}

.solution-float{
  position:sticky; z-index:40;
  bottom:max(var(--sf-gap), env(safe-area-inset-bottom, 0px));
  width:fit-content;
  margin:calc(-1 * (var(--sf-h) + var(--sf-gap))) 0 var(--sf-gap) max(var(--sf-gap), env(safe-area-inset-left, 0px));
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, background-color .15s ease;
}
/* only if the page has no closing band to sit above: plain fixed corner button */
.solution-float--fixed{
  position:fixed; margin:0;
  left:max(var(--sf-gap), env(safe-area-inset-left, 0px));
}
.solution-float.is-on{opacity:1; transform:none; pointer-events:auto;}
@media (max-width:600px){
  .solution-back, .solution-float{--sf-h:26px; --sf-gap:10px; padding:0 9px; font-size:11px; gap:4px;}
}
@media (prefers-reduced-motion:reduce){.solution-float{transition:none; transform:none;}}
