/* ═══════════════════════════════════════════════════════════════════════════
   GoFillAm guided tour — the spotlight, the card, the hover tips, the launcher.

   Everything lives in one fixed layer above the page (the page's own top layer is
   99999 for the emergency sweep, so this sits above that and below nothing). The
   dimming is the spotlight's own box-shadow rather than a separate scrim, so there
   is exactly one element to move: the hole. That is what keeps the spotlight and
   the card in step while the page scrolls under them.

   The launcher sits bottom-LEFT because AMMA owns bottom-right (96px up) and the
   back-to-top button owns the corner beneath it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Two pages the tutor runs on carry no site stylesheet of their own — the password reset and
   the support reply — so the tokens the card is drawn with are declared here for them. The
   class is put on <html> only when those tokens are missing, so on every other page the
   site's own palette wins untouched. */
html.tour-standalone {
  --color-dark: #1f2f2d;
  --color-green: #00a048;
  --color-green-dark: #00803a;
  --color-green-bright: #00c65c;
  --color-white: #ffffff;
  --color-text-muted: #3a453f;
  --font-display: "Boldonse", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.tour-root {
  /* The spacing and depth of the card, named once. A walkthrough reads as one object
     only if its air is decided in one place rather than nudged element by element. */
  --tour-pad: 26px;
  --tour-pad-tight: 20px;
  --tour-gap: 16px;
  /* The rhythm inside a block — heading to its own copy — kept a step below the gap
     between blocks, so the eye reads the groups before it reads the items. */
  --tour-gap-in: 7px;
  --tour-edge: rgba(31, 47, 45, 0.08);
  --tour-hair: rgba(31, 47, 45, 0.06);
  position: fixed;
  inset: 0;
  z-index: 1000000;
  /* The layer itself never blocks anything: the scrim and the card opt back in. */
  pointer-events: none;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

/* The sheet's handle: a phone needs something to look like a sheet was pulled up, and a
   pointer needs no handle at all. */
.tour-tip__grab { display: none; }

.tour-root[hidden] { display: none; }

/* ── The click catcher ──────────────────────────────────────────────────────
   A tap anywhere the page is showing moves the tour on instead of pressing
   whatever is underneath, so walking the site during the tour cannot place an
   order or open a modal by accident. touch-action keeps the page scrollable by
   finger while it is up. */
.tour-scrim {
  position: absolute;
  inset: 0;
  /* A vignette under the spotlight's own shadow: the dim deepens into the corners, so the
     lit area reads as a light being held over the page rather than a hole cut out of it. */
  background: radial-gradient(120% 92% at 50% 4%, rgba(9, 22, 17, 0) 36%, rgba(9, 22, 17, 0.32) 100%);
  pointer-events: auto;
  touch-action: pan-y;
  cursor: pointer;
}

/* ── The spotlight ──────────────────────────────────────────────────────────
   One element whose huge shadow dims everything else. left/top/width/height are
   set by the script and transitioned here, so moving between steps reads as the
   light travelling rather than the page jumping. */
.tour-hole {
  position: absolute;
  border-radius: 18px;
  pointer-events: none;
  /* Four rings rather than one line: a white hairline that separates the lit area from the
     dim, the brand ring under it, and the shadow that lifts it off the page. */
  box-shadow:
    0 0 0 9999px rgba(9, 22, 17, 0.7),
    0 0 0 1.5px rgba(255, 255, 255, 0.92),
    0 0 0 4px rgba(0, 198, 92, 0.42),
    0 22px 58px rgba(6, 18, 12, 0.44);
  transition:
    left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.3s ease;
  will-change: left, top, width, height;
}

/* One halo that leaves the ring and is gone, so the eye is drawn before the card speaks. */
.tour-hole::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 2px rgba(0, 198, 92, 0.32);
  animation: tour-halo 2.9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}

@keyframes tour-halo {
  0% { opacity: 0.5; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.05); }
}

/* A whole section is framed rather than boxed: square corners so it reads as the
   section's own edges, and a thinner ring so a full-width band does not look redrawn. */
.tour-hole--whole {
  border-radius: 4px;
  box-shadow:
    0 0 0 9999px rgba(9, 22, 17, 0.6),
    0 0 0 1.5px rgba(255, 255, 255, 0.75),
    0 0 0 5px rgba(0, 198, 92, 0.28);
}

/* A slow breath on the ring, so the lit control reads as live rather than as a
   box drawn over it. */
.tour-hole::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 24px;
  border: 1.5px solid rgba(0, 198, 92, 0.48);
  animation: tour-breathe 2.6s ease-in-out infinite;
  pointer-events: none;
}

.tour-hole--whole::after { inset: -8px; border-radius: 10px; opacity: 0.6; }

/* The step number, riding the corner of the lit area. */
.tour-hole__tag {
  /* Above the card as well as the page: the badge is the step number, and a card placed beside
     the frame can otherwise sit on top of it. */
  z-index: 5;
  position: absolute;
  top: -14px;
  left: -14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(150deg, #17d46a, var(--color-green) 55%, var(--color-green-dark));
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 0.84rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 12px 26px rgba(9, 22, 17, 0.38),
    0 0 0 3px rgba(255, 255, 255, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Against the edge of the screen the badge comes inside the frame, where it is not
   clipped and still points at the same corner. */
.tour-hole--tag-in-x .tour-hole__tag { left: 10px; }
.tour-hole--tag-in-y .tour-hole__tag { top: 10px; }

/* When the lit area fills the screen there is nothing left to dim, so the page keeps
   a light tint: enough that it still reads as paused under the card. */
.tour-root--filled .tour-scrim { background: rgba(9, 22, 17, 0.22); }
.tour-root--filled .tour-hole { box-shadow: 0 0 0 9999px rgba(9, 22, 17, 0.06); }

@keyframes tour-breathe {
  0%, 100% { opacity: 0.25; transform: scale(0.995); }
  50% { opacity: 0.75; transform: scale(1.012); }
}

/* ── The card ───────────────────────────────────────────────────────────────
   Placed beside the spotlight, always inside the viewport. Moves with the same
   curve as the light so the two travel together. */
.tour-tip {
  position: absolute;
  width: min(408px, calc(100vw - 32px));
  padding: var(--tour-pad) 22px var(--tour-pad-tight);
  /* A near-white pane rather than flat white: the sheet the card sits on stays faintly
     visible under it, which is what lets the card feel placed on the page. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(251, 253, 252, 0.955));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(9, 22, 17, 0.05),
    0 14px 28px -14px rgba(9, 22, 17, 0.3),
    0 40px 90px -30px rgba(9, 22, 17, 0.46),
    0 0 0 1px rgba(31, 47, 45, 0.05);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition:
    left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease,
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

/* An edge drawn as a gradient rather than a border: a hairline of brand green at the top
   corner that fades away down the card. */
.tour-tip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(152deg, rgba(0, 198, 92, 0.5), rgba(255, 255, 255, 0) 40%, rgba(31, 47, 45, 0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* One sweep of light across the pane as each step arrives. Animated by background-position
   so it stays inside the card: the tail is a child sitting outside the card's own box. */
.tour-tip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(104deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 280% 100%;
  background-repeat: no-repeat;
  background-position: 135% 0;
  opacity: 0;
  pointer-events: none;
}

.tour-tip.is-in { opacity: 1; transform: translateY(0) scale(1); }
.tour-tip.is-in::after,
.tour-tip.is-step::after { animation: tour-sheen 0.95s ease-out 1 both; }

@keyframes tour-sheen {
  0% { opacity: 0.8; background-position: 135% 0; }
  100% { opacity: 0; background-position: -35% 0; }
}

/* A card that carries a chain is given more width, so six steps can be read down one column
   without a scrollbar cutting the last of them off. The sheet is excluded: it has its own
   width, and the chain there is laid out as columns. */
@media (min-width: 901px) {
  .tour-tip[data-flow="true"]:not([data-place="sheet"]) {
    width: min(524px, calc(100vw - 32px));
  }
}

/* A whole section is described from a bar along the bottom, centred and wide: enough
   room for the chain, and it never covers the thing being pointed at. */
.tour-tip[data-place="sheet"] {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(20px + env(safe-area-inset-bottom));
  top: auto;
  width: min(700px, calc(100vw - 36px));
  padding: var(--tour-pad) 30px var(--tour-pad-tight);
  transform: translateX(-50%) translateY(8px);
}

.tour-tip[data-place="sheet"].is-in { transform: translateX(-50%) translateY(0); }
.tour-tip[data-place="sheet"] .tour-tip__arrow { display: none; }

/* ── The progress bar ───────────────────────────────────────────────────────
   A hairline across the top of the card measuring the walk itself. */
.tour-tip__bar {
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--tour-hair);
  overflow: hidden;
}

.tour-tip__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #17d46a, var(--color-green) 60%, var(--color-green-dark));
  box-shadow: 0 0 14px rgba(0, 198, 92, 0.55);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Who is talking on the left, how far along the walk is on the right. */
.tour-tip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 14px;
}

.tour-tip__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-green-dark);
}

.tour-tip__eyebrow span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-green-bright);
  box-shadow: 0 0 0 4px rgba(0, 198, 92, 0.16);
}

.tour-tip__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.011em;
  text-wrap: balance;
  color: var(--color-dark);
}

.tour-tip__body {
  margin: 0 0 var(--tour-gap);
  font-size: 0.93rem;
  line-height: 1.66;
  color: var(--color-text-muted);
}

.tour-tip__body strong { color: var(--color-dark); }

/* ── The chain ──────────────────────────────────────────────────────────────
   A numbered sequence drawn as a real chain: the rail is the line between the
   numbers, so the reader sees that one step leads to the next rather than reading
   a list of unrelated facts. */
.tour-tip__flow {
  position: relative;
  margin: 0 0 var(--tour-gap);
  padding: 3px 0 0;
  list-style: none;
  counter-reset: tour-link;
  /* A long chain scrolls inside the card rather than pushing the buttons off a short
     screen. The card is the thing that must always be usable. */
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 47, 45, 0.22) transparent;
}

.tour-tip__flow::-webkit-scrollbar { width: 6px; }
.tour-tip__flow::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(31, 47, 45, 0.2);
}

.tour-tip__link {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 13px 0;
}

.tour-tip__link:last-child { padding-bottom: 3px; }

/* The rail: one continuous line behind the numbers, stopping at the last one. */
.tour-tip__link:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 26px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(0, 160, 72, 0.5), rgba(0, 160, 72, 0.14));
}

.tour-tip__link-num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  /* Filled rather than an outlined ring: on a card that is already light, the numbered walk
     is the strongest thing on it and reads first. */
  background: linear-gradient(160deg, var(--color-green, #00a048), #0c6c34);
  box-shadow: 0 5px 12px -5px rgba(12, 108, 52, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.72rem;
  line-height: 1;
}

/* The chain arrives with the card, one link after another — short enough that it is read as
   the card settling rather than as an effect. --i is written per link in the script. */
@keyframes tour-link-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.tour-tip[data-flow="true"] .tour-tip__flow .tour-tip__link {
  animation: tour-link-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.tour-tip[data-flow="true"] .tour-tip__flow .tour-tip__link:not(:last-child)::before {
  background: linear-gradient(180deg, rgba(0, 160, 72, 0.55), rgba(0, 160, 72, 0.12));
}

.tour-tip__link-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 3px;
}

.tour-tip__link-copy strong {
  font-size: 0.87rem;
  line-height: 1.32;
  color: var(--color-dark);
}

.tour-tip__link-copy span {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #6b7a70;
}

/* The stops of the walk, drawn as a segmented rail rather than as a row of dots: the
   filled length is the progress, and each stop is still a place you can jump to. */
.tour-tip__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 var(--tour-gap);
}

.tour-tip__dot {
  position: relative;
  width: 16px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(31, 47, 45, 0.14);
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease, box-shadow 0.25s ease;
}

/* A 6px stop is a poor target, so the pointer gets a taller area than the mark. */
.tour-tip__dot::after {
  content: "";
  position: absolute;
  inset: -9px -3px;
}

.tour-tip__dot[aria-current="true"] {
  width: 30px;
  background: linear-gradient(90deg, #17d46a, var(--color-green));
  box-shadow: 0 2px 10px rgba(0, 198, 92, 0.4);
}

.tour-tip__dot:hover { background: rgba(10, 143, 60, 0.45); }

.tour-tip__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
}

.tour-tip__spacer { flex: 1; }
.tour-tip__next { flex-shrink: 0; }

/* The card wears the house button: the same pill label and round icon the rest of
   the site uses, sized down so the card stays a card, and given the lift the button
   on the page has. */
.tour-tip .btn__label { padding: 12px 20px; font-size: 0.78rem; }
.tour-tip .btn__icon { width: 42px; height: 42px; }
.tour-tip .btn__icon svg { width: 15px; height: 15px; }

/* The button is a pill built from two children, but the element itself is a plain box: the
   house focus ring is drawn on that box, so it read as a hard rectangle the pill was sitting
   inside. The element takes the pill's own radius, and the shadow is dropped entirely — the
   pill carries itself, and a keyboard gets a green ring that hugs the same shape. */
.tour-tip__next {
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: none;
}

.tour-tip__next:hover { transform: translateY(-1px); box-shadow: none; }
.tour-tip__next:active { transform: translateY(0) scale(0.995); }
/* A keyboard still needs to see where it is, and the ring has to sit inside the pill to do that:
   anything drawn around the button is the box the pill was sitting on, which is what is being
   taken away here. */
.tour-tip__next:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.78);
}

.tour-tip__ghost,
.tour-tip__skip {
  border: none;
  background: none;
  padding: 10px 13px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.tour-tip__ghost {
  color: #4f5f57;
  background: rgba(31, 47, 45, 0.045);
  box-shadow: inset 0 0 0 1px rgba(31, 47, 45, 0.05);
}

.tour-tip__ghost:hover { color: var(--color-dark); background: rgba(31, 47, 45, 0.09); }
.tour-tip__ghost[disabled] { opacity: 0.32; cursor: default; background: none; box-shadow: none; }

.tour-tip__skip { color: #8b9a92; }
.tour-tip__skip:hover { color: var(--color-dark); background: rgba(31, 47, 45, 0.06); }

.tour-tip__ghost:focus-visible,
.tour-tip__skip:focus-visible { outline: 2px solid rgba(10, 143, 60, 0.32); outline-offset: 1px; }

.tour-tip__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: var(--tour-gap) 0 0;
  padding: 15px 2px 1px;
  border-top: 1px solid var(--tour-edge);
}

.tour-tip__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: #7b8a83;
  cursor: pointer;
  white-space: nowrap;
}

.tour-tip__toggle input {
  appearance: none;
  width: 30px;
  height: 17px;
  margin: 0;
  border-radius: 999px;
  background: rgba(31, 47, 45, 0.18);
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tour-tip__toggle input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-white);
  transition: transform 0.2s ease;
}

.tour-tip__toggle input:checked { background: var(--color-green); }
.tour-tip__toggle input:checked::after { transform: translateX(13px); }

/* The step count, as the chip it is: the one number worth reading twice. */
.tour-tip__count {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(31, 47, 45, 0.05);
  box-shadow: inset 0 0 0 1px rgba(31, 47, 45, 0.06);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #55655d;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Keyboard help, next to the count on a real pointer and hidden where there is none. */
.tour-tip__keys {
  display: none;
  margin: 0 0 0 auto;
  padding-right: 12px;
  font-size: 0.72rem;
  color: #9aa8a1;
  white-space: nowrap;
}

.tour-tip__keys kbd {
  display: inline-block;
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff, #f3f6f4);
  box-shadow: 0 1px 0 rgba(31, 47, 45, 0.14), inset 0 0 0 1px rgba(31, 47, 45, 0.07);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  color: #5c6b63;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  .tour-tip__keys { display: block; }
}

/* The bar over the foot on a whole-section card: the chain has already used the width. */
.tour-tip[data-place="sheet"] .tour-tip__flow {
  column-gap: 18px;
  margin-bottom: 12px;
}

@media (min-width: 700px) {
  .tour-tip[data-place="sheet"] .tour-tip__flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: start;
  }

  /* Read as columns, the vertical rail would point the wrong way, so each link keeps its
     number and loses the line. */
  .tour-tip[data-place="sheet"] .tour-tip__link:not(:last-child)::before { display: none; }
  .tour-tip[data-place="sheet"] .tour-tip__link { padding-bottom: 0; }
}

/* The little tail, pointing at the spotlight. Positioned per placement. */
.tour-tip__arrow {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fdfefd;
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: -1px -1px 0 rgba(0, 198, 92, 0.22);
}

.tour-tip[data-place="bottom"] .tour-tip__arrow { top: -7px; }
.tour-tip[data-place="top"] .tour-tip__arrow { bottom: -7px; }
.tour-tip[data-place="right"] .tour-tip__arrow { left: -7px; }
.tour-tip[data-place="left"] .tour-tip__arrow { right: -7px; }

/* ── Hover tips ─────────────────────────────────────────────────────────────
   The quiet half of the tutor: a short description beside whatever the pointer
   (or keyboard focus) lands on, once. Never blocks the pointer. */
.tour-hint {
  position: fixed;
  z-index: 1000001;
  max-width: 274px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 37, 30, 0.96), rgba(13, 27, 21, 0.97));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #eef5f1;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  box-shadow: 0 18px 40px -18px rgba(9, 22, 17, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tour-hint[hidden] { display: none; }
.tour-hint.is-on { opacity: 1; transform: translateY(0) scale(1); }

.tour-hint::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(16, 31, 25, 0.96);
  transform: rotate(45deg);
  border-radius: 2px;
}

.tour-hint[data-dir="up"]::after { bottom: -4px; left: var(--hint-arrow, 50%); }
.tour-hint[data-dir="down"]::after { top: -4px; left: var(--hint-arrow, 50%); }

/* ── The launcher ───────────────────────────────────────────────────────────
   Always available, bottom-left, and hidden while the tour is running. */
.tour-launch {
  position: fixed;
  left: max(22px, calc(env(safe-area-inset-left) + 10px));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #22382f, var(--color-dark));
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow:
    0 18px 38px -16px rgba(9, 22, 17, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

.tour-launch:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 46px -18px rgba(9, 22, 17, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(0, 198, 92, 0.3);
}

.tour-launch:focus-visible {
  outline: 3px solid rgba(10, 143, 60, 0.32);
  outline-offset: 3px;
}

.tour-launch[hidden] { display: none; }

.tour-launch__ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(150deg, #17d46a, var(--color-green) 60%, var(--color-green-dark));
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 198, 92, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.tour-launch__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-green-bright);
  animation: tour-pulse 2.8s ease-out infinite;
}

@keyframes tour-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(1.65); opacity: 0; }
}

.tour-launch__label { white-space: nowrap; }

/* ── Whole-section captures on a phone ─────────────────────────────────────
   Same bar, tighter, and the chain always stacks — a two-column chain on a phone
   would be read in the wrong order. */
@media (max-width: 640px) {
  .tour-tip__bar { left: 16px; right: 16px; }
  .tour-tip__link-copy strong { font-size: 0.84rem; }
  .tour-tip__link-copy span { font-size: 0.77rem; }
  .tour-hole__tag { top: -12px; left: -10px; min-width: 26px; height: 26px; font-size: 0.76rem; }
}

/* ── Small screens ──────────────────────────────────────────────────────────
   The card becomes a sheet pinned to the bottom, where a thumb already is, and
   the tail is dropped because there is no room to point with it. */
@media (max-width: 640px) {
  .tour-tip {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    padding: 26px 18px 14px;
    border-radius: 28px;
    transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    /* A ceiling, so the tallest card — the one carrying the six-step chain — cannot swallow
       the screen and leave nothing of the page in view. Measured in a 390x844 frame, that card
       arrived at 609px, which left a 91px strip of page above it: a walkthrough framing a
       control inside a strip is not showing anyone anything. 62vh holds roughly a fifth of the
       screen for the page on any phone, and the shorter of the two caps keeps that true on a
       small one. Capped here rather than in script so the measuring code sees the height the
       card really has. */
    max-height: min(62vh, calc(100vh - 300px));
    display: flex;
    flex-direction: column;
  }

  /* The chain is the part that grows, so it is the part that shrinks and scrolls: the title,
     the text and the buttons stay put at the ends of the card whatever the step is. It may
     shrink below its content only for the box's sake — a longer chain scrolls inside it. */
  .tour-tip__flow {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 40vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* The handle, and the bar over it is what the sheet is pulled by. */
  .tour-tip__grab {
    display: block;
    position: absolute;
    top: 9px;
    left: 50%;
    width: 44px;
    height: 4px;
    margin-left: -22px;
    border-radius: 999px;
    background: rgba(31, 47, 45, 0.16);
  }

  .tour-tip__head { margin: 0 0 10px; }
  .tour-tip__title { font-size: 1.06rem; }
  .tour-tip__body { font-size: 0.89rem; margin-bottom: 12px; }
  .tour-tip__arrow { display: none; }
  /* A whole-section card and an ordinary one land in the same place on a phone. */
  .tour-tip[data-place="sheet"] {
    left: 12px;
    right: 12px;
    width: auto;
    transform: translateY(6px);
  }

  /* Space under the page equal to the card, added only while the tour runs and measured from
     the card itself. The last steps of the tour are in the footer, at the very end of the
     document: without this the page could not scroll them clear of the card, and the card sat
     on top of the thing it was describing. */
  html.tour-running body { padding-bottom: var(--tour-sheet, 0px); }
  .tour-tip[data-place="sheet"].is-in { transform: translateY(0); }
  .tour-tip__actions { gap: 8px; }
  .tour-tip .btn__label { padding: 13px 18px; font-size: 0.78rem; }
  .tour-tip .btn__icon { width: 45px; height: 45px; }
  .tour-tip__ghost, .tour-tip__skip { padding: 12px 4px; }

  .tour-launch {
    padding: 10px;
    gap: 0;
    left: max(14px, calc(env(safe-area-inset-left) + 8px));
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  }
  .tour-launch__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Tablet and up: the card has room to sit beside a section rather than over it. */
@media (min-width: 641px) and (max-width: 900px) {
  .tour-tip { width: min(344px, calc(100vw - 40px)); }
}

/* ── Motion, contrast and print ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tour-hole,
  .tour-tip,
  .tour-tip__bar-fill,
  .tour-tip__dot,
  .tour-tip__next,
  .tour-hint,
  .tour-launch { transition: none; }
  /* The card still arrives, it simply does not slide: opacity is the whole effect. */
  .tour-tip,
  .tour-tip[data-place="sheet"],
  .tour-tip[data-place="sheet"].is-in { transform: none; }
  .tour-tip[data-place="sheet"] { transform: translateX(-50%); }
  /* And nothing sweeps, breathes or pulses: a still card and a still ring. */
  .tour-hole::after,
  .tour-hole::before,
  .tour-tip::after,
  .tour-launch__ring::after { animation: none; }
  /* The chain is simply there: no stagger, and no link left part-way through its entrance. */
  .tour-tip__link { animation: none !important; opacity: 1; transform: none; }
  .tour-tip__next:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .tour-hole { box-shadow: 0 0 0 9999px rgba(4, 12, 8, 0.88), 0 0 0 3px #0a8f3c; }
  .tour-tip { border: 2px solid var(--color-dark); }
  .tour-tip__count { box-shadow: inset 0 0 0 1px rgba(31, 47, 45, 0.4); }
  .tour-tip__dot { background: rgba(31, 47, 45, 0.32); }
}

@media print {
  .tour-root,
  .tour-launch { display: none !important; }
}