/* The guided tour, in place.
 *
 * Two elements and nothing else: a ring around the thing being pointed at, and a small
 * card beside it. No bar, no transport, no scrim. The visitor is using the product, not
 * watching a presentation, and the tour has to look like an annotation on their session
 * rather than a layer they are trapped inside.
 *
 * Nothing here dims the page. A scrim says "you may not touch this"; the whole design
 * says the opposite — everything stays clickable, and clicking is how the tour advances.
 */

.pqt-ring {
  position: fixed;
  z-index: 2147483000;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 2px #2a6fdb, 0 0 0 6px rgba(42, 111, 219, .16);
  transition: opacity .18s ease,
    top .28s cubic-bezier(.4, 0, .2, 1), left .28s cubic-bezier(.4, 0, .2, 1),
    width .28s cubic-bezier(.4, 0, .2, 1), height .28s cubic-bezier(.4, 0, .2, 1);
}
.pqt-ring.on { opacity: 1; }

.pqt-tip {
  position: fixed;
  z-index: 2147483001;
  width: min(330px, calc(100vw - 32px));
  padding: 14px 16px 15px;
  background: #1b1815;
  color: #f4f0e8;
  border-radius: 12px;
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55);
  font: 400 14px/1.5 "Hanken Grotesk", system-ui, sans-serif;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease,
    top .28s cubic-bezier(.4, 0, .2, 1), left .28s cubic-bezier(.4, 0, .2, 1);
}
.pqt-tip.on { opacity: 1; transform: none; }

.pqt-n {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, .42);
  margin-bottom: 7px;
}
.pqt-t { color: #f4f0e8; }
.pqt-t.pqt-wait { color: rgba(244, 240, 232, .6); font-style: italic; }

/* The invitation. It is an instruction, not a button — the button is the real control
   out on the page, which is the entire point. */
.pqt-do {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid rgba(244, 240, 232, .13);
  font-weight: 600;
  color: #ffd9a1;
}
.pqt-do::before { content: "→ "; opacity: .65; }

/* The one way out, and it says so. Nothing else on the page ends the tour, so an
   unlabelled × would be asking people to guess. */
.pqt-x {
  position: absolute;
  top: 9px;
  right: 10px;
  border: 1px solid rgba(244, 240, 232, .22);
  border-radius: 999px;
  padding: 3px 10px;
  background: transparent;
  color: rgba(244, 240, 232, .62);
  font: 600 11px/1.5 "Hanken Grotesk", system-ui, sans-serif;
  cursor: pointer;
}
.pqt-x:hover { background: rgba(244, 240, 232, .12); color: #f4f0e8; }

/* The invitation as a link, for a step whose anchor never appeared. Same words as the
   instruction it replaces — the visitor is still the one clicking. */
.pqt-go {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #ffd9a1;
  color: #1b1815;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}
.pqt-go::after { content: " →"; }
.pqt-go:hover { background: #ffe6bd; }

/* Nothing to point at, so the card stops pretending to and docks out of the way. */
.pqt-tip.pqt-free {
  top: auto !important;
  bottom: 22px;
  left: 22px !important;
}

.pqt-end { margin-top: 13px; display: flex; gap: 8px; align-items: center; }
.pqt-cta {
  background: #2a6fdb;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 15px;
  border-radius: 8px;
}
.pqt-later {
  position: static;
  width: auto;
  height: auto;
  padding: 9px 12px;
  font: 600 13px/1 "Hanken Grotesk", system-ui, sans-serif;
}

@media (max-width: 640px) {
  /* On a phone there is nowhere sensible to float a card beside an element, so it docks
     to the bottom and the ring alone does the pointing. */
  .pqt-tip { left: 12px !important; right: 12px; top: auto !important; bottom: 12px;
    width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pqt-ring, .pqt-tip { transition: opacity .15s ease; }
}