/* © 2026 LFM Labs. All rights reserved. */
/* site-tour.css: the reveal blocks of every journey (site-reveal.js), the tour's
   chapters and its phone bar (docs/TOURS-PLAN.md; site-tour.js). From 640 px the scroll
   ruler is the way round (site-ruler.css). Tokens only (index.html
   :root). Blocks are opacity only: while the particle field runs they wait at 0 until
   formed (html.particles), and with no field they are simply shown. Never display: none,
   never visibility: hidden. */

/* ------------------------------------------------------------ blocks */
/* An animation, not a transition, so a block keeps its own transitions (a card's lift). */
html.particles [data-reveal]:not(.in) { opacity: 0; }
html.particles [data-reveal].in { animation: reveal-in 700ms var(--ease-lfm-out); }
@keyframes reveal-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.particles [data-reveal].in { animation: none; } }

/* ------------------------------------------------------------ chapters */
.chapter {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(36px, 5vh, 64px) clamp(20px, 6vw, 72px);
  scroll-margin-top: 12px;
}
.chapter .sec-head { margin-bottom: clamp(20px, 3.5vh, 32px); }
.chapter .sec-h { font-size: clamp(30px, 3.6vw, 50px); }
.chapter-line { margin: 0 0 16px; max-width: 44rem; color: var(--ink); font: 500 16px/1.5 var(--type); }
.chapter-line.is-quiet { color: var(--ink-2); font-size: 14.5px; }
.chapter .hero-doors { margin: 8px 0 14px; }

/* Day 1: the brief's first questions. */
.tour-qs { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tour-q { padding: 18px 20px; border: 1px solid var(--rule-strong); border-radius: var(--radius-card); background: var(--surface); }
.tour-q-n { margin: 0 0 6px; color: var(--ink-2); font: 500 12.5px/1.3 var(--type); }
.tour-q-h { margin: 0 0 12px; font: 500 18px/1.3 var(--type); }
.tour-q-a { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tour-q-a li { padding: 5px 11px; border: 1px solid var(--rule); border-radius: var(--radius-pill); color: var(--ink-2); font-size: 13.5px; }

/* Day 3: the work as one row of three, then the makeover beside its notes. */
.work-grid.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.work-grid.is-row .work { grid-template-columns: 1fr; gap: 12px; }
.work-grid.is-row .work-h { font-size: 18px; }
.chapter-firstLook .mk-once { margin-top: 36px; }
@media (min-width: 1000px) {
  .mk-holder.is-compact .mk { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .mk-holder.is-compact .mk-head { grid-column: 1 / -1; }
  .mk-holder.is-compact .mk-notes { grid-template-columns: 1fr; margin-top: 0; }
}

/* Let's get cooking: the deposit per plan. */
.tour-deposits { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 48rem; }
.tour-deposit { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--rule-strong); border-radius: var(--radius-card); background: var(--surface); }
.tour-deposit-n { color: var(--ink-2); font-size: 13.5px; }
.tour-deposit strong { font: 500 22px/1.2 var(--type); }
.tour-deposit-of { color: var(--ink-2); font-size: 13px; }
.tour-deposit-of::before { content: "of "; }

/* Weeks: a strip of stages, the picked one's detail under it. */
.wk-scroll { overflow-x: auto; margin: 0 0 18px; padding: 4px 2px 8px; scrollbar-width: thin; }
.wk-strip { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 639px) { .wk-strip { flex-wrap: nowrap; min-width: max-content; } }
.wk-stage {
  display: grid; gap: 3px; min-width: 116px; padding: 10px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); font: 500 14px/1.3 var(--type);
}
.wk-stage[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.wk-stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wk-week { font-size: 12px; opacity: 0.75; }
.wk-panel { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: start; max-width: 46rem; }
.wk-art { width: 120px; }
.wk-art > * { max-width: 100%; }
.wk-panel .proc-h { margin-top: 2px; }

/* Launch day: fast, found, yours. */
.launch-grid { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.launch-card { padding: 18px 20px; border: 1px solid var(--rule-strong); border-radius: var(--radius-card); background: var(--surface); }
.launch-claims { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; }
.launch-claims li + li { margin-top: 4px; }
.launch-card .speed-badge { margin: 12px 0 0; }
.tour-more { margin: 0; }

/* After launch: support per plan, then "What if…". */
.tour-support { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tour-support li { padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); font-size: 14.5px; }
.tour-support strong { font-weight: 500; }
.tour-keep { margin: 0 0 26px; padding-left: 18px; max-width: 46rem; color: var(--ink-2); font-size: 14.5px; }
.tour-keep strong { color: var(--ink); font-weight: 500; }
.tour-faq-h { margin-top: 8px; }
@media (min-width: 900px) {
  .chapter-after .faqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; align-items: start; max-width: none; }
}
.mk-holder.is-compact .mk-list li { font-size: 14.5px; }
.chapter-pass { padding-top: 24px; padding-bottom: 24px; }

@media (max-width: 899px) {
  .tour-qs, .launch-grid, .work-grid.is-row { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .tour-deposits { grid-template-columns: 1fr; }
  .wk-panel { grid-template-columns: 1fr; gap: 10px; }
  .wk-art { width: 96px; }
  .chapter { scroll-margin-top: 64px; }
}

/* ------------------------------------------------- shared measures */
/* The fixed badge (.brand) and what must clear it come from one set of tokens, so the
   phone bar's text and Replay never drift under it. From 640 px the page keeps clear of
   the scroll ruler on the right (--ruler-w, site-ruler.css); there is no left gutter. */
:root {
  --badge-x: 16px; --badge-w: 124px; --badge-gap: 14px;
  --badge-clear: calc(var(--badge-x) + var(--badge-w) + var(--badge-gap));
  --tour-pad: clamp(20px, 6vw, 72px);
}

/* Hello (the story, chapter 1) lines up with the chapters while the tour is on: the same
   1180 px column beside the ruler, the same side padding. Replay stays clear of the badge. */
html.tour-on .story {
  max-width: none;
  padding-left: calc(max(0px, (100% - var(--ruler-w) - 1180px) / 2) + var(--tour-pad));
  padding-right: calc(var(--ruler-w) + var(--tour-pad));
}
@media (min-width: 700px) {
  html.tour-on .story .replay {
    left: max(var(--badge-clear), calc(max(0px, (100% - var(--ruler-w) - 1180px) / 2) + var(--tour-pad)));
  }
}
@media (max-width: 699px) { html.tour-on .story .replay { justify-self: end; } }

/* ------------------------------------------------------- the phone bar */
/* From 640 px the scroll ruler is the way round (site-ruler.js). If it isn't there (its
   script failed), the stops stay: a small card on the right. */
@media (min-width: 640px) {
  html.ruler-on .tour-rail { display: none; }
  html:not(.ruler-on) .tour-rail {
    right: 12px; top: 50%; translate: 0 -50%; max-width: 210px; padding: 10px;
    border-radius: var(--radius-card); background: var(--sheet-bg); box-shadow: var(--shadow-card);
  }
}
.tour-rail {
  position: fixed; z-index: 15; opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--ease-lfm-out);
  font: 500 13px/1.3 var(--type); color: var(--ink);
}
.tour-rail.show { opacity: 1; pointer-events: auto; }
html.sheet-open .tour-rail { opacity: 0; pointer-events: none; }
.tour-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tour-stop {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: var(--radius-pill);
  color: var(--ink-2); text-decoration: none;
}
.tour-stop:hover { color: var(--ink); }
.tour-stop:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.tour-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--rule-strong); }
.tour-stop[aria-current] { color: var(--ink); }
.tour-stop[aria-current] .tour-dot { background: var(--ink); border-color: var(--ink); }
.tour-actions { display: grid; gap: 8px; justify-items: start; margin-top: 14px; padding-left: 8px; }
.tour-actions .site-pay { padding: 9px 16px; font-size: 13.5px; box-shadow: none; }
.tour-act { display: inline-flex; align-items: center; gap: 8px; }
.tour-act-icon { display: none; }
.tour-else { font-size: 13px; text-align: left; }
.tour-bar { display: none; }

/* A thin bar at the top, clear of the badge; a tap opens every stop. */
@media (max-width: 639px) {
  .tour-rail { top: 0; left: 0; right: 0; padding: 8px 12px 0 var(--badge-clear); }
  .tour-bar {
    display: grid; gap: 5px; width: 100%; padding: 7px 12px 8px; cursor: pointer; text-align: left;
    border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); color: var(--ink);
    -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); font: 500 13px/1.25 var(--type);
  }
  .tour-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .tour-bar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tour-bar-now { color: var(--ink-2); }
  .tour-bar-track { height: 2px; border-radius: var(--radius-pill); background: var(--rule); overflow: hidden; }
  .tour-bar-fill { display: block; height: 100%; background: var(--ink); transition: width 300ms var(--ease-lfm-out); }
  .tour-panel {
    margin-top: 6px; padding: 10px; border-radius: var(--radius-card); background: var(--sheet-bg); box-shadow: var(--shadow-card);
    max-height: 70vh; overflow-y: auto;
  }
  .tour-rail[data-open="false"] .tour-panel { opacity: 0; pointer-events: none; translate: 0 -6px; height: 0; padding: 0; overflow: hidden; }
  .tour-stop { padding: 9px 8px; font-size: 15px; }
}

/* Print: every block, whatever the reveal had reached; no bar. */
@media print {
  html.particles [data-reveal], [data-reveal] { opacity: 1 !important; animation: none; }
  .tour-rail { display: none; }
}