/* ============================================================
 * /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 PHONE is lifted from that file verbatim — its markup and inline styles
 * are the design's own, so this stylesheet carries no rules for the phone's
 * interior. Only the names are swapped: the design uses real companies
 * (Comcast, Stripe Payout) and institutions outside the approved fictional
 * set (Greenline Federal, Riverstone); the lift substitutes Meridian /
 * BayBank / Northwind / Harborline. Figures are the design's — operator
 * call (2026-07-27): flow matters more than the numbers.
 * ============================================================ */

/* 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;
} 
/* The design's pin geometry: a viewport-height sticky box with the phone
 * centred inside it. The pin — not the phone — is the sticky element, so the
 * sticky maths run on a box that always fits the viewport. Pinning the 868px
 * frame directly released ~96px early at the end of the tour: scale() shrinks
 * the visual but not the layout box, and the phantom height came off the
 * sticky range. */
.phone-pin {
  position: sticky;
  top: 96px;
  z-index: 6;
  height: calc(100vh - 128px);
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The frame and everything inside it is the design's own markup with the
 * design's inline styles — 409 x 868 at native size, scaled to the viewport
 * as one unit by JS (the design's phoneScale binding, floor 0.5). Scaling the
 * frame rather than resizing it is what lets every fixed px inside — 361px
 * card lanes, 377px deck steps — stay true to the design. No interior rules
 * live here; edit the markup, not this file. */

@media (prefers-reduced-motion: reduce) {
  [data-phone-column], [data-deck] { transition: none !important; }
}

/* ─── 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; }
  .step-block, .rail span { transition: none; }
}