/* tour.js. Transform and opacity only, bar the dots and button width. */
.tour-open-row { margin: 0; text-align: center }
.tour-open { display: inline-flex; align-items: center; min-height: 44px }
.tour-skip, .tour-next { padding: 0; border: 0; background: none; font: inherit; cursor: pointer }

/* Above the tab bar (20), below .modal-overlay (25). Two rows: the stage (1fr, the phone's area below the Skip row) and the panel (its content). The phone is centred in the stage, and the panel's top is the highest point of the swell, so the space above and below the phone is equal. On wide screens (600px and up) it is a centred card over a scrim (see the media query at the end). */
.tour { --shadow-ext: 20px; --tw: var(--color-surface-alt); --bz: color-mix(in srgb, var(--color-ink) 92%, black); --ph: clamp(200px, 54dvh, 560px); position: fixed; inset: 0; z-index: 22; display: grid; grid-template: minmax(min-content, 1fr) auto / minmax(0, 1fr); height: 100dvh; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; background: var(--color-bg); color: var(--color-ink) }
@supports (height: 1cqh) { .tour { --ph: max(200px, min(560px, 100cqh - 32px)) } }
.tour.is-pending { visibility: hidden; pointer-events: none }
.tour-top::before, .tour-deep::before, .tour-deep, .tour-water-canvas, .tour-crest { position: absolute; inset: 0 }
.tour-top::before, .tour-deep::before, .tour-water-canvas, .tour-crest, .tour-swell { pointer-events: none }

.tour-top { position: relative; overflow: hidden; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding-top: env(safe-area-inset-top); background: var(--water-ground, color-mix(in srgb, var(--color-surface) 98%, var(--color-ink))) }
.tour-top::before, .tour-deep::before { content: ""; background: url(/features/water-panel-warm.webp) center / cover }
.tour-deep::before { background-image: url(/features/water-deep.webp) }
.tour .is-live::before { opacity: 0; transition: opacity var(--dur-panel) var(--ease-out) }
.tour :is([data-water="slow"], [data-water="no-webgl"])::before { animation: water-breathe 18s ease-in-out infinite alternate }
.tour-water-canvas { display: block; width: 100%; height: 100%; transition: opacity var(--dur-panel) var(--ease-out) }
:not(.is-live) > .tour-water-canvas { opacity: 0 }

.tour-skip { position: relative; z-index: 2; grid-row: 1; justify-self: end; margin: var(--space-3) calc(env(safe-area-inset-right) + var(--space-3)) 0 0; min-width: 44px; min-height: 44px; padding: 0 var(--space-3); color: var(--color-ink); font-size: .9375rem }
.tour.is-last .tour-skip { visibility: hidden }

/* One pager: the phones and the text are two flex rows of full-width slides moved by the same transform. */
.tour-ptrack, .tour-ttrack { display: flex; touch-action: pan-y }
.tour-pslide { display: flex; flex: 0 0 100%; justify-content: center }
/* The stage: the phone's area under the Skip row. Its height is the area, and place-items centres the phone in it. */
.tour-stage { grid-row: 2; position: relative; container-type: size; min-height: 224px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0 }
.tour-lift { position: relative; width: 100% }
.tour.is-float .tour-float { animation: tour-float 7s ease-in-out infinite alternate }
@keyframes tour-float { from { transform: translateY(2px) } to { transform: translateY(-2px) } }
/* The bezel is --pad wide; the screen is the clip's 720:1560 inside it, so the phone is as wide as its screen plus the bezel. */
.tour-phone { --pad: calc(var(--ph) / 57); display: flex; justify-content: center; box-sizing: border-box; flex: none; height: var(--ph); width: calc((var(--ph) - 2 * var(--pad)) * 720 / 1560 + 2 * var(--pad)); padding: var(--pad); border-radius: calc(var(--ph) * .068); background: var(--bz); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 10px var(--shadow-ext) -10px rgb(0 0 0 / .35) }
.tour-screen { flex: none; position: relative; height: 100%; aspect-ratio: 720 / 1560; overflow: hidden; border-radius: calc(var(--ph) * .068 - var(--ph) / 57); background: var(--color-surface) }
.tour-island { position: absolute; z-index: 1; top: calc(var(--ph) * .012); left: 35%; width: 30%; height: calc(var(--ph) * .036); border-radius: 999px; background: var(--bz) }
.tour-poster, .tour-clip { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0 }
.tour-poster { transition: opacity var(--dur-panel) var(--ease-out) }
.tour-clip { transition: opacity var(--dur-fast) var(--ease-out) }
.tour .is-ready, .tour .is-playing { opacity: 1 }

.tour-panel { position: relative; z-index: 1; display: flex; flex-direction: column }
/* The swell: two translucent layers behind the edge (11s and 14s, their own phases), then the deep panel clipped by the SVG edge (#tour-swell) that tour.js morphs. Each layer's path starts at y 0 and its 3px bob only moves it down, so the panel's top is the highest point of everything in the swell. */
.tour-swell { position: absolute; top: 0; left: -18px; width: calc(100% + 36px); height: 60px; fill: var(--color-primary-dark) }
.tour-swell-a { fill-opacity: .14 }
.tour-swell-b { fill-opacity: .22; left: -10px; width: calc(100% + 20px) }
.tour.is-moving .tour-swell-a { animation: tour-swell-a 11s ease-in-out -4s infinite alternate }
.tour.is-moving .tour-swell-b { animation: tour-swell-b 14s ease-in-out -9s infinite alternate }
@keyframes tour-swell-a { from { transform: translate(-18px, 3px) } to { transform: translate(18px, 0) } }
@keyframes tour-swell-b { from { transform: translate(10px, 0) } to { transform: translate(-10px, 3px) } }
.tour-deep { background: var(--color-primary-dark); clip-path: url(#tour-swell) }
.tour-crest { width: 100%; height: 100%; fill: none; stroke: var(--tw); stroke-opacity: .42; stroke-width: 1.6; overflow: visible }
.tour-content { position: relative; display: flex; flex: 1 0 auto; flex-direction: column; align-items: stretch; padding: 52px 0 calc(var(--space-5) + env(safe-area-inset-bottom)); color: var(--tw); text-align: center }
.tour-texts { overflow: hidden }
.tour-ttrack { align-items: stretch }
.tour-slide { box-sizing: border-box; display: flex; flex: 0 0 100%; flex-direction: column; justify-content: flex-end; padding: 0 max(var(--space-5), calc((100% - 32rem) / 2)) }
.tour-title { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 7vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: var(--track-display) }
.tour-word { display: inline-block }
.tour-sub { margin: var(--space-2) 0 0; font-size: clamp(15px, 4.2vw, 17px); line-height: 1.45; color: rgb(255 255 255 / .92) }
.tour-foot { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 16px; padding: 0 var(--space-5) }
.tour-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.tour-dots { display: flex; align-items: center; gap: 6px }
.tour-dots span { width: 6px; height: 6px; border-radius: 9px; background: rgb(255 255 255 / .4); transition: .28s var(--ease-in-out) }
.tour-dots .is-on { width: 18px; background: rgb(255 255 255 / .95) }
.tour-nextwrap { position: relative; display: inline-grid }
.tour-ring { position: absolute; inset: 0; box-sizing: border-box; border: 2px solid var(--tw); border-radius: 26px; opacity: 0; pointer-events: none }
.tour-next { display: inline-grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; box-sizing: border-box; width: 52px; min-height: 52px; border-radius: 26px; background: var(--tw); color: var(--color-primary-dark); font-size: .9375rem; font-weight: 600; line-height: 1.2; transition: width 320ms var(--ease-in-out) }
.tour-next > * { grid-area: 1 / 1; transition: opacity 320ms var(--ease-in-out) }
.tour-next:focus-visible { outline-color: var(--tw) }
.tour-arrow { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.tour-next-text { padding: 0 var(--space-3); opacity: 0; white-space: nowrap }
.tour.is-last .tour-next { width: min(11rem, 100%) }
.tour.is-last .tour-arrow { opacity: 0 }
.tour.is-last .tour-next-text { opacity: 1 }

.tour.is-paused * { animation-play-state: paused }

/* The scrim behind the card on wide screens; below 600px the tour is full screen and there is none. The page does not scroll under it. */
.tour-scrim { display: none }
html.tour-lock { overflow: hidden }
@media (min-width: 600px) {
  .tour { inset: 0; margin: auto; width: min(440px, 92vw); height: min(760px, 94dvh); border-radius: 28px; box-shadow: 0 24px 64px -16px rgb(0 0 0 / .4) }
  .tour-scrim { display: block; position: fixed; inset: 0; z-index: 21; background: color-mix(in srgb, var(--color-ink) 45%, transparent) }
}
@media (prefers-reduced-motion: reduce) {
  .tour *, .tour *::before { transition: none !important; animation: none !important }
}