/* The walk-through store at the top of the home page (docs/HOMEPAGE_TOUR.md).
   Built by site-src/build.mjs into site/assets/tour/tour.css.

   Without .tour--scrolly the section is a stacked story: the poster with the
   H1 over it, then a still and its copy per beat (no JS, reduced motion).
   .tour--scrolly (set before first paint when motion is allowed) makes the
   section tall and its stage sticky; tour.js drives everything in it from
   scroll progress and names the thing in focus in data-focus. Each beat's
   copy reads as a lower third over the view. Colors and fonts come from the
   page's :root tokens. */

/* The store starts under the translucent sticky site header (.nav, 68px,
   and its 1px bottom border: at 68 the stage sat a pixel low at the top of
   the page and jumped up on the first pixel of scroll, 2026-09-28); the
   page's section padding does not apply. */
.tour { position: relative; background: #F4EFE7; padding: 0; margin-top: -69px; }

/* ---------- Stacked story (the default) ---------- */
.tour-sticky { display: grid; grid-template-columns: minmax(0, 1fr); }
.tour-stage {
  grid-area: 1 / 1; position: relative; overflow: hidden; background: #E8DFD2;
  min-height: 100vh; min-height: 100svh;
}
.tour-poster, .tour-poster img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tour-poster img { object-fit: cover; }
.tour-stills, .tour-canvas, .tour-scrim, .tour-shade, .tour-flash, .tour-pins, .tour-ui, .tour-space { display: none; }
.tour-beats { display: contents; }

/* The first view is the store (owner 2026-09-27: "too much white, there
   should be more focus on the store"): the title sits low on the left in
   white over a soft dark corner, like a film's opening title, and the store
   fills the rest of the view untouched. (It was a cream veil over the left
   two thirds.) */
.tour-beat[data-beat="enter"] {
  grid-area: 1 / 1; position: relative; z-index: 1; display: flex; align-items: flex-end;
  min-height: 100vh; min-height: 100svh; padding: 110px 0 96px;
}
.tour-beat[data-beat="enter"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 90% at 0% 100%, rgba(16,12,9,0.8) 0%, rgba(16,12,9,0.62) 34%, rgba(16,12,9,0.22) 62%, rgba(16,12,9,0) 82%);
}
.tour-beat[data-beat="enter"] .tour-h1 { color: #FFFDF8; text-shadow: 0 2px 20px rgba(16,12,9,0.35); }
.tour-beat[data-beat="enter"] .tour-h1 mark { color: var(--text); text-shadow: none; }
.tour-beat[data-beat="enter"] .tour-h1 .dot { color: var(--brand); }
.tour-beat[data-beat="enter"] .tour-sub { color: rgba(255,253,248,0.9); text-shadow: 0 1px 12px rgba(16,12,9,0.4); }
.tour-hero { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.tour-hero > * { max-width: 480px; }

/* Roomy line-height keeps the italic serif's tails inside the line box; the
   negative margins restore a tight visual rhythm. */
.tour-h1 {
  font-family: var(--display); font-size: clamp(40px, 3.7vw, 56px); line-height: 1.6; letter-spacing: -1.6px;
  font-weight: 800; color: var(--text); margin-top: -0.28em; margin-bottom: -0.28em;
}
.tour-h1 .line { display: block; }
/* (-0.47em, not -0.56: the highlight below covers the b's ascender and still
   clears the first line's descenders, owner 2026-09-28.) */
.tour-h1 .line + .line { margin-top: -0.47em; }
/* The first line's descenders overlap the highlight band below: keep their ink on top. */
.tour-h1 .line:not(:last-child) { position: relative; z-index: 1; }
.tour-h1 .accent { font-family: var(--serif); font-weight: 600; font-style: italic; letter-spacing: -1px; }
/* The highlight is a band behind the words, not the serif's whole line box:
   it clears the line above (owner 2026-09-28: "not as vertically high, it
   should not touch the Sell everywhere text") and starts just above the b's
   ascender (0.17em into Fraunces' box: "the top of the b is not
   highlighted, just a smidge"). */
.tour-h1 mark {
  position: relative; z-index: 0; background: none; color: inherit; white-space: nowrap;
  padding: 0 0.14em; margin: 0 -0.04em;
}
.tour-h1 mark::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0.15em; bottom: -0.06em;
  background: linear-gradient(100deg, #FCF3CB, #F9E8A6); border-radius: 0.18em;
}
.tour-h1 .dot { color: var(--brand-dark); }
.tour-sub { color: #4E4943; font-size: clamp(17px, 2vw, 20px); margin-top: 20px; }
.tour-hero .stores { margin-top: 26px; }
/* The invitation to scroll: the scroll tour's only, a still line at the
   foot of the first view that fades with the hero. */
.tour-cue { display: none; }

.tour-beat:not([data-beat="enter"]) {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 44px; align-items: center;
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 56px 24px;
}
.tour-beat:nth-child(odd):not([data-beat="enter"]) .tour-still { order: 2; }
.tour-still {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-lg); background: #E8DFD2; box-shadow: var(--shadow-md);
}
.tour-copy h2 { margin-top: 0; font-size: clamp(26px, 3.2vw, 36px); }
.tour-copy p { color: var(--muted); font-size: 17px; margin-top: 12px; }
.tour-beat[data-beat="exit"] .tour-copy h2 { font-size: clamp(28px, 3.6vw, 40px); }
/* The closing line names the app first, in its orange (owner 2026-09-28). */
.tour-beat[data-beat="exit"] .tour-name { display: block; color: var(--brand-dark); }
.tour-beat[data-beat="exit"] .stores { margin-top: 22px; }

.tour-skip {
  grid-area: 1 / 1; align-self: end; justify-self: center; z-index: 2; margin-bottom: 28px;
  font-size: 14px; font-weight: 600; color: var(--text); background: rgba(255,255,255,0.84);
  border: 1px solid var(--border); border-radius: 100px; padding: 8px 16px; box-shadow: var(--shadow-sm);
}
.tour-skip:hover { color: var(--brand-dark); }
/* The Tour switch (owner 2026-09-27: "the tour button should be a toggle"),
   on while the tour runs, off once the visitor switches it off (the page
   then keeps the stacked story on this device). Shown only where it can do
   something: the tour running, or switched off by the visitor. */
.tour-toggle { display: none; align-items: center; gap: 8px; cursor: pointer; font: inherit; line-height: 1.2; }
html.js .tour--scrolly .tour-toggle, html.js .tour--chose-off .tour-toggle { display: inline-flex; }
.tour-toggle-track {
  position: relative; flex: none; width: 30px; height: 18px; border-radius: 100px;
  background: var(--brand); transition: background-color .2s ease;
}
.tour-toggle-thumb {
  position: absolute; top: 2px; left: 14px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(20,16,12,0.3); transition: left .2s ease;
}
.tour-toggle[aria-checked="false"] .tour-toggle-track, .tour--chose-off .tour-toggle-track { background: rgba(22,19,15,0.28); }
.tour-toggle[aria-checked="false"] .tour-toggle-thumb, .tour--chose-off .tour-toggle-thumb { left: 2px; }
.tour-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 760px) {
  .tour-beat[data-beat="enter"] { align-items: flex-end; padding-top: 96px; text-align: center; }
  .tour-beat[data-beat="enter"]::before {
    background: linear-gradient(0deg, rgba(16,12,9,0.8) 0%, rgba(16,12,9,0.58) 34%, rgba(16,12,9,0.12) 58%, rgba(16,12,9,0) 70%);
  }
  .tour-hero > * { margin-left: auto; margin-right: auto; }
  .tour-hero .stores { justify-content: center; }
  .tour-beat:not([data-beat="enter"]) { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 36px 20px; }
  .tour-beat:nth-child(odd):not([data-beat="enter"]) .tour-still { order: 0; }
}

/* ---------- Site header while the tour holds the view ----------
   The logo and Download only; tour.js takes .hdr--tour off once the tour is
   scrolled past. The tabs keep their room, so nothing moves. */
#hdr .nav-links a:not(.nav-cta) { transition: opacity .3s ease, color .18s ease, background .18s ease; }
/* Faded, never hidden (review 2026-09-27: visibility took the site's
   navigation from screen readers and the keyboard for the whole tour):
   they take no taps while faded and come back for keyboard focus. */
#hdr.hdr--tour .nav-links a:not(.nav-cta) { opacity: 0; pointer-events: none; }
#hdr.hdr--tour .nav-links:focus-within a:not(.nav-cta) { opacity: 1; pointer-events: auto; }
/* Over the store and the marketplaces it floats: no bar, frost or rule of
   its own (tour.js sets .hdr--clear); the logo and Download sit on the
   stage's light veil (.tour-shade). A phone in the hand gets the frosted
   bar back over the blurred store. */
#hdr.hdr--tour {
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease,
    -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease;
}
#hdr.hdr--clear {
  background-color: transparent; border-bottom-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* The page's scroll bar stays off the scene: the tour tells its own place. */
body:has(#hdr.hdr--tour) #progress { visibility: hidden; }

/* ---------- Scroll tour ---------- */
/* Keep in step with TUNING.dwell + TUNING.travel in tour.js (it sets --tour-len). */
.tour--scrolly { height: calc((var(--tour-len, 15.9) + 1) * 100vh); height: calc((var(--tour-len, 15.9) + 1) * 100svh); }
.tour--scrolly .tour-sticky {
  display: block; position: sticky; top: 0; overflow: hidden;
  height: 100vh; height: 100dvh;
}
.tour--scrolly .tour-stage { position: absolute; inset: 0; min-height: 0; }
.tour--scrolly .tour-stills,
.tour--scrolly .tour-canvas,
.tour--scrolly .tour-scrim,
.tour--scrolly .tour-shade,
.tour--scrolly .tour-flash,
.tour--scrolly .tour-pins,
.tour--scrolly .tour-ui,
.tour--scrolly .tour-space { display: block; position: absolute; inset: 0; }
/* Each still is stacked by its beat (tour.js sets z-index); the container
   isolates them so they never rise over the pins, the phones or the space. */
.tour-stills { isolation: isolate; }
.tour-stills img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.tour-canvas { width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.tour-canvas.is-live { opacity: 1; }
.tour-canvas.is-pointing { cursor: pointer; }
.tour--scrolly .tour-stills.is-off { display: none; }
/* The store behind a phone in the hand and behind the storefronts: tour.js
   sets its blur (a backdrop filter, clean at the view's edges) and its
   dimming color. */
.tour-scrim { visibility: hidden; pointer-events: none; }
/* Two soft gradients on the scene, under the pins and the phones: a light
   veil at the top for the floating header (and a caption docked under it),
   and the lower third's shade, each at the opacity tour.js writes. */
.tour-shade { pointer-events: none; }
.tour-shade::before, .tour-shade::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.tour-shade::before {
  top: 0; height: 210px; opacity: var(--tour-shade-top, 0);
  background: linear-gradient(180deg, rgba(250,247,242,0.82) 0%, rgba(250,247,242,0.5) 40%, rgba(250,247,242,0) 100%);
}
.tour-shade::after {
  bottom: 0; height: 32%; min-height: 220px; opacity: var(--tour-shade-bottom, 0);
  background: linear-gradient(0deg, rgba(16,12,9,0.55) 0%, rgba(16,12,9,0.3) 42%, rgba(16,12,9,0) 100%);
}
/* Tall views: the caption's lines sit higher up the shade (review
   2026-09-27: 3:1 behind a Pixel 7's Shelf Check line), so it is taller and
   darker there. */
@media (max-aspect-ratio: 9/10) {
  .tour-shade::after {
    height: 46%; min-height: 300px;
    background: linear-gradient(0deg, rgba(16,12,9,0.74) 0%, rgba(16,12,9,0.5) 52%, rgba(16,12,9,0) 100%);
  }
}
.tour-flash { background: #FFFDF8; opacity: 0; pointer-events: none; }
.tour-pins, .tour-ui, .tour-space { pointer-events: none; overflow: hidden; }
/* tour.js warmUp(): copies of the phones, the scrim, the flash and the
   marketplaces drawn once at the moments ahead, unseen (0.4%: a layer at 0
   is never drawn, so nothing would be built), before the visitor reaches
   them. */
.tour-warm { position: absolute; inset: 0; opacity: 0.004; pointer-events: none; overflow: hidden; }
.tour-warm > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; }
.tour-warm > .tour-warm-fill { inset: 0; width: 100%; height: 100%; visibility: visible; }
.tour-warm-flash { background: #FFFDF8; }
/* Everything tour.js moves or fades frame by frame has a layer of its own
   (2026-09-28: without one a caption's fade, a pin's move or the
   scrubber's thumb repainted the whole stage, 20 to 80 ms of raster a
   frame in the middle of a step). */
.tour--scrolly .tour-flash, .tour--scrolly .tour-shade::before, .tour--scrolly .tour-shade::after { will-change: opacity; }
.tour--scrolly .tour-stills, .tour-scrub-thumb, .tour-scrub-tip, .tour-scrub-seg > i { will-change: transform; }
.tour--scrolly .tour-beat, .tour-pin { will-change: transform, opacity; }

/* Shelf Check pins: the number's center sits on the find. */
.tour-pin {
  position: absolute; left: 0; top: 0; margin: -16px 0 0 -16px; display: flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; font: inherit; cursor: pointer; opacity: 0; visibility: hidden;
}
.tour-pin-n {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--text); font-family: var(--display); font-weight: 800; font-size: 15px;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55), 0 6px 16px rgba(20,16,12,0.28);
}
.tour-pin-v {
  font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(22,19,15,0.78); border-radius: 100px; padding: 4px 9px;
}
/* The band is a rough value from the photo, never an eBay price (spec section 1). */
.tour-pin-note { margin-left: 5px; font-weight: 500; color: rgba(255,255,255,0.78); }
/* Value on the left: tour.js shifts the pin left by its own width, so the number (now last) still sits on the find. */
.tour-pin--left { flex-direction: row-reverse; margin: -16px 0 0 16px; }
/* Value below or above: centered on the number. */
.tour-pin--below .tour-pin-v, .tour-pin--above .tour-pin-v { position: absolute; left: 16px; transform: translateX(-50%); }
.tour-pin--below .tour-pin-v { top: 38px; }
.tour-pin--above .tour-pin-v { bottom: 38px; }
.tour-pin--top .tour-pin-n { background: var(--brand); color: #fff; box-shadow: 0 0 0 3px rgba(255,107,53,0.35), 0 6px 16px rgba(232,80,28,0.4); }

/* A click or drag over the pins never selects their text (owner 2026-09-27:
   the numbers and values lit up blue). */
.tour-pins { -webkit-user-select: none; user-select: none; }
/* Where a pointer can hover (tour.js buildPins): each find's hit area over
   the item, Shelf Check's box round it while its card is open, and the card
   itself (name, rough value, what the photo shows). The open pin's value
   chip steps aside for the card, which carries it. */
/* Layered: every item's area under every pin (a big item's area once hid
   another find's pin), the card over all of them. */
.tour-find { position: absolute; left: 0; top: 0; z-index: 1; visibility: hidden; cursor: pointer; }
.tour-pin { z-index: 2; }
.tour-find-card { z-index: 3; }
.tour-find::before {
  content: ''; position: absolute; inset: -6px; border-radius: 10px; opacity: 0; transition: opacity .15s ease;
  border: 2px solid rgba(255,255,255,0.92); box-shadow: 0 0 0 1px rgba(22,19,15,0.22), 0 6px 18px rgba(20,16,12,0.2);
}
.tour-find[data-find="find_1"]::before { border-color: var(--brand); }
.tour-find.is-open::before { opacity: 1; }
.tour-pin-v { transition: opacity .15s ease; }
.tour-pin.is-open .tour-pin-v { opacity: 0; }
.tour-find-card {
  position: absolute; left: 0; top: 0; box-sizing: border-box; width: 236px; padding: 12px 14px; border-radius: 14px;
  background: rgba(22,19,15,0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff;
  box-shadow: 0 10px 30px rgba(20,16,12,0.35); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, visibility .15s;
}
.tour-find-card.is-open { opacity: 1; visibility: visible; }
.tour-find-card-title { font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1.2; }
.tour-find-card-value { margin-top: 6px; font-weight: 800; font-size: 15px; color: #FFB08F; }
.tour-find-card-value span { display: block; margin-top: 1px; font-weight: 500; font-size: 12px; color: rgba(255,255,255,0.7); }
.tour-find-card-note { margin-top: 6px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.86); }
.tour-find-card-note:empty { display: none; }
.tour-find-card-hint {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 12px; font-weight: 700; color: #FF8C5A;
}

/* Phone UI roots (phone-ui.js) and the phones' bodies: tour.js positions
   them with a matrix3d from their top-left corner. The visitor's body's
   corners follow the screen's (48px) round its 22px bezel. */
.tour-ui > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; }
.tour-shell {
  border-radius: 70px; background: #0d0d0f;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.16), inset 0 0 0 6px #1c1c20, 0 40px 90px rgba(10,8,6,0.45);
}
/* The counter phone off its stand: shaped like the store's own (tour.js
   COUNTER_BEZEL, 18 by 15px round the screen, 56px corners), so it covers it
   exactly as it is picked up. */
.tour-shell--counter {
  border-radius: 56px; background: #101013;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.14), inset 0 0 0 5px #1b1b1f, 0 40px 90px rgba(10,8,6,0.45);
}

/* Captions: the beat's copy as a lower third, clear of what is in focus
   (tour.js docks it and narrows it beside a phone). No box: the feature's
   name as a chapter title and one line under it, white over the shade at
   the foot of the view, turning to dark ink (--tour-ink, from tour.js)
   under the header. The 460px is TUNING.caption.width in tour.js. */
.tour--scrolly .tour-beats { display: block; position: absolute; inset: 0; pointer-events: none; }
.tour--scrolly .tour-beat {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  width: auto; max-width: none; margin: 0; padding: var(--tour-top, 80px) 0 var(--tour-bottom, 24px);
  opacity: 0; isolation: isolate;
}
.tour--scrolly .tour-beat[data-dock="top"] { justify-content: flex-start; }
.tour--scrolly .tour-still { display: none; }
.tour--scrolly .tour-copy {
  --ink: var(--tour-ink, 0);
  width: max-content; max-width: min(460px, calc(100% - 48px)); margin-left: clamp(24px, 3vw, 48px);
  color: rgb(calc(255 - 233 * var(--ink)) calc(255 - 236 * var(--ink)) calc(255 - 240 * var(--ink)));
  text-shadow:
    0 1px 2px rgba(12,9,6,calc(0.5 * (1 - var(--ink)))),
    0 2px 24px rgba(12,9,6,calc(0.45 * (1 - var(--ink)))),
    0 0 18px rgba(250,247,242,calc(0.9 * var(--ink)));
}
.tour--scrolly .tour-copy h2 {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: clamp(24px, 1.9vw, 28px); line-height: 1.15; letter-spacing: -0.6px; color: inherit;
}
.tour--scrolly .tour-copy h2::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px rgba(255,107,53,0.22);
}
.tour--scrolly .tour-copy p { margin-top: 7px; font-size: 16px; line-height: 1.5; color: inherit; opacity: 0.92; }
/* Copy out of view only fades (it stays readable to screen readers) and
   takes taps only while it shows (.is-on, from tour.js; beat 0 starts with
   it). Beat 0 shows before tour.js runs: the H1 is the first paint. */
.tour--scrolly .tour-copy, .tour--scrolly .tour-hero { pointer-events: none; }
.tour--scrolly .tour-beat.is-on .tour-copy, .tour--scrolly .tour-beat.is-on .tour-hero { pointer-events: auto; }
.tour--scrolly .tour-beat[data-beat="enter"] { justify-content: flex-end; align-items: stretch; padding: 96px 0 104px; opacity: 1; }
/* The title keeps to the view's left edge, as the captions do, clear of the table. */
.tour--scrolly .tour-beat[data-beat="enter"] .tour-hero { max-width: none; margin: 0; padding: 0 clamp(24px, 3vw, 48px); }
.tour--scrolly .tour-cue {
  display: flex; align-items: center; gap: 9px; position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  margin: 0; padding: 6px 14px; border-radius: 100px; white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: 0.1px; color: rgba(22,19,15,0.76);
  background: rgba(255,251,246,0.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tour--scrolly .tour-cue::after {
  content: ""; width: 6px; height: 6px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}

/* The way out: VendorSnap, the closing line and the store badges, centered
   over the store, in white like the hero's title (owner 2026-09-28: the
   cream veil it sat on was not needed; the name first, in orange). A faint
   shade behind them keeps the white clear of the windows' light. */
.tour--scrolly .tour-beat[data-beat="exit"] { justify-content: center; align-items: center; padding: 96px 16px 72px; text-align: center; }
.tour--scrolly .tour-beat[data-beat="exit"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 38% at 50% 50%, rgba(16,12,9,0.42) 0%, rgba(16,12,9,0.24) 55%, rgba(16,12,9,0) 100%);
}
.tour--scrolly .tour-beat[data-beat="exit"] .tour-copy {
  width: min(620px, 100%); max-width: none; margin: 0; color: #FFFDF8;
  text-shadow: 0 1px 2px rgba(12,9,6,0.5), 0 2px 24px rgba(12,9,6,0.5);
}
.tour--scrolly .tour-beat[data-beat="exit"] .tour-copy h2 {
  display: block; font-size: clamp(28px, 4vw, 44px); line-height: 1.14; letter-spacing: -1px; color: inherit; text-wrap: balance;
}
.tour--scrolly .tour-beat[data-beat="exit"] .tour-name { color: var(--brand); }
.tour--scrolly .tour-beat[data-beat="exit"] .tour-copy h2::before { display: none; }
.tour--scrolly .tour-beat[data-beat="exit"] .stores { justify-content: center; }

/* Skip the tour: small and quiet, in the corner the captions leave free. */
.tour--scrolly .tour-skip {
  position: absolute; right: clamp(16px, 3vw, 48px); bottom: 14px; margin: 0; z-index: 2;
  font-size: 12.5px; font-weight: 600; color: rgba(22,19,15,0.72); background: rgba(255,255,255,0.58);
  border: 0; box-shadow: none; padding: 5px 11px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tour--scrolly .tour-skip:hover, .tour--scrolly .tour-skip:focus-visible { color: var(--text); background: rgba(255,255,255,0.88); }

/* The scrubber (tour.js buildScrub): the tour's timeline, a frosted pill
   at the foot of the view like the skip link. One continuous line (owner
   2026-09-27): its chapters abut, square inside and round only at the
   line's two ends, and fill as the scroll passes them; it grows and names the chapter under the
   pointer (or at the thumb) while it is hovered, dragged or focused. */
.tour-scrub { display: none; }
/* The scrubber starts after the back arrow (tour.js layoutScrub puts the
   arrows either side of it: 30px each, 6px apart). */
.tour--scrolly .tour-scrub {
  display: block; position: absolute; left: calc(clamp(24px, 3vw, 48px) + 36px); bottom: 14px; z-index: 2;
  box-sizing: border-box; height: 30px; padding: 0 12px; border-radius: 100px;
  background: rgba(255,255,255,0.58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; outline: none;
}
.tour--scrolly .tour-scrub:focus-visible { box-shadow: 0 0 0 2px var(--brand); }
.tour-scrub-track { position: relative; display: flex; align-items: center; height: 100%; }
.tour-scrub-seg {
  position: relative; flex: 1 1 0; height: 4px; overflow: hidden;
  background: rgba(22,19,15,0.18); transition: height .15s ease;
}
.tour-scrub-seg:first-child { border-radius: 3px 0 0 3px; }
.tour-scrub-seg:nth-last-child(1 of .tour-scrub-seg) { border-radius: 0 3px 3px 0; }
.tour-scrub-seg > i { position: absolute; inset: 0; background: var(--brand); transform-origin: 0 50%; transform: scaleX(0); }
.tour-scrub:hover .tour-scrub-seg, .tour-scrub.is-scrubbing .tour-scrub-seg, .tour-scrub:focus-visible .tour-scrub-seg { height: 6px; }
.tour-scrub-thumb {
  position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px var(--brand), 0 2px 6px rgba(20,16,12,0.28);
}
.tour-scrub-tip {
  position: absolute; left: 12px; bottom: 38px; translate: -50% 0; pointer-events: none; white-space: nowrap;
  padding: 4px 10px; border-radius: 100px; background: rgba(22,19,15,0.84); color: #fff;
  font-size: 12.5px; font-weight: 700; opacity: 0; transition: opacity .15s ease;
}
.tour-scrub:hover .tour-scrub-tip, .tour-scrub.is-scrubbing .tour-scrub-tip, .tour-scrub:focus-visible .tour-scrub-tip { opacity: 1; }

/* Phones and other tall views: the hero at the top, captions across the
   width above the skip link, the phone in focus above its caption. */
@media (max-aspect-ratio: 9/10) {
  .tour--scrolly .tour-beat[data-beat="enter"] { justify-content: flex-end; padding: 92px 0 112px; }
  .tour--scrolly .tour-cue { bottom: 58px; }
  .tour--scrolly .tour-copy { align-self: stretch; width: auto; max-width: none; margin: 0 20px 4px; }
  .tour--scrolly .tour-copy h2 { font-size: 22px; letter-spacing: -0.4px; }
  .tour--scrolly .tour-copy p { margin-top: 5px; font-size: 15px; line-height: 1.45; }
  .tour--scrolly .tour-beat[data-beat="exit"] .tour-copy h2 { font-size: 30px; }
  .tour--scrolly .tour-skip { right: 16px; }
  .tour--scrolly .tour-scrub { left: 56px; }
}
/* Phones held sideways (and other short, wide views): a tight hero and
   captions. */
@media (min-aspect-ratio: 9/10) and (max-height: 500px) {
  .tour--scrolly .tour-beat[data-beat="enter"] { padding: 72px 0 52px; }
  .tour--scrolly .tour-h1 { font-size: 34px; letter-spacing: -1px; }
  .tour--scrolly .tour-sub { font-size: 15px; margin-top: 8px; }
  .tour--scrolly .tour-hero .stores { margin-top: 12px; }
  .tour--scrolly .tour-cue { bottom: 10px; }
  .tour--scrolly .tour-copy h2 { font-size: 19px; }
  .tour--scrolly .tour-copy p { margin-top: 4px; font-size: 14px; line-height: 1.4; }
  .tour--scrolly .tour-beat[data-beat="exit"] { padding: 72px 16px 52px; }
  .tour--scrolly .tour-beat[data-beat="exit"] .tour-copy h2 { font-size: 24px; }
}
/* Short phones: a tighter hero keeps both store badges on screen (320 x 568
   cut Google Play off). */
@media (max-aspect-ratio: 9/10) and (max-height: 720px) {
  .tour--scrolly .tour-beat[data-beat="enter"] { padding-top: 80px; }
  .tour--scrolly .tour-h1 { font-size: 36px; letter-spacing: -1px; }
  .tour--scrolly .tour-sub { font-size: 15.5px; margin-top: 12px; }
  .tour--scrolly .tour-hero .stores { margin-top: 16px; }
  .tour--scrolly .tour-copy h2 { font-size: 20px; }
  .tour--scrolly .tour-copy p { font-size: 14px; }
}

/* Touch screens: the small pills over the store are solid, not frosted (a
   backdrop blur over a picture redrawn every frame costs a phone's GPU on
   every frame; owner 2026-09-27, scrolling on phones). */
@media (pointer: coarse) {
  .tour--scrolly .tour-scrub, .tour--scrolly .tour-skip, .tour--scrolly .tour-cue {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,251,246,0.9);
  }
}

/* The step arrows (owner 2026-09-27: "more clickable rather than just
   scrollable"): a step back and a step on either side of the scrubber, the
   same frosted round as it, the back one dimmed at the story's start
   (--tour-step-off, from tour.js). Each takes a finger in a 46px square
   around its 30px round (::before; over the scrubber's end padding, which
   only leads to the story's ends) and no pan, so a thumb's tap that lands
   a little off or drifts is still the press (owner 2026-09-28: "the next
   and back button become unclickable"; tour.js steps on the lift). */
.tour-step { display: none; }
.tour--scrolly .tour-step {
  display: grid; place-items: center; position: absolute; left: 0; bottom: 14px; z-index: 3;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: rgba(22,19,15,0.78); background: rgba(255,255,255,0.58);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: calc(1 - 0.55 * var(--tour-step-off, 0)); transition: background-color .15s ease, color .15s ease;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.tour--scrolly .tour-step::before { content: ""; position: absolute; inset: -8px; }
.tour--scrolly .tour-step:active:not([aria-disabled]) { color: var(--text); background: rgba(255,255,255,0.9); }
.tour--scrolly .tour-step:hover:not([aria-disabled]), .tour--scrolly .tour-step:focus-visible { color: var(--text); background: rgba(255,255,255,0.9); }
.tour--scrolly .tour-step[aria-disabled] { cursor: default; }
.tour--scrolly .tour-step:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (pointer: coarse) {
  .tour--scrolly .tour-step { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,251,246,0.9); }
}