/* Public site: a shared layout system for product, guides and company pages.
   Existing brand colours and typefaces stay in site.css. */
:root {
  --poppy: #b82e1a;
  --public-width: 1280px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --public-display: clamp(40px, 5.3vw, 76px);
  --public-title: clamp(32px, 3.6vw, 52px);
  --public-body: 18px;
  --public-small: 14px;
  --public-radius: 8px;
  --public-pill: 999px;
  --public-gold-ink: #74591b;
  --public-hero-height: 620px;
  --public-compact-height: 460px;
  --public-heading-width: 840px;
  --public-city-photo-height: 160px;
  --public-story-height: 540px;
  --public-wide-text: 960px;
  --public-compact-display: 68px;
  --public-capture-height: 380px;
  --public-mobile-photo-height: 320px;
  --public-expanded-capture-height: 420px;
  --public-answer-width: 860px;
  --public-price-width: 1024px;
  --public-reading-width: 800px;
  --public-wide-hero-height: 680px;
  --public-wide-compact-height: 480px;
  --public-compact-photo-height: 280px;
  --public-city-thumb-height: 120px;
  --public-phone-width: 375px;
  --public-mobile-nav-height: 72px;
  --public-city-thumb-mobile-height: 104px;
  --public-small-capture-height: 340px;

  --public-brand-size: 21px;
  --public-mark-width: 26px;
  --public-mark-height: 34px;

}
.wrap { width: min(var(--public-width), calc(100% - var(--space-8))); }
html { scroll-padding-top: var(--space-12); }
body { font-size: var(--public-body); }
h1 em, .title em { color: inherit; font-style: normal; }
.btn { min-height: 48px; border-radius: var(--public-radius); padding: 12px 24px; }
.btn--poppy { background: var(--poppy); }
.btn--poppy:hover { background: var(--spruce); }
.nav { border-bottom: 1px solid var(--rule); }
.nav-in { height: var(--space-10); }
.nav-links { gap: var(--space-4); }
.nav-act { gap: var(--space-2); }
.nav-act .signin { border: 0; }
.eyebrow { font: 500 var(--public-small)/1.5 var(--sans); color: var(--lake); margin-bottom: var(--space-3); }
.intro-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: var(--public-hero-height); }
.intro-copy { padding: var(--space-10) var(--space-8) var(--space-10) max(var(--space-4), calc((100vw - var(--public-width)) / 2)); align-self: center; }
.intro-copy h1, .page-opening h1 { font: 400 var(--public-display)/1.04 var(--display); letter-spacing: -.045em; margin: 0; }
.intro-lead { font-size: 20px; line-height: 1.55; max-width: 43ch; margin: var(--space-4) 0; color: var(--ink-soft); }
.intro-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; font-weight: 500; }
.text-link:hover { color: var(--lake); }
.small-note { font: 400 var(--public-small)/1.6 var(--sans); color: var(--ink-soft); margin-top: var(--space-2); max-width: 65ch; }
.intro-photo { position: relative; min-width: 0; min-height: 100%; overflow: hidden; }
.intro-photo > img { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.photo-ticket { position: absolute; bottom: var(--space-4); left: var(--space-4); right: var(--space-4); width: fit-content; background: var(--snow); padding: var(--space-3) var(--space-4); border-radius: var(--public-radius); }
.photo-ticket span { display: block; font-size: var(--public-small); color: var(--ink-soft); }
.photo-ticket b { display: block; font: 400 28px/1.3 var(--display); margin-top: var(--space-1); }
.intro-hero--compact { min-height: var(--public-compact-height); }
.intro-hero--compact h1 { font-size: clamp(36px, 4.6vw, 64px); }
.intro-hero--compact .intro-copy { padding-block: var(--space-8); }
.benefit-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding-block: var(--space-5); }
.benefit-strip p { padding-left: var(--space-3); border-left: 2px solid var(--rule); }
.benefit-strip b, .benefit-strip span { display: block; }
.benefit-strip b { font-weight: 500; font-size: var(--public-body); margin-bottom: 4px; }
.benefit-strip span { color: var(--ink-soft); font-size: 16px; }
.trip-showcase { background: var(--spruce); color: var(--snow); padding-block: var(--space-10) var(--space-6); }
.center-heading { max-width: var(--public-heading-width); text-align: center; margin: 0 auto var(--space-6); }
.center-heading h2, .change-copy h2, .start-copy h2, .walkthrough-copy h2 { font: 400 var(--public-title)/1.12 var(--display); letter-spacing: -.035em; }
.center-heading > p:not(.eyebrow) { margin-top: var(--space-3); font-size: var(--public-body); color: var(--ink-soft); }
.trip-showcase .eyebrow { color: var(--gold-light); }
.trip-showcase .center-heading > p:not(.eyebrow) { color: var(--snow-2); }
.route-demo { padding: var(--space-4); border: 1px solid var(--pale); border-radius: var(--public-radius); }
.demo-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--public-small); }
.demo-topline b { font-weight: 500; }
.demo-topline > span { color: var(--snow-2); }
.photo-spine.spine { display: grid; grid-template-columns: minmax(0,1fr) 140px minmax(0,1fr) 140px minmax(0,1fr); min-width: 0; padding: 0; background: none; border: 0; }
.photo-spine .seg { display: flex; flex-direction: column; min-height: 0; border: 0; padding: 0; background: var(--snow); color: var(--ink); border-radius: var(--public-radius); overflow: hidden; }
.photo-spine .seg img { width: 100%; height: var(--public-city-photo-height); object-fit: cover; }
.photo-spine .seg > div { padding: var(--space-2) var(--space-3) 0; }
.photo-spine .seg-code { display: none; }
.photo-spine .seg-place { font: 400 30px/1.2 var(--display); color: var(--ink); }
.photo-spine .seg .seg-nights { padding: var(--space-1) var(--space-3) var(--space-3); font: 400 16px/1.5 var(--sans); color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
.photo-spine .rail { align-self: center; width: auto; min-width: 0; background: none; padding: var(--space-2) var(--space-1); border: 0; text-align: center; position: relative; }
.photo-spine .rail::before { content: ''; display: block; height: 1px; background: var(--pale); width: calc(100% - var(--space-3)); margin: 0 auto var(--space-2); }
.photo-spine .rail b { font: 500 15px/1.5 var(--sans); white-space: nowrap; }
.photo-spine .rail small { font: 400 13px/1.5 var(--sans); color: var(--snow-2); letter-spacing: 0; text-transform: none; margin-top: 4px; }
.route-summary { font-size: var(--public-small); text-align: center; padding: var(--space-3) 0 0; color: var(--snow-2); }
.route-compare { border-top: 1px solid var(--pale); margin-top: var(--space-3); padding-top: var(--space-3); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.route-compare > p { font-size: 16px; }
.route-compare .vers { margin: 0; display: flex; gap: var(--space-1); }
.route-compare .ver { min-height: 48px; padding: 12px var(--space-2); border: 1px solid var(--pale); border-radius: var(--public-radius); background: none; color: var(--snow); text-align: left; flex: none; }
.route-compare .ver b { display: block; font: 500 15px/1.4 var(--sans); color: inherit; }
.route-compare .ver small { font: 400 13px/1.5 var(--sans); color: inherit; }
.route-compare .ver .tag { display: none; }
.route-compare .ver.is-on { background: var(--snow); color: var(--ink); border-color: var(--snow); }
.demo-caption { margin-top: var(--space-3); font-size: var(--public-small); text-align: center; color: var(--snow-2); }
.demo-notes { margin: var(--space-2) auto 0; max-width: 80ch; font-size: var(--public-small); color: var(--snow-2); }
.demo-notes > summary { min-height: 44px; padding-block: 12px; text-align: center; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.demo-notes p { margin-top: var(--space-2); }
.change-story { display: grid; grid-template-columns: 1fr 1fr; }
.change-photo { min-height: var(--public-story-height); position: relative; overflow: hidden; }
.change-photo img { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.change-copy { padding: var(--space-10) max(var(--space-4), calc((100vw - var(--public-width))/2)) var(--space-10) var(--space-8); align-self: center; }
.change-copy > p:not(.eyebrow) { font-size: var(--public-body); color: var(--ink-soft); margin-top: var(--space-3); max-width: 48ch; }
.change-copy > .text-link { margin-top: var(--space-3); }
.change-example { margin-top: var(--space-3); padding-block: var(--space-2); border-block: 1px solid var(--rule); }
.change-example summary { cursor: pointer; min-height: 44px; padding-block: var(--space-1); font-weight: 500; }
.change-example p { margin-block: var(--space-2); }
.change-ways { padding-left: var(--space-3); }
.start-section { background: var(--snow-2); padding-block: var(--space-10) var(--space-6); }
.start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.start-copy > p:not(.eyebrow):not(.small-note) { font-size: var(--public-body); color: var(--ink-soft); margin-block: var(--space-3) var(--space-4); max-width: 43ch; }
.access-card { border: 1px solid var(--rule); border-radius: var(--public-radius); padding: var(--space-4); background: var(--snow); }
.access-card h3 { font-size: var(--public-brand-size); font-weight: 500; }
.access-price { font: 400 48px/1.2 var(--display); margin-block: var(--space-2); }
.access-price span { font: 400 var(--public-small)/1.5 var(--sans); }
.access-card ul { padding-left: var(--space-3); margin-block: var(--space-3); }
.access-card li { margin-block: var(--space-1); }
.access-card > p:not(.access-price) { font-size: var(--public-small); }
.quick-answers { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); margin-top: var(--space-8); }
.quick-answers details { border-top: 1px solid var(--rule); padding-top: var(--space-2); }
.quick-answers summary { min-height: 44px; cursor: pointer; font-size: 16px; font-weight: 500; }
.quick-answers p { font-size: 16px; margin-top: var(--space-2); color: var(--ink-soft); }
.page-opening { text-align: center; padding-block: var(--space-8) var(--space-6); }
.page-opening h1 { max-width: var(--public-wide-text); margin-inline: auto; font-size: clamp(40px, 5vw, var(--public-compact-display)); }
.page-opening > p:not(.eyebrow) { max-width: 62ch; margin: var(--space-3) auto var(--space-3); font-size: 20px; color: var(--ink-soft); }
.step-nav { display: flex; justify-content: center; gap: var(--space-6); margin-top: var(--space-5); }
.step-nav a { display: flex; align-items: center; gap: var(--space-1); min-height: 44px; }
.step-nav span { width: 32px; height: 32px; border-radius: 50%; background: var(--snow-2); display: grid; place-items: center; font-size: var(--public-small); }
.how-page .filmstrip-list { display: block; }
.walkthrough-step { padding-block: var(--space-8); background: var(--snow-2); }
.walkthrough-step--green { background: var(--spruce); color: var(--snow); }
.walkthrough-grid.filmstrip-frame { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-10); align-items: center; padding: 0; margin-inline: auto; border: 0; background: none; border-radius: 0; }
.walkthrough-copy { max-width: 48ch; }
.step-count { display: block; font-size: var(--public-small); font-weight: 500; color: var(--lake); margin-bottom: var(--space-3); }
.walkthrough-copy > p { margin-top: var(--space-3); font-size: var(--public-body); color: var(--ink-soft); }
.walkthrough-step--green .walkthrough-copy > p { color: var(--snow-2); }
.walkthrough-step--green .step-count { color: var(--gold-light); }
.walkthrough-copy .text-link { margin-top: var(--space-2); }
.walkthrough-capture.filmstrip-plate { max-height: var(--public-capture-height); min-height: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--public-radius); overflow: hidden; background: var(--snow); }
.walkthrough-capture img { width: 100%; height: auto; display: block; }
.phone-capture.filmstrip-plate { max-width: var(--public-mobile-photo-height); width: 100%; justify-self: center; }
.more-screens { padding-block: var(--space-4); }
.more-screens > details > summary { padding-block: var(--space-2); cursor: pointer; font-weight: 500; min-height: 48px; }
.more-screens .small-note { max-width: 100%; }
.support-screens { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); margin-block: var(--space-3); }
.support-screens .filmstrip-frame { display: block; border: 0; padding: var(--space-3); background: var(--snow-2); }
.support-screens h3 { font: 400 25px/1.2 var(--display); }
.support-screens p { margin-block: var(--space-2); }
.support-screens .filmstrip-plate { max-height: var(--public-expanded-capture-height); overflow: hidden; padding: 0; }
.support-screens img { width: 100%; }
.closing-banner { padding-block: var(--space-6); background: var(--spruce); color: var(--snow); }
.closing-banner > .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.closing-banner h2 { font: 400 clamp(28px,3vw,40px)/1.2 var(--display); letter-spacing: -.025em; }
.closing-banner p { color: var(--snow-2); margin-top: var(--space-1); }
.closing-banner .btn { flex-shrink: 0; }
.feature-section { padding-block: var(--space-8); }
.benefit-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.benefit-columns h3, .benefit-columns h2 { font: 400 28px/1.2 var(--display); }
.benefit-columns p { margin-top: var(--space-2); color: var(--ink-soft); font-size: var(--public-body); }
.walkthrough-step--green .benefit-columns p { color: var(--snow-2); }
.change-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.change-comparison > div { background: var(--snow-2); padding: var(--space-4); border-radius: var(--public-radius); }
.change-comparison h3 { font: 400 30px/1.2 var(--display); margin-bottom: var(--space-3); }
.change-comparison ul { padding-left: var(--space-3); }
.change-comparison li { margin-bottom: var(--space-1); }
.compact-faq { max-width: var(--public-answer-width); margin-inline: auto; }
.compact-faq h2 { font: 400 var(--public-title)/1.15 var(--display); margin-bottom: var(--space-4); text-align: center; }
.compact-faq details { border-bottom: 1px solid var(--rule); padding-block: var(--space-2); }
.compact-faq summary { min-height: 44px; padding-block: var(--space-1); cursor: pointer; font-weight: 500; }
.compact-faq p { margin-block: var(--space-2); color: var(--ink-soft); max-width: 75ch; }
.booking-sequence { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
.booking-sequence article { padding: var(--space-3); background: var(--snow-2); border-radius: var(--public-radius); }
.booking-sequence h3 { font: 400 28px/1.2 var(--display); margin-bottom: var(--space-3); }
.pricing-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: var(--public-price-width); }
.price-option { background: var(--snow-2); border-radius: var(--public-radius); padding: var(--space-5); }
.price-option h2 { font: 400 var(--public-mark-height)/1.2 var(--display); }
.price-number { font: 400 64px/1.2 var(--display); margin-block: var(--space-3); }
.price-number span { font: 400 var(--public-small)/1.5 var(--sans); }
.price-option ul { padding-left: var(--space-3); margin-block: var(--space-3) var(--space-4); }
.price-option li { margin-block: var(--space-1); }
.price-option--full { background: var(--spruce); color: var(--snow); }
.price-option--full .eyebrow { color: var(--gold-light); }
.price-option--full .small-note { color: var(--snow-2); }
.availability-note { border-top: 1px solid var(--pale); padding-top: var(--space-3); font-weight: 500; }
/* Editorial pages keep useful depth; the layout gives that depth a clear order. */
.band { padding-block: var(--space-8); }
.band--tight { padding-block: var(--space-6); }
.head { max-width: var(--public-answer-width); margin-inline: auto; text-align: center; margin-bottom: var(--space-5); }
.head .lead { margin-inline: auto; }
.title { font-size: var(--public-title); line-height: 1.12; }
.kicker { font: 500 var(--public-small)/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--lake); }
.kicker--gold { color: var(--public-gold-ink); }
.kicker--pale { color: var(--snow-2); }
.secondband .kicker, .trustband .kicker, .rec-say .kicker, .finale .kicker { color: var(--gold-light); }
.answer { background: var(--snow-2); padding: var(--space-4); border: 0; border-radius: var(--public-radius); display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-6); align-items: start; }
.answer .direct { color: var(--ink); font: 400 22px/1.5 var(--sans); }
.answer-details summary { cursor: pointer; min-height: 44px; padding-block: var(--space-1); font-weight: 500; }
.answer-details ul { margin-top: var(--space-2); padding-left: var(--space-3); }
.answer-details li { color: var(--ink-soft); margin-bottom: var(--space-2); }
.prose { max-width: var(--public-reading-width); margin-inline: auto; font-size: var(--public-body); }
.prose h2 { font: 400 32px/1.2 var(--display); margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prose h3 { margin-top: var(--space-4); }
.prose p, .prose ul, .prose ol { margin-bottom: var(--space-3); }
.prose p { max-width: 75ch; }
.prose a { text-decoration: underline; text-underline-offset: 4px; }
.sources { background: var(--snow-2); border-radius: var(--public-radius); border: 0; padding: var(--space-3) var(--space-4); max-width: var(--public-wide-text); margin-inline: auto; }
.sources h2 { font: 500 var(--public-body)/1.4 var(--sans); }
.sources li, .sources .updated { font-size: var(--public-small); color: var(--ink-soft); }
.finale { border-radius: var(--public-radius); min-height: var(--public-mobile-photo-height); }
.finale-veil h2 { font-size: var(--public-title); line-height: 1.12; }
.finale-veil h2 em { color: inherit; font-style: normal; }
.foot { padding-block: var(--space-6) var(--space-3); }
.foot-brand { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.foot-brand > p { font-size: var(--public-small); max-width: none; }
.foot-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); padding-block: var(--space-4); }
.foot-grid h2 { font: 500 16px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--snow); }
.foot-grid a { min-height: 36px; font-size: var(--public-small); padding-block: var(--space-1); color: var(--snow-2); }
.foot-copy { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); }
.foot-copy p { font-size: var(--public-small); color: var(--snow-2); max-width: 75ch; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 1500px) { .intro-hero { min-height: var(--public-wide-hero-height); } .intro-hero--compact { min-height: var(--public-wide-compact-height); } }
@media (max-width: 1100px) {
  .intro-copy { padding-inline: var(--space-4); }
  .intro-actions { gap: var(--space-2); }
  .photo-spine.spine { grid-template-columns: minmax(0,1fr) var(--public-city-thumb-height) minmax(0,1fr) var(--public-city-thumb-height) minmax(0,1fr); }
  .route-compare { display: block; }
  .route-compare .vers { margin-top: var(--space-2); }
  .change-copy { padding: var(--space-6) var(--space-4); }
}
@media (max-width: 900px) {
  .wrap { width: calc(100% - var(--space-6)); }
  .intro-hero { grid-template-columns: 1fr; min-height: auto; }
  .intro-copy { padding: var(--space-6) var(--space-3); }
  .intro-copy h1 { font-size: clamp(40px,8vw,var(--public-compact-display)); }
  .intro-photo { min-height: var(--public-mobile-photo-height); }
  .intro-hero--compact .intro-photo { min-height: var(--public-compact-photo-height); }
  .intro-hero--compact .intro-copy { padding-block: var(--space-6); }
  .intro-lead { font-size: var(--public-body); max-width: 58ch; margin-block: var(--space-3); }
  .benefit-strip { gap: var(--space-3); }
  .benefit-strip p { padding-left: var(--space-2); }
  .photo-spine.spine { grid-template-columns: 1fr; }
  .photo-spine .seg { display: grid; grid-template-columns: var(--public-city-thumb-height) 1fr; grid-template-rows: auto auto; align-content: center; }
  .photo-spine .seg img { height: var(--public-city-thumb-height); grid-row: 1 / 3; }
  .photo-spine .seg > div { padding: var(--space-2) var(--space-3) 0; }
  .photo-spine .seg .seg-nights { padding: 0 var(--space-3) var(--space-2); }
  .photo-spine .rail { padding: var(--space-2) var(--space-3); display: flex; align-items: center; gap: var(--space-2); justify-content: center; }
  .photo-spine .rail::before { height: 24px; width: 1px; margin: 0 var(--space-1); }
  .photo-spine .rail small { margin: 0; }
  .change-story, .start-grid { grid-template-columns: 1fr; }
  .change-photo { min-height: var(--public-mobile-photo-height); }
  .change-copy { padding: var(--space-6) var(--space-3); }
  .change-copy > p:not(.eyebrow) { max-width: 65ch; }
  .start-grid { gap: var(--space-4); }
  .start-copy > p:not(.eyebrow):not(.small-note) { max-width: 60ch; }
  .quick-answers { grid-template-columns: 1fr; gap: var(--space-2); margin-top: var(--space-5); }
  .walkthrough-grid.filmstrip-frame { gap: var(--space-5); grid-template-columns: 1fr 1fr; }
  .walkthrough-capture.filmstrip-plate { max-width: var(--public-phone-width); justify-self: center; }
  .walkthrough-copy > p { font-size: var(--public-body); }
  .benefit-columns { gap: var(--space-3); }
  .answer { grid-template-columns: 1fr; gap: var(--space-2); }
  .answer .direct { font-size: 20px; }
  .foot-grid { gap: var(--space-3); }
}
@media (max-width: 600px) {
  .nav-in { height: var(--public-mobile-nav-height); }
  .nav-act { gap: var(--space-1); }
  .nav-act .btn { padding-inline: var(--space-2); font-size: var(--public-small); }
  .mark { font-size: var(--public-brand-size); }
  .mark-glyph { width: var(--public-mark-width); height: var(--public-mark-height); }
  .benefit-strip { grid-template-columns: 1fr; gap: var(--space-2); padding-block: var(--space-4); }
  .benefit-strip p { padding-left: var(--space-2); }
  .benefit-strip b { font-size: var(--public-body); margin: 0; }
  .benefit-strip span { font-size: var(--public-small); }
  .trip-showcase { padding-block: var(--space-6) var(--space-4); }
  .center-heading { margin-bottom: var(--space-4); }
  .center-heading .eyebrow { margin-bottom: var(--space-2); }
  .center-heading > p:not(.eyebrow) { font-size: var(--public-body); }
  .desktop-break { display: none; }
  .route-demo { padding: var(--space-2); }
  .demo-topline { display: block; margin-bottom: var(--space-2); }
  .demo-topline > span { display: block; margin-top: 4px; }
  .photo-spine .seg { grid-template-columns: 96px 1fr; }
  .photo-spine .seg img { height: var(--public-city-thumb-mobile-height); }
  .photo-spine .seg > div { padding-left: var(--space-2); }
  .photo-spine .seg-place { font-size: var(--public-mark-width); }
  .photo-spine .seg .seg-nights { padding-left: var(--space-2); font-size: var(--public-small); }
  .photo-spine .rail { flex-wrap: wrap; gap: 4px; padding-inline: 0; }
  .photo-spine .rail b { font-size: var(--public-small); }
  .photo-spine .rail small { font-size: 12px; }
  .route-summary { padding: var(--space-2); }
  .route-compare .vers { flex-direction: column; }
  .route-compare .ver { width: 100%; }
  .route-compare .ver small { display: block; }
  .change-copy > p:not(.eyebrow) { font-size: var(--public-body); }
  .start-section { padding-block: var(--space-6) var(--space-4); }
  .access-card { padding: var(--space-3); }
  .access-price span { display: block; margin-top: var(--space-1); }
  .page-opening { padding-block: var(--space-5) var(--space-4); }
  .page-opening h1 { font-size: 40px; }
  .page-opening > p:not(.eyebrow) { font-size: var(--public-body); }
  .step-nav { gap: var(--space-2); justify-content: space-between; margin-top: var(--space-3); }
  .step-nav a { display: block; font-size: var(--public-small); }
  .step-nav span { margin: 0 auto var(--space-1); }
  .walkthrough-step { padding-block: var(--space-5); }
  .walkthrough-grid.filmstrip-frame { grid-template-columns: 1fr; gap: var(--space-3); }
  .walkthrough-capture.filmstrip-plate { width: 100%; max-height: var(--public-small-capture-height); }
  .phone-capture.filmstrip-plate { max-width: 100%; }
  .support-screens, .benefit-columns, .change-comparison, .booking-sequence, .pricing-options { grid-template-columns: 1fr; }
  .support-screens .filmstrip-frame { padding: var(--space-2); }
  .closing-banner > .wrap { display: block; }
  .closing-banner .btn { margin-top: var(--space-3); }
  .feature-section { padding-block: var(--space-5); }
  .benefit-columns { gap: var(--space-4); }
  .price-option { padding: var(--space-3); }
  .change-comparison > div { padding: var(--space-3); }
  .band { padding-block: var(--space-5); }
  .band--tight { padding-block: var(--space-4); }
  .prose { font-size: var(--public-body); }
  .answer { padding: var(--space-3); }
  .foot-brand { display: block; }
  .foot-brand > p { margin-top: var(--space-2); }
  .foot-grid { grid-template-columns: 1fr 1fr; padding-block: var(--space-3); }
  .foot-grid a { min-height: 44px; padding-block: var(--space-1); }
  .foot-copy { display: block; }
  .foot-copy p + p { margin-top: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none; animation: none; }
}
/* Reset legacy walkthrough grid before applying the public-page grid inside. */
.how-page .walkthrough-step { display: block; margin: 0; border: 0; }
.how-page .filmstrip-list { margin: 0; }
.how-page .walkthrough-capture { display: block; box-shadow: none; }
.foot-grid h2 { color: var(--ink); }
.foot-grid a, .foot-copy p { color: var(--ink-soft); }
.foot-grid a:hover { color: var(--lake); text-decoration: underline; }
.route-compare .ver b { text-transform: none; letter-spacing: 0; }
.crumbs { font: 400 var(--public-small)/1.5 var(--sans); letter-spacing: 0; text-transform: none; width: min(var(--public-width),calc(100% - var(--space-6))); margin: var(--space-2) auto; }
.article-layout { display: grid; grid-template-columns: 240px minmax(0,var(--public-reading-width)); justify-content: center; gap: var(--space-8); align-items: start; }
.article-layout > .prose { min-width: 0; max-width: 100%; margin: 0; }
.article-toc { position: sticky; top: var(--space-12); border-left: 2px solid var(--rule); padding-left: var(--space-3); }
.article-toc p { font-weight: 500; margin-bottom: var(--space-2); }
.article-toc a { display: block; font-size: var(--public-small); min-height: 44px; padding-block: var(--space-1); color: var(--ink-soft); }
.article-toc a:hover { text-decoration: underline; }
.article-layout h2 { scroll-margin-top: var(--space-12); }
@media (max-width:900px) { .article-layout { grid-template-columns: 1fr; gap: var(--space-3); } .article-toc { position: static; } .article-toc a { display: inline-block; padding-right: var(--space-3); } }
/* The public scale has small, body, subheading, section, display and price roles. */
.nav-links a, .nav .btn, .route-compare .ver b, .route-compare .ver small,
.photo-spine .rail b, .photo-spine .rail small, .foot-copy p, .foot-copy p:last-child,
.step-nav a { font-size: var(--public-small); }
body, .benefit-strip span, .benefit-strip b, .intro-lead, .page-opening > p:not(.eyebrow),
.walkthrough-copy > p, .center-heading > p:not(.eyebrow), .change-copy > p:not(.eyebrow),
.photo-spine .seg .seg-nights, .route-compare > p, .quick-answers summary, .quick-answers p,
.foot-grid h2, .walkthrough-copy .text-link { font-size: var(--public-body); }
.access-card h3, .photo-spine .seg-place, .change-comparison h3 { font-size: 28px; }
.foot-grid a, .foot-brand p, .foot-brand .mark, .foot-copy p:last-child { font-family: var(--sans); }
.eyebrow { margin-bottom: var(--space-4); }
.intro-lead { margin-top: var(--space-2); }
.center-heading > p:not(.eyebrow) { margin-top: var(--space-2); }
.walkthrough-copy .step-count { margin-bottom: var(--space-4); }
@media(max-width:600px) {
  .center-heading .eyebrow { margin-bottom: var(--space-4); }
  .intro-lead { margin-top: var(--space-2); }
  .nav .mark { font-size: var(--public-brand-size); }
  .photo-spine .seg .seg-nights { font-size: var(--public-small); }
  .walkthrough-capture.filmstrip-plate { max-height: var(--public-expanded-capture-height); }
  .benefit-strip span, .benefit-strip b { font-size: var(--public-small); }
}
.mark em { color: var(--public-gold-ink); }
.photo-spine .seg-place { overflow-wrap: anywhere; }
.photo-spine .seg .seg-nights { white-space: normal; overflow: visible; text-overflow: clip; }
@media(max-width:600px) {
  .photo-spine .seg { grid-template-columns: var(--space-10) minmax(0,1fr); }
  .photo-spine .seg-place { font-size: 24px; }
  .price-number { font-size: 40px; }
}

.btn { font-size: var(--public-small); }
.hero-result.photo-ticket { width: calc(100% - var(--space-8)); max-width: var(--public-wide-text); }
.hero-result ol { display: grid; grid-template-columns: 1fr 1.25fr 1fr; list-style: none; gap: var(--space-2); margin-top: var(--space-2); }
.hero-result li { min-width: 0; }
.hero-result li b { font: 500 var(--public-body)/1.5 var(--sans); margin: 0; }
.hero-result li span { font-size: var(--public-small); }
.hero-result p { font-size: var(--public-small); border-top: 1px solid var(--rule); margin-top: var(--space-2); padding-top: var(--space-1); }
.free-available, .paid-status { font-size: var(--public-body); font-weight: 500; margin-block: var(--space-2); }
.price-option:first-child { background: var(--spruce); color: var(--snow); }
.price-option:first-child .eyebrow, .price-option:first-child .small-note { color: var(--snow-2); }
.price-option--full { background: var(--snow-2); color: var(--ink); }
.price-option--full .eyebrow { color: var(--ink); }
.price-option--full .small-note { color: var(--ink-soft); }
.guide-grid { gap: var(--space-3); }
.guide-grid--manuals { grid-template-columns: repeat(4,minmax(0,1fr)); }
.guide-card { display: flex; flex-direction: column; min-height: 0; background: var(--spruce); border-radius: var(--public-radius); }
.guide-card img { width: 100%; height: var(--public-city-photo-height); min-height: 0; object-fit: cover; }
.guide-card .marker { position: static; max-width: none; width: 100%; padding: var(--space-3); }
.guide-card .marker b { font: 400 var(--public-small)/1.5 var(--sans); color: var(--gold-light); letter-spacing: 0; }
.guide-card .marker h3 { font: 400 24px/1.2 var(--display); margin-block: var(--space-1) var(--space-2); }
.guide-card .marker p { font: 400 16px/1.5 var(--sans); color: var(--snow-2); }
@media(max-width:1100px) { .guide-grid--manuals { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  .guide-grid { grid-template-columns: 1fr; }
  .hero-result.photo-ticket { left: var(--space-3); right: var(--space-3); width: calc(100% - var(--space-6)); padding: var(--space-2); }
  .hero-result ol { gap: var(--space-1); }
  .hero-result li b { font-size: var(--public-small); }
  .hero-result li span { font-size: var(--public-small); }
  .photo-spine .seg-place { white-space: normal; }
}
.how-page .walkthrough-capture.filmstrip-plate { max-width: var(--public-phone-width); max-height: none; justify-self: center; }
.how-page .walkthrough-capture img { width: 100%; height: auto; }
@media(max-width:600px) { .how-page .walkthrough-capture.filmstrip-plate { max-width: var(--public-mobile-photo-height); } }
.answer-details, .answer-details summary { color: var(--ink); }
.finale .kicker { color: var(--snow); background: var(--spruce-deep); display: inline-block; padding: 4px var(--space-1); border-radius: 4px; }
.table-wrap:focus-visible { outline: 2px solid var(--poppy); outline-offset: 4px; }