/* ============================================================================
   "Back to pricing" — the return pill.

   Once #pricing has scrolled off the top, a pill appears bottom-right that
   takes the reader straight back to it. Every band below the table is an
   argument for buying; this is the shortest path from "convinced" to "priced".

   It answers one question — "where was that table?" — which is the only reason
   it is allowed to move at all. Transform and opacity only, tokens only, and
   it never appears while the table is on screen.
   ========================================================================= */

.afxbtp {
  /* BOTTOM LEFT, not bottom right: the Intercom launcher lives in the bottom
     right corner on every page and the two were stacking on top of each other. */
  position: fixed; left: 24px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 20px 0 16px; border: 0; border-radius: 100px;
  cursor: pointer; -webkit-appearance: none; appearance: none;

  background: rgba(20, 24, 24, .72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  color: var(--af-white);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 15px; line-height: 1; letter-spacing: -.3px; white-space: nowrap;

  /* the lit hairline every glass surface on this site carries. A flat border
     here is the fastest way to make it look bolted on. */
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);

  /* resting state: out of the way, not interactive, nothing above the fold
     hidden — this element does not exist until you have passed the table */
  opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none;
  transition: opacity var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out),
              background-color var(--t-fast) var(--e-out);
}
.afxbtp::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* shown once the table is behind us */
.afxbtp.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* 28px lime disc carrying the arrow. Lime takes ink #001D21, always. */
.afxbtp__ico {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--af-lime); color: var(--af-ink-teal);
}
.afxbtp__ico svg { display: block; width: 14px; height: 14px; }

.afxbtp__label { position: relative; }
/* the price only shows once pricing-table.js has filled it in */
.afxbtp__from { color: var(--af-lime); }
.afxbtp__from:empty { display: none; }

@media (hover: hover) and (pointer: fine) {
  .afxbtp:hover { background-color: rgba(28, 34, 34, .82); }
  .afxbtp:hover .afxbtp__ico { transform: translateY(-1px); }
}
.afxbtp__ico { transition: transform var(--t-fast) var(--e-out); }
.afxbtp:active { transform: scale(.97); }
.afxbtp:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 3px; }

/* on a phone it sits above the docked nav rather than on top of it */
@media (max-width: 720px) {
  .afxbtp {
    left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px) + 64px);
    height: 44px; padding: 0 16px 0 12px; font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* the pill still appears — it is an affordance, not decoration — it just
     does not travel to get there */
  .afxbtp { transform: none; }
  .afxbtp.is-on { transform: none; }
}