/* ============================================================
   Trace bottom checkout dock ("tdock")
   Slides up from the bottom edge once the hero scrolls out of
   view; carries the PlayerFocus Pro summary, a direct-checkout
   CTA and a Compare-plans secondary button. Sits on a full-width
   progressive-blur veil so it separates from busy content.
   Markup lives in components/nav-light.html / nav-dark.html;
   behavior in /js/trace-dock.js.
   ============================================================ */

.tdock,
.tdock *,
.tdock *::before,
.tdock *::after { box-sizing: border-box; }

.tdock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 990; /* below .tnav (1000) so the mobile menu overlay wins */
  padding: 88px 24px 20px; /* space above the bar = progressive-blur runway */
  pointer-events: none;
  font-family: Atak, sans-serif;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transform: translateY(103%);
  transition: transform .55s cubic-bezier(.32, .72, .28, 1);
}
.tdock.is-visible { transform: none; }

/* Tuck away while the mobile menu overlay is open (partial renders the
   dock right after the header, so they are siblings). */
.tnav.is-mobile-open ~ .tdock { transform: translateY(103%); }

@media (prefers-reduced-motion: reduce) {
  .tdock { transform: none; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
  .tdock.is-visible { opacity: 1; visibility: visible; }
  .tnav.is-mobile-open ~ .tdock { opacity: 0; visibility: hidden; }
}

/* ---- Progressive blur veil ----------------------------------
   backdrop-filter can't ramp, so five layers each blur a masked
   horizontal band, doubling in strength toward the bottom edge.
   Blur only — no tint. Browsers without backdrop-filter get no veil;
   the bar is opaque white with its own border and shadow, so it still
   reads on its own. */
.tdock-veil { position: absolute; inset: 0; pointer-events: none; }
.tdock-veil > i { position: absolute; inset: 0; display: block; }
.tdock-veil > i:nth-child(1) { backdrop-filter: blur(1px);  -webkit-backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 60%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 60%); }
.tdock-veil > i:nth-child(2) { backdrop-filter: blur(2px);  -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 80%);
          mask-image: linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 80%); }
.tdock-veil > i:nth-child(3) { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 60%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 40%, #000 60%, #000 80%, transparent 100%); }
.tdock-veil > i:nth-child(4) { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 80%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 60%, #000 80%, #000 100%); }
.tdock-veil > i:nth-child(5) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 78%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 78%, #000 100%); }
/* ---- Bar (always white, both themes) ------------------------- */
.tdock-bar {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(31, 97, 109, .08);
  border-radius: 28px;
  box-shadow: 0 12px 40px rgba(31, 97, 109, .14), 0 2px 8px rgba(31, 97, 109, .06);
  padding: 14px 14px 14px 28px;
}

.tdock-logo { flex: none; width: 85px; aspect-ratio: 5; color: var(--teal-50, #1f616d); }
.tdock-logo svg { width: 100%; height: 100%; display: block; }
.tdock-spacer { flex: 1 1 auto; }

.tdock-right { display: flex; align-items: center; gap: 20px; }
.tdock-divider { width: 1px; height: 40px; background: #ececec; flex: none; }

.tdock-plan { text-align: right; line-height: 1.25; }
.tdock-plan-name { font-size: 16px; font-weight: 500; color: var(--charcoal-50, #393c3c); white-space: nowrap; }
.tdock-plan-desc { font-size: 13px; color: var(--charcoal-30, #7b7d7d); margin-top: 2px; white-space: nowrap; }
.tdock-plan-desc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tdock-plan-desc a:hover { color: var(--teal-50, #1f616d); }
.tdock-cta {
  display: inline-block;
  background: var(--red, #f35c2b);
  color: #fff;
  font: inherit;
  font-weight: 500;
  border: 0;
  border-radius: 50px;
  padding: 15px 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.tdock-cta:hover { background: #e04f20; }
.tdock-cta:active { transform: scale(.98); }
.tdock-cta.disabled { opacity: .55; pointer-events: none; }
.tdock-cta-long { display: inline; }

/* Compare plans — secondary (stroke outline), right of the CTA */
.tdock-compare {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--teal-40, #18929a);
  color: var(--teal-40, #18929a);
  font-weight: 500;
  border-radius: 50px;
  padding: 14px 23px; /* 1px less than the CTA to offset the border */
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.tdock-compare:hover { background: var(--teal-10, #e7f8f5); color: var(--teal-50, #1f616d); }

/* ---- Mobile: stacked centered card ---------------------------- */
@media (max-width: 767px) {
  .tdock { padding: 64px 14px calc(14px + env(safe-area-inset-bottom)); }
  .tdock-bar { border-radius: 28px; padding: 22px 20px; max-width: 480px; }
  .tdock-logo, .tdock-spacer, .tdock-divider { display: none; }
  .tdock-right { width: 100%; flex-direction: column; gap: 14px; }
  .tdock-plan { text-align: center; }
  .tdock-plan-name { font-size: 17px; color: var(--charcoal-50, #393c3c); }
  .tdock-plan-desc { font-size: 14px; margin-top: 4px; }
  .tdock-cta { width: 100%; padding: 16px 24px; font-size: 16px; text-align: center; }
  /* Compare plans becomes a quiet centered text link under the CTA */
  .tdock-compare {
    border: 0;
    padding: 0;
    border-radius: 0;
    color: var(--teal-40, #18929a);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 15px;
  }
  .tdock-compare:hover { background: transparent; color: var(--teal-50, #1f616d); }
}

/* Keyboard focus */
.tdock a:focus-visible,
.tdock button:focus-visible {
  outline: 2px solid var(--teal-40, #18929a);
  outline-offset: 2px;
  border-radius: 50px;
}