/* Launch pages (tour / docs / changelog) — extends site.css */

/* Shorter hero for utility pages */
.docs-hero { padding-bottom: 64px; }

/* Link-colour rules for lede/pullquote/table contexts live in site.css (sitewide). */

/* ── Tour steps ── */
.tour-step { display: grid; gap: 28px; padding: 48px 0; border-bottom: 1px solid rgba(15, 27, 45, 0.08); }
.tour-step:last-child { border-bottom: 0; }
.tour-num { font-size: 18px; color: var(--advisory-gold-2); letter-spacing: 0.08em; }
.tour-copy h2 { margin-top: 8px; font-size: 26px; line-height: 1.18; color: var(--advisory-navy); font-weight: 400; }
.tour-copy .body { margin-top: 14px; font-size: 15px; line-height: 1.625; color: rgba(15, 27, 45, 0.72); max-width: 480px; }
.tour-copy .body a { color: var(--advisory-gold-2); text-decoration: underline; text-underline-offset: 3px; }

/* Screen frame: navy panel with gold rule; holds a caption until the product
   screenshot is dropped in (img replaces the figcaption at capture time). */
.tour-frame { margin: 0; border-radius: 2px; background: var(--advisory-navy); border-top: 3px solid var(--advisory-gold); min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 32px; }
.tour-frame img { max-width: 100%; height: auto; display: block; border-radius: 2px; }
.tour-frame figcaption { text-align: center; max-width: 340px; font-size: 14px; line-height: 1.6; color: rgba(245, 239, 227, 0.75); }
.tour-frame .tf-label { display: block; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--advisory-gold); margin-bottom: 10px; }

@media (min-width: 820px) {
  .tour-step { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 48px; }
  .tour-step:nth-child(odd) .tour-copy { order: 2; }
  .tour-step:nth-child(odd) .tour-frame { order: 1; }
}

/* ── Founding 20 live places line ── */
.f20-places { color: var(--advisory-gold); }