/* Sticky mobile CTA (issue #187).
   One shared file for the six pages that carry a primary CTA, so the bar
   cannot drift between the English pages and the zh / zh-hk mirrors.

   Mobile only. position:fixed, so the bar is out of flow and adds no layout
   to the document (zero CLS); it is moved with `transform` only, never by
   inserting or removing layout. Colours come from the token system
   (--card-2 / --line / --ink, and the page's own focus token), never from a
   new literal. */

.sticky-cta { display: none; }

@media (max-width: 720px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--card-2, #171C25);
    border-top: 1px solid var(--line, #232A35);
    transform: translateY(110%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, visibility 0s linear .22s;
  }

  .sticky-cta.on {
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: transform .22s ease, visibility 0s;
  }

  /* Tap target: >= 44px for both controls. */
  .sticky-cta .btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
  }

  .sticky-cta-dismiss {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    color: var(--ink, #EDF1F7);
    border: 1px solid var(--line, #232A35);
    border-radius: 11px;
  }

  .sticky-cta-dismiss:hover {
    background: var(--card, #12161D);
    border-color: var(--ink-3, #6C7684);
  }

  /* var(--focus) is the token on the marketing/app shell; the zh mirrors
     predate it and paint focus with --hot, so fall back to theirs. */
  .sticky-cta .btn:focus-visible,
  .sticky-cta-dismiss:focus-visible {
    outline: 2px solid var(--focus, var(--hot, #FF4D2E));
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta,
  .sticky-cta.on {
    transition: none;
  }
}