html {
  scroll-behavior: smooth;
}
body * {
  min-width: 0;
}
body
  :is(
    p,
    h1,
    h2,
    h3,
    h4,
    li,
    a,
    span,
    strong,
    small,
    button,
    code,
    label,
    input,
    textarea,
    select
  ) {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
body
  :is(
    .card,
    .tile,
    .capability,
    .feature-card,
    .backend-card,
    .workflow-card,
    .boundary,
    .boundary-item,
    .stripe-note,
    .review-box,
    .exclusion-item
  ) {
  overflow: hidden;
}
body :is(h1, .hero h1) {
  font-size: clamp(2.35rem, 3.45vw, 4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}
body :is(h2, .section-title, .section-head h2, .section-header h2) {
  font-size: clamp(1.55rem, 2.25vw, 2.35rem) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
}
body :is(h3, .card h3, .feature-card h3, .backend-card h3, .workflow-card h3) {
  font-size: clamp(1.05rem, 1.28vw, 1.28rem) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}
body
  :is(
    .lead,
    .hero-copy,
    .hero-lede,
    .hero p,
    .section-desc,
    .section-head p,
    .section-header p
  ) {
  font-size: clamp(1.02rem, 1.2vw, 1.18rem) !important;
  line-height: 1.65 !important;
}
.reveal-target {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 820ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-target.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
body :is(h1, h2, .lead, .hero-copy, .hero-lede).reveal-target {
  transform: translate3d(0, 18px, 0);
}
body
  :is(
    .phone,
    .phone-preview,
    .hero-visual,
    .product-stage,
    .service-window,
    .browser-mockup,
    .dashboard-preview
  ).reveal-target {
  transform: translate3d(0, 30px, 0) scale(0.985);
}
body
  :is(
    .phone,
    .phone-preview,
    .hero-visual,
    .product-stage,
    .service-window,
    .browser-mockup,
    .dashboard-preview
  ).reveal-target.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}
body :is(.boundary-grid, .exclusions-grid) {
  display: grid !important;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 16rem), 1fr)
  ) !important;
  gap: clamp(0.8rem, 1.6vw, 1.2rem) !important;
}
body .commerce-layout {
  grid-template-columns: minmax(18rem, 0.75fr) minmax(28rem, 1.25fr) !important;
  align-items: stretch !important;
}
body .commerce-layout .boundary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body :is(.boundary, .boundary-item, .exclusion-item) {
  min-height: auto !important;
  height: auto !important;
  padding: clamp(1rem, 1.5vw, 1.25rem) !important;
  border-radius: 10px !important;
}
body
  :is(
    .boundary h3,
    .boundary-item h3,
    .exclusion-item h3,
    .boundary p,
    .boundary-item p,
    .exclusion-item p
  ) {
  max-width: 100% !important;
}
body :is(.price-card, .price-ticket, .pricing-card, .pricing-box) {
  max-width: 100% !important;
}
body .hero-notes {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 16rem), 1fr)
  ) !important;
}
body :is(.dish-row, .menu-row, .dish-card) > * {
  min-width: 0 !important;
}
body :is(.dish-desc, .dish-row p, .dish-row small, .dish-row strong) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body .service-window .dish-row {
  grid-template-columns: 2.4rem minmax(0, 1fr) !important;
}
body .service-window .dish-row > :last-child {
  grid-column: 2 !important;
  justify-self: start !important;
  margin-top: 0.25rem !important;
}
body
  :is(
    .browser-frame,
    .service-window,
    .service-wall,
    .hero-visual,
    .product-stage
  ) {
  max-width: min(100%, 72rem) !important;
}
body:has(.browser-frame) .hero {
  padding-bottom: clamp(1.4rem, 3vw, 2.5rem) !important;
}
body:has(.browser-frame) .browser-frame {
  margin-top: 0 !important;
}
body:has(.service-wall) .hero {
  align-items: center !important;
  min-height: auto !important;
}
body:has(.service-wall) .service-wall {
  align-self: center !important;
  max-width: min(100%, 52rem) !important;
  padding-bottom: 1.25rem !important;
}
body:has(.service-wall) .service-wall .ticket {
  display: none !important;
}
body:has(.service-wall) .service-wall .counter-grid {
  align-items: start !important;
}
body:has(.service-wall) .service-wall .phone-screen {
  min-height: auto !important;
  max-height: 31rem !important;
}
body:has(.service-wall) .service-wall .qr-card {
  grid-template-columns: 4.8rem minmax(0, 1fr) !important;
}
body:has(.service-wall) .service-wall .qr {
  width: 4.8rem !important;
  height: 4.8rem !important;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal-target {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}
@media (max-width: 720px) {
  body {
    overflow-x: hidden;
  }
  body :is(h1, .hero h1) {
    font-size: clamp(1.95rem, 8.2vw, 2.65rem) !important;
  }
  body :is(h2, .section-title, .section-head h2, .section-header h2) {
    font-size: clamp(1.3rem, 5.6vw, 1.85rem) !important;
  }
  body :is(header nav ul, .main-nav, .nav-links) {
    max-width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: wrap !important;
  }
  body :is(header nav li, header nav a) {
    white-space: normal !important;
  }
  body :is(.dish-row, .admin-line, .route-card, .qr-card) {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100% !important;
  }
  body .commerce-layout,
  body .pricing-layout,
  body .price-layout {
    grid-template-columns: 1fr !important;
  }
  body .commerce-layout .boundary-grid {
    grid-template-columns: 1fr !important;
  }
}
body .hero {
  min-height: auto !important;
  align-items: start !important;
  padding-top: clamp(1rem, 2vw, 2rem) !important;
  padding-bottom: clamp(1.5rem, 3vw, 3rem) !important;
}
body .hero > :first-child {
  align-self: start !important;
  padding-top: 0 !important;
}
body .service-window {
  align-self: center !important;
  max-width: min(100%, 54rem) !important;
}
body .counter-grid {
  align-items: start !important;
}
body .operator-board,
body .guest-menu,
body .menu-head {
  overflow: hidden !important;
}
body .menu-head {
  flex-wrap: wrap !important;
}
body .hours {
  white-space: normal !important;
}
body .menu-tabs {
  flex-wrap: wrap !important;
  overflow: visible !important;
}
body .menu-tabs span {
  flex: 1 1 auto !important;
  text-align: center !important;
}
body :is(.brand span, .brand-name, .logo span, .nav-brand span) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body .phone-screen {
  min-height: auto !important;
}
@media (min-width: 980px) {
  body .hero {
    padding-top: clamp(1rem, 2vw, 2rem) !important;
    padding-bottom: clamp(1.5rem, 3vw, 3rem) !important;
  }
}
@media (max-width: 1120px) {
  body .commerce-layout {
    grid-template-columns: 1fr !important;
  }
  body .commerce-layout .boundary-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 15rem), 1fr)
    ) !important;
  }
  body .hero:has(.phone-preview) {
    grid-template-columns: 1fr !important;
  }
  body .hero:has(.phone-preview) :is(.phone-preview, .phone-screen) {
    width: 100% !important;
    max-width: 100% !important;
  }
  body:has(.service-wall) .hero {
    grid-template-columns: 1fr !important;
  }
  body:has(.service-wall) .service-wall {
    max-width: 100% !important;
  }
  body:has(.service-wall) .service-wall .counter-grid {
    grid-template-columns: 1fr !important;
  }
  body:has(.service-window) .service-window .counter-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 980px) {
  body:has(.service-window) .hero {
    align-items: start !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(26rem, 0.95fr) !important;
    min-height: auto !important;
  }
  body:has(.service-window) .hero > :first-child {
    align-self: start !important;
    padding-top: 0 !important;
  }
  body:has(.service-window) .service-window {
    max-width: min(100%, 48rem) !important;
  }
  body:has(.service-window) .service-window .counter-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr) !important;
  }
  body:has(.service-window) .service-window .admin-preview {
    display: none !important;
  }
  body:has(.service-window) .service-window .phone-screen {
    max-height: 34rem !important;
    overflow: hidden !important;
  }
}
