/* Typography refinement. Kept separate so this preview is easy to compare or revert. */
@font-face {
  font-family: 'Source Sans 3';
  src: url('assets/fonts/source-sans-3-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('assets/fonts/source-sans-3-semibold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('assets/fonts/source-sans-3-bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
body { font-family: 'Source Sans 3', Arial, sans-serif; font-size: 16px; }
.brand { font-size: 17px; font-weight: 700; letter-spacing: .35px; }
.brand small { font-size: 10px; letter-spacing: .7px; }
.concept { font-size: 11px; letter-spacing: .7px; }
.reset, .project-back { font-size: 14px; font-weight: 600; }
.eyebrow { font-size: 12px; letter-spacing: 1px; font-weight: 600; }
h1 { font-size: 48px; line-height: 1.1; letter-spacing: -.6px; font-weight: 600; margin: 22px 0; }
.intro-copy { font-size: 16px; line-height: 1.5; color: #5f6b65; }
.demo-tabs button { font-size: 15px; }
.demo-tabs button.active { font-weight: 600; }
.chapter-note { font-size: 14px; line-height: 1.5; color: #5f6b65; }
.card-heading { font-size: 11px; letter-spacing: .7px; font-weight: 600; color: #5f6b65; }
.card-heading span:last-child { color: #5f6b65; }
.flavors { flex-wrap: wrap; }
.flavor { font-size: 14px; padding: 9px 13px; }
.flavor.active { font-weight: 600; }
.flavor small { font-size: 9px; letter-spacing: .5px; color: #5f6b65; }
.tap-hint { font-size: 14px; line-height: 1.4; }
.device-label { font-size: 11px; letter-spacing: .8px; color: #5f6b65; }
.device-caption { font-size: 12px; color: #5f6b65; line-height: 1.5; text-align: center; }
.counter-eyebrow, .guide-kicker { font-size: 11px; letter-spacing: .8px; color: #5f6b65; }
.counter-copy h2 { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.counter-copy p { font-size: 14px; line-height: 1.5; color: #5f6b65; }
.counter-link { font-size: 14px; font-weight: 600; }
#seat-guide h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.3px; font-weight: 600; }
#seat-guide > p { font-size: 16px; line-height: 1.5; color: #5f6b65; }
.guide-zones { font-size: 14px; }
.guide-route { font-size: 13px; flex-wrap: wrap; gap: 10px; }
.journey-item > div { font-size: 14px; }
.journey-item small { font-size: 10px; letter-spacing: .6px; }
.credit { font-size: 12px; }

/* Phone controls use a readable UI scale, with natural internal scrolling. */
.app-nav { min-height: 44px; height: auto; font-size: 14px; font-weight: 600; }
.product-view, .checkout-view { height: auto; min-height: 100%; }
.product-info h2 { font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -.2px; max-width: 290px; }
.product-info p { font-size: 13px; line-height: 1.4; color: #5f6b65; margin-top: 8px; }
.section-title { font-size: 16px; font-weight: 600; margin-top: 20px; }
.size strong { font-size: 14px; font-weight: 400; }
.size.selected strong { font-weight: 600; }
.size small { font-size: 12px; }
.select-field { height: 46px; margin-top: 17px; }
.select-field > span:first-child { font-size: 12px; top: -9px; color: #5f6b65; }
.select-field select { font-size: 14px; }
.whip-row { font-size: 14px; }
.whip-row small { font-size: 12px; line-height: 1.4; color: #5f6b65; }
.order-action { padding-top: 24px; flex-shrink: 0; }
.item-price { font-size: 16px; }
.item-price strong, .total-line strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.primary { font-size: 15px; font-weight: 600; min-height: 46px; padding: 11px 20px; }
.pickup-bar { flex-shrink: 0; }
.pickup-bar > span:first-child { font-size: 12px; }
.pickup-bar strong { font-size: 14px; font-weight: 600; }
.review h2, .order-confirm h2, .seat-content h2, .zone-detail h2, .reserved-view h2 { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.3px; }
.review .subtitle, .order-confirm > p, .seat-subtitle, .reserved-view > p { font-size: 14px; line-height: 1.5; color: #5f6b65; }
.store strong, .payment-method strong { font-size: 15px; font-weight: 600; }
.store small, .store div > span, .payment-method small { font-size: 12px; color: #5f6b65; }
.order-item strong, .confirmed-drink strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.order-item p, .confirmed-drink small { font-size: 12px; line-height: 1.5; color: #5f6b65; }
.order-item > div > span { font-size: 13px; }
.edit { font-size: 13px; padding: 8px 0 8px 6px; }
.total-line { font-size: 16px; font-weight: 600; }
.simulation-note, .availability-note, .reserved-view .availability-note { font-size: 12px; line-height: 1.5; color: #5f6b65; }
.order-number { font-size: 15px; }
.order-number > span:last-child { font-size: 12px; }
.seat-invitation h3 { font-size: 17px; font-weight: 600; }
.seat-invitation p, .order-meta { font-size: 13px; }
.text-button, .outline-button { font-size: 14px; font-weight: 600; }
.store-subline, .store-subline > span { font-size: 12px; }
.zone-card { min-height: 140px; padding: 16px 13px; }
.zone-card-copy { width: 62%; }
.zone-title { font-size: 16px; font-weight: 600; line-height: 1.2; }
.zone-card-copy > small { font-size: 13px; line-height: 1.35; color: #5f6b65; }
.zone-count { font-size: 12px; font-weight: 600; margin-top: 14px; }
.zone-card > img:not(.ui-icon) { width: 108px; }
.zone-detail p, .zone-features > div { font-size: 14px; line-height: 1.5; }
.zone-rule, .reservation-review .zone-rule { font-size: 13px; line-height: 1.5; }
.map-header h2 { font-size: 24px; font-weight: 600; letter-spacing: -.3px; }
.map-header p { font-size: 12px; }
.floor-toggle button, .seat-filters button { font-size: 13px; }
.seat-filters { flex-wrap: wrap; }
.map-legend { font-size: 11px; gap: 10px; }
.service-strip, .window-strip { font-size: 9px; letter-spacing: .2px; }
.map-region-label { font-size: 11px; }
.map-seat { height: 42px; }
.map-seat > span { font-size: 10px; }
.selected-seat-info strong { font-size: 16px; font-weight: 600; }
.selected-seat-info strong > span, .selected-seat-info small { font-size: 12px; }
.reservation-review > .small-label, .reservation-ticket > .small-label { font-size: 12px; letter-spacing: .7px; }
.reservation-review h2 { font-size: 36px; font-weight: 600; letter-spacing: 0; }
.reservation-review > p, .reservation-facts, .time-summary { font-size: 14px; }
.reservation-review h3 { font-size: 16px; font-weight: 600; }
.duration-options button { font-size: 14px; }
.time-summary small, .checkin-note p, .reservation-ticket > span:not(.small-label) { font-size: 12px; }
.ticket-seat { font-weight: 600; }
.notification-main small { font-size: 10px; letter-spacing: .4px; }
.notification-main strong { font-size: 16px; font-weight: 600; }
.notification-main > span > span { font-size: 12px; }
.phone-home { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }

@media (max-width: 900px) {
  h1 { font-size: 36px; letter-spacing: -.4px; }
  .intro-copy { font-size: 16px; }
  .chapter-note { font-size: 14px; }
  #seat-guide h2 { font-size: 28px; }
  #seat-guide > p { font-size: 15px; }
  .guide-zones { font-size: 12px; flex-wrap: wrap; }
  .counter-copy h2 { font-size: 19px; }
  .counter-copy p { font-size: 14px; }
  .project-back { font-size: 14px; }
  .experience { width: 100%; }
}
@media (max-width: 390px) {
  .counter-copy h2 { font-size: 18px; }
  .counter-copy p { font-size: 13px; }
  .zone-title { font-size: 16px; }
  .product-info h2 { font-size: 23px; }
  .brand { font-size: 16px; }
}