/* ==========================================================================
   TIER TOUR — the annotation layer

   Identical in all three demos. This is the only file that is shared
   verbatim across tiers; everything else is deliberately different now.

   Two parts:
     1. A fixed bar naming the tier, its price, and a way to buy one.
     2. An opt-in annotation layer: numbered markers pinned to real features
        that open a note explaining what that tier actually buys you.

   The markers are OFF by default. A prospect should get to see the site as a
   site first; the annotations are there for the second pass, once they are
   asking what the difference is. Turning them on is one obvious click.

   Annotations are driven by data attributes in the markup, so the
   explanation lives next to the thing it explains and cannot drift from it.

     <section data-tour="Own page per service"
              data-tour-note="Each service gets its own URL...">
   ========================================================================== */

:root {
  --tour-bar-h: 46px;
}

/* ---------- The bar ---------- */
.tour-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 300;
  height: var(--tour-bar-h);
  display: flex; align-items: center; justify-content: center; gap: 8px 18px;
  flex-wrap: wrap;
  padding: 0 16px;
  background: #111827; color: #E5E7EB;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.84rem; line-height: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.tour-bar__tier { font-weight: 700; color: #fff; }
.tour-bar__tier .price { color: #FBBF24; }
.tour-bar__sep { opacity: 0.35; }
.tour-bar__note { opacity: 0.75; }
@media (max-width: 720px) { .tour-bar__note { display: none; } }
.tour-bar a.tour-bar__buy { color: #FBBF24; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tour-bar a.tour-bar__buy:hover { color: #fff; }

.tour-bar__toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: #FBBF24; color: #111827; border: 0; border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  font-family: inherit; font-size: 0.8rem; font-weight: 700; line-height: 1;
  transition: background 0.18s ease, transform 0.18s ease;
}
.tour-bar__toggle:hover { background: #FCD34D; transform: translateY(-1px); }
.tour-bar__toggle svg { width: 14px; height: 14px; }
.tour-bar__toggle .label-on { display: none; }
.tour-on .tour-bar__toggle .label-off { display: none; }
.tour-on .tour-bar__toggle .label-on { display: inline; }
.tour-on .tour-bar__toggle { background: #fff; }

/* Push the page down so the bar never covers a sticky header */
body.has-tour-bar { padding-top: var(--tour-bar-h); }
body.has-tour-bar .site-header { top: var(--tour-bar-h); }

/* ---------- Markers ---------- */
.tour-anchor { position: relative; }

.tour-marker {
  position: absolute; z-index: 60; top: -13px; left: -13px;
  width: 28px; height: 28px; border-radius: 50%;
  display: none; place-items: center;
  background: #FBBF24; color: #111827;
  border: 2px solid #111827; cursor: pointer; padding: 0;
  font-family: system-ui, -apple-system, sans-serif; font-size: 0.78rem; font-weight: 800;
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.45);
  transition: transform 0.16s ease, background 0.16s ease;
}
.tour-on .tour-marker { display: grid; }
.tour-marker:hover { transform: scale(1.12); background: #FCD34D; }
.tour-marker[aria-expanded="true"] { background: #fff; transform: scale(1.12); }

/* A dashed ring round the annotated element, so it is obvious what the
   number refers to rather than leaving the reader to guess. */
.tour-on .tour-anchor::after {
  content: ""; position: absolute; inset: -10px; z-index: 55;
  border: 2px dashed rgba(251, 191, 36, 0.75); border-radius: 8px;
  pointer-events: none;
}

/* ---------- The note ---------- */
.tour-pop {
  position: absolute; z-index: 61; top: 22px; left: -13px;
  width: min(300px, calc(100vw - 40px));
  background: #111827; color: #E5E7EB;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px;
  padding: 15px 16px 16px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.7);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: none;
}
.tour-pop.is-open { display: block; }
/* Flipped when the note would otherwise run off the right edge */
.tour-pop.is-right { left: auto; right: -13px; }
.tour-pop h4 {
  font-family: inherit; font-size: 0.9rem; font-weight: 700; color: #FBBF24;
  margin: 0 0 7px; letter-spacing: 0; line-height: 1.3;
}
.tour-pop p { font-size: 0.85rem; line-height: 1.55; margin: 0; color: #D1D5DB; }
.tour-pop .tour-pop__tier {
  display: inline-block; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9CA3AF;
}
.tour-pop__close {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: transparent; border: 0; color: #9CA3AF; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.tour-pop__close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.tour-pop__close svg { width: 14px; height: 14px; }

/* ---------- Count badge on the toggle ---------- */
.tour-bar__count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px;
  background: rgba(17, 24, 39, 0.25); color: #111827;
  font-size: 0.7rem; font-weight: 800;
}
.tour-on .tour-bar__count { background: rgba(17, 24, 39, 0.14); }

@media (prefers-reduced-motion: reduce) {
  .tour-bar__toggle, .tour-marker { transition: none; }
}

/* Nothing in this layer should ever end up on paper */
@media print {
  .tour-bar, .tour-marker, .tour-pop { display: none !important; }
  body.has-tour-bar { padding-top: 0; }
}

/* ==========================================================================
   NOTE NAVIGATOR

   Markers alone made finding the notes a treasure hunt: you had to spot a
   small circle somewhere on a long page. This is the index — every note
   listed, in order, click to jump to it, with a stepper for reading them
   straight through.

   Only visible when the tour is on.
   ========================================================================== */
.tour-nav {
  position: fixed; right: 18px; bottom: 18px; z-index: 310;
  width: min(310px, calc(100vw - 36px));
  background: #111827; color: #E5E7EB;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.75);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: none;
  overflow: hidden;
}
.tour-on .tour-nav { display: block; }

.tour-nav__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.tour-nav__title { font-size: 0.82rem; font-weight: 700; color: #fff; flex: 1; }
.tour-nav__title span { color: #9CA3AF; font-weight: 500; }
.tour-nav__collapse {
  background: transparent; border: 0; color: #9CA3AF; cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; padding: 0;
}
.tour-nav__collapse:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.tour-nav__collapse svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
.tour-nav.is-collapsed .tour-nav__collapse svg { transform: rotate(180deg); }
.tour-nav.is-collapsed .tour-nav__body { display: none; }

.tour-nav__list { max-height: min(46vh, 340px); overflow-y: auto; padding: 6px; margin: 0; }
.tour-nav__list li { margin: 0; }
.tour-nav__item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 9px 10px; border-radius: 7px;
  font-family: inherit; font-size: 0.82rem; line-height: 1.4; color: #D1D5DB;
}
.tour-nav__item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.tour-nav__item[aria-current="true"] { background: rgba(251, 191, 36, 0.16); color: #fff; }
.tour-nav__n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: #FBBF24; color: #111827;
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; margin-top: 1px;
}
/* Notes that live on another page of a multi-page demo */
.tour-nav__item.is-elsewhere .tour-nav__n { background: #4B5563; color: #E5E7EB; }
.tour-nav__item.is-elsewhere { color: #9CA3AF; }

.tour-nav__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.tour-nav__step {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: #FBBF24; color: #111827; border: 0; border-radius: 6px;
  padding: 9px 12px; cursor: pointer;
  font-family: inherit; font-size: 0.79rem; font-weight: 700;
}
.tour-nav__step:hover { background: #FCD34D; }
.tour-nav__step svg { width: 14px; height: 14px; }
.tour-nav__prev {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.22); color: #D1D5DB;
  border-radius: 6px; width: 36px; height: 36px; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.tour-nav__prev:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.tour-nav__prev svg { width: 14px; height: 14px; }

/* The element a note points at, while you are reading that note */
.tour-focus { animation: tourPulse 1.4s ease-out 1; }
@keyframes tourPulse {
  0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55); }
  100% { box-shadow: 0 0 0 22px rgba(251, 191, 36, 0); }
}

@media (max-width: 620px) {
  .tour-nav { right: 10px; left: 10px; bottom: 10px; width: auto; }
  .tour-nav__list { max-height: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-focus { animation: none; }
  .tour-nav__collapse svg { transition: none; }
}