/* What the tour and the pricing page are both made of, over the design system:
   the page, its type, and the few blocks both use. Each page keeps its own
   layout inline. */
/* Smooth in-page scrolling is site.css's, for every page. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important } }
body { margin: 0; background: var(--bg-base); color: var(--fg-primary); font-family: var(--font-sans) }
/* One width for every page, the site bar's (site.css). */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px }
@media (max-width: 600px) { .wrap { padding: 0 16px } }
a:not(.btn) { color: var(--fg-accent) }
.btn { text-decoration: none }
[hidden] { display: none !important }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---- type ---- */
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .08em;
           text-transform: uppercase; color: var(--fg-accent); margin: 0 0 12px }
h1, h2, h3 { font-family: var(--font-display); color: var(--fg-primary); text-wrap: balance; margin: 0 }
h1 { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.05; letter-spacing: -.03em; font-weight: var(--weight-semibold) }
h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -.02em; font-weight: var(--weight-semibold) }
h3 { font-size: var(--text-lg); line-height: 1.3; font-weight: var(--weight-semibold) }
.lede { font-size: var(--text-lg); line-height: 1.55; color: var(--fg-secondary); max-width: 75ch; text-wrap: pretty }
p { line-height: 1.6 }
.ph { display: inline-block }
code, .mono { font-family: var(--font-mono); font-size: .92em }
section.band { padding: clamp(56px, 9vw, 104px) 0; border-bottom: 1px solid var(--border-divider) }
.head { max-width: 860px; margin-bottom: 40px }
.head p { color: var(--fg-secondary); margin: 14px 0 0 }

.caption { font-size: var(--text-xs); color: var(--fg-tertiary); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .06em; font-weight: var(--weight-semibold) }
.note { font-size: var(--text-sm); color: var(--fg-secondary); margin: 14px 0 0 }
h3.sub { margin: 48px 0 16px }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 24px }
@media (max-width: 800px) { .facts { grid-template-columns: repeat(2, 1fr) } }
.fact { padding: 18px; border-radius: var(--radius-xl); background: var(--bg-card); border: 1px solid var(--border-card) }
.fact b { display: block; font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -.01em }
.fact span { font-size: var(--text-sm); color: var(--fg-secondary) }
.ticks { list-style: none; padding: 0; margin: 0 }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border-divider); color: var(--fg-secondary) }
.ticks li:first-child { border-top: 0 }
.ticks svg { margin-top: 3px; color: var(--fg-accent) }
.ticks b { color: var(--fg-primary); font-weight: var(--weight-semibold) }