/* ── HEAR IT IN 60 SECONDS (guided tour) ──
   A four-beat coach-mark tour over the REAL page (see startTour): the landing
   search and the in-card mocks are the tour's illustrations, so there is
   nothing to keep in sync. Copy lives in i18n under tour.* (both brands).

   Lifted verbatim out of the shared storefront's inline <style> so a second
   surface can render the same beats without a copy of them (behaviour half:
   static/js/tour.js). Linked immediately BEFORE that <style>, which is where
   these rules used to sit relative to the page's own: every selector here is
   .tour-* and appears nowhere else, so nothing depends on the order today —
   but loading it after the page's rules would silently flip that if one ever
   did.

   NOT standalone: colours come from the page's :root custom properties
   (--gold, --navy, --txt …), which cascade in from the host document. A page
   that links this must define them. */
/* Ghost twin of the hero primary above it: same font and footprint as
   .btn-primary.btn-hero (700 / clamp(17px,4vw,22px), matching height via the
   padding + play-circle sums below) so the pair reads as two equal choices —
   the glass treatment, not the size, is what marks it secondary. No pulse.
   Longhands, not the `font:` shorthand: `inherit` is a CSS-wide keyword and is
   only legal as a property's WHOLE value, so `font: 700 <size>/1.2 inherit`
   would be invalid and dropped entirely. */
.tour-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 36px 14px 14px;
  background: rgba(0,0,0,.25); color: #fff;
  border: 1.5px solid rgba(255,255,255,.6); border-radius: 50px;
  font-weight: 700; font-size: clamp(17px, 4vw, 22px); line-height: 1.2;
  font-family: inherit; letter-spacing: .2px;
  cursor: pointer; text-shadow: 0 1px 6px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  transition: background .15s, border-color .15s, transform .15s;
}
.tour-pill:hover { background: rgba(0,0,0,.4); border-color: #fff; transform: translateY(-2px); }
/* Grows with the pill's own text (ramp = the label's clamp x ~1.6), sized to sit
   inside the pill's padding rather than set it — the circle is what decides the
   pill's height, so this is the knob for the button's footprint. */
.tour-pill-play {
  width: clamp(26px, 6vw, 34px); height: clamp(26px, 6vw, 34px);
  border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: #fff; font-size: clamp(12px, 3vw, 15px); padding-left: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.tour-relaunch {
  display: block; margin: -4px auto 26px; padding: 6px 14px;
  background: none; border: 1px solid var(--bdr); border-radius: 50px;
  color: var(--txm); font: 600 13px/1.2 inherit; font-family: inherit; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tour-relaunch:hover { color: var(--gold); border-color: var(--gold); }
.tour-root { display: none; position: fixed; inset: 0; z-index: 1200; }
/* The support-chat launcher pins itself top-most (z 2147482000) and on a phone
   sits exactly where the tour card's Next button lands — park it for the tour. */
body.tour-open .sc-launcher { display: none; }
.tour-root.open { display: block; }
.tour-scrim { position: absolute; inset: 0; background: var(--scrim); transition: opacity .25s; }
.tour-root.spot .tour-scrim { opacity: 0; }
/* The spotlight is a hole: the ring's giant box-shadow IS the scrim on target beats. */
.tour-spot {
  position: fixed; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 9999px var(--scrim), 0 0 0 3px rgba(255,255,255,.85), 0 0 28px rgba(0,0,0,.35);
  transition: top .3s, left .3s, width .3s, height .3s; display: none;
}
.tour-root.spot .tour-spot { display: block; }
/* Beat 1's pointer: the card explains the page's own search box, and without a
   pointer the two are just a lit rectangle and a panel that happen to be near
   each other. Placed by _tourPlace on the spotlight's centre; a sibling of the
   card rather than a beak inside it, because the card scrolls its own overflow
   on a short screen and would clip a child hanging off its top edge. */
.tour-arrow {
  display: none; position: fixed; z-index: 1; width: 0; height: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-bottom: 13px solid #fff;
  filter: drop-shadow(0 -2px 3px rgba(0,0,0,.25));
  transform: translate(-50%, 0);
  animation: tourArrowBob 1.6s ease-in-out infinite;
}
@keyframes tourArrowBob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -5px); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-arrow { animation: none; }
}
.tour-card {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px)); background: #fff; color: var(--txt);
  border-radius: 18px; padding: 20px 22px 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  /* Beat 1 carries the search mock, so the card is now tall enough to matter on
     a short phone: cap it rather than let the sheet push its own Next button
     off the top of the screen. */
  max-height: calc(100vh - 24px); overflow-y: auto;
}
.tour-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tour-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.tour-skip { background: none; border: none; color: var(--txm); font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; padding: 6px; }
.tour-skip:hover { color: var(--txt); }
.tour-beat { display: none; }
.tour-beat.active { display: block; }
.tour-beat h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; line-height: 1.2; margin: 0 0 8px; color: var(--navy); }
.tour-beat p { font-size: 17px; line-height: 1.55; color: var(--txm); margin: 0; }
.tour-icon { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.tour-playing { display: none; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--gold); }
.tour-playing.on { display: block; }
/* ── Beat 1: the canned search re-enactment ──
   A looping illustration of the landing search drawn INSIDE the card: the query
   types itself and the AI suggestions answer it. A mock on purpose — the real
   box sits behind the scrim, a real query costs a pod round-trip, and the
   catalog may still be loading when the tour opens. Every row is in the DOM from
   the start and only fades in, so the card never resizes mid-loop (it is what
   the spotlight is positioned against — a growing card would drag the page
   highlight around with it). */
.tour-demo {
  position: relative;                 /* the pointer is placed against this box */
  margin-top: 12px; padding: 8px; border: 1px solid var(--bdr);
  border-radius: 12px; background: #fbf7ee;
}
.tour-demo-field {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1.5px solid var(--navy); border-radius: 9px; padding: 8px 10px;
}
.tour-demo-mag { width: 15px; height: 15px; flex: none; color: var(--txl); }
.tour-demo-q { font-size: 14px; color: var(--txt); white-space: nowrap; overflow: hidden; }
.tour-demo-caret {
  width: 1.5px; height: 15px; flex: none; background: var(--navy);
  animation: tourCaret 1s steps(1) infinite;
}
@keyframes tourCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.tour-demo-head {
  padding: 8px 6px 4px; font-size: 11px; font-weight: 700; color: var(--txm);
  text-transform: uppercase; letter-spacing: .06em;
  opacity: 0; transition: opacity .2s ease;
}
.tour-demo.answered .tour-demo-head { opacity: 1; }
.tour-demo-list { list-style: none; margin: 0; padding: 0; }
.tour-demo-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}
.tour-demo-row.in { opacity: 1; transform: none; }
.tour-demo-cover {
  width: 26px; height: 37px; flex: none; object-fit: cover; border-radius: 3px;
  background: #ece5d3; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tour-demo-lines { min-width: 0; display: flex; flex-direction: column; }
.tour-demo-lines b {
  font-size: 13.5px; font-weight: 600; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tour-demo-lines small { font-size: 11.5px; color: var(--txm); }
/* The pointer that finishes the story: suggestions appearing only shows the
   search answering, not that a suggestion is a thing you TAP. The element is a
   zero-size point AT the fingertip, so `transform` moves the fingertip itself
   and the ripple can be centred on it; _tourDemoPlay reads the row's own
   offsets, so nothing here assumes a card width. */
.tour-demo-hand {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2;
  opacity: 0; pointer-events: none;
  transition: transform .62s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
}
.tour-demo-hand.on { opacity: 1; }
.tour-demo-hand svg {
  position: absolute; left: -9px; top: -3px; width: 26px; height: 26px; display: block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
  transform-origin: 9px 3px; transition: transform .12s ease;
  color: var(--navy);              /* the outline follows the brand, like the field */
}
.tour-demo-hand.tap svg { transform: scale(.84); }
.tour-demo-tap {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px;
  border-radius: 50%; border: 2px solid var(--gold); opacity: 0;
}
.tour-demo-tap.go { animation: tourDemoTap .5s ease-out; }
@keyframes tourDemoTap {
  0%   { opacity: .9; transform: scale(.35); }
  100% { opacity: 0;   transform: scale(1.6); }
}
/* Outline only, and no size change: the card's height is what the spotlight is
   positioned against, so the chosen row must not grow. */
.tour-demo-row.picked {
  background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--navy);
}
/* Beat 2's second mock closes the arc the take opens: the recording is made,
   and this is the button that plays it back. Mocked because "Hear your AI
   voice" lives inside the capture modal, which is not on screen, so there is
   nothing on the page to point at. What appears after the tap is NOT
   invented: the bar and the clock track the very clip the beat is playing
   (_tourRecHearPlay), a miniature of the real .np-player. Laid out from the
   start and only faded in, like beat 1's rows, so the card cannot change
   height mid-gesture and drag the page spotlight around with it. */
.tour-hear { padding: 12px 10px 20px; text-align: center; }
.tour-hear-btn {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--navy); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--navy);
  transition: background .18s ease, color .18s ease;
}
.tour-hear-btn.on { background: var(--navy); color: #fff; }
.tour-hear-player {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 6px 10px; border-radius: 999px;
  background: #faf7f0; border: 1px solid var(--bdr);
  opacity: 0; transition: opacity .25s ease;
}
.tour-hear-player.on { opacity: 1; }
.tour-hear-play {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-size: 11px; padding-left: 2px;
  box-shadow: 0 2px 6px rgba(45,52,54,.25);
}
.tour-hear-play.playing { background: var(--gold); color: var(--navyd); }
.tour-hear-bar {
  flex: 1; height: 6px; border-radius: 999px; background: var(--bdr);
  overflow: hidden; display: block;
}
.tour-hear-fill { display: block; height: 100%; width: 0; background: var(--gold); }
.tour-hear-time {
  font-size: 11px; color: var(--txm); text-align: right;
  font-variant-numeric: tabular-nums; min-width: 30px;
}
/* Beat 2's first mock is the recording itself: the capture modal's calibration
   box in miniature — the same "Read this passage aloud" label over THIS brand's
   real calibration text (clipped in JS, not a stand-in) — and the one button
   that is Record and then Stop, exactly as the real #vcRecordBtn swaps. The
   timer and the level bars are what say "it is listening now"; the bars are
   laid out from the start and only animate, so the card never changes height
   mid-take. */
.tour-rec { padding: 10px 10px 18px; }
.tour-rec-label {
  font-size: 11px; font-weight: 700; color: var(--txm);
  text-transform: uppercase; letter-spacing: .06em; padding: 0 2px 6px;
}
.tour-rec-passage {
  margin: 0 0 10px; padding: 8px 10px; border-radius: 8px;
  background: #fff; border: 1px solid var(--bdr);
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: 13px; line-height: 1.45; color: var(--navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.9em;
}
.tour-rec-row { display: flex; align-items: center; gap: 10px; }
.tour-rec-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--navy); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--navy);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tour-rec-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #c0392b; flex: none;
  transition: border-radius .18s ease;
}
.tour-rec.recording .tour-rec-btn { background: #c0392b; border-color: #c0392b; color: #fff; }
/* the dot squares off into the stop glyph, as record buttons do */
.tour-rec.recording .tour-rec-dot { background: #fff; border-radius: 2px; animation: tourRecPulse 1s ease-in-out infinite; }
@keyframes tourRecPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.tour-rec-timer {
  font-size: 12px; color: var(--txm); font-variant-numeric: tabular-nums; flex: none;
}
.tour-rec.recording .tour-rec-timer { color: #c0392b; font-weight: 600; }
.tour-rec-levels { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.tour-rec-levels i {
  width: 3px; height: 4px; border-radius: 2px; background: var(--bdr); display: block;
}
.tour-rec.recording .tour-rec-levels i { background: var(--gold); animation: tourRecLevel .8s ease-in-out infinite; }
.tour-rec.recording .tour-rec-levels i:nth-child(2) { animation-delay: .15s; }
.tour-rec.recording .tour-rec-levels i:nth-child(3) { animation-delay: .3s; }
.tour-rec.recording .tour-rec-levels i:nth-child(4) { animation-delay: .45s; }
.tour-rec.recording .tour-rec-levels i:nth-child(5) { animation-delay: .6s; }
@keyframes tourRecLevel { 0%, 100% { height: 4px; } 50% { height: 15px; } }
/* the take that came back: appears when the loop stops, no size change */
.tour-rec-done {
  margin-left: auto; flex: none; font-size: 13px; font-weight: 700; color: var(--gold);
  opacity: 0; transition: opacity .25s ease;
}
.tour-rec.done .tour-rec-done { opacity: 1; }
/* Beat 3's mock is the close of the sale: the capture modal's gold approve
   button, the popup's Add to basket under it, and the basket those two taps
   fill — icon with its count badge, the one title inside, and the checkout
   line, all miniatures of the real .cart-fab / .cart-drawer. Everything is
   laid out from the start (the panel only lights up, the count only swaps),
   so three taps never change the card's height. No price, as ever: the real
   one is per brand, per currency and per title. */
.tour-buy { padding: 10px 10px 18px; display: flex; flex-direction: column; gap: 7px; }
.tour-buy-use {
  display: block; padding: 8px 10px; text-align: center; border-radius: 8px;
  background: var(--gold); color: #fff; font-size: 12.5px; font-weight: 600;
  transition: filter .18s ease, box-shadow .18s ease;
}
.tour-buy-use.on { filter: brightness(.88); box-shadow: inset 0 0 0 1.5px var(--navy); }
.tour-buy-add {
  display: block; padding: 8px 10px; text-align: center; border-radius: 8px;
  border: 1.5px solid var(--navy); background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--navy);
  opacity: .45; transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.tour-buy-add.ready { opacity: 1; }
.tour-buy-add.on { background: var(--navy); color: #fff; }
.tour-buy-basket {
  border: 1px solid var(--bdr); border-radius: 10px; background: #fff;
  opacity: .45; transition: opacity .18s ease, box-shadow .18s ease;
}
.tour-buy-basket.on { opacity: 1; box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.tour-buy-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--bdr);
}
.tour-buy-fab { position: relative; flex: none; width: 20px; height: 20px; color: var(--navy); }
.tour-buy-fab svg { width: 18px; height: 18px; display: block; }
.tour-buy-count {
  position: absolute; top: -6px; right: -8px; min-width: 14px; height: 14px;
  border-radius: 999px; background: var(--gold); color: #fff;
  font-size: 9.5px; font-weight: 700; font-style: normal; line-height: 14px; text-align: center;
  transform: scale(1); transition: transform .18s ease;
}
.tour-buy-count.pop { animation: tourBuyPop .4s ease-out; }
@keyframes tourBuyPop { 0% { transform: scale(1); } 45% { transform: scale(1.55); } 100% { transform: scale(1); } }
.tour-buy-title {
  font-size: 11px; font-weight: 700; color: var(--txm);
  text-transform: uppercase; letter-spacing: .06em;
}
.tour-buy .tour-demo-row { padding: 6px 10px; }
.tour-buy-go {
  display: block; margin: 0 10px 10px; padding: 7px 10px; text-align: center;
  border-radius: 8px; background: var(--gold); color: #fff;
  font-size: 12px; font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .tour-demo-caret { animation: none; }
  .tour-demo-row { transition: none; }
  .tour-demo-hand { transition: none; }
  .tour-demo-tap.go { animation: none; }
  .tour-hear-player { transition: none; }
  .tour-rec.recording .tour-rec-dot { animation: none; }
  .tour-rec.recording .tour-rec-levels i { animation: none; height: 10px; }
  .tour-buy-count.pop { animation: none; }
}
/* On a short screen the beat-1 card has to fit between the search box and the
   bottom of the window — see _tourPlace. Trim the mock rather than let the card
   start scrolling its own Next button out of reach. */
@media (max-height: 780px) {
  .tour-beat[data-beat="1"] .tour-icon { display: none; }
  .tour-demo { margin-top: 8px; padding: 6px; }
  .tour-demo-field { padding: 6px 9px; }
  .tour-demo-head { padding: 6px 6px 2px; }
  .tour-demo-row { padding: 2px 6px; }
  .tour-demo-cover { width: 22px; height: 31px; }
  .tour-beat[data-beat="2"] .tour-icon,
  .tour-beat[data-beat="3"] .tour-icon { display: none; }
  .tour-hear { padding: 6px 6px 14px; }
  .tour-rec { padding: 6px 6px 14px; }
  .tour-rec-passage { margin-bottom: 6px; }
  .tour-buy { padding: 6px 6px 14px; gap: 5px; }
  .tour-buy-use, .tour-buy-add { padding: 6px 9px; }
}
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.tour-dots { display: flex; gap: 6px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--bdr); display: block; }
.tour-dots i.on { background: var(--gold); width: 20px; border-radius: 4px; }
.tour-btns { display: flex; gap: 8px; }
.tour-btn {
  border-radius: 50px; padding: 10px 18px; font: 700 14px/1 inherit; font-family: inherit;
  cursor: pointer; border: 1px solid var(--bdr); background: #fff; color: var(--txt);
}
.tour-btn:hover { border-color: var(--gold); }
.tour-btn-primary { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: var(--sh-terra); }
.tour-btn-primary:hover { filter: brightness(1.05); }
.tour-end { display: none; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tour-end.on { display: flex; }
.tour-end .tour-btn { flex: 1 1 140px; text-align: center; padding: 12px 16px; }
@media (min-width: 768px) {
  /* Desktop: sit beside the spotlight rather than over the fold-bottom */
  .tour-root.spot .tour-card { bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spot { transition: none; }
}