/* Marketing pages (landing, features, pricing, how-to, demo, blog,
   /qr-menu/*, and the 404 page's marketing nav and footer). Not part of
   app.min.css: those pages link it right after app.min.css, so diner and
   staff pages never download it. */

/* >>> mk: marketing pages v2 */
/* ---------------------------------------------------------------------------
   Marketing pages (mk-*): homepage sections, shared marketing blocks and the
   product illustrations. Plain CSS on purpose: the committed Tailwind build
   only holds the utilities the templates used when it was generated, and it
   is not regenerated (no Node in this project).
   Follows DESIGN.md ("Earthbound Editorial"): cream surfaces, terracotta for
   intent, Manrope display type, depth from tone and warm shadows, not lines.
   Illustrations are sized in em from a container-relative font size, so each
   one scales as a single picture from phone to desktop.
   --------------------------------------------------------------------------- */
:root {
    --mk-ink: #1c1c1a;
    --mk-muted: #5f5e5e;
    --mk-faint: #6f6964;
    --mk-surface: #fcf9f6;
    --mk-tint: #f3f0ec;
    --mk-inset: #e9e4de;
    --mk-brand: #b85c38;
    --mk-brand-dark: #994422;
    --mk-brand-light: #f5edea;
    --mk-brand-lighter: #fdf5f2;
    --mk-on-dark: #e8a283;
    --mk-gradient: linear-gradient(135deg, #994422, #b85c38);
    --mk-shadow-sm: 0 1px 2px rgba(85, 67, 60, .04), 0 4px 14px rgba(85, 67, 60, .05);
    --mk-shadow: 0 2px 6px rgba(85, 67, 60, .04), 0 20px 40px rgba(85, 67, 60, .09);
    --mk-shadow-lg: 0 12px 24px -8px rgba(85, 67, 60, .18), 0 36px 72px -18px rgba(85, 67, 60, .30);
    --mk-display: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mk-focus: 0 0 0 3px #fff, 0 0 0 5px rgba(184, 92, 56, .55);
    --mk-dir: 1;
}
[dir="rtl"] { --mk-dir: -1; }

/* Layout */
.mk-wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
.mk-section { padding-block: clamp(4.5rem, 3rem + 5vw, 7.5rem); }
.mk-section[id] { scroll-margin-top: 4rem; }
.mk-section--tint { background: var(--mk-tint); }
.mk-section--white { background: #fff; }
.mk-section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.mk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mk-ico { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* Type */
.mk-eyebrow {
    display: inline-flex; align-items: center; gap: .625rem; margin: 0 0 1rem;
    font-size: .75rem; font-weight: 700; line-height: 1.3; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mk-brand-dark);
}
.mk-eyebrow::before { content: ""; width: 1.5rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; flex-shrink: 0; }
.mk-eyebrow--light { color: var(--mk-on-dark); }
.mk-title {
    margin: 0; font-family: var(--mk-display); font-weight: 800;
    font-size: clamp(2rem, 1.3rem + 2.5vw, 3.25rem); line-height: 1.08;
    letter-spacing: -.035em; color: var(--mk-ink); text-wrap: balance;
}
.mk-title--sm { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.mk-lede {
    margin: 1.125rem 0 0; max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    line-height: 1.65; color: var(--mk-muted); text-wrap: pretty;
}
.mk-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.mk-head--center { margin-inline: auto; text-align: center; }
.mk-head--center .mk-lede { margin-inline: auto; }
.mk-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; }
.mk-head--split > div { max-width: 40rem; }
/* Connected scripts: tracking breaks Arabic joins and the Devanagari headline */
:is([lang="ar"], [lang="hi"]) :is(.mk-eyebrow, .mk-title, .mk-hero-title, .mk-row-title, .mk-quote-text, .mk-stat-num, .mk-stat-label, .mk-price-amount strong, .mk-card h3, .mk-step h3, .mk-tent-brand, .mk-badge, .mk-live, .mk-sheet-label, .mk-dash-label, .mk-kds-head, .mk-kpi span, .mk-kpi strong, .mk-tent-table, .mk-staff-head strong, .mk-staff-table span, .mk-pay-title, .mk-pay-sum small, .mk-pay-sum strong, .mk-pay-step, .mk-pay-claimed) { letter-spacing: 0; }
:is([lang="ja"], [lang="zh"]) :is(.mk-title, .mk-hero-title, .mk-row-title, .mk-quote-text) { letter-spacing: -.01em; }

/* Links and buttons */
.mk-link { display: inline-flex; align-items: center; gap: .375rem; font-weight: 700; color: var(--mk-brand-dark); text-decoration: none; }
.mk-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.mk-link:focus-visible { outline: none; border-radius: .25rem; box-shadow: var(--mk-focus); }
.mk-arrow { width: 1rem; height: 1rem; transition: transform .15s ease; }
[dir="rtl"] .mk-arrow { transform: scaleX(-1); }
.mk-link:hover .mk-arrow, .mk-btn:hover .mk-arrow { transform: translateX(3px); }
[dir="rtl"] .mk-link:hover .mk-arrow, [dir="rtl"] .mk-btn:hover .mk-arrow { transform: scaleX(-1) translateX(3px); }
.mk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3.25rem; padding: .875rem 1.75rem; border-radius: .875rem;
    font-size: 1rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease;
}
.mk-btn:focus-visible { outline: none; box-shadow: var(--mk-focus); }
.mk-btn--primary { color: #fff; background: var(--mk-gradient); box-shadow: 0 10px 24px -10px rgba(153, 68, 34, .65), inset 0 1px 0 rgba(255, 255, 255, .18); }
.mk-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mk-btn--ghost { color: var(--mk-ink); background: #fff; box-shadow: inset 0 0 0 1.5px rgba(28, 28, 26, .12), var(--mk-shadow-sm); }
.mk-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(28, 28, 26, .3), var(--mk-shadow-sm); }
.mk-btn--light { color: var(--mk-ink); background: #fff; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35); }
.mk-btn--light:hover { background: var(--mk-surface); transform: translateY(-1px); }
.mk-btn--line-light { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38); }
.mk-btn--line-light:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.mk-actions { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .mk-actions { flex-direction: row; flex-wrap: wrap; } }
.mk-actions--center { justify-content: center; }

/* Hero */
.mk-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding-top: calc(4rem + clamp(2.75rem, 1.5rem + 4vw, 5rem));
    padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
    background:
        radial-gradient(60% 55% at 88% 12%, rgba(184, 92, 56, .15), transparent 62%),
        radial-gradient(45% 45% at 0% 45%, rgba(184, 92, 56, .07), transparent 65%),
        var(--mk-surface);
}
.mk-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7;
    background-image: radial-gradient(circle at 1px 1px, rgba(28, 28, 26, .07) 1px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 72% 32%, #000 15%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 72% 32%, #000 15%, transparent 75%);
}
.mk-hero-grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .mk-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } }
.mk-pill {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem;
    padding: .375rem .875rem .375rem .625rem; border-radius: 999px; background: #fff;
    box-shadow: var(--mk-shadow-sm), inset 0 0 0 1px rgba(28, 28, 26, .06);
    font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--mk-ink);
}
.mk-pill-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mk-brand); box-shadow: 0 0 0 4px rgba(184, 92, 56, .16); flex-shrink: 0; }
.mk-hero-title {
    margin: 0 0 1.5rem; font-family: var(--mk-display); font-weight: 800;
    font-size: clamp(2.5rem, 1.5rem + 3.6vw, 3.875rem); line-height: 1.04;
    letter-spacing: -.045em; color: var(--mk-ink); text-wrap: balance; overflow-wrap: break-word;
}
.mk-hero-lede {
    margin: 0 0 2.25rem; max-width: 35rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
    line-height: 1.6; color: var(--mk-muted); text-wrap: pretty;
}
.mk-checks { display: flex; flex-wrap: wrap; gap: .625rem 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--mk-muted); }
.mk-checks li { display: inline-flex; align-items: center; gap: .5rem; }
.mk-checks .mk-ico { width: 1.125rem; height: 1.125rem; color: var(--mk-brand); }

/* Stats card at the foot of the hero */
.mk-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem;
    margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    border-radius: 1.5rem; background: rgba(255, 255, 255, .85); box-shadow: var(--mk-shadow);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@media (min-width: 768px) { .mk-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk-stat { padding-inline: .5rem; }
.mk-stat-num { margin: 0; font-family: var(--mk-display); font-weight: 800; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); line-height: 1; letter-spacing: -.04em; color: var(--mk-ink); }
.mk-stat-label { margin: .5rem 0 0; font-size: .75rem; font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: var(--mk-faint); }

/* Illustration stage (hero): tent card -> phone -> kitchen ticket */
.mk-stage { position: relative; width: 100%; max-width: 40rem; margin-inline: auto; aspect-ratio: 37 / 29.5; container-type: inline-size; }
.mk-stage-inner { position: absolute; inset: 0; font-size: 16px; }
@supports (width: 1cqw) { .mk-stage-inner { font-size: calc(100cqw / 37); } }
.mk-tent {
    position: absolute; z-index: 1; inset-inline-start: .4em; top: 20%; width: 11.6em;
    padding: 1.1em 1.1em 1.15em; border-radius: 1.2em; background: #fff; text-align: center;
    box-shadow: var(--mk-shadow); transform: rotate(calc(-6deg * var(--mk-dir)));
}
.mk-tent-brand { margin: 0 0 .9em; font-size: .6em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mk-brand-dark); }
.mk-qr { display: block; width: 100%; height: auto; padding: .45em; border-radius: .7em; background: #fff; box-shadow: inset 0 0 0 .14em var(--mk-brand-light); color: var(--mk-ink); }
.mk-tent-table { margin: .6em 0 0; font-family: var(--mk-display); font-size: 1.2em; font-weight: 800; letter-spacing: -.02em; color: var(--mk-ink); }
.mk-tent-cta { margin: .2em 0 0; font-size: .66em; font-weight: 600; color: var(--mk-muted); }
.mk-tag {
    position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .45em;
    padding: .3em .85em .3em .3em; border-radius: 999px; background: #fff; box-shadow: var(--mk-shadow);
    font-size: .74em; font-weight: 700; color: var(--mk-ink); white-space: nowrap;
}
.mk-tag i { display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--mk-gradient); color: #fff; font-size: .82em; font-style: normal; }
.mk-tag--scan { inset-inline-start: 2%; top: 10%; }
.mk-tag--order { inset-inline-start: 38%; bottom: 0; }
.mk-tag--cook { inset-inline-end: 4%; top: 28%; }
.mk-stage .mk-phone { inset-inline-start: 30.5%; top: 0; width: 14.4em; }
.mk-stage .mk-ticket { inset-inline-end: 0; top: 39%; width: 11.2em; transform: rotate(calc(4deg * var(--mk-dir))); }

/* Phone frame */
.mk-phone { position: absolute; z-index: 2; padding: .42em; border-radius: 2.25em; background: #1c1c1a; box-shadow: var(--mk-shadow-lg); animation: mk-float 7s ease-in-out infinite; }
.mk-phone-screen { position: relative; overflow: hidden; border-radius: 1.85em; background: #fff; }
.mk-phone-island { position: absolute; z-index: 3; top: .55em; left: 50%; width: 4.2em; height: 1.15em; margin-left: -2.1em; border-radius: 1em; background: #1c1c1a; }
.mk-phone-head { padding: 2.3em 1.1em 1.7em; background: var(--mk-gradient); color: #fff; }
.mk-phone-head small { display: block; font-size: .68em; font-weight: 500; opacity: .78; }
.mk-phone-head strong { display: block; margin-top: .1em; font-family: var(--mk-display); font-size: 1.08em; font-weight: 800; letter-spacing: -.01em; }
.mk-phone-body { position: relative; margin-top: -.85em; padding: 1em .85em .9em; border-radius: 1.1em 1.1em 0 0; background: #fff; }
.mk-chips { display: flex; gap: .4em; margin-bottom: .85em; overflow: hidden; }
.mk-chip { padding: .32em .8em; border-radius: 999px; background: var(--mk-tint); color: var(--mk-muted); font-size: .66em; font-weight: 600; white-space: nowrap; }
.mk-chip.is-on { background: var(--mk-brand); color: #fff; }
.mk-item { display: flex; align-items: center; gap: .6em; padding: .5em; border-radius: .8em; background: var(--mk-surface); }
.mk-item + .mk-item { margin-top: .45em; }
.mk-item-img { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .65em; flex-shrink: 0; font-size: 1em; }
.mk-item-img span { font-size: 1.3em; line-height: 1; }
.mk-item-img--a { background: var(--mk-brand-light); }
.mk-item-img--b { background: #ecfdf3; }
.mk-item-img--c { background: #fff4e5; }
.mk-item-text { flex: 1; min-width: 0; }
.mk-item-name { display: block; font-size: .76em; font-weight: 700; line-height: 1.2; color: var(--mk-ink); }
.mk-item-desc { display: block; font-size: .62em; line-height: 1.3; color: var(--mk-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-item-price { font-size: .76em; font-weight: 800; color: var(--mk-ink); }
.mk-item-add { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--mk-ink); color: #fff; font-size: .78em; font-weight: 700; line-height: 1; flex-shrink: 0; }
.mk-cartbar { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: .85em; padding: .72em .85em; border-radius: .85em; background: var(--mk-ink); color: #fff; font-size: .74em; font-weight: 700; }
.mk-cartbar b { padding: .2em .65em; border-radius: 999px; background: var(--mk-brand); font-size: .92em; }

/* Kitchen ticket */
.mk-ticket {
    position: absolute; z-index: 3; padding: 1em 1em 1.1em; border-radius: .9em .9em 0 0;
    background: #fff; box-shadow: var(--mk-shadow-lg);
    animation: mk-drop .8s .5s cubic-bezier(.2, .8, .2, 1) both;
}
.mk-ticket::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .5em;
    background: radial-gradient(circle at .45em 0, #fff .45em, transparent .47em) 0 0 / .9em .5em repeat-x;
}
.mk-ticket-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5em; padding-bottom: .7em; margin-bottom: .6em; border-bottom: .12em dashed var(--mk-inset); }
.mk-ticket-title { margin: 0; font-family: var(--mk-display); font-size: 1em; font-weight: 800; color: var(--mk-ink); }
.mk-ticket-meta { margin: .15em 0 0; font-size: .6em; color: var(--mk-faint); }
.mk-ticket-line { display: flex; gap: .5em; margin: .35em 0 0; font-size: .74em; font-weight: 600; line-height: 1.35; color: var(--mk-ink); }
.mk-ticket-line b { min-width: 1.5em; color: var(--mk-brand-dark); }
.mk-ticket-total { display: flex; justify-content: space-between; margin: .7em 0 0; padding-top: .6em; border-top: .12em dashed var(--mk-inset); font-size: .74em; font-weight: 800; color: var(--mk-ink); }
.mk-ticket-mod { margin: .1em 0 0; padding-inline-start: 2.45em; font-size: .6em; line-height: 1.35; color: var(--mk-faint); }
.mk-ticket-btn { margin: .8em 0 0; padding: .6em; border-radius: .6em; background: var(--mk-ink); color: #fff; font-size: .7em; font-weight: 700; text-align: center; }
.mk-badge { display: inline-block; padding: .35em .7em; border-radius: .5em; font-size: .58em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mk-badge--new { background: #e7f8ef; color: #067647; }
.mk-badge--prep { background: #fff4e0; color: #9a5b00; }
.mk-badge--ready { background: var(--mk-brand-light); color: var(--mk-brand-dark); }
.mk-live { display: inline-flex; align-items: center; gap: .45em; font-size: .62em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #067647; }
.mk-live::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #12b76a; animation: mk-pulse 2s ease-out infinite; }
.mk-live--dark { color: #6ce9a6; }

@keyframes mk-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.45em; } }
@keyframes mk-drop { from { opacity: 0; translate: 0 -1.25em; } to { opacity: 1; translate: 0 0; } }
@keyframes mk-pulse { 0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .45); } 70%, 100% { box-shadow: 0 0 0 .55em rgba(18, 183, 106, 0); } }

/* How it works */
.mk-steps { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .mk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-step { position: relative; overflow: hidden; padding: 2rem 1.75rem 2.25rem; border-radius: 1.5rem; background: #fff; box-shadow: var(--mk-shadow-sm); }
.mk-step-num {
    position: absolute; top: .75rem; inset-inline-end: 1.25rem; margin: 0;
    font-family: var(--mk-display); font-size: 4.5rem; font-weight: 800; line-height: 1; letter-spacing: -.05em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(184, 92, 56, .3); user-select: none;
}
.mk-step-icon, .mk-card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.5rem; border-radius: .875rem; background: var(--mk-brand-lighter); color: var(--mk-brand); box-shadow: inset 0 0 0 1px rgba(184, 92, 56, .08); }
.mk-step-icon svg, .mk-card-icon svg { width: 1.5rem; height: 1.5rem; }
.mk-step h3 { margin: 0 0 .5rem; font-family: var(--mk-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--mk-ink); }
.mk-step-text { margin: 0; max-width: 21rem; font-size: .9375rem; line-height: 1.6; color: var(--mk-muted); }
/* One-line aside under a section (How it works -> the waiter screens) */
.mk-note {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .75rem;
    max-width: 52rem; margin: 2.5rem auto 0; padding: 1rem 1.5rem; border-radius: 1.25rem;
    background: #fff; box-shadow: var(--mk-shadow-sm); font-size: .9375rem; line-height: 1.5; color: var(--mk-ink); text-align: center;
}
.mk-note .mk-ico { color: var(--mk-brand); }

/* Feature rows (copy + illustration, alternating) */
.mk-rows { display: grid; gap: clamp(4rem, 3rem + 4vw, 7rem); }
.mk-row { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {
    .mk-row { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 4.5rem; }
    .mk-row--flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
    .mk-row--flip .mk-row-copy { order: 2; }
}
.mk-row-title { margin: 0 0 1rem; font-family: var(--mk-display); font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--mk-ink); text-wrap: balance; }
.mk-row-desc { margin: 0; max-width: 32rem; font-size: 1.0625rem; line-height: 1.7; color: var(--mk-muted); }
.mk-row-copy .mk-link { margin-top: 1.75rem; }
.mk-list { display: grid; gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.mk-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .9375rem; font-weight: 500; line-height: 1.5; color: var(--mk-ink); }
.mk-list li::before {
    content: ""; flex-shrink: 0; width: 1.375rem; height: 1.375rem; margin-top: .05rem; border-radius: 50%;
    background: var(--mk-brand-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23994422' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / .8rem no-repeat;
}
.mk-list--2 { gap: .875rem 1.5rem; }
@media (min-width: 640px) { .mk-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-visual {
    position: relative; overflow: hidden; padding: clamp(1.5rem, .75rem + 3vw, 3rem); border-radius: 2rem;
    background: radial-gradient(80% 70% at 100% 0%, rgba(184, 92, 56, .16), transparent 60%), var(--mk-brand-lighter);
    container-type: inline-size;
}
.mk-visual--tint { background: radial-gradient(80% 70% at 0% 0%, rgba(184, 92, 56, .12), transparent 60%), var(--mk-tint); }
.mk-section--tint .mk-visual--tint { background: radial-gradient(80% 70% at 0% 0%, rgba(184, 92, 56, .12), transparent 60%), var(--mk-surface); }
.mk-visual-inner { position: relative; font-size: 16px; }
@supports (width: 1cqw) { .mk-visual-inner { font-size: calc(100cqw / 28); } }

/* Guest scene: phone with an item sheet + the ordering UI's languages */
.mk-scene-guest { display: flex; justify-content: center; padding-block: .5em; }
.mk-scene-guest .mk-phone { position: relative; width: 15em; margin-inline-end: 6em; animation-duration: 8s; }
.mk-sheet-hero { display: grid; place-items: center; height: 7em; background: linear-gradient(160deg, #f6e3d6, #e7c3aa); }
.mk-sheet-hero span { font-size: 3.2em; line-height: 1; filter: drop-shadow(0 .15em .2em rgba(85, 67, 60, .25)); }
.mk-sheet { position: relative; margin-top: -.9em; padding: 1.1em 1em 1em; border-radius: 1.1em 1.1em 0 0; background: #fff; }
.mk-sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.mk-sheet-head strong { font-family: var(--mk-display); font-size: 1.05em; font-weight: 800; color: var(--mk-ink); }
.mk-sheet-head span { font-size: .8em; font-weight: 800; color: var(--mk-ink); }
.mk-sheet-desc { margin: .2em 0 .9em; font-size: .64em; color: var(--mk-faint); }
.mk-sheet-label { margin: .7em 0 .4em; font-size: .56em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-muted); }
.mk-sheet-label span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mk-faint); }
.mk-opt { display: flex; align-items: center; gap: .6em; padding: .5em .6em; border-radius: .6em; background: var(--mk-surface); font-size: .68em; font-weight: 600; color: var(--mk-ink); box-shadow: inset 0 0 0 .1em transparent; }
.mk-opt + .mk-opt { margin-top: .35em; }
.mk-opt em { margin-inline-start: auto; font-style: normal; font-weight: 700; color: var(--mk-muted); direction: ltr; unicode-bidi: isolate; }
.mk-opt.is-on { background: var(--mk-brand-lighter); box-shadow: inset 0 0 0 .12em rgba(184, 92, 56, .5); }
.mk-radio, .mk-check { width: 1em; height: 1em; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 .14em var(--mk-inset); background: #fff; }
.mk-check { border-radius: .28em; }
.mk-opt.is-on .mk-radio { box-shadow: inset 0 0 0 .3em var(--mk-brand); }
.mk-opt.is-on .mk-check { background: var(--mk-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 75% no-repeat; box-shadow: none; }
.mk-sheet-btn { margin-top: 1em; padding: .8em; border-radius: .75em; background: var(--mk-gradient); color: #fff; font-size: .72em; font-weight: 700; text-align: center; }
.mk-langs {
    position: absolute; z-index: 3; inset-inline-end: 0; bottom: 14%; width: 10.5em;
    display: flex; flex-wrap: wrap; gap: .35em; padding: .8em; border-radius: 1em;
    background: #fff; box-shadow: var(--mk-shadow);
}
.mk-langs span { padding: .3em .6em; border-radius: 999px; background: var(--mk-tint); font-size: .62em; font-weight: 600; color: var(--mk-muted); }
.mk-langs span.is-on { background: var(--mk-ink); color: #fff; }

/* Kitchen scene: kitchen display board */
.mk-kds { overflow: hidden; border-radius: 1.1em; background: #fff; box-shadow: var(--mk-shadow-lg); }
.mk-kds-bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .8em 1.1em; background: var(--mk-ink); color: #fff; }
.mk-kds-bar strong { font-family: var(--mk-display); font-size: .8em; font-weight: 800; }
.mk-kds-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; padding: .7em; background: var(--mk-tint); }
.mk-kds-head { display: flex; align-items: center; justify-content: space-between; margin: .1em .2em .55em; font-size: .6em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-muted); }
.mk-kds-head b { padding: .1em .55em; border-radius: 999px; background: #fff; color: var(--mk-ink); letter-spacing: 0; }
.mk-kds-card { padding: .65em; border-radius: .7em; background: #fff; box-shadow: var(--mk-shadow-sm); border-top: .22em solid transparent; }
.mk-kds-card + .mk-kds-card { margin-top: .5em; }
.mk-kds-card.is-new { border-top-color: #12b76a; }
.mk-kds-card.is-prep { border-top-color: #f5a524; }
.mk-kds-card.is-ready { border-top-color: var(--mk-brand); }
.mk-kds-top { display: flex; align-items: baseline; justify-content: space-between; gap: .3em; margin-bottom: .35em; }
.mk-kds-top strong { font-size: .7em; font-weight: 800; color: var(--mk-ink); white-space: nowrap; }
.mk-kds-top span { font-size: .55em; color: var(--mk-faint); white-space: nowrap; }
.mk-kds-card p { margin: .2em 0 0; font-size: .6em; line-height: 1.35; color: var(--mk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-kds-card .mk-kds-mod { padding-inline-start: 1.2em; color: var(--mk-faint); }
.mk-kds-btn { display: block; margin-top: .6em; padding: .45em .3em; border-radius: .45em; font-size: .58em; font-weight: 700; text-align: center; color: #fff; background: var(--mk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-new .mk-kds-btn { background: #067647; }
.is-prep .mk-kds-btn { background: #9a5b00; }
.mk-kds-tag { display: inline-block; margin-inline-end: .3em; padding: .1em .45em; border-radius: .35em; background: var(--mk-brand-light); color: var(--mk-brand-dark); font-size: .85em; }

/* Owner scene: analytics dashboard */
.mk-dash { padding: 1.1em; border-radius: 1.1em; background: #fff; box-shadow: var(--mk-shadow-lg); }
.mk-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.mk-kpi { padding: .75em .8em; border-radius: .75em; background: var(--mk-surface); }
.mk-kpi span { display: block; font-size: .56em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-kpi strong { display: block; margin-top: .3em; font-family: var(--mk-display); font-size: 1.15em; font-weight: 800; letter-spacing: -.02em; color: var(--mk-ink); white-space: nowrap; }
.mk-kpi em { display: inline-block; margin-top: .25em; padding: .1em .45em; border-radius: 999px; background: #e7f8ef; color: #067647; font-size: .55em; font-weight: 700; font-style: normal; }
.mk-dash-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .8em; margin-top: .8em; }
.mk-dash-card { padding: .85em; border-radius: .75em; background: var(--mk-surface); }
.mk-dash-label { margin: 0 0 .75em; font-size: .56em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-muted); }
.mk-bars { display: flex; align-items: flex-end; gap: .25em; height: 5.5em; }
.mk-bars i { flex: 1; height: var(--h); border-radius: .25em .25em .1em .1em; background: rgba(184, 92, 56, .28); }
.mk-bars i.is-peak { background: var(--mk-gradient); }
.mk-axis { display: flex; justify-content: space-between; margin-top: .4em; font-size: .5em; color: var(--mk-faint); direction: ltr; }
.mk-top-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .15em .5em; }
.mk-top-row + .mk-top-row { margin-top: .6em; }
.mk-top-row span { font-size: .6em; font-weight: 600; color: var(--mk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-top-row b { font-size: .6em; font-weight: 800; color: var(--mk-ink); }
.mk-top-row i { grid-column: 1 / -1; height: .4em; border-radius: 999px; background: linear-gradient(90deg, var(--mk-brand) var(--w), var(--mk-inset) var(--w)); }
[dir="rtl"] .mk-top-row i { background: linear-gradient(270deg, var(--mk-brand) var(--w), var(--mk-inset) var(--w)); }

/* Waiter scene: a waiter's phone on the New Order screen and the ticket it
   sends to the kitchen display. Staff screens wear the plain white header of
   the real waiter pages; guest screens wear the terracotta one. */
.mk-ways-row { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.mk-scene-waiter { display: flex; justify-content: center; padding-block: .5em; }
.mk-scene-waiter .mk-phone { position: relative; width: 15em; margin-inline-end: 8em; animation-duration: 8s; }
.mk-scene-waiter .mk-ticket { inset-inline-end: 0; top: 20%; width: 10.8em; transform: rotate(calc(3deg * var(--mk-dir))); }
.mk-scene-waiter .mk-sheet-btn { margin-top: .6em; }
.mk-tag--sent { inset-inline-end: 0; bottom: 8%; }
.mk-tag--sent svg { width: 1.1em; height: 1.1em; }
.mk-staff-head { padding: 2.3em 1em .85em; background: #fff; box-shadow: 0 .15em .5em rgba(85, 67, 60, .08); }
.mk-staff-head strong { display: block; font-family: var(--mk-display); font-size: 1.05em; font-weight: 800; letter-spacing: -.01em; color: var(--mk-ink); }
.mk-staff-head small { display: block; font-size: .62em; color: var(--mk-faint); }
.mk-staff-table { display: flex; align-items: center; gap: .6em; margin-top: .8em; }
.mk-staff-table span { font-size: .56em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-muted); }
.mk-staff-table b {
    flex: 1; display: flex; align-items: center; justify-content: space-between; padding: .45em .7em; border-radius: .55em;
    background: var(--mk-brand-lighter); box-shadow: inset 0 0 0 .1em rgba(184, 92, 56, .45); font-size: .68em; font-weight: 700; color: var(--mk-ink);
}
.mk-staff-table b::after { content: "\25BE"; color: var(--mk-brand); }
.mk-staff-body { padding: .9em .85em; }

/* Cards (features grid, guides) */
.mk-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .mk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border-radius: 1.25rem; background: #fff; box-shadow: var(--mk-shadow-sm); color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
a.mk-card:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow); }
a.mk-card:focus-visible { outline: none; box-shadow: var(--mk-focus); }
.mk-card .mk-card-icon { width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; }
.mk-card .mk-card-icon svg { width: 1.375rem; height: 1.375rem; }
.mk-card h3 { margin: 0 0 .5rem; font-family: var(--mk-display); font-size: 1.0625rem; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; color: var(--mk-ink); }
.mk-card p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--mk-muted); }
a.mk-card:hover h3 { color: var(--mk-brand-dark); }
/* Phones: icon beside the text so eight feature cards don't become a very long scroll */
@media (max-width: 639px) {
    .mk-grid--4 .mk-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.25rem; }
    .mk-grid--4 .mk-card-icon { grid-row: span 2; margin-bottom: 0; }
}
.mk-post { padding: 1.75rem; }
.mk-post :is(h2, h3) { margin: 0 0 .5rem; font-family: var(--mk-display); font-size: 1.1875rem; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; color: var(--mk-ink); }
a.mk-post:hover :is(h2, h3) { color: var(--mk-brand-dark); }
.mk-post-badge { align-self: flex-start; margin-bottom: 1.25rem; padding: .3rem .75rem; border-radius: 999px; background: var(--mk-brand-light); color: var(--mk-brand-dark); font-size: .75rem; font-weight: 700; }
.mk-post-more { display: inline-flex; margin-top: auto; padding-top: 1.25rem; color: var(--mk-brand-dark); }

/* Pull-quote */
.mk-quote { max-width: 58rem; margin-inline: auto; text-align: center; }
.mk-quote-mark { display: block; width: 3.25rem; height: 3.25rem; margin: 0 auto 1.5rem; color: var(--mk-brand); }
.mk-quote-text { margin: 0; font-family: var(--mk-display); font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); font-weight: 800; line-height: 1.14; letter-spacing: -.035em; color: var(--mk-ink); text-wrap: balance; }
.mk-quote-body { margin: 1.75rem auto 0; max-width: 40rem; font-size: 1.0625rem; line-height: 1.7; color: var(--mk-muted); text-wrap: pretty; }
.mk-quote .mk-link { margin-top: 1.5rem; }

/* Business types */
.mk-venues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px) { .mk-venues { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mk-venues { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk-venue {
    display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem .625rem .625rem; border-radius: 1rem;
    background: #fff; box-shadow: var(--mk-shadow-sm); font-size: .9375rem; font-weight: 600; line-height: 1.3;
    color: var(--mk-ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.mk-venue-emoji { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--mk-tint); font-size: 1.25rem; flex-shrink: 0; }
.mk-venue .mk-arrow { margin-inline-start: auto; color: var(--mk-brand); opacity: 0; transition: opacity .2s ease, transform .15s ease; }
.mk-venue:hover { color: var(--mk-brand-dark); box-shadow: var(--mk-shadow); transform: translateY(-2px); }
.mk-venue:hover .mk-arrow { opacity: 1; }
.mk-venue:focus-visible { outline: none; box-shadow: var(--mk-focus); }

/* Demo band (dark) */
.mk-demo {
    position: relative; overflow: hidden; display: grid; gap: 2.5rem; align-items: center;
    padding: clamp(2rem, 1rem + 4vw, 4rem); border-radius: 2rem; color: #fff;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(184, 92, 56, .38), transparent 60%),
        radial-gradient(40% 60% at 0% 100%, rgba(184, 92, 56, .2), transparent 60%),
        #1c1c1a;
}
@media (min-width: 1024px) { .mk-demo { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; } }
.mk-demo .mk-title { color: #fff; }
.mk-demo-desc { margin: 1rem 0 0; max-width: 36rem; font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, .74); }
.mk-demo-steps { display: grid; gap: .875rem 1.5rem; margin: 2rem 0 2.25rem; padding: 0; list-style: none; counter-reset: mkstep; }
@media (min-width: 640px) { .mk-demo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-demo-steps li { display: flex; align-items: flex-start; gap: .75rem; font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .88); counter-increment: mkstep; }
.mk-demo-steps li::before { content: counter(mkstep); display: grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(232, 162, 131, .16); color: var(--mk-on-dark); font-size: .8125rem; font-weight: 800; }
.mk-demo-qr { display: none; }
@media (min-width: 1024px) {
    .mk-demo-qr { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; width: 14rem; text-align: center; }
    .mk-demo-qr .mk-qr { width: 11rem; padding: .9rem; border-radius: 1.25rem; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); transform: rotate(calc(3deg * var(--mk-dir))); }
    .mk-demo-qr p { margin: 0; font-size: .875rem; line-height: 1.5; color: rgba(255, 255, 255, .72); }
}

/* Pricing */
.mk-price { display: grid; overflow: hidden; max-width: 62rem; margin-inline: auto; border-radius: 2rem; background: #fff; box-shadow: var(--mk-shadow); }
@media (min-width: 900px) { .mk-price { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.mk-price-main { display: flex; flex-direction: column; padding: clamp(2rem, 1.5rem + 2vw, 3rem); background: radial-gradient(90% 80% at 0% 0%, rgba(184, 92, 56, .14), transparent 60%), var(--mk-brand-lighter); }
.mk-price-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-price-tag { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 999px; background: #fff; box-shadow: var(--mk-shadow-sm); font-size: .75rem; font-weight: 700; color: var(--mk-brand-dark); }
.mk-price-tag--plain { background: transparent; box-shadow: none; padding-inline: .25rem; color: var(--mk-muted); font-weight: 600; }
.mk-price-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem; margin: 1.75rem 0 .375rem; }
.mk-price-amount strong { font-family: var(--mk-display); font-size: clamp(3.5rem, 3rem + 2vw, 4.75rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--mk-ink); }
.mk-price-amount span { font-size: 1.125rem; font-weight: 600; color: var(--mk-muted); }
.mk-price-note { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--mk-muted); }
.mk-price-main .mk-btn { width: 100%; margin-top: auto; }
.mk-price-fine { margin: .875rem 0 0; font-size: .8125rem; color: var(--mk-faint); text-align: center; }
.mk-price-list { padding: clamp(2rem, 1.5rem + 2vw, 3rem); }
.mk-price-why { margin: 0 0 2rem; max-width: 22rem; font-size: .875rem; line-height: 1.6; color: var(--mk-muted); }

/* FAQ */
.mk-faq { display: grid; }
/* Phones: title, then the questions, then the contact card */
@media (max-width: 1023px) {
    .mk-faq-aside { display: contents; }
    .mk-faq .mk-title { margin-bottom: 2rem; }
    .mk-faq-list { order: 1; }
    .mk-faq-contact { order: 2; margin-top: 1.5rem; }
}
@media (min-width: 1024px) {
    .mk-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 4rem; align-items: start; }
    .mk-faq-aside { position: sticky; top: 6.5rem; }
}
.mk-faq-contact { margin-top: 2rem; padding: 1.5rem; border-radius: 1.25rem; background: #fff; box-shadow: var(--mk-shadow-sm); }
.mk-faq-contact h3 { margin: 0 0 .375rem; font-family: var(--mk-display); font-size: 1.0625rem; font-weight: 800; color: var(--mk-ink); }
.mk-faq-contact p { margin: 0 0 .875rem; font-size: .875rem; line-height: 1.6; color: var(--mk-muted); }
.mk-faq-list { display: grid; gap: .75rem; }
.mk-qa { border-radius: 1.25rem; background: #fff; box-shadow: var(--mk-shadow-sm); transition: box-shadow .2s ease; }
.mk-qa[open] { box-shadow: var(--mk-shadow); }
.mk-qa > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: 1.25rem; list-style: none; cursor: pointer; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--mk-ink); }
.mk-qa > summary::-webkit-details-marker { display: none; }
.mk-qa > summary::marker { content: ""; }
.mk-qa > summary:focus-visible { outline: none; box-shadow: var(--mk-focus); }
.mk-qa-icon { position: relative; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: .625rem; background: var(--mk-tint); transition: background-color .2s ease; }
.mk-qa-icon::before, .mk-qa-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: .75rem; height: 2px; margin: -1px 0 0 -.375rem; border-radius: 2px; background: var(--mk-ink); transition: transform .25s ease; }
.mk-qa-icon::after { transform: rotate(90deg); }
.mk-qa[open] .mk-qa-icon { background: var(--mk-brand-light); }
.mk-qa[open] .mk-qa-icon::after { transform: rotate(0deg); }
.mk-qa > p { margin: 0; max-width: 46rem; padding: 0 1.5rem 1.5rem; font-size: .9375rem; line-height: 1.7; color: var(--mk-muted); }

/* Closing call to action */
.mk-cta {
    position: relative; overflow: hidden; isolation: isolate; padding: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.5rem, 1rem + 4vw, 4rem);
    border-radius: 2rem; text-align: center; color: #fff;
    background: radial-gradient(60% 90% at 100% 0%, rgba(255, 255, 255, .16), transparent 60%), var(--mk-gradient);
}
.mk-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(circle, rgba(255, 255, 255, .2) 1px, transparent 1.5px) 0 0 / 26px 26px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.mk-cta .mk-title { max-width: 46rem; margin-inline: auto; color: #fff; }
.mk-cta-sub { margin: 1.25rem auto 2.25rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, .85); }

/* Secondary marketing pages: page hero with breadcrumbs */
.mk-page-hero {
    position: relative; overflow: hidden; isolation: isolate; text-align: center;
    padding-top: calc(4rem + clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem)); padding-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    background: radial-gradient(55% 70% at 50% 0%, rgba(184, 92, 56, .13), transparent 70%), var(--mk-surface);
}
.mk-page-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
    background-image: radial-gradient(circle at 1px 1px, rgba(28, 28, 26, .07) 1px, transparent 0); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 10%, transparent 70%);
}
.mk-page-title { margin: 0 auto; max-width: 50rem; font-family: var(--mk-display); font-weight: 800; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.07; letter-spacing: -.04em; color: var(--mk-ink); text-wrap: balance; }
:is([lang="ar"], [lang="hi"]) .mk-page-title { letter-spacing: 0; }
[lang="hi"] :is(.mk-page-title, .mk-hero-title, .mk-title) { line-height: 1.25; }
.mk-page-hero .mk-lede { margin-inline: auto; }
.mk-page-hero .mk-actions { justify-content: center; margin-top: 2rem; }
.mk-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .8125rem; font-weight: 500; color: var(--mk-faint); }
.mk-crumbs a { color: var(--mk-muted); text-decoration: none; }
.mk-crumbs a:hover { color: var(--mk-brand-dark); }
.mk-crumbs li + li::before { content: "/"; margin-inline-end: .5rem; color: rgba(28, 28, 26, .25); }
.mk-crumbs--start { justify-content: flex-start; } /* above left-aligned article copy */

/* Feature page cards (anchored: the homepage links to #ids) */
.mk-fgrid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .mk-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-fcard { padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); border-radius: 1.5rem; background: #fff; box-shadow: var(--mk-shadow-sm); scroll-margin-top: 5.5rem; transition: box-shadow .3s ease; }
.mk-fcard:target { box-shadow: 0 0 0 2px rgba(184, 92, 56, .5), var(--mk-shadow); }
.mk-fcard h2 { margin: 0 0 .5rem; font-family: var(--mk-display); font-size: 1.375rem; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--mk-ink); }
.mk-fcard-desc { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--mk-muted); }
.mk-fcard .mk-list { margin-top: 1.25rem; }
/* A feature that spans the grid (waiter screens): copy beside its list */
.mk-fcard--wide { grid-column: 1 / -1; background: radial-gradient(70% 90% at 100% 0%, rgba(184, 92, 56, .12), transparent 60%), var(--mk-brand-lighter); }
@media (min-width: 768px) {
    .mk-fcard--wide { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
    .mk-fcard--wide .mk-list { margin-top: 0; }
}
.mk-narrow { max-width: 48rem; margin-inline: auto; }
.mk-badge-en { align-self: flex-start; margin: -.75rem 0 1.25rem; padding: .25rem .625rem; border-radius: 999px; background: var(--mk-tint); color: var(--mk-muted); font-size: .6875rem; font-weight: 600; }

/* Marketing nav: no hairline at rest (tone does the separating); a soft
   shadow once the page scrolls under it. */
.mk-nav { transition: box-shadow .2s ease, background-color .2s ease; }
.mk-nav.is-scrolled { background-color: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 rgba(28, 28, 26, .05), 0 10px 30px -12px rgba(85, 67, 60, .18); }

@media (prefers-reduced-motion: reduce) {
    .mk-phone, .mk-ticket, .mk-live::before { animation: none; }
    .mk-btn, .mk-card, .mk-venue, .mk-arrow, .mk-qa, .mk-qa-icon::after, .mk-nav { transition: none; }
}
/* Payments scene: the guest's payment card (tracking page) and the "guest
   says paid" ticket the staff confirm */
.mk-scene-pay { display: flex; justify-content: center; padding-block: .5em; }
.mk-scene-pay .mk-phone { position: relative; width: 15em; margin-inline-end: 8em; animation-duration: 8s; }
.mk-scene-pay .mk-ticket { inset-inline-end: 0; top: 26%; width: 10.8em; transform: rotate(calc(3deg * var(--mk-dir))); }
.mk-tag--free { inset-inline-end: 3%; bottom: 7%; }
.mk-tag--free svg { width: 1.1em; height: 1.1em; }
.mk-pay { padding: 2.4em .95em 1em; background: #fff; }
.mk-pay-title { margin: 0 0 .7em; font-family: var(--mk-display); font-size: .95em; font-weight: 800; letter-spacing: -.01em; color: var(--mk-ink); }
.mk-pay-sum { padding: .75em .8em; border-radius: .9em; background: var(--mk-brand-light); }
.mk-pay-sum small { display: block; font-size: .5em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-brand-dark); }
.mk-pay-sum strong { display: block; margin-top: .1em; font-family: var(--mk-display); font-size: 1.45em; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--mk-ink); }
.mk-pay-sum span { display: block; margin-top: .4em; font-size: .6em; color: var(--mk-muted); }
.mk-pay-sum span b { color: var(--mk-ink); }
.mk-pay-step { display: flex; align-items: center; gap: .45em; margin: .9em 0 .45em; font-size: .5em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-muted); }
.mk-pay-step b { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--mk-gradient); color: #fff; letter-spacing: 0; }
.mk-pay-method { display: flex; align-items: center; gap: .6em; margin-top: .4em; padding: .55em .6em; border-radius: .75em; background: var(--mk-tint); }
.mk-pay-ico { display: grid; place-items: center; width: 1.9em; height: 1.9em; flex-shrink: 0; border-radius: .55em; background: #fff; color: var(--mk-brand); font-size: .78em; font-weight: 800; }
.mk-pay-ico svg { width: 1.1em; height: 1.1em; }
.mk-pay-ico--pp { color: #1d4f91; font-family: var(--mk-display); font-style: italic; }
.mk-pay-text { display: flex; flex-direction: column; min-width: 0; }
.mk-pay-text strong { font-size: .66em; font-weight: 700; color: var(--mk-ink); }
.mk-pay-text small { font-size: .55em; color: var(--mk-faint); }
.mk-pay .mk-sheet-btn { margin-top: .5em; }
.mk-pay-claimed { display: inline-block; margin: 0; padding: .35em .7em; border-radius: .5em; background: #fff4e0; color: #9a5b00; font-size: .58em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* <<< mk: marketing pages v2 */