/* A compact presentation stage: clear instructions and a complete phone in view. */
.eyebrow, .brand small, .concept, .card-heading, .tap-hint,
.counter-eyebrow, .guide-kicker, .device-caption, .journey-item small { display: none; }
.brand { font-size: 17px; letter-spacing: .2px; }
.chapter-note { font-size: 16px; font-weight: 600; line-height: 1.4; color: #28483c; }
.demo-tabs button { font-size: 16px; }
.flavor { font-size: 15px; color: #40584b; }
.flavor small { font-size: 11px; letter-spacing: 0; text-transform: lowercase; color: #586d5f; }
.device-label { font-size: 14px; letter-spacing: 0; font-weight: 600; color: #40584b; }
#device-step { display: block; text-transform: lowercase; }
#device-step::first-letter { text-transform: uppercase; }
.counter-copy h2 { font-size: 18px; margin: 0 0 4px; }
.counter-copy p { font-size: 14px; line-height: 1.35; margin: 0 0 3px; }
.counter-link { font-size: 15px; font-weight: 600; }
.guide-route { font-size: 14px; color: #40584b; }
.drink-card { transform: rotate(-3deg); filter: drop-shadow(0 2px 1px #254b3c24) drop-shadow(0 10px 9px #254b3c20); }
.drink-card:hover { transform: rotate(-1deg) translateY(-4px); }
.drink-card::after { background: none; box-shadow: none; }
.journey-item { opacity: 1; }
.journey-item > div { font-size: 14px; color: #627269; }
.journey-item.active > div { color: #1e3932; font-weight: 600; }

/* Tighten spacing and image height before sacrificing readable UI text. */
.phone { width: 374px; height: 720px; }
.app-nav { min-height: 36px; }
.product-view { min-height: 100%; }
.product-hero { height: 120px; }
.product-circle { width: 105px; height: 105px; }
.product-hero .drink-art { height: 122px; width: 79px; }
.product-info { padding-top: 2px; }
.product-info h2 { font-size: 23px; max-width: 290px; }
.product-info p { margin-top: 5px; font-size: 14px; }
.section-title { margin: 13px 0 6px; padding-bottom: 5px; }
.cup-circle { height: 39px; width: 39px; margin-bottom: 2px; }
.select-field { height: 42px; margin-top: 13px; }
.whip-row { margin-top: 12px; }
.whip-row small { margin-top: 2px; }
.order-action { padding: 14px 22px 12px; }
.pickup-bar { min-height: 53px; padding: 8px 22px 17px; }
.pickup-bar strong { margin-top: 1px; }
.primary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.review { padding: 6px 23px 0; }
.review h2 { margin: 6px 0; }
.review .subtitle { margin-bottom: 12px; }
.store { padding: 10px 12px; }
.order-item { padding: 14px 0; margin-bottom: 6px; }
.payment-method { padding: 8px 0; }
.total-line { margin-top: 7px; padding: 10px 0 4px; }
.simulation-note { margin: 8px 0; }
.checkout-action { padding: 8px 22px 22px; flex-shrink: 0; }
.confirmation-mark { margin-top: 12px; margin-bottom: 12px; }
.order-confirm > p { margin-bottom: 14px; }
.seat-invitation { margin-top: 14px; }
.order-meta { margin: 16px 3px; gap: 10px; }
.seat-content { padding: 4px 21px 17px; }
.store-subline { margin: 3px 0 13px; }
.seat-content h2 { font-size: 24px; }
.seat-subtitle { margin-bottom: 14px; }
.zone-list { gap: 10px; }
.zone-card { min-height: 112px; padding: 13px; }
.zone-card-copy > small { margin-top: 4px; }
.zone-count { margin-top: 9px; }
.zone-card > img:not(.ui-icon) { width: 105px; height: 82px; }
.outline-button { margin-top: 14px; padding: 10px; }
.availability-note { margin-top: 8px; }
.zone-hero { height: 160px; object-fit: contain; }
.zone-detail .zone-count { margin: 10px 0; }
.zone-detail h2 { margin-bottom: 8px; }
.zone-features { padding: 8px 0; margin-top: 5px; }
.zone-features > div { padding: 7px 0; }
.zone-rule { margin: 6px 0 14px; padding: 10px; }
.seat-map-view { padding: 2px 15px 17px; }
.map-header { margin: 4px 0 7px; }
.map-header h2 { font-size: 23px; }
.map-header h2 { margin-bottom: 3px; }
.map-legend { margin: 7px 0; }
.floor-plan { max-height: none; overflow: visible; padding: 4px; }
.service-strip { padding: 4px 6px; margin-bottom: 4px; }
.map-zones { gap: 4px; }
.map-region { padding: 4px; }
.map-region-label { margin-bottom: 4px; line-height: 1.15; }
.seat-grid { gap: 2px 3px; }
.map-seat { height: 28px; padding: 1px; }
.map-seat .ui-icon { width: 13px; height: 13px; }
.map-seat > span { font-size: 10px; }
.window-strip { padding: 2px 0 0; }
.map-bottom { padding-top: 8px; }
.selected-seat-info { min-height: 38px; margin-bottom: 6px; }
.selected-seat-info small { margin-top: 2px; }
.review-zone-image { height: 82px; margin: 0 auto 3px; }
.reservation-review h2 { margin: 4px 0; }
.reservation-facts { margin: 12px 0; padding: 7px 0; }
.reservation-review h3 { margin: 12px 0 8px; }
.time-summary { padding: 12px 0; }
.reserved-view .confirmation-mark { width: 45px; height: 45px; margin: 12px auto 14px; }
.reserved-view { padding-bottom: 12px; }
.reserved-view > p { margin: 0 0 10px; }
.reserved-view .text-button { padding: 8px 12px; }
.reservation-ticket { padding: 14px 18px 6px; margin: 15px 0 12px; }
.ticket-seat { font-size: 40px; margin: 5px 0; }
.ticket-divider { margin-top: 12px; }
.checkin-note { margin-bottom: 12px; }
.phone-home { padding-top: 17px; }
.home-widgets { margin: 4px 0 24px; }
.home-app small { font-size: 11px; }
.home-date { font-size: 12px; }
.weather-widget small, .calendar-widget small { font-size: 11px; }

@media (min-width: 901px) {
  body { height: 100dvh; display: grid; grid-template-rows: 62px minmax(0,1fr) 42px; }
  .site-header { height: 62px; margin: 0 4%; }
  .brand-symbol { width: 32px; height: 32px; }
  .header-right { gap: 24px; }
  main { width: 100%; max-width: 1320px; min-height: 0; height: 100%; margin: 0 auto; padding: 12px 40px; grid-template-columns: minmax(0,1.4fr) minmax(330px,1fr); gap: 48px; align-items: center; }
  .intro { width: 100%; }
  h1 { font-size: 38px; line-height: 1.08; margin: 0 0 12px; letter-spacing: -.5px; }
  .intro-copy { font-size: 16px; line-height: 1.4; margin: 0; max-width: 440px; }
  .demo-tabs { margin-top: 18px; max-width: none; gap: 28px; }
  .demo-tabs button { padding: 10px 0; }
  .chapter-note { margin-top: 12px; }
  .card-workspace { margin-top: 16px; max-width: none; display: grid; grid-template-columns: minmax(0,1fr) 160px; column-gap: 22px; row-gap: 36px; align-items: center; }
  .card-workspace[hidden] { display: none; }
  .flavors { margin-top: 0; grid-column: 1 / -1; }
  .flavor { padding: 8px 14px; }
  .card-stage { height: clamp(210px, 32dvh, 285px); margin-top: 0; grid-column: 1; }
  .drink-card { width: min(114%, 62dvh); max-width: 465px; }
  .surface-ring { display: none; }
  .counter-touchpoint { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 9px; border-top: 0; border-left: 1px solid #d6dcd4; margin: 0; padding: 0 0 0 20px; text-align: center; }
  .counter-stand { width: 140px; height: 170px; }
  .counter-copy h2 { font-size: 17px; margin: 0 0 6px; }
  .counter-copy p { display: none; }
  .counter-link { padding: 3px 0; font-size: 14px; gap: 6px; }
  .experience { min-height: 0; height: 100%; justify-content: center; }
  .experience::before { width: 100%; height: 100%; top: 0; }
  .device-label { margin-bottom: 9px; }
  .phone { flex-shrink: 0; zoom: min(1, calc((100dvh - 155px) / 720px)); }
  footer { height: 42px; margin: 0 4%; padding: 0; gap: 12px; }
  .journey { gap: 14px; }
  .journey-item { gap: 7px; }
  .journey-item > span { width: 22px; height: 22px; font-size: 11px; }
  .journey-line { width: 22px; }
  .credit { font-size: 13px; }
  #seat-guide h2 { font-size: 28px; margin: 22px 0 12px; }
  #seat-guide > p { margin: 0; }
  .guide-zones { margin-top: 22px; gap: 12px; }
  .guide-route { margin-top: 24px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  h1 { font-size: 32px; margin-bottom: 8px; }
  h1 br { display: none; }
  .intro-copy { font-size: 15px; }
  .intro-copy br { display: none; }
  .demo-tabs { margin-top: 11px; }
  .chapter-note { margin-top: 9px; }
  .card-workspace { margin-top: 10px; }
  .counter-touchpoint { margin: 0; padding-top: 0; }
  .counter-stand { width: 130px; height: 155px; }
  .counter-copy h2 { font-size: 17px; }
  .counter-copy p { display: none; }
}
@media (max-width: 900px) {
  .chapter-note { font-size: 16px; }
  .phone { width: 374px; max-width: 100%; height: 720px; }
  .card-workspace { margin-top: 18px; }
  .card-stage { margin-top: 6px; }
  .counter-touchpoint { margin-top: 8px; }
}
@media (min-width: 901px) and (max-height: 650px) {
  .intro-copy { display: none; }
  h1 { font-size: 30px; }
  .card-stage { height: 200px; }
  .card-workspace { row-gap: 24px; }
  .counter-touchpoint { padding-top: 0; }
  .counter-stand { height: 140px; width: 120px; }
  #seat-guide h2 { font-size: 24px; margin: 16px 0 12px; }
  #seat-guide > p, .guide-route { display: none; }
  .guide-zones { flex-direction: row; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
}