/* ============================================================
 * /tour/ — guided product tour. #1006 Gate 2 (rebuild).
 *
 * Layout, spacing and colour are taken from the pristine design at
 * design/designer-input/round-2/extracted/guided-product-tour.dc.html.
 * Read that file, not www/stage/preview/tour/ — the preview copy was edited
 * during the editorial pass and is NOT the design.
 *
 * The DATA is deliberately not the design's. The pristine file uses real
 * company names (Comcast, Stripe Payout) and institutions outside the approved
 * fictional set (Greenline Federal, Riverstone). Every figure and name here
 * comes from docs/design/issue-1006/fixture.md instead.
 * ============================================================ */

/* The tour uses the SAME content width as every other page.
 *
 * The design's canvas is 1400px, but the landing is 1160px and how-liway-works
 * 1180px — so moving between pages shifted the content 120px sideways, which
 * reads as the pages belonging to different sites. Matching one design file's
 * canvas is worth less than the site holding still when you navigate. The
 * 54fr/46fr split inside is unchanged; the phone (409px) still clears the
 * right column at this width. */
:root { --tour-shell: var(--shell); }

.tour-shell {
  max-width: var(--tour-shell);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* The band and the two-column grid share a containing block, so the band
 * releases when the tour ends. Sticky is scoped by its PARENT, and with the
 * band sitting directly in <main> it stayed pinned over the sections below —
 * it was covering the "whole picture" cards. */
.tour-stage { position: relative; }

/* ─── Dark intro band, pinned under the header ─────────────── */
.tour-band {
  position: sticky;
  top: 74px;
  z-index: 4;
  background: #263033;
  display: flex;
  align-items: center;
}
.tour-band .tour-shell {
  padding-top: 30px;
  padding-bottom: 30px;
  width: 100%;
  transition: padding 0.4s cubic-bezier(0.4,0,0.2,1);
}
/* The band stays pinned for the whole tour, so at full height it eats the top
 * of whichever step is passing behind it. It compacts instead — the design does
 * the same thing with a dynamic bandPad / introTitleSize / introLedeSize. */
.tour-band.is-compact .tour-shell { padding-top: 14px; padding-bottom: 14px; }
.tour-band.is-compact h1 { font-size: clamp(20px, 1.9vw, 25px); margin-bottom: 0; }
.tour-band.is-compact .eyebrow { margin-bottom: 8px; }
.tour-band.is-compact p.lede { display: none; }
.tour-band h1, .tour-band .eyebrow { transition: font-size 0.4s ease, margin 0.4s ease; }
.tour-band-copy { max-width: 560px; }
.tour-band .eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #92b8a8;
  margin-bottom: 14px;
}
.tour-band .eyebrow::before { border-radius: 50%; width: 6px; height: 6px; background: #92b8a8; }
.tour-band h1 {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--cream-100);
  margin-bottom: 14px;
  text-wrap: balance;
}
.tour-band h1 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: #92b8a8;
  font-size: 1.05em;
}
.tour-band p.lede {
  font-size: 14.5px;
  line-height: 1.5;
  color: #cbc7be;
  margin: 0;
  max-width: 560px;
  text-wrap: pretty;
}

/* ─── The two-column band ──────────────────────────────────── */
.tour-grid {
  max-width: var(--tour-shell);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 54fr 46fr;
  gap: 48px;
  align-items: stretch;
}
.tour-narrative { align-self: start; }
.scroll-cue {
  padding-top: 34px;
  padding-left: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--euc-500);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scroll-cue svg { width: 14px; height: 14px; }

.narrative-row { display: flex; gap: 24px; padding: 20px 0 120px; }

/* ── Rail: a frosted pill of dots, sticky beside the narrative ── */
.rail {
  position: sticky;
  top: 46vh;
  z-index: 12;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 7px;
  border-radius: 999px;
  border: 0.5px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(150deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.14) 42%, rgba(38,48,51,0.10) 100%);
  backdrop-filter: blur(18px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.06);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 -1px 1px rgba(255,255,255,0.35),
    inset 1px 0 1px rgba(255,255,255,0.4),
    0 10px 26px -14px rgba(29,33,38,0.45),
    0 1px 2px rgba(29,33,38,0.06);
}
.rail button {
  border: none;
  padding: 5px 3px;
  background: transparent;
  cursor: pointer;
  display: block;
}
.rail span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--cream-300);
  transition: height 0.35s cubic-bezier(0.4,0,0.2,1), background 0.35s ease, box-shadow 0.35s ease;
}
.rail button.is-active span {
  height: 26px;
  background: var(--euc-500);
  box-shadow: 0 0 0 3px rgba(93,149,131,0.18);
}
.rail button.is-done span { background: var(--euc-300); }

/* ── Steps ── */
.steps-col { flex: 1; min-width: 0; }
.step-block {
  min-height: 34vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 0;
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.js .step-block { opacity: 0.28; transform: translateY(6px); }
.js .step-block.is-active { opacity: 1; transform: none; }
.step-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--euc-500);
  margin-bottom: 10px;
}
.step-block h2 {
  font-size: clamp(28px, 2.7vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--slate-950);
  margin-bottom: 12px;
  max-width: 620px;
  text-wrap: balance;
}
.step-body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--slate-700);
  margin-bottom: 14px;
  max-width: 620px;
  text-wrap: pretty;
}
.step-question {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: #2f5a4d;
  padding-left: 14px;
  border-left: 3px solid var(--euc-500);
}

/* ── The phone ── */
/* The phone overlaps the dark band, as the design has it — its status bar and
 * app header sit ON the band and the card stack runs down into the cream below.
 * The band and the grid are separate blocks, so the column is pulled up into
 * the band rather than starting beneath it. z-index 6 on .phone-pin (vs the
 * band's 4) is what lets it paint over. */
.phone-col {
  padding-bottom: 160px;
  margin-top: -232px;
  position: relative;
  z-index: 6;
} 
/* Top-aligned, not centred: the phone should line up with the top of step 01
 * rather than float in the middle of the viewport. */
.phone-pin {
  position: sticky;
  top: 96px;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.phone {
  width: 409px;
  height: min(868px, calc(100vh - 128px));
  flex: none;
  transform-origin: center center;
  border-radius: 52px;
  background: var(--slate-950);
  padding: 8px;
  box-shadow: 0 40px 80px -40px rgba(29,33,38,0.55), inset 0 0 0 1.5px var(--slate-700);
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 44px;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: var(--font-device);
}
.phone-status {
  background: #fff;
  padding: 10px 20px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #171717;
}
.phone-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 12px 20px 16px;
  border-bottom: 1px solid #f5f5f5;
}
.phone-appbar .name { font-size: 26px; font-weight: 900; letter-spacing: -0.04em; color: #262626; }
.phone-viewport { flex: 1; overflow: hidden; position: relative; }
/* One continuous app column that slides. Each step brings its surface to the
 * top of the viewport, measured at runtime rather than hard-coded, so editing
 * a card's height cannot silently break the choreography. */
.phone-column {
  padding: 12px 16px 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

/* ─── The whole picture ────────────────────────────────────── */
.whole { padding: 96px 0 8px; }
.whole h2 {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--slate-950);
  margin-bottom: 14px;
}
.whole p.lede { font-size: 17px; line-height: 1.6; color: var(--slate-700); max-width: 620px; }
.closers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.closer {
  background: var(--cream-50);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px 18px 22px;
}
.closer .n {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--euc-600);
  margin-bottom: 10px;
}
.closer .t { font-size: 14.5px; line-height: 1.5; color: var(--slate-700); }

/* ─── Dark closer ──────────────────────────────────────────── */
.tour-cta {
  background: var(--slate-950);
  background-image:
    radial-gradient(ellipse 70% 60% at 85% 15%, rgba(93,149,131,0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 95%, rgba(93,149,131,0.10), transparent 60%);
  color: var(--cream-100);
  text-align: center;
  margin-top: 96px;
  overflow: hidden;
}
.tour-cta .tour-shell { padding-top: 104px; padding-bottom: 104px; }
.tour-cta h2 {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--cream-100);
  margin-bottom: 18px;
}
.tour-cta h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: #92b8a8;
}
.tour-cta p { font-size: 17px; line-height: 1.6; color: var(--cream-300); max-width: 560px; margin: 0 auto 30px; }
.tour-cta .store-badges { justify-content: center; }

/* ============================================================
 * MOBILE — unpin and stack (#1006 Gate 0, operator-approved)
 * ============================================================ */
@media (max-width: 1080px) {
  .tour-grid { grid-template-columns: 1fr; gap: 0; }
  .rail { display: none; }
  .phone-col { display: none; }
  .scroll-cue { padding-left: 0; }
  .narrative-row { gap: 0; padding-bottom: 40px; }
  .step-block {
    min-height: 0;
    padding: 40px 0;
    border-top: 1px solid var(--rule);
  }
  .steps-col > .step-block:first-child { border-top: 0; }
  .js .step-block { opacity: 1; transform: none; }
  .step-visual { margin-top: 26px; }
  .step-visual .app-card { max-width: 460px; margin-inline: auto; }
}
@media (min-width: 1081px) { .step-visual { display: none; } }

@media (max-width: 720px) {
  .tour-shell, .tour-grid { padding-left: 20px; padding-right: 20px; }
  .tour-cta .tour-shell { padding-top: 76px; padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .step-block { opacity: 1; transform: none; }
  .phone-column { transition: none; }
  .step-block, .rail span { transition: none; }
}

/* ─── Pagers inside the phone (#1006) ──────────────────────────
 * The app does not stack these vertically. Before / Today / Ahead are three
 * panes of one horizontal pager, and the mosaic is pane 0 of the accounts
 * pager with the institution cards after it. Stacking them told a visitor the
 * app is a long scroll, and contradicted step 08's own "Swipe from the
 * mosaic…". Each pager slides horizontally; the column still scrolls between
 * pagers. */
.pager { overflow: hidden; }
.pager-track {
  display: flex;
  /* flex-start, not the default stretch: otherwise every lane inherits the
     tallest one's height and a short card like the status view is padded out
     to the mosaic's size. Height is then set per-pane in JS, so the pager
     sizes to what it is showing — which is what the app does. */
  align-items: flex-start;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  overflow: hidden;
}
.pager-lane { flex: 0 0 100%; min-width: 0; }
/* Dots are centred, as in the app. The hint is taken out of flow so it cannot
   pull the centring off — it was offsetting them to the left. */
.pager-dots {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 2px 2px;
}
.pager-dots > span[data-dot] {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  /* The dots sit on the phone SCREEN (#fafafa), not on a dark card —
     white-on-white made them invisible. */
  background: rgba(29, 33, 38, 0.18);
  transition: width 0.3s ease, background 0.3s ease;
}
/* Elongated active pill: this is a journey through panes, not a fixed set —
 * the same dot semantics the app's institution carousel uses. */
.pager-dots > span.is-active { width: 18px; background: var(--euc-500); }
.pager-hint {
  position: absolute;
  right: 2px;
  top: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(29, 33, 38, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .pager-track { transition: none; }
}