/* ==========================================================================
   Tour — page module for /tour/
   A click-through of the product: eighteen screens on one stage, a ring on
   the thing each step is about, and a note beside it that walks on. Loaded
   after home.css, whose buttons, question rows and closing band it reuses.

   Two layouts from one list of steps:
     without scripts  a plain list: each screen, then its note
     with scripts     a stage: one screen at a time in a browser frame, the
                      ring and its note drawn by tour.js
   The .js class is set in the page's head, so the stage is what is drawn
   first; tour.js adds .is-live once it is driving it.

   Same ladder as tokens.css. At 860 and below the stage stops overlaying
   the note on the screen: the screen becomes a 4:3 window zoomed onto the
   ring, with the note underneath it.
   ========================================================================== */

/* ---------- Hero ---------- */
.tour-hero { padding-block: var(--sp-8) var(--sp-6); }
.tour-hero h1 {
  font-weight: 300; font-size: var(--d-1);
  line-height: 1.04; letter-spacing: -0.026em;
  max-width: 22ch; margin-bottom: var(--sp-5);
}
.tour-hero h1 em { color: var(--thread); font-weight: 400; }
.tour-sub {
  font-size: var(--fs-md); line-height: 1.6; color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- The section ----------
   (.tour-main, not .tour: home.css already has a .tour, the homepage's
   "How it works", and this page loads home.css.)
   The stage is held to the height of the window, so the whole screen, its
   note and the controls are in view at once on a laptop: the width follows
   from the height at the screens' 16:10. The chapters and the line under
   the stage share that width. */
.tour-main {
  --stage-w: min(100%, calc((100svh - var(--nav-h) - 9.5rem) * 1.6), 76rem);
  padding-bottom: var(--section);
}
.tour-chapters,
.tour-stage,
.tour-honest { width: var(--stage-w); margin-inline: auto; }

/* ---------- Chapters ---------- */
.tour-chapters { margin-bottom: var(--sp-4); }
.tour-chapters ol { list-style: none; display: flex; gap: var(--sp-2); }
.tour-chapters li { flex: 1 1 auto; }
.tour-chapters a {
  --fill: 0;
  position: relative; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-sm); line-height: 1.3; color: var(--ink-faint); text-decoration: none;
  white-space: nowrap; transition: color .2s ease;
}
/* The rule under each chapter fills as its steps are seen. */
.tour-chapters a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(to right, var(--thread) calc(var(--fill) * 100%), var(--line) 0);
  transition: background .3s var(--ease);
}
.tour-chapter-n {
  flex: none; display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-faint);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tour-chapters a[aria-current] { color: var(--ink); }
.tour-chapters a[aria-current] .tour-chapter-n,
.tour-chapters a.is-done .tour-chapter-n { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .tour-chapters a:hover { color: var(--ink); }
}

/* ---------- Without scripts: a list ---------- */
.tour-bar, .tour-progress { display: none; }
.tour-steps { list-style: none; }
.tour-step { display: grid; gap: var(--sp-5); margin-block: var(--sp-8); }
.tour-shot { margin: 0; }
.tour-shot img { display: block; width: 100%; height: auto; }
.tour-shot--phone { width: min(100%, 300px); margin-inline: auto; }
.tour-canvas { position: relative; }
.tour-note { max-width: 44rem; }
.tour-note h2 { font-size: var(--d-4); line-height: 1.15; margin-bottom: var(--sp-3); }
.tour-note p:last-child { color: var(--ink-soft); line-height: 1.6; }

/* The introduction and the closing card. */
.tour-card {
  background: var(--paper-lift); border-radius: var(--radius-lg);
  box-shadow: var(--hairline), var(--lift);
  padding: var(--sp-7);
}
.tour-card h2 { font-size: var(--d-3); line-height: 1.08; letter-spacing: -0.018em; margin-bottom: var(--sp-4); }
.tour-card h2 em { color: var(--thread); }
.tour-card > p,
.tour-card-main > p { color: var(--ink-soft); line-height: 1.6; max-width: 52ch; }
/* The introduction: what it is and the way in on the left, the cast on the
   right, so the whole card fits a short laptop screen. One column without
   room for two. */
.tour-card--intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-6) var(--sp-7); align-items: start; }
.tour-card-cast { border-left: 1px solid var(--line); padding-left: var(--sp-6); }
.tour-cast-label { color: var(--ink-faint); font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.tour-cast {
  list-style: none; margin: var(--sp-3) 0 0;
  display: grid; gap: var(--sp-2); font-size: var(--fs-ui); line-height: 1.45; color: var(--ink-soft);
}
.tour-cast li { padding-left: var(--sp-5); position: relative; }
.tour-cast li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 1px; background: var(--thread);
}
.tour-cast b { font-weight: 500; color: var(--ink); }
.tour-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-6); }
.tour-hint { display: none; font-size: var(--fs-sm); color: var(--ink-faint); }
.js .tour-hint { display: block; }  /* there is no ring to click without scripts */
.tour-again { margin-top: var(--sp-5); font-size: var(--fs-sm); }
.tour-again a {
  color: var(--ink-soft); text-decoration: underline;
  text-decoration-color: var(--thread); text-underline-offset: 4px;
}
.tour-again span { margin-inline: 0.4em; color: var(--ink-faint); }

.tour-honest {
  margin-top: var(--sp-5);
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-faint);
}

/* ---------- With scripts: the stage ---------- */
.js .tour-stage {
  position: relative;
  background: var(--paper-lift); border-radius: var(--radius-lg);
  box-shadow: var(--hairline), var(--lift-lg);
}

/* The browser bar: three dots, the address of the screen, and the way out. */
.js .tour-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3);
  height: 40px; padding: 0 var(--sp-4);
  background: var(--paper-deep); border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.tour-dots { display: flex; gap: 6px; }
.tour-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.tour-url {
  min-width: 0; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px var(--sp-4); border-radius: 999px;
  background: var(--paper-lift); font-size: var(--fs-xs); color: var(--ink-faint);
}
.tour-bar-cta {
  justify-self: end; font-size: var(--fs-xs); color: var(--ink-soft);
  text-decoration: underline; text-decoration-color: var(--thread); text-underline-offset: 3px;
}

/* The screen: 16:10, the shape of every screenshot, with each step laid on
   it in turn. */
.js .tour-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.js .tour-steps { position: absolute; inset: 0; }
.js .tour-step { display: none; position: absolute; inset: 0; margin: 0; }
.js .tour-step.is-current,
.js .tour-step.is-leaving { display: block; }
.js .tour-step.is-current { z-index: 1; }
.js .tour-note { display: none; }

.js .tour-shot { position: absolute; inset: 0; overflow: hidden; }
.js .tour-shot img { width: 100%; height: 100%; object-fit: cover; }
.js .tour-canvas { width: 100%; height: 100%; transform-origin: 0 0; }

/* The client's side: their phone, on the paper the stage stands on. */
.js .tour-step--phone { background: var(--paper-warm); }
.js .tour-shot--phone {
  inset: 4% auto 4% 50%; transform: translateX(-50%);
  width: auto; height: 92%; aspect-ratio: 796 / 1704;
  padding: 8px; border-radius: 34px; background: var(--ink);
  box-shadow: var(--lift-lg); overflow: visible;
}
.js .tour-shot--phone .tour-canvas { border-radius: 26px; overflow: hidden; }

/* The ring, and the dimming round it. tour.js sets --x --y --w --h from the
   step's data-spot. The shadow is the dimming: it reaches past every edge
   of the picture and the picture's overflow clips it. */
.tour-ring {
  position: absolute; z-index: 2;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  padding: 0; background: transparent; cursor: pointer;
  border: calc(2px / var(--z, 1)) solid var(--thread);
  border-radius: calc(10px / var(--z, 1));
  box-shadow: 0 0 0 200vmax rgba(17, 17, 16, 0.34);
  transition: box-shadow .3s ease;
}
.tour-ring::after {
  content: ""; position: absolute; inset: calc(-7px / var(--z, 1));
  border: calc(2px / var(--z, 1)) solid var(--thread); border-radius: calc(16px / var(--z, 1));
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tour-ring::after { animation: tour-pulse 2.2s var(--ease) infinite; }
  .tour-ring.is-nudged { animation: tour-nudge .5s var(--ease); }
  .js .tour-step.is-current { animation: tour-in .35s var(--ease); }
  .js .tour-stage.is-live .tour-callout { transition: opacity .25s ease, transform .3s var(--ease); }
}
@keyframes tour-pulse {
  0% { opacity: .9; transform: scale(.98); }
  70%, 100% { opacity: 0; transform: scale(1.04); }
}
@keyframes tour-nudge {
  30% { transform: scale(1.03); }
  60% { transform: scale(.99); }
}
@keyframes tour-in { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  .tour-ring:hover { box-shadow: 0 0 0 200vmax rgba(17, 17, 16, 0.42); }
}

/* The note beside the ring. Placed by tour.js on whichever side has room,
   with the arrow pointing back at the ring. */
.tour-callout {
  position: absolute; z-index: 5; top: 0; left: 0;
  width: min(330px, 44%);
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius); padding: 18px 20px 16px;
  box-shadow: 0 24px 60px -18px rgba(17, 17, 16, 0.55);
}
.tour-callout::before {
  content: ""; position: absolute; width: 14px; height: 14px; background: var(--ink);
  transform: rotate(45deg); display: none;
}
.tour-callout[data-side="right"]::before { display: block; left: -7px; top: var(--arrow, 50%); margin-top: -7px; }
.tour-callout[data-side="left"]::before { display: block; right: -7px; top: var(--arrow, 50%); margin-top: -7px; }
.tour-callout[data-side="below"]::before { display: block; top: -7px; left: var(--arrow, 50%); margin-left: -7px; }
.tour-callout[data-side="above"]::before { display: block; bottom: -7px; left: var(--arrow, 50%); margin-left: -7px; }
.tour-callout[hidden] { display: none; }
.tour-callout-meta {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--paper-faint); margin-bottom: var(--sp-3);
}
.tour-callout-chapter { color: #e07a4a; }
.tour-callout h2 { font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.2; margin-bottom: var(--sp-2); color: var(--paper); }
.tour-callout-text p { font-size: 0.875rem; line-height: 1.55; color: var(--paper-body); }
.tour-callout-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.tour-back {
  background: none; border: 0; padding: var(--sp-2) 0;
  font-size: var(--fs-sm); color: var(--paper-faint);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.tour-back[disabled] { visibility: hidden; }
.tour-next {
  background: var(--paper); color: var(--ink); border: 1px solid var(--paper);
  padding: 8px 20px; border-radius: 2px;
  font-size: var(--fs-ui); font-weight: 500;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tour-back:hover { color: var(--paper); text-decoration-color: var(--thread); }
  .tour-next:hover { background: var(--thread); border-color: var(--thread); color: var(--paper); }
}
.tour-callout :focus-visible { outline-color: #e07a4a; }

/* The introduction and the end, laid over the screen. */
.js .tour-intro,
.js .tour-end {
  display: none; position: absolute; inset: 0; z-index: 6;
  place-items: center; padding: var(--sp-6);
  background: rgba(244, 241, 234, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.js .tour-stage.is-intro .tour-intro,
.js .tour-stage.is-end .tour-end { display: grid; }
.js .tour-stage.is-intro .tour-callout,
.js .tour-stage.is-end .tour-callout,
.js .tour-stage.is-intro .tour-ring,
.js .tour-stage.is-end .tour-ring { visibility: hidden; }
.js .tour-card { width: min(100%, 36rem); max-height: 100%; overflow: auto; padding: var(--sp-6) var(--sp-7); box-shadow: var(--hairline), var(--lift-lg); }
.js .tour-card--intro { width: min(100%, 52rem); }
.js .tour-card h2 { font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem); }

/* Progress, along the foot of the screen. */
.js .tour-progress {
  display: block; height: 3px; background: var(--paper-deep);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden;
}
.tour-progress span {
  display: block; height: 100%; width: calc(var(--p, 0) * 100%);
  background: var(--thread); transition: width .35s var(--ease);
}

/* ---------- Narrow screens ---------- */
@media (max-width: 1100px) {
  .tour-main { --stage-w: 100%; }
  .tour-chapters ol { flex-wrap: wrap; row-gap: 0; }
  .tour-chapters li { flex-basis: 30%; }
}

@media (max-width: 860px) {
  /* One column, the cast between the words and the button. */
  .tour-card--intro { display: flex; flex-direction: column; gap: 0; }
  .tour-card-main { display: contents; }
  .tour-card--intro .tour-card-actions { order: 1; }
  .tour-card-cast { border-left: 0; padding-left: 0; margin-top: var(--sp-5); }

  /* The screen becomes a window onto the ring; the note goes under it. */
  .js .tour-screen { aspect-ratio: auto; overflow: visible; }
  .js .tour-steps { position: static; }
  .js .tour-step { position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: hidden; }
  .js .tour-step.is-leaving { display: none; }
  .js .tour-shot { position: absolute; inset: 0; }
  .js .tour-canvas { height: auto; }
  .js .tour-shot img { height: auto; object-fit: initial; }
  .js .tour-step--phone { background: none; }
  .js .tour-shot--phone {
    inset: 0; transform: none; width: auto; height: auto; aspect-ratio: auto;
    padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: hidden;
  }
  .js .tour-shot--phone .tour-canvas { border-radius: 0; }

  .js .tour-stage .tour-callout {
    position: static; width: auto; border-radius: 0; transform: none !important;
    box-shadow: none; padding: var(--sp-5) var(--sp-5) var(--sp-6);
  }
  .tour-callout::before { display: none !important; }
  .tour-callout h2 { font-size: var(--fs-lg); }
  .tour-next { padding: 12px 24px; }

  /* The introduction and the end take the screen's place rather than
     covering it: on a phone they are taller than a 4:3 window. */
  .js .tour-intro,
  .js .tour-end { position: static; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .js .tour-stage.is-intro .tour-steps,
  .js .tour-stage.is-end .tour-steps,
  .js .tour-stage.is-intro .tour-callout,
  .js .tour-stage.is-end .tour-callout { display: none; }
  .js .tour-card { width: auto; max-height: none; box-shadow: none; border-radius: 0; padding: var(--sp-6) var(--sp-5); }

  .tour-bar-cta { display: none; }
  .js .tour-bar { grid-template-columns: auto 1fr; }
  .tour-url { justify-self: start; }

  /* The chapters scroll sideways rather than wrapping into a block. */
  .tour-chapters { margin-inline: calc(var(--edge) * -1); width: auto; }
  .tour-chapters ol {
    display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x proximity;
    padding-inline: var(--edge); scrollbar-width: none;
  }
  .tour-chapters ol::-webkit-scrollbar { display: none; }
  .tour-chapters li { flex: none; scroll-snap-align: start; }
  .tour-chapters ol { flex-wrap: nowrap; }
}

@media (max-width: 620px) {
  .tour-hero { padding-top: var(--sp-7); }
  .tour-stage { margin-inline: calc(var(--edge) * -1); width: auto; }
  .js .tour-stage { border-radius: 0; box-shadow: none; border-block: 1px solid var(--line); }
  .js .tour-bar { border-radius: 0; }
  .js .tour-progress { border-radius: 0; }
  .tour-card-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ---------- After the tour ---------- */
.tour-questions .section-head { margin-bottom: var(--sp-7); }