:root{--c-bg:#FFF8EF;--c-bg2:#F0DFCA;--c-surface:#FFFFFF;--c-surface2:#F7EEE3;--c-line:#EFE5D8;--c-lineStrong:#DDCDB8;--c-text:#171412;--c-text2:#6F665E;--c-text3:#9B9188;--c-ink:#171412;--c-onInk:#FFF8EF;--c-primary:#171412;--c-primaryHover:#2B2622;--c-onPrimary:#FFF8EF;--c-accent:#B99AFF;--c-accentText:#6A45D6;--c-accentSoft:#E9DCFF;--c-onAccent:#171412;--c-peach:#FFD5B2;--c-clay:#FFD5B2;--c-sand:#F0DFCA;--c-dark:#171412;--c-dark2:#25211E;--c-dark3:#38322D;--c-onDark:#FFF8EF;--c-onDark2:#CFC6BC;--c-success:#276B43;--c-successSoft:#E3F2E7;--c-warning:#8A5A00;--c-warningSoft:#FFEBCF;--c-danger:#B3261E;--c-dangerSoft:#FCE4E1;--c-ink2:#25211E;--c-ink3:#38322D;--c-ivory:#FFF8EF;--c-stone:#F7EEE3;--c-slate:#9B9188;--c-slateText:#6F665E;--c-white:#FFFFFF;--c-lime:#B99AFF;--c-limeInk:#171412;--f-display:"YUM Sans", "YUM Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;--f-displayAr:"YUM Sans", "YUM Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;--f-latin:"YUM Sans", "YUM Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;--f-arabic:"YUM Sans", "YUM Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;--f-logo:"YUM Logo", "YUM Sans", sans-serif;--lh-tight:1.15;--lh-snug:1.3;--lh-body:1.5;--tr-display:-0.022em;--tr-title:-0.018em;--tr-headline:-0.011em;--tr-body:-0.006em;--tr-small:0em;--tr-caption:0.005em;--tr-caps:0.06em;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--r-xs:10px;--r-sm:14px;--r-md:18px;--r-lg:24px;--r-xl:32px;--r-pill:999px;--m-fast:140ms;--m-base:240ms;--m-slow:420ms;--m-ease:cubic-bezier(.2,.7,.1,1);--m-spring:cubic-bezier(.34,1.56,.64,1);--sh-card:0 1px 2px rgba(23,20,18,.04), 0 6px 20px -12px rgba(23,20,18,.14);--sh-lift:0 16px 40px -16px rgba(23,20,18,.28);--sh-nav:0 10px 30px -12px rgba(23,20,18,.22);--u:clamp(1px, calc(1rem / 16), 1.6px);--density:1}
@supports (font: -apple-system-body) and (-webkit-touch-callout: none){html{font:-apple-system-body}:root{--u:clamp(1px, calc(1rem / 17), 1.6px)}}
:root,body{--s-xxs:calc(11 * var(--u) * var(--density));--s-xs:calc(11.5 * var(--u) * var(--density));--s-fn:calc(12.5 * var(--u) * var(--density));--s-sm:calc(13.5 * var(--u) * var(--density));--s-sub:calc(14 * var(--u) * var(--density));--s-md:calc(15 * var(--u) * var(--density));--s-h3:calc(16.5 * var(--u) * var(--density));--s-lg:calc(18 * var(--u) * var(--density));--s-h2:calc(19.5 * var(--u) * var(--density));--s-xl:calc(21 * var(--u) * var(--density));--s-h1:calc(24 * var(--u) * var(--density));--s-xxl:calc(26 * var(--u) * var(--density));--s-display:calc(29 * var(--u) * var(--density));--s-hero:calc(40 * var(--u) * var(--density));--t-largeTitle:700 var(--s-display)/var(--lh-tight) var(--f-arabic);--t-title1:700 var(--s-h1)/var(--lh-tight) var(--f-arabic);--t-title2:700 var(--s-h2)/var(--lh-snug) var(--f-arabic);--t-title3:600 var(--s-h3)/var(--lh-snug) var(--f-arabic);--t-headline:600 var(--s-md)/var(--lh-snug) var(--f-arabic);--t-body:400 var(--s-md)/var(--lh-body) var(--f-arabic);--t-callout:400 var(--s-sub)/var(--lh-body) var(--f-arabic);--t-subhead:400 var(--s-sm)/var(--lh-body) var(--f-arabic);--t-footnote:400 var(--s-fn)/var(--lh-body) var(--f-arabic);--t-caption:500 var(--s-xs)/var(--lh-snug) var(--f-arabic);--t-caption2:500 var(--s-xxs)/var(--lh-snug) var(--f-arabic);--t-button:600 var(--s-md)/var(--lh-tight) var(--f-arabic);--t-buttonSmall:600 var(--s-sm)/var(--lh-tight) var(--f-arabic)}
:root:lang(ar),[lang=ar]{--lh-tight:1.35;--lh-snug:1.5;--lh-body:1.7;--tr-display:0;--tr-title:0;--tr-headline:0;--tr-body:0;--tr-small:0;--tr-caption:0;--tr-caps:0}
[lang=en]{--lh-tight:1.15;--lh-snug:1.3;--lh-body:1.5;--tr-display:-0.022em;--tr-title:-0.018em;--tr-headline:-0.011em;--tr-body:-0.006em;--tr-small:0em;--tr-caption:0.005em;--tr-caps:0.06em}
body.app-courier{--density:1.0625}
.t-largeTitle{font:var(--t-largeTitle);letter-spacing:var(--tr-display)}
.t-title1{font:var(--t-title1);letter-spacing:var(--tr-display)}
.t-title2{font:var(--t-title2);letter-spacing:var(--tr-title)}
.t-title3{font:var(--t-title3);letter-spacing:var(--tr-headline)}
.t-headline{font:var(--t-headline);letter-spacing:var(--tr-body)}
.t-body{font:var(--t-body);letter-spacing:var(--tr-body)}
.t-callout{font:var(--t-callout);letter-spacing:var(--tr-body)}
.t-subhead{font:var(--t-subhead);letter-spacing:var(--tr-small)}
.t-footnote{font:var(--t-footnote);letter-spacing:var(--tr-small)}
.t-caption{font:var(--t-caption);letter-spacing:var(--tr-caption)}
.t-caption2{font:var(--t-caption2);letter-spacing:var(--tr-caption)}
.t-button{font:var(--t-button);letter-spacing:var(--tr-body)}
.t-buttonSmall{font:var(--t-buttonSmall);letter-spacing:var(--tr-small)}
.app-customer{--c-bg:#FFFFFF;--c-bg2:#FFF2E2;--c-surface:#FFFFFF;--c-surface2:#F6F6F6;--c-line:#EBEBEB;--c-lineStrong:#D9D9D9;--c-text:#080808;--c-text2:#6B6B6B;--c-text3:#777777;--c-ink:#080808;--c-onInk:#FFFFFF;--c-primary:#080808;--c-primaryHover:#262626;--c-onPrimary:#FFFFFF;--c-accent:#8855FF;--c-accentText:#7343EB;--c-accentSoft:#F3EDFF;--c-accentMid:#E8D8FF;--c-onAccent:#080808;--c-peach:#F2E1CD;--c-clay:#F2E1CD;--c-sand:#F2E1CD;--c-sandSoft:#FFF2E2;--c-orange:#FF922E;--c-dark:#080808;--c-dark2:#1A1A1A;--c-dark3:#2E2E2E;--c-onDark:#FFFFFF;--c-onDark2:#CCCCCC;--c-glass:rgba(255,255,255,.9)}
/* YUM base styles (approved reference, 20 Oct 2026). Warm cream grounds, near-black type and pill actions,
   lavender as the one accent, white cards that barely lift, food imagery as the hero. Readex Pro for
   Arabic and Latin → now «YUM Sans» (Inter + IBM Plex Sans Arabic, see public/fonts/fonts.css). Type roles:
   h1–h4 and .t-* classes use the TEXT_STYLES tokens; sizes are var(--s-*) so Dynamic Type / text-size settings
   scale every surface; letter-spacing only through var(--tr-*), which is 0 in Arabic (tracking breaks joining).
   Tokens come from packages/brand → packages/design-tokens (emitted above this file).
   Use ROLE tokens (bg, surface, text, primary, accent, dark…); legacy names (ink2, ivory, lime…) are
   aliases kept for the staff dashboards.
   Rules: one accent per view, no decorative gradients (only legibility scrims over video), shadows only
   on things that float, 44 px minimum touch targets, logical properties so RTL and LTR both just work. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:var(--f-arabic);font-size:var(--s-md);line-height:var(--lh-body);letter-spacing:var(--tr-body);color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;font-optical-sizing:auto;font-synthesis-weight:none;font-feature-settings:"kern"}
:lang(en) body,body:lang(en){font-family:var(--f-latin)}
h1,h2,h3,h4{font-family:var(--f-display);line-height:var(--lh-snug);margin:0;font-weight:var(--fw-bold);letter-spacing:var(--tr-title);text-wrap:balance}
h3,h4{font-weight:var(--fw-semibold);letter-spacing:var(--tr-headline)}
h1{font-size:var(--s-h1);line-height:var(--lh-tight);letter-spacing:var(--tr-display)}h2{font-size:var(--s-xl)}h3{font-size:var(--s-h3)}h4{font-size:var(--s-md)}
p{text-wrap:pretty}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
img,video{max-width:100%;display:block}
/* Numbers, prices, times, codes: Inter figures (tabular so totals and timers do not wobble), always LTR and
   isolated so "42.50 ر.س" or "#10482" never reorders inside Arabic text. */
.num{font-family:var(--f-latin);font-variant-numeric:tabular-nums;font-feature-settings:"tnum","case";direction:ltr;unicode-bidi:isolate;letter-spacing:0}
/* People's own words (captions, names, notes, reviews) can be Arabic or English in either UI: take the
   paragraph direction from the text itself. */
.caption,.bidi,.review-text,.who,.nm,[data-bidi]{unicode-bidi:plaintext}
input:not([type=tel]):not([inputmode=numeric]):not(.num),textarea{unicode-bidi:plaintext}
.muted{color:var(--c-text2)}
.accent-text{color:var(--c-accentText)}
.small{font-size:var(--s-sm)}
.xs{font-size:var(--s-xs)}
.row{display:flex;align-items:center;gap:var(--sp-3)}
.row.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.stack.lg{gap:var(--sp-5)}
.grow{flex:1;min-width:0}
.sr,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--c-ink);outline-offset:3px;border-radius:10px}
.on-dark :focus-visible,.feed :focus-visible,.rfeed :focus-visible,.login.dark :focus-visible{outline-color:var(--c-accent)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[dir=ltr] .rtl-flip{transform:scaleX(-1)}
/* Icon System: directional Lucide glyphs are drawn for LTR, so they mirror in RTL. */
[dir=rtl] .i-mirror{transform:scaleX(-1)}
.yi{flex:none;vertical-align:middle}
/* System colour emoji for food and taste (never a web font: each platform draws its own). */
.emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;font-weight:400;line-height:1;letter-spacing:0;display:inline-block}
.ft-ic .emoji{font-size:26px}
.sugg-img .ft-ic .emoji,.cart-line .thumb .ft-ic .emoji,.more-img .ft-ic .emoji{font-size:20px}
.cat .ic .emoji{font-size:28px}
.rail a .yi{opacity:.85}
.rail a[aria-current=page] .yi{opacity:1;color:var(--c-accent)}
.flip-x{display:inline-flex;transform:scaleX(-1)}

/* ── logo & wordmark ── */
.wordmark{display:inline-block;height:var(--wm-h,22px);width:auto;color:currentColor;vertical-align:middle;line-height:0}
.wordmark svg{height:100%;width:auto;display:block;overflow:visible}
/* System lockup «YUM Restaurants»: wordmark untouched; the name is YUM Sans semibold, optically sized to the
   wordmark's cap height and sitting on its baseline. Same on every staff/partner app; the customer app has none. */
.sys-lockup{display:inline-flex;align-items:flex-end;gap:calc(var(--wm-h) * .34);color:currentColor;white-space:nowrap;line-height:1;vertical-align:middle}
.sys-name{font-family:var(--f-latin);font-weight:600;font-size:calc(var(--wm-h) * 1.06);line-height:.74;letter-spacing:-.012em;opacity:.78}
.logo-lockup{display:inline-flex;flex-direction:column;align-items:center;gap:calc(var(--wm-h) * .28);color:currentColor}
.logo-lockup .tagline{font-family:var(--f-logo);font-weight:500;font-size:max(11px,calc(var(--wm-h) * .13));letter-spacing:.42em;line-height:1.9;text-align:center;margin-inline-start:.42em}
:lang(ar) .logo-lockup .tagline,[lang=ar] .logo-lockup .tagline{font-family:var(--f-logo);letter-spacing:0;margin:0;font-size:max(14px,calc(var(--wm-h) * .17));line-height:1.6;font-weight:500}
.plus-mark{display:inline-flex;align-items:flex-start;gap:.08em;line-height:1;direction:ltr}
.plus-mark i{font-style:normal;font-family:var(--f-logo);font-weight:700;color:currentColor;font-size:calc(var(--wm-h,22px) * .9);line-height:.8;margin-top:-.08em}
.loc-pill{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:var(--r-pill);background:var(--c-surface);border:1px solid var(--c-line);font-weight:500;font-size:var(--s-sm);color:var(--c-text);max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* category circles (explore) */
.cats{display:flex;gap:4px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none;margin-inline:-16px;padding-inline:12px}
.cats::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;min-width:68px;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:2px 4px;cursor:pointer;color:var(--c-text2);font:inherit;font-size:var(--s-xs);font-weight:500}
.cat .ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--c-surface);color:var(--c-text);box-shadow:inset 0 0 0 1px var(--c-line);transition:background var(--m-fast),color var(--m-fast),transform var(--m-fast) var(--m-spring)}
.cat:active .ic{transform:scale(.92)}
.cat[aria-pressed=true]{color:var(--c-text);font-weight:600}
.cat[aria-pressed=true] .ic{background:var(--c-ink);color:var(--c-onInk);box-shadow:none}

/* loading */
.loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 0}
.dots{display:inline-flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--c-accent);animation:dot 1s var(--m-ease) infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:none;opacity:1}}
.on-dark .loading,.rfeed .loading{color:var(--c-onDark2)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-pill);border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text);font-size:var(--s-sub);line-height:1.2;letter-spacing:var(--tr-body);font-weight:var(--fw-semibold);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--m-fast) var(--m-ease),background var(--m-fast),border-color var(--m-fast),color var(--m-fast)}
.btn:hover:not(:disabled){border-color:var(--c-lineStrong)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-onPrimary)}
.btn.primary:hover:not(:disabled){background:var(--c-primaryHover);border-color:var(--c-primaryHover)}
.btn.primary:disabled{opacity:1;background:var(--c-surface2);border-color:var(--c-surface2);color:var(--c-text3)}
.btn.accent{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-onAccent)}
.btn.accent:hover:not(:disabled){background:#A987F5;border-color:#A987F5}
.btn.dark{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-onInk)}
.btn.dark:hover:not(:disabled){background:var(--c-primaryHover)}
.btn.danger{color:var(--c-danger);border-color:var(--c-line)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover:not(:disabled){background:rgba(23,20,18,.04)}
.btn.block{width:100%}
.btn.lg{min-height:56px;padding:0 24px;font-size:var(--s-md);font-weight:var(--fw-semibold)}
.btn.sm{min-height:36px;padding:0 14px;font-size:var(--s-sm);letter-spacing:var(--tr-small)}
.btn.pill{border-radius:var(--r-pill)}
.btn .go{display:inline-grid;place-items:center;margin-inline-start:auto}
.btn.lg:has(.go){justify-content:space-between}
.on-dark .btn.primary,.login.dark .btn.primary{background:var(--c-onDark);border-color:var(--c-onDark);color:var(--c-ink)}
.on-dark .btn.primary:hover:not(:disabled),.login.dark .btn.primary:hover:not(:disabled){background:#fff}
.on-dark .btn.primary:disabled,.login.dark .btn.primary:disabled{background:var(--c-dark3);border-color:var(--c-dark3);color:var(--c-onDark2)}
.on-dark .btn:not(.primary):not(.ghost),.login.dark .btn:not(.primary):not(.ghost){background:var(--c-dark2);border-color:var(--c-dark3);color:var(--c-onDark)}
.icon-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;cursor:pointer;color:inherit;transition:background var(--m-fast),transform var(--m-fast) var(--m-spring)}
.icon-btn:hover{background:rgba(23,20,18,.05)}
.icon-btn:active{transform:scale(.9)}
.icon-btn.solid{background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line)}
.link-btn{border:0;background:none;padding:6px 0;min-height:36px;color:var(--c-accentText);font-weight:600;font-size:var(--s-sm);cursor:pointer}

/* ── fields ── */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field legend{font-size:var(--s-sm);font-weight:600}
.input{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-surface);transition:border-color var(--m-fast),box-shadow var(--m-fast)}
.input::placeholder{color:var(--c-text3)}
.input:focus{border-color:var(--c-ink);outline:none;box-shadow:0 0 0 4px var(--c-accentSoft)}
.input[aria-invalid=true]{border-color:var(--c-danger)}
.input.code{font-family:var(--f-latin);font-size:28px;font-weight:600;letter-spacing:.35em;text-align:center;direction:ltr}
textarea.input{resize:vertical}
.hint{font-size:var(--s-xs);color:var(--c-text2)}
.error-text{font-size:var(--s-sm);color:var(--c-danger)}

/* ── surfaces ── */
.panel{background:var(--c-surface);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-card)}
.panel.tight{padding:var(--sp-4)}
.panel.sand{background:var(--c-bg2);box-shadow:none}
button.panel{border:0;cursor:pointer;color:inherit;font:inherit;width:100%;text-align:start;transition:transform var(--m-fast) var(--m-ease)}
button.panel:active{transform:scale(.985)}
.rule{height:1px;background:var(--c-line);border:0;margin:0}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:var(--s-xs);font-weight:600;background:var(--c-surface2);color:var(--c-text);white-space:nowrap;line-height:1.4}
.badge.ok{background:var(--c-successSoft);color:var(--c-success)}
.badge.warn{background:var(--c-warningSoft);color:var(--c-warning)}
.badge.bad{background:var(--c-dangerSoft);color:var(--c-danger)}
.badge.accent{background:var(--c-accentSoft);color:var(--c-ink)}
.badge.live{background:var(--c-ink);color:var(--c-onInk)}
.badge.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-accent);animation:livePulse 1.6s infinite}
.badge.ok.live,.badge.warn.live{background:var(--c-ink);color:var(--c-onInk)}
@keyframes pulse{50%{opacity:.3}}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(185,154,255,.7)}70%{box-shadow:0 0 0 7px rgba(185,154,255,0)}100%{box-shadow:0 0 0 0 rgba(185,154,255,0)}}
.notice{padding:12px 14px;border-radius:var(--r-md);background:var(--c-warningSoft);font-size:var(--s-sm);gap:10px}
.notice.info{background:var(--c-surface2)}
.notice.bad{background:var(--c-dangerSoft);color:var(--c-danger)}
.empty{padding:56px var(--sp-5) var(--sp-6);text-align:center;color:var(--c-text2);display:flex;flex-direction:column;align-items:center;gap:6px;animation:rise var(--m-slow) var(--m-ease)}
.empty h3{color:var(--c-text);font-size:var(--s-lg);font-weight:700}
.empty p{max-width:30ch}
.empty-ic{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:var(--c-accentSoft);color:var(--c-ink);margin-bottom:10px}
.skeleton{background:linear-gradient(90deg,#F4EBDF 0,#FBF6EF 50%,#F4EBDF 100%);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:var(--r-md)}
.on-dark .skeleton,.feed .skeleton,.rfeed .skeleton{background:linear-gradient(90deg,#221E1B 0,#2E2925 50%,#221E1B 100%);background-size:200% 100%}
@keyframes shimmer{to{background-position:-200% 0}}
.demo-flag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:var(--r-pill);border:1px dashed currentColor;opacity:.7}

/* ── progress (order stages): a thin line with dots ── */
.progress{display:grid;grid-template-columns:repeat(var(--steps,4),1fr);gap:4px}
.progress i{height:4px;border-radius:2px;background:var(--c-line);position:relative;overflow:hidden}
.progress i.done{background:var(--c-ink)}
.progress i.now{background:var(--c-accentSoft)}
.progress i.now::after{content:"";position:absolute;inset:0;background:var(--c-accent);transform-origin:left;animation:fill 1.8s var(--m-ease) infinite}
[dir=rtl] .progress i.now::after{transform-origin:right}
@keyframes fill{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1);opacity:.35}}
.on-dark .progress i{background:var(--c-dark3)}
.on-dark .progress i.done{background:var(--c-onDark)}
.progress-labels{display:grid;grid-template-columns:repeat(var(--steps,4),1fr);gap:4px;font-size:var(--s-xs);color:var(--c-text3);margin-top:8px}
.on-dark .progress-labels{color:var(--c-onDark2)}
.progress-labels span.done,.progress-labels span.now{color:var(--c-text);font-weight:600}
.on-dark .progress-labels span.done,.on-dark .progress-labels span.now{color:var(--c-onDark)}

/* ── tables (staff) ── */
.table{width:100%;border-collapse:collapse;font-size:var(--s-sm);font-variant-numeric:tabular-nums;line-height:var(--lh-snug)}
.table th{font-weight:600;color:var(--c-text2);text-align:start;padding:10px 12px;border-bottom:1px solid var(--c-line);white-space:nowrap;font-size:var(--s-xs)}
.table td{padding:12px;border-bottom:1px solid var(--c-surface2);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table tr.click{cursor:pointer}
.table tr.click:hover td{background:#FBF6EF}
.table-wrap{overflow-x:auto}

/* ── toast & sheet ── */
.toast{position:fixed;inset-inline:16px;bottom:calc(92px + env(safe-area-inset-bottom));margin:auto;max-width:400px;width:max-content;min-height:48px;padding:10px 18px 10px 12px;padding-inline:12px 18px;border-radius:var(--r-pill);background:var(--c-ink);color:var(--c-onInk);z-index:95;animation:rise var(--m-base) var(--m-spring);display:flex;gap:10px;align-items:center;box-shadow:var(--sh-lift);font-size:var(--s-sm);font-weight:500}
.toast-ic{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--c-accent);color:var(--c-ink);font-weight:700;font-size:13px}
.toast.bad .toast-ic{background:#F2B8B3}
@keyframes rise{from{transform:translateY(14px);opacity:0}}
.scrim{position:fixed;inset:0;background:rgba(23,20,18,.42);z-index:80;display:flex;align-items:flex-end;justify-content:center;animation:fade var(--m-base)}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-width:520px;max-height:92vh;max-height:92dvh;overflow:auto;overscroll-behavior:contain;background:var(--c-bg);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--sp-5);padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom));animation:up var(--m-slow) var(--m-ease);box-shadow:0 -10px 40px -20px rgba(23,20,18,.3)}
@keyframes up{from{transform:translateY(64px);opacity:.6}}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:var(--c-lineStrong);margin:-8px auto 18px;opacity:.7}
@media (min-width:700px){.scrim.center{align-items:center}.scrim.center .sheet{border-radius:var(--r-xl)}}

/* ── welcome (first open on a device) + splash (first open per session) ── */
.splash,.welcome{position:fixed;inset:0;z-index:200;background:var(--c-bg);color:var(--c-text);display:flex;flex-direction:column;align-items:stretch;max-width:480px;margin-inline:auto}
.splash{display:grid;place-items:center;animation:splashOut .4s var(--m-ease) 1.1s forwards;pointer-events:none}
.splash .wordmark{animation:pop .6s var(--m-spring)}
@keyframes pop{from{transform:scale(.86);opacity:0}}
.welcome .top{flex:1;display:grid;place-items:center;padding:calc(48px + env(safe-area-inset-top)) 24px 0;animation:rise .7s var(--m-ease)}
.welcome .foot{padding:0 20px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;animation:rise .7s var(--m-ease) .12s both}
.welcome .tag{margin:0;text-align:center;font-family:var(--f-display);font-weight:700;font-size:var(--s-xl);line-height:var(--lh-snug)}
:lang(en) .welcome .tag{letter-spacing:-.02em}
.welcome .sub{text-align:center;color:var(--c-text2);font-size:var(--s-sm);max-width:32ch;margin:0 auto 14px}
.welcome .btn.ghost{background:var(--c-surface);border-color:var(--c-line)}
@keyframes splashOut{to{opacity:0;visibility:hidden}}

/* ── celebration (order placed) ── */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:4px;animation:drop 1.9s var(--m-ease) forwards}
@keyframes drop{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}

/* ════════════ phone apps (customer, courier) ════════════ */
.phone{max-width:480px;margin:0 auto;min-height:100dvh;background:var(--c-bg);position:relative}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;min-height:60px;background:rgba(255,248,239,.9);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.topbar h1{font-size:var(--s-lg);font-weight:700}
.topbar.title{padding-top:calc(18px + env(safe-area-inset-top))}
.topbar.title h1{font-size:var(--s-h1)}
.topbar.dark{background:var(--c-dark);color:var(--c-onDark)}
.screen{padding:0 16px calc(112px + env(safe-area-inset-bottom));animation:screenIn var(--m-base) var(--m-ease)}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}}
/* bottom navigation: a calm bar on light screens, smoked glass over video */
.tabbar{position:fixed;bottom:0;inset-inline:0;max-width:480px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-top:1px solid var(--c-line);z-index:30;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabbar button{border:0;background:none;min-height:52px;padding:6px 0 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:500;color:var(--c-text3);cursor:pointer;position:relative;transition:color var(--m-fast)}
.tabbar button svg{width:24px;height:24px;transition:transform var(--m-fast) var(--m-spring)}
.tabbar button:active svg{transform:scale(.86)}
.tabbar button[aria-current="page"]{color:var(--c-ink);font-weight:600}
.tabbar button[aria-current="page"] svg{stroke-width:2.2}
.tabbar button[aria-current="page"]::before{content:"";position:absolute;top:-6px;width:20px;height:3px;border-radius:0 0 3px 3px;background:var(--c-accent)}
.tabbar.dark{background:rgba(23,20,18,.72);border-top-color:rgba(255,248,239,.08)}
.tabbar.dark button{color:rgba(255,248,239,.6)}
.tabbar.dark button[aria-current="page"]{color:var(--c-onDark)}
.tabbar .dot{position:absolute;top:2px;inset-inline-end:calc(50% - 22px);min-width:18px;height:18px;border-radius:9px;background:var(--c-accent);color:var(--c-ink);font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;font-family:var(--f-latin);box-shadow:0 0 0 2px var(--c-surface)}
.tabbar.dark .dot{box-shadow:0 0 0 2px var(--c-dark)}
.tabbar .dot.bump{animation:bump .5s var(--m-spring)}
@keyframes bump{40%{transform:scale(1.45)}}

/* ── discovery feed (full-screen video, minimal overlays) ── */
.feed{height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;background:var(--c-dark);color:var(--c-onDark);scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.reel{height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;background:var(--c-dark)}
.reel video,.reel .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* legibility scrim only (not decoration): dark at the edges where text sits */
.reel .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(23,20,18,.88) 0,rgba(23,20,18,.42) 30%,rgba(23,20,18,0) 52%),linear-gradient(to bottom,rgba(23,20,18,.5) 0,rgba(23,20,18,0) 16%)}
.reel .head{position:absolute;top:0;inset-inline:0;padding:calc(16px + env(safe-area-inset-top)) 16px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.reel .side{position:absolute;inset-inline-end:8px;bottom:calc(250px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;align-items:center;z-index:2}
.reel .side button{border:0;background:transparent;color:var(--c-onDark);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;filter:drop-shadow(0 1px 8px rgba(0,0,0,.35));transition:transform var(--m-fast) var(--m-spring),color var(--m-fast)}
.reel .side button:active{transform:scale(.82)}
.reel .side button svg{width:28px;height:28px}
.reel .side button.on{color:var(--c-accent)}
.reel .side button.on svg{fill:currentColor}
.reel .side button.on.burst svg{animation:burst .45s var(--m-spring)}
@keyframes burst{40%{transform:scale(1.35)}}
.reel .side small{font-size:var(--s-xs);margin-top:-10px;font-family:var(--f-latin);font-weight:500;opacity:.92}
.reel .meta{position:absolute;inset-inline:0;bottom:calc(84px + env(safe-area-inset-bottom));padding:0 16px;z-index:2;display:flex;flex-direction:column;gap:10px}
/* The caption block spans the full width and its top edge overlaps the bottom of the action rail (same z-index,
   later in the DOM, so it took the taps). Keep the rail above it so Share and Restaurant always receive the tap. */
.reel .side{z-index:3}
.reel .who{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:var(--s-lg);background:none;border:0;color:var(--c-onDark);padding:0;cursor:pointer;text-align:start;min-height:44px}
.reel .who .av{width:36px;height:36px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:15px;font-weight:700;background:var(--c-onDark);color:var(--c-ink);box-shadow:0 0 0 2px rgba(255,248,239,.25)}
.reel .facts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:var(--s-xs);color:var(--c-onDark2)}
.reel .caption{font-size:var(--s-sm);color:rgba(255,248,239,.9);max-width:84%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chip-dark{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);background:rgba(255,248,239,.16);color:var(--c-onDark);font-size:var(--s-xs);font-weight:600;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chip-dark.lime,.chip-dark.on{background:var(--c-onDark);color:var(--c-ink)}
.chip-dark.accent{background:var(--c-accent);color:var(--c-ink)}
/* the order card: one white card, one black action */
.dishes{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.dishes::-webkit-scrollbar{display:none}
.dish{flex:0 0 calc(100% - 36px);scroll-snap-align:start;display:flex;align-items:center;gap:12px;background:var(--c-surface);color:var(--c-text);border-radius:var(--r-lg);padding:8px;padding-inline-start:16px;box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.dishes>.dish:only-child{flex-basis:100%}
.dish .name{font-weight:600;line-height:var(--lh-snug);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dish .price{font-family:var(--f-latin);font-weight:500;font-size:var(--s-sm);color:var(--c-text2)}
.dish .add{flex:none;min-height:48px;padding:0 18px;border-radius:var(--r-pill);border:0;background:var(--c-primary);color:var(--c-onPrimary);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform var(--m-fast) var(--m-spring),background var(--m-fast)}
.dish .add:active{transform:scale(.94)}
.dish .add.done{background:var(--c-accent);color:var(--c-onAccent);animation:bump .45s var(--m-spring)}
.dish .add:disabled{background:var(--c-surface2);color:var(--c-text3)}

/* ── explore / browsing ── */
.home-hero{padding:8px 0 4px}
.hello{margin:8px 0 18px}
.hello h2{font-size:var(--s-xl)}
.hello p{color:var(--c-text2);font-size:var(--s-sm);margin-top:4px}
.search{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-text2);box-shadow:inset 0 0 0 1px var(--c-line);transition:box-shadow var(--m-fast)}
.search input{flex:1;border:0;outline:0;background:none;min-width:0;color:var(--c-text)}
.search input::placeholder{color:var(--c-text3)}
.search:focus-within{box-shadow:inset 0 0 0 1.5px var(--c-ink),0 0 0 4px var(--c-accentSoft)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--c-line);background:var(--c-surface);border-radius:var(--r-pill);min-height:40px;padding:0 16px;white-space:nowrap;cursor:pointer;font-size:var(--s-sm);font-weight:500;color:var(--c-text);transition:background var(--m-fast),color var(--m-fast),transform var(--m-fast)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed=true]{background:var(--c-ink);color:var(--c-onInk);border-color:var(--c-ink)}
/* text tabs (For You · Friends · Trending), as in the reference */
.tabs{display:flex;align-items:center;gap:18px}
.tabs button{border:0;background:none;padding:8px 0;min-height:40px;font:inherit;font-size:var(--s-md);font-weight:500;color:var(--c-text3);cursor:pointer;position:relative;transition:color var(--m-fast)}
.tabs button[aria-selected=true]{color:var(--c-text);font-weight:700;font-size:var(--s-lg)}
.tabs button[aria-selected=true]::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:2.5px;border-radius:2px;background:currentColor}
.tabs.dark button{color:rgba(255,248,239,.62);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.tabs.dark button[aria-selected=true]{color:var(--c-onDark)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:28px 0 12px;gap:12px}
.section-head h2{font-size:var(--s-lg);font-weight:700}
.section-head .btn.ghost{color:var(--c-accentText);padding:0;min-height:36px}
.rail-x{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;padding-bottom:6px;scrollbar-width:none;scroll-padding-inline:16px}
.rail-x::-webkit-scrollbar{display:none}
.card-media{flex:0 0 260px;scroll-snap-align:start;border:0;padding:0;background:none;text-align:start;cursor:pointer;color:inherit;transition:transform var(--m-base) var(--m-ease)}
.card-media:active{transform:scale(.98)}
.media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--c-sand);aspect-ratio:4/3}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--m-ease)}
.card-media:hover .media img{transform:scale(1.03)}
.media .tile{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:44px;font-weight:700;color:rgba(255,255,255,.95)}
.media .over{position:absolute;inset-inline-start:10px;bottom:10px;display:flex;gap:6px}
.media .over .chip-dark{background:rgba(255,255,255,.92);color:var(--c-ink)}
.card-body{padding:10px 2px 0;display:flex;flex-direction:column;gap:2px}
.card-body h3{font-size:var(--s-md);font-weight:600}
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:var(--s-xs);color:var(--c-text2)}
.facts svg{flex:none}
.list-card{display:flex;gap:14px;align-items:center;padding:12px 0;border:0;border-bottom:1px solid var(--c-line);background:none;width:100%;text-align:start;cursor:pointer;color:inherit}
.list-card:last-child{border-bottom:0}
.list-card .media{flex:none;width:84px;aspect-ratio:1;border-radius:var(--r-md)}
.list-card .media .tile{font-size:28px}

/* ── restaurant page: photo hero, content sheet overlapping it ── */
.r-hero{position:relative;margin:0 -16px;min-height:300px;color:var(--c-onDark);background:var(--c-sand);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.r-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r-hero .shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(23,20,18,.35) 0,rgba(23,20,18,0) 30%)}
.r-top{position:absolute;top:0;inset-inline:0;z-index:3;display:flex;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 12px 12px;color:var(--c-ink)}
.r-top .icon-btn{background:rgba(255,248,239,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.r-top .icon-btn[aria-pressed=true]{color:var(--c-accentText)}
.r-top .icon-btn[aria-pressed=true] svg{fill:var(--c-accent);stroke:var(--c-ink)}
.r-sheet{position:relative;margin:-28px -16px 0;padding:24px 16px 0;background:var(--c-bg);border-radius:var(--r-xl) var(--r-xl) 0 0;display:flex;flex-direction:column;gap:6px}
.r-sheet h1{font-size:var(--s-xxl)}
.r-sheet .by{color:var(--c-accentText);font-weight:500}
.r-sheet .desc{color:var(--c-text2);font-size:var(--s-sm)}
.r-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.r-chips .badge{background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line)}
.r-chips .badge.open{background:var(--c-successSoft);color:var(--c-success);box-shadow:none}
.info-strip{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 4px;padding:14px 0;border-block:1px solid var(--c-line)}
.info-strip div{padding:0 12px;display:flex;flex-direction:column;gap:2px}
.info-strip div+div{border-inline-start:1px solid var(--c-line)}
.info-strip div:first-child{padding-inline-start:0}
.info-strip strong{font-family:var(--f-latin);font-size:var(--s-md);font-weight:600;direction:ltr;unicode-bidi:isolate;text-align:start}
[dir=rtl] .info-strip strong{text-align:end;align-self:flex-start}
.info-strip span{font-size:var(--s-xs);color:var(--c-text2)}
.cat-nav{position:sticky;top:0;z-index:15;background:rgba(255,248,239,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin:8px -16px 0;padding:10px 16px 8px}
.item{display:flex;gap:14px;align-items:center;padding:16px 0;border:0;border-bottom:1px solid var(--c-line);cursor:pointer;background:none;width:100%;text-align:start;color:inherit}
.item h4{font-weight:600}
.item .price{font-weight:500}
.item .thumb{position:relative;width:104px;height:104px;border-radius:var(--r-lg);flex:none;overflow:hidden;background:var(--c-sand);display:grid;place-items:center;font-family:var(--f-display);font-size:30px;font-weight:700;color:var(--c-text2)}
.item .thumb .plus{position:absolute;bottom:6px;inset-inline-end:6px;width:34px;height:34px;border-radius:50%;background:var(--c-ink);color:var(--c-onInk);display:grid;place-items:center;box-shadow:0 0 0 3px var(--c-bg);transition:transform var(--m-fast) var(--m-spring)}
.item:active .thumb .plus{transform:scale(1.15)}
.item.off{opacity:.45;cursor:not-allowed}

/* ── options (radio / checkbox) — round markers at the row's end ── */
.opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 0;border-bottom:1px solid var(--c-line);cursor:pointer}
.opt:last-child{border-bottom:0}
.opt input,.choice input{appearance:none;-webkit-appearance:none;flex:none;order:3;width:24px;height:24px;margin:0;border-radius:50%;border:1.5px solid var(--c-lineStrong);background:var(--c-surface) center/14px no-repeat;cursor:pointer;transition:background-color var(--m-fast),border-color var(--m-fast),transform var(--m-fast) var(--m-spring)}
.opt input:checked,.choice input:checked{background-color:var(--c-ink);border-color:var(--c-ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF8EF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");animation:bump .35s var(--m-spring)}
.opt input:disabled{opacity:.5}
.opt .num{order:2;color:var(--c-text2)}
.opt .opt-ic{width:36px;height:36px;border-radius:12px;background:var(--c-sand);flex:none}
.opt.off{opacity:.45;cursor:not-allowed}
.choice{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border:1px solid var(--c-line);border-radius:var(--r-md);cursor:pointer;background:var(--c-surface);transition:border-color var(--m-fast),box-shadow var(--m-fast)}
.choice:has(input:checked){border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
.stepper{display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line)}
.stepper button{width:44px;height:44px;border:0;background:none;font-size:20px;line-height:1;cursor:pointer;border-radius:50%;display:grid;place-items:center;color:var(--c-text)}
.stepper button:active{background:var(--c-surface2)}
.stepper span{min-width:22px;text-align:center;font-weight:600;font-family:var(--f-latin)}
.stepper.sm button{width:36px;height:36px;font-size:18px}

/* ── cart & checkout ── */
.co-section{padding:18px 0;border-bottom:1px solid var(--c-line);display:flex;flex-direction:column;gap:12px}
.co-section:last-of-type{border-bottom:0}
.co-section > h3,.co-section .h{font-size:var(--s-md);font-weight:600}
.cart-line{display:flex;align-items:center;gap:12px}
.cart-line .thumb{width:64px;height:64px;flex:none;border-radius:var(--r-md);background:var(--c-sand);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--c-text2);overflow:hidden}
.cart-line .name{font-weight:600}
.cart-line .opts{font-size:var(--s-xs);color:var(--c-text2)}
.cart-line .price{font-family:var(--f-latin);font-weight:600;font-size:var(--s-sm)}
.co-row{display:flex;align-items:center;gap:12px;min-height:48px}
.co-row .ic{width:40px;height:40px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line)}
.co-row .lbl{font-weight:500}
.co-row .sub{font-size:var(--s-xs);color:var(--c-text2)}
.bill{display:flex;flex-direction:column;gap:10px;font-size:var(--s-sm)}
.bill .line{display:flex;justify-content:space-between;gap:10px;color:var(--c-text2)}
.bill .line .num{color:var(--c-text)}
.bill .line.minus .num{color:var(--c-success)}
.bill .line.info{color:var(--c-text3);font-size:var(--s-xs)}
.bill .total{border-top:1px solid var(--c-line);padding-top:12px;margin-top:2px;font-size:var(--s-lg);font-weight:700;color:var(--c-text)}
.plus-state{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);background:var(--c-accentSoft);color:var(--c-ink);border:0;width:100%;text-align:start;cursor:pointer;font-size:var(--s-sm)}
.plus-state .tick{flex:none;width:26px;height:26px;border-radius:50%;background:var(--c-ink);color:var(--c-onInk);display:grid;place-items:center;font-weight:700}
.plus-state.idle{background:var(--c-surface2);cursor:default}
.plus-state.idle .tick{background:var(--c-surface);color:var(--c-text3)}
.plus-state u{text-underline-offset:3px}
/* the pay bar: total on one side, the action on the other */
.sticky-cta{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));padding:12px 0 16px;background:linear-gradient(to top,var(--c-bg) 72%,rgba(255,248,239,0));z-index:5}
.pay-bar{display:flex;align-items:center;gap:16px}
.pay-bar .sum{display:flex;flex-direction:column;line-height:1.2}
.pay-bar .sum span{font-size:var(--s-xs);color:var(--c-text2)}
.pay-bar .sum strong{font-family:var(--f-latin);font-size:var(--s-xl);font-weight:700;letter-spacing:-.02em}
.pay-bar .btn{flex:1}

/* ── order tracking ── */
.on-dark{background:var(--c-dark);color:var(--c-onDark)}
.status-card{border-radius:var(--r-lg);padding:var(--sp-5);display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.status-card .eta{font-family:var(--f-latin);font-size:var(--s-hero);font-weight:700;line-height:1;letter-spacing:-.03em}
.track-hero{display:flex;flex-direction:column;gap:6px;padding:8px 0 4px}
.track-hero .big{font-family:var(--f-display);font-size:var(--s-display);font-weight:700;line-height:var(--lh-tight)}
:lang(en) .track-hero .big{letter-spacing:-.03em}
.track-hero .big .num{font-weight:700}
.track-hero p{color:var(--c-text2)}
.trip{display:flex;align-items:center;gap:0;margin:14px 0 4px}
.trip .node{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line);color:var(--c-text);position:relative;z-index:1;transition:background var(--m-base),color var(--m-base)}
.trip .node.on{background:var(--c-ink);color:var(--c-onInk);box-shadow:none}
.trip .node.now{background:var(--c-accent);color:var(--c-ink);box-shadow:0 0 0 6px var(--c-accentSoft)}
.trip .seg{flex:1;height:4px;margin:0 -2px;border-radius:2px;background:var(--c-line);position:relative;overflow:hidden}
.trip .seg i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--c-accent);border-radius:2px;transition:width .9s var(--m-ease)}
.trip-labels{display:flex;justify-content:space-between;font-size:var(--s-xs);color:var(--c-text2)}
.track-code{font-family:var(--f-latin);font-weight:700;font-size:44px;letter-spacing:.24em;direction:ltr;text-align:center}
/* schematic map: quiet grid, lavender route (real map tiles need a maps provider — launch blocker) */
.route{position:relative;height:200px;border-radius:var(--r-lg);background-color:#F6EEE3;overflow:hidden;background-image:linear-gradient(rgba(23,20,18,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,20,18,.045) 1px,transparent 1px),linear-gradient(rgba(23,20,18,.03) 2px,transparent 2px),linear-gradient(90deg,rgba(23,20,18,.03) 2px,transparent 2px);background-size:22px 22px,22px 22px,88px 88px,88px 88px}
.route .path{position:absolute;top:99px;inset-inline:44px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--c-accent) 0 8px,transparent 8px 14px)}
.route .pin{position:absolute;top:80px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--c-ink);background:var(--c-surface);box-shadow:0 6px 16px -8px rgba(23,20,18,.4)}
.route .pin.home{background:var(--c-ink);color:var(--c-onInk)}
.route .courier{position:absolute;top:78px;width:46px;height:46px;border-radius:50%;background:var(--c-accent);color:var(--c-ink);display:grid;place-items:center;transition:inset-inline-start .9s var(--m-ease);box-shadow:0 0 0 8px rgba(185,154,255,.3)}
.person{display:flex;align-items:center;gap:12px}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--c-accentSoft);display:grid;place-items:center;font-weight:700;font-family:var(--f-display);color:var(--c-ink);flex:none}
.on-dark .avatar{background:var(--c-dark3);color:var(--c-onDark)}
.notify{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--sh-card)}
.notify .app{width:40px;height:40px;flex:none;border-radius:12px;background:var(--c-accent);color:var(--c-ink);display:grid;place-items:center}
.notify strong{display:block;font-size:var(--s-sm)}
.notify span{font-size:var(--s-xs);color:var(--c-text2)}
/* YUM+ — the lavender card ("It's YUM time.") */
.plus-hero{border-radius:var(--r-xl);padding:24px 22px;background:var(--c-accent);color:var(--c-ink);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.plus-hero .muted,.plus-hero p{color:rgba(23,20,18,.78)}
.plus-hero .price{font-family:var(--f-latin);font-size:clamp(34px,10.5vw,var(--s-hero));font-weight:700;line-height:1;letter-spacing:-.03em}
.plus-hero .go{position:absolute;inset-inline-end:18px;bottom:18px;width:48px;height:48px;border-radius:50%;background:var(--c-surface);display:grid;place-items:center}
.plus-hero .chip-dark{background:var(--c-ink);color:var(--c-onInk)}
.benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.benefits li{display:flex;gap:10px;align-items:flex-start;font-size:var(--s-sm)}
.benefits li::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--c-accent)}
/* YUM+ v2 page: benefit groups on sand, a small lock for member-only parts, the partner badge */
.plus-group{border-radius:var(--r-lg);padding:18px;background:var(--c-sand);display:flex;flex-direction:column;gap:12px}
.plus-group h3{margin:0;display:flex;align-items:center;gap:8px}
.plus-terms{font-size:var(--s-xs);color:var(--c-text2);display:flex;flex-direction:column;gap:6px;margin:0;padding-inline-start:18px}
.plus-accept{display:flex;gap:10px;align-items:flex-start;font-size:var(--s-sm)}
.plus-receipt{display:flex;justify-content:space-between;gap:8px;font-size:var(--s-sm);padding:10px 0;border-bottom:1px solid var(--c-line)}
.plus-receipt:last-child{border-bottom:0}
.plus-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-pill);background:var(--c-accent);color:var(--c-ink);font-family:var(--f-latin);font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1.5;white-space:nowrap}
.lock-row{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--r-md);background:var(--c-surface2);font-size:var(--s-sm);color:var(--c-text2)}
.lock-row svg{flex:none}
.fp-top{display:flex;gap:8px;flex-wrap:wrap}
.fp-top .chip{cursor:default}
.dish-match{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--c-line)}
.dish-match:last-child{border-bottom:0}
.dish-match .pct{font-family:var(--f-latin);font-weight:700;font-size:20px;min-width:52px;text-align:center;color:var(--c-ink);background:var(--c-accentSoft);border-radius:var(--r-sm);padding:6px 4px}
.evo-row{display:flex;gap:10px;align-items:center;font-size:var(--s-sm)}
.evo-row .bar{height:8px;border-radius:4px;background:var(--c-accent)}

/* ── account: grouped list rows instead of a stack of cards ── */
.me-head{display:flex;align-items:center;gap:14px;padding:8px 0}
.me-head .avatar{width:64px;height:64px;font-size:24px}
.group{background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);overflow:hidden}
.group-title{font-size:var(--s-xs);font-weight:600;color:var(--c-text2);margin:8px 4px -6px;text-transform:none}
.list-row{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:12px 16px;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background var(--m-fast)}
.list-row+.list-row{border-top:1px solid var(--c-line)}
.list-row:active{background:var(--c-surface2)}
.list-row .ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--c-surface2);color:var(--c-ink)}
.list-row .t{font-weight:600}
.list-row .s{font-size:var(--s-xs);color:var(--c-text2)}
.list-row .chev{color:var(--c-text3)}
.points{font-family:var(--f-latin);font-size:39px;font-weight:700;line-height:1;letter-spacing:-.03em}

/* ── login ── */
.login{min-height:100dvh;display:grid;place-items:center;padding:20px;background:var(--c-bg)}
.login.dark{background:var(--c-dark);color:var(--c-onDark)}
.login .card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:24px;animation:rise var(--m-slow) var(--m-ease)}
.login.dark .input{background:var(--c-dark2);border-color:var(--c-dark3);color:var(--c-onDark)}
.login.dark .chip{background:var(--c-dark2);border-color:var(--c-dark3);color:var(--c-onDark)}
.login.dark .hint,.login.dark .muted{color:var(--c-onDark2)}
.login-panel{background:var(--c-surface);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-card)}
.login.dark .login-panel{background:transparent;padding:0;box-shadow:none}
.login-foot{text-align:center;line-height:1.7}.login-foot a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ════════════ dashboards (dense, calm) ════════════ */
.dash{display:grid;grid-template-columns:236px 1fr;min-height:100dvh;background:var(--c-bg)}
.rail{background:var(--c-dark);color:var(--c-onDark2);padding:22px 12px;position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.rail .brand-row{padding:2px 12px 4px;color:var(--c-onDark)}
.rail .sub{padding:4px 12px 20px;color:#9E958C;font-size:var(--s-xs)}
.rail a{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--c-onDark2);font-weight:500;font-size:var(--s-sm)}
.rail a:hover:not([aria-current=page]){background:var(--c-dark2);color:var(--c-onDark)}
.rail a[aria-current=page]{background:var(--c-dark2);color:var(--c-onDark)}
.rail a[aria-current=page]::before{content:"";position:absolute;inset-inline-start:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--c-accent)}
.rail-group{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.rail-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:6px 12px;background:none;border:0;border-radius:var(--r-sm);color:#9E958C;font:inherit;font-size:var(--s-xs);font-weight:700;letter-spacing:.02em;cursor:pointer;text-align:start}
.rail-head:hover{color:var(--c-onDark)}
.rail-head svg{transition:transform var(--m-base) var(--m-ease)}
.rail-group.folded .rail-head svg{transform:rotate(90deg)}
[dir=rtl] .rail-group.folded .rail-head svg{transform:rotate(-90deg)}
.rail-items{display:flex;flex-direction:column;gap:2px}
.rail-group.folded .rail-items{display:none}
.rail .foot{margin-top:auto;padding:12px;font-size:var(--s-xs);color:#9E958C}
.rail .foot .btn{background:transparent;border-color:var(--c-dark3);color:var(--c-onDark)}
.main{padding:28px 32px 64px;min-width:0}
.main>header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.main>header h1{font-size:var(--s-xl);font-weight:700}
.main>header p{color:var(--c-text2);font-size:var(--s-sm);margin-top:4px;max-width:72ch}
.main .panel{border-radius:var(--r-md);padding:20px;box-shadow:none;border:1px solid var(--c-line)}
.main .panel h3{font-size:var(--s-md)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--c-line);border-radius:var(--r-md);overflow:hidden;margin-bottom:20px;border:1px solid var(--c-line)}
.kpi{background:var(--c-surface);padding:16px 18px}
.kpi .v{font-family:var(--f-latin);font-size:var(--s-xxl);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.kpi .l{font-size:var(--s-sm);color:var(--c-text2);margin-top:4px}
.kpi .d{font-size:var(--s-xs);color:var(--c-text2);margin-top:2px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
.board{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:16px;align-items:start}
.lane{background:var(--c-surface2);border-radius:var(--r-md);padding:10px;min-height:220px}
.lane h3{font-size:var(--s-sm);font-weight:700;display:flex;justify-content:space-between;padding:4px 6px 10px}
.ticket{background:var(--c-surface);border-radius:var(--r-sm);padding:14px;margin-bottom:8px;border-inline-start:3px solid transparent}
.ticket.new{border-inline-start-color:var(--c-accent);animation:rise var(--m-base) var(--m-ease)}
.ticket.late{border-inline-start-color:var(--c-danger)}
.bars{display:flex;align-items:flex-end;gap:5px;height:120px}
.bars div{flex:1;background:var(--c-ink);border-radius:3px 3px 0 0;min-height:2px;position:relative}
.bars div:hover{background:var(--c-accent)}
.bars div:hover::after{content:attr(data-v);position:absolute;bottom:100%;inset-inline-start:50%;transform:translateX(-50%);font-size:11px;background:var(--c-dark);color:var(--c-onDark);padding:2px 6px;border-radius:4px;white-space:nowrap}
@media (max-width:860px){
  .dash{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;overflow-x:auto;padding:10px}
  .rail .brand-row,.rail .sub{display:none}
  /* Phones: groups flatten into the one scrolling tab row, nothing folds. */
  .rail-group,.rail-items,.rail-group.folded .rail-items{display:contents}
  .rail-head{display:none}
  /* Phones: the footer collapses to its sign-out button, last in the scrolling tab row. */
  .rail .foot{display:flex;flex-direction:row;align-items:center;margin:0;padding:0 4px;flex:none}
  .rail .foot > :not(.btn){display:none}
  .rail .foot .btn{white-space:nowrap}
  .rail a{white-space:nowrap}
  .rail a[aria-current=page]::before{inset-inline-start:12px;inset-inline-end:12px;top:auto;bottom:2px;width:auto;height:3px}
  .main{padding:18px 16px 48px}
  .board{grid-template-columns:1fr}
}

/* ── staging marker (server DEPLOY_ENV=staging) ── */
.staging-bar{position:fixed;top:0;inset-inline:0;z-index:300;background:var(--c-accent);color:var(--c-ink);font-size:var(--s-xs);font-weight:600;text-align:center;padding:3px 8px;pointer-events:none;opacity:.94}

/* ── restaurant-first feed (vertical = restaurants, horizontal = their dishes) ── */
.rfeed{height:100dvh;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;background:var(--c-dark);color:var(--c-onDark);scrollbar-width:none;outline:0}
.rfeed::-webkit-scrollbar{display:none}
.rfeed-head{position:fixed;top:0;inset-inline:0;max-width:480px;margin:0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 8px 10px 16px;padding-inline:16px 8px;color:var(--c-onDark);pointer-events:none}
.rfeed-head>*{pointer-events:auto}
.rfeed-head .icon-btn{filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
.rrow{height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;background:var(--c-dark)}
.rslide{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.rslide .meta{bottom:calc(84px + env(safe-area-inset-bottom))}
.rslide .side{bottom:calc(220px + env(safe-area-inset-bottom))}
.rslide .dishes{flex-direction:column;overflow:visible;margin-inline:0;padding-inline:0;gap:8px}
.rslide .dish{flex:none;width:100%}
.rslide .facts span:not(.chip-dark){max-width:100%}
/* Video gestures: one layer over the clip catches taps (play/pause, double-tap like); swipes pass through to the
   scrollers. manipulation = no double-tap zoom, pans and pinch still native. */
.tap-layer{position:absolute;inset:0;z-index:1;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tap-heart{position:absolute;width:96px;height:96px;margin:-56px 0 0 -48px;pointer-events:none;color:#fff;filter:drop-shadow(0 6px 18px rgba(136,85,255,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.25));animation:tap-heart .95s cubic-bezier(.2,.9,.25,1) forwards}
.tap-heart svg{display:block;width:100%;height:100%;fill:var(--c-accent)}
.tap-heart.still{animation:tap-heart-still .6s ease-out forwards}
@keyframes tap-heart{0%{opacity:0;transform:rotate(var(--r)) scale(.2)}14%{opacity:1;transform:rotate(var(--r)) scale(1.18)}26%{transform:rotate(var(--r)) scale(.94)}38%{transform:rotate(var(--r)) scale(1)}72%{opacity:1;transform:rotate(var(--r)) scale(1) translateY(0)}100%{opacity:0;transform:rotate(var(--r)) scale(1.35) translateY(-46px)}}
@keyframes tap-heart-still{0%,70%{opacity:1}100%{opacity:0}}
.pause-ind{position:absolute;top:50%;left:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;pointer-events:none;color:#fff;background:rgba(8,8,8,.32);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:pause-in .18s var(--m-ease)}
.pause-ind svg{fill:currentColor;margin-left:4px}
@keyframes pause-in{from{opacity:0;transform:scale(1.25)}}
.dish-poster{position:absolute;inset:0;background:var(--c-dark2);display:flex;align-items:flex-start;justify-content:center}
.dish-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dish-title{position:relative;margin-top:30vh;padding:0 28px;font-family:var(--f-display);font-weight:700;font-size:clamp(34px,10vw,52px);line-height:var(--lh-tight);text-align:center;color:var(--c-onDark);text-shadow:0 2px 24px rgba(0,0,0,.3)}
:lang(en) .dish-title{letter-spacing:-.03em}
.play-btn{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;border:0;background:rgba(23,20,18,.45);backdrop-filter:blur(8px);color:var(--c-onDark);display:grid;place-items:center;cursor:pointer;z-index:2}
.rfeed-end{display:grid;place-items:center;padding:24px}
.rfeed-state{display:grid;place-items:center;padding:24px;text-align:center}
.rfeed-state .wordmark{color:var(--c-onDark);opacity:.95}

/* ── one ordering flow (feed, stories and menu) ── */
.flow{padding-bottom:4px}
.flow h2{font-size:var(--s-xl)}
.flow .by{color:var(--c-accentText);font-weight:500}
.flow-media{margin:-8px -8px 4px;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--c-sand)}
.flow-media img{width:100%;height:100%;object-fit:cover}
.flow-steps{display:flex;gap:6px}
.flow-steps i{flex:1;height:3px;border-radius:2px;background:var(--c-line);transition:background var(--m-base)}
.flow-steps i.on{background:var(--c-ink)}
.flow-cta{gap:10px;position:sticky;bottom:0;padding-top:8px}
.mods{border:0;padding:0;margin:0;min-width:0}
.mods legend{display:flex;align-items:center;gap:10px;width:100%;font-weight:600;font-size:var(--s-md);padding:0 0 6px}
/* single choice with up to three options: a segmented pill row ("Single · Double · Triple") */
.mods.seg .seg-row{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:8px}
.mods.seg .opt{position:relative;flex-direction:column;justify-content:center;gap:0;min-height:56px;padding:6px 8px;border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-surface);text-align:center;font-weight:500;font-size:var(--s-sm);line-height:var(--lh-snug);transition:background var(--m-fast),color var(--m-fast),border-color var(--m-fast)}
.mods.seg .opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;border-radius:inherit;animation:none}
.mods.seg .opt .grow{flex:none}
.mods.seg .opt .num{order:0;font-size:11px}
.mods.seg .opt:has(input:checked){background:var(--c-ink);border-color:var(--c-ink);color:var(--c-onInk)}
.mods.seg .opt:has(input:checked) .num{color:rgba(255,248,239,.75)}
.mods.seg .opt:has(input:focus-visible){outline:2px solid var(--c-ink);outline-offset:3px}
label.btn:has(input:focus-visible){outline:2px solid var(--c-ink);outline-offset:3px}
.sugg{border:1px solid var(--c-line);border-radius:var(--r-lg);padding:10px 12px;background:var(--c-surface);transition:border-color var(--m-fast)}
.sugg.on{border-color:var(--c-ink)}
.sugg-thumb{width:56px;height:56px;flex:none;border-radius:var(--r-md);background:var(--c-sand);display:grid;place-items:center;overflow:hidden;font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--c-text2)}
.sugg-thumb img{width:100%;height:100%;object-fit:cover}
.sugg .add-ic{width:36px;height:36px;border-radius:50%;border:0;background:var(--c-ink);color:var(--c-onInk);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform var(--m-fast) var(--m-spring)}
.sugg .add-ic:active{transform:scale(.88)}
.flow-total{position:sticky;bottom:calc(-1 * var(--sp-5) - env(safe-area-inset-bottom));margin:0 calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5) - env(safe-area-inset-bottom));padding:12px var(--sp-5) calc(12px + env(safe-area-inset-bottom));background:var(--c-surface);border-top:1px solid var(--c-line);display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;font-size:var(--s-sm)}
.flow-total strong{font-family:var(--f-latin)}
.flow-total small{grid-column:1/-1;color:var(--c-text2);font-size:var(--s-xs)}
.done-mark{width:72px;height:72px;margin:8px auto 0;border-radius:50%;display:grid;place-items:center;background:var(--c-accent);color:var(--c-ink);animation:pop .5s var(--m-spring)}

/* ── restaurant stories ── */

/* ── taste onboarding ── */
.onboard{display:flex;flex-direction:column;gap:var(--sp-4);background:var(--c-bg);color:var(--c-text)}
.onboard.onboarding{position:fixed;inset:0;z-index:90;max-width:480px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));overflow:auto;animation:fade var(--m-base)}
.onboard.edit{min-height:100dvh;padding:12px 16px calc(118px + env(safe-area-inset-bottom))}
.onboard-top{display:flex;align-items:center;gap:12px}
.onboard-hello{padding:4px 0 0}
.onboard-hello h1{font-size:var(--s-h1);line-height:var(--lh-tight)}
.onboard-hello .txt,.onboard-hello .grow{padding-bottom:4px}
.onboard-body{flex:1}
.onboard-foot{position:sticky;bottom:0;padding-top:10px;background:linear-gradient(to top,var(--c-bg) 70%,rgba(255,248,239,0))}
.pick-grid{display:flex;flex-wrap:wrap;gap:8px}
.pick{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text);font:inherit;font-weight:500;cursor:pointer;transition:background var(--m-fast),border-color var(--m-fast),color var(--m-fast),transform var(--m-fast) var(--m-spring)}
.pick:active{transform:scale(.96)}
.pick .ic{display:grid;place-items:center;color:var(--c-text2)}
.pick[aria-pressed=true],.pick[aria-checked=true]{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-onInk)}
.pick[aria-pressed=true] .ic,.pick[aria-checked=true] .ic{color:var(--c-accent)}
.pick:disabled{opacity:.45;cursor:not-allowed}
.spice{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.spice .pick{flex-direction:column;justify-content:center;gap:2px;padding:8px 4px;border-radius:var(--r-md);min-height:72px}
.spice .pick span:first-child{font-size:12px;letter-spacing:-1px;white-space:nowrap}

/* ── food ratings ── */
.food-rate{border-top:1px solid var(--c-line);padding-top:12px}
.yn{display:inline-flex;gap:6px}
.yn .pick{min-height:36px;padding:0 14px;font-size:var(--s-sm)}

/* Light surfaces opened over dark screens (feeds, restaurant video player) keep the light theme. */
.sheet,.onboard{color:var(--c-text)}
:is(.on-dark,.feed,.rfeed) :is(.sheet,.onboard,.welcome,.splash) .btn.primary{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-onPrimary)}
:is(.on-dark,.feed,.rfeed) :is(.sheet,.onboard,.welcome,.splash) .btn.primary:hover:not(:disabled){background:var(--c-primaryHover);border-color:var(--c-primaryHover)}
:is(.on-dark,.feed,.rfeed) :is(.sheet,.onboard,.welcome,.splash) .btn.primary:disabled{background:var(--c-surface2);border-color:var(--c-surface2);color:var(--c-text3)}
:is(.on-dark,.feed,.rfeed) :is(.sheet,.onboard,.welcome,.splash) .btn:not(.primary):not(.ghost){background:var(--c-surface);border-color:var(--c-line);color:var(--c-text)}
:is(.on-dark,.feed,.rfeed) :is(.sheet,.onboard,.welcome,.splash) .skeleton{background:linear-gradient(90deg,var(--c-surface2) 0,var(--c-bg) 50%,var(--c-surface2) 100%);background-size:200% 100%}
:is(.on-dark,.feed,.rfeed) :is(.sheet,.onboard,.welcome,.splash) :focus-visible{outline-color:var(--c-ink)}

/* ── surface personalities (type & touch only; layouts unchanged) ──
   courier: read at a glance on the move → one notch larger type (--density), bigger targets, bold primary action.
   staff dashboards: dense but calm → tabular figures, compact rows, icons beside rail labels. */
.app-courier .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible}
.app-courier .chips .chip{flex-direction:column;min-height:68px;padding:8px 6px;gap:4px;border-radius:var(--r-md);font-size:var(--s-sm);white-space:normal;text-align:center;line-height:var(--lh-snug)}
.app-courier .btn{min-height:52px}
.app-courier .btn.sm{min-height:44px}
.app-courier .btn.lg{min-height:60px;font-size:var(--s-h3);font-weight:var(--fw-bold)}
.app-courier .panel h3{font-size:var(--s-h3)}
.main>header h1{letter-spacing:var(--tr-title)}
.dash .table td .num,.dash .kpi .v{font-feature-settings:"tnum","case"}
/* ── Courier app: bottom navigation and My Work (شغلي). Scoped to .courier; existing roles only. ── */
.courier .courier-tabs{grid-template-columns:repeat(3,1fr)}
.courier .courier-tabs button{min-height:56px;font-size:var(--s-sm)}
.my-work .work-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.my-work .work-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--sh-card);min-height:150px}
.my-work .work-ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);background:var(--c-sand);color:var(--c-ink);flex:none}
.my-work .work-num{font-size:var(--s-display);line-height:1.1;font-weight:700;color:var(--c-text)}
.my-work .work-num small{font-size:var(--s-md);font-weight:600;color:var(--c-text2)}
.my-work .work-label{font-size:var(--s-md);font-weight:600;color:var(--c-text)}
.my-work .level-card h3{font-size:var(--s-md)}
.my-work .level-name{display:flex;align-items:center;gap:10px;font-size:var(--s-xl)}
.my-work .level-name.lv-excellent{color:var(--c-success)}
.my-work .level-name.lv-good{color:var(--c-accentText)}
.my-work .level-name.lv-needs_improvement{color:var(--c-warning)}
.my-work .level-name.lv-needs_improvement svg{transform:rotate(90deg)}
.my-work .level-meter{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.my-work .level-meter i{height:10px;border-radius:var(--r-pill);background:var(--c-surface2)}
.my-work .level-meter.lv-excellent i.on{background:var(--c-success)}
.my-work .level-meter.lv-good i.on{background:var(--c-accent)}
.my-work .level-meter.lv-needs_improvement i.on{background:var(--c-warning)}
.my-work .level-msg{font-size:var(--s-md);font-weight:500}
.my-work .tip-card{gap:12px;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--c-accentSoft);color:var(--c-text);font-size:var(--s-md);font-weight:500}
.my-work .tip-card .work-ico{background:var(--c-surface)}
.my-work .segmented{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--c-surface2)}
.my-work .segmented button{min-height:48px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--c-text2);font:inherit;font-size:var(--s-md);font-weight:600;cursor:pointer}
.my-work .segmented button[aria-selected=true]{background:var(--c-ink);color:var(--c-onInk)}
.courier .lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.courier .lang-grid .chip{min-height:52px;font-size:var(--s-md)}
.day-summary{text-align:center;align-items:stretch;gap:10px;padding:8px 4px}
.day-summary h2{font-size:var(--s-xl)}
.day-summary p{font-size:var(--s-lg);margin:0}
/* Bengali and Urdu script fall back to the device's fonts when YUM Sans lacks the glyphs. */
:lang(bn) body,body:lang(bn){font-family:var(--f-arabic),"Noto Sans Bengali","Hind Siliguri",sans-serif}
:lang(ur) body,body:lang(ur){font-family:var(--f-arabic),"Noto Naskh Arabic","Noto Nastaliq Urdu",sans-serif}

/* ── clip preview (restaurant content, admin moderation): vertical poster, m:ss, tap to play inline ── */
.clip-prev{display:flex;align-items:flex-start;gap:14px}
.clip-media{position:relative;flex:none;aspect-ratio:9/16;border-radius:var(--r-sm);overflow:hidden;background:var(--c-bg2)}
.clip-media video,.clip-poster img{width:100%;height:100%;object-fit:cover;display:block}
.clip-poster{all:unset;display:block;width:100%;height:100%;cursor:pointer;position:relative}
.clip-poster:disabled{cursor:default}
.clip-poster:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.clip-empty{display:grid;place-items:center;width:100%;height:100%;color:var(--c-text3)}
.clip-play{position:absolute;inset:0;margin:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(23,20,18,.55);color:var(--c-onDark)}
.clip-len{position:absolute;inset-inline-end:6px;bottom:6px;padding:1px 7px;border-radius:var(--r-pill);background:rgba(23,20,18,.62);color:var(--c-onDark);font-size:var(--s-xxs);font-weight:600}
.item-thumb{width:48px;height:48px;flex:none;border-radius:var(--r-xs);object-fit:cover;background:var(--c-bg2)}

/* ── launch: logo + «من الرياض 💜», fades into the app as soon as it is ready ── */
.launch{position:fixed;inset:0;z-index:210;background:#fff;color:var(--c-ink);display:grid;place-items:center;pointer-events:none;animation:launchIn .32s var(--m-ease) both}
.launch.out{animation:launchOut .28s var(--m-ease) forwards}
.launch .launch-mark{display:flex;flex-direction:column;align-items:center;gap:18px;padding-bottom:6vh}
.launch .made{display:inline-block;font-family:var(--f-arabic);font-size:var(--s-sm);font-weight:500;color:var(--c-text2);line-height:1.5;text-align:center;unicode-bidi:isolate;animation:launchLine .5s var(--m-ease) .08s both}
.launch .made-heart{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:1.05em;line-height:1}
@keyframes launchLine{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes launchIn{from{opacity:0}to{opacity:1}}
@keyframes launchOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.launch,.launch.out,.launch .made{animation:none}.launch.out{display:none}}

/* ── saved clips (حسابي ← المحفوظات): grid of vertical tiles ── */
.saved-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.saved-tile{all:unset;position:relative;aspect-ratio:9/16;border-radius:var(--r-sm);overflow:hidden;background:var(--c-bg2);cursor:pointer;display:block}
.saved-tile img{width:100%;height:100%;object-fit:cover;display:block}
.saved-tile:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.saved-tile .cap{position:absolute;inset-inline:0;bottom:0;padding:22px 8px 7px;background:linear-gradient(to top,rgba(23,20,18,.72),rgba(23,20,18,0));color:var(--c-onDark);display:flex;flex-direction:column;gap:1px;font-size:var(--s-xxs);line-height:1.3}
.saved-tile .cap strong{font-size:var(--s-xs);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.saved-tile .len{position:absolute;top:6px;inset-inline-end:6px;padding:1px 6px;border-radius:var(--r-pill);background:rgba(23,20,18,.55);color:var(--c-onDark);font-size:var(--s-xxs);font-weight:600}
.saved-tile.off img{opacity:.55}
.saved-tile .off-note{position:absolute;top:6px;inset-inline-start:6px;padding:1px 7px;border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-text);font-size:var(--s-xxs);font-weight:600}
.saved-player{position:fixed;inset:0;z-index:60;max-width:480px;margin:auto;background:var(--c-dark);color:var(--c-onDark)}
.saved-player .reel{height:100dvh}
.saved-player .close{position:absolute;top:calc(10px + env(safe-area-inset-top));inset-inline-start:10px;z-index:6;color:var(--c-onDark);background:rgba(23,20,18,.35)}
/* Clip comments switch (restaurant dashboard, creator app) */
.comments-switch{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:4px 0;font:inherit;color:var(--c-text2);cursor:pointer}
.comments-switch .knob{position:relative;width:36px;height:22px;border-radius:11px;background:var(--c-lineStrong);transition:background-color var(--m-fast)}
.comments-switch .knob::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:inset-inline-start var(--m-fast) var(--m-ease)}
.comments-switch.on{color:var(--c-text)}
.comments-switch.on .knob{background:var(--c-ink)}
.comments-switch.on .knob::after{inset-inline-start:16px}
.comments-switch:disabled{opacity:.6;cursor:default}

/* YUM customer app — premium refresh (22 Oct 2026, reference: docs/brand/yum-premium-reference-2026-10-22.webp).
   Loaded after base.css; every rule is scoped to .app-customer so the five staff apps are untouched.
   Colour roles for this app come from CUSTOMER_THEME (packages/brand) via --c-* overrides on .app-customer.
   Principles: sand ground, warm off-white cards with a hairline instead of shadows, near-black pill actions,
   lavender only for the one thing that is "on", photography (or a calm placeholder) as the hero. */

/* ── frosted bars and fades follow the customer ground ── */
.app-customer .topbar{background:var(--c-glass)}
.app-customer .cat-nav{background:var(--c-glass)}
.app-customer .sticky-cta{background:linear-gradient(to top,var(--c-bg) 72%,rgba(255,255,255,0))}
.app-customer .onboard-foot{background:linear-gradient(to top,var(--c-bg) 70%,rgba(255,255,255,0))}

/* ── type: big, confident page titles; quieter section heads ── */
.app-customer .topbar.title h1{font-size:var(--s-xxl);line-height:var(--lh-tight)}
:lang(en) .app-customer .topbar.title h1,.app-customer:lang(en) .topbar.title h1{letter-spacing:-.03em}
.app-customer .section-head{margin:26px 0 12px}
.app-customer .section-head h2{font-size:var(--s-lg)}
.app-customer .section-head .btn.ghost,.app-customer .section-head .link-btn{font-size:var(--s-sm);font-weight:600}

/* ── surfaces: hairline cards, almost no shadow ── */
.app-customer .panel,.app-customer .group,.app-customer .login-panel,.app-customer .notify{box-shadow:0 0 0 1px var(--c-line)}
.app-customer .panel.sand{box-shadow:none}
.app-customer .sheet{border-radius:28px 28px 0 0;box-shadow:0 -12px 40px -24px rgba(8,8,8,.35)}
.app-customer .scrim{background:rgba(8,8,8,.38)}
.app-customer .btn{border-color:var(--c-line)}
.app-customer .btn.primary,.app-customer .btn.dark{box-shadow:none}
.app-customer .btn.lg{min-height:56px;font-size:var(--s-md)}
.app-customer .input{background:var(--c-surface)}

/* ── bottom navigation: a calm off-white bar; the current tab is ink with a lavender dot under it ── */
.app-customer .tabbar{background:rgba(255,255,255,.94);border-top-color:var(--c-line);padding-top:4px}
.app-customer .tabbar button{gap:2px;font-size:10.5px}
.app-customer .tabbar button svg{width:24px;height:24px;stroke-width:1.8}
.app-customer .tabbar button[aria-current="page"] svg{stroke-width:2.1}
.app-customer .tabbar button[aria-current="page"]::before{top:auto;bottom:0;width:4px;height:4px;border-radius:50%}
.app-customer .tabbar.dark{background:rgba(8,8,8,.78)}

/* ── segmented control (Active · Past, Menu · Reviews · About) ── */
.segmented{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--c-surface2)}
.segmented button{min-height:40px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--c-text2);font:inherit;font-size:var(--s-sm);font-weight:600;cursor:pointer;transition:background var(--m-fast),color var(--m-fast)}
.segmented button[aria-selected=true]{background:var(--c-ink);color:var(--c-onInk)}
.segmented button:focus-visible{outline-offset:1px}
.segmented.sm button{min-height:34px;font-size:var(--s-xs)}

/* ── food image slot: real photo, or a warm tile with a line icon (no invented photography) ── */
.food-tile{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--c-surface2);display:grid;place-items:center;color:var(--c-text3);aspect-ratio:var(--ar,4/3)}
.food-tile[style*="--tint"]{background:color-mix(in srgb,var(--tint) 16%,var(--c-surface2))}
.food-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.food-tile .ft-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.72);color:var(--c-text2)}

/* ── empty, loading and error states share one calm look ── */
.app-customer .empty{padding:64px var(--sp-5) var(--sp-6)}
.app-customer .empty-ic{border-radius:50%;background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line)}
.app-customer .phone:not(.on-dark) .skeleton{background:linear-gradient(90deg,var(--c-surface2) 0,var(--c-surface) 50%,var(--c-surface2) 100%);background-size:200% 100%}
.app-customer .notice.info{background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line)}

/* ── dish details & customisation (one page) ── */
.app-customer .flow-hero{margin:-6px -6px 0;--ar:16/11;border-radius:22px}
.app-customer .flow-head h2{font-size:var(--s-xl);line-height:var(--lh-tight)}
:lang(en) .app-customer .flow-head h2,.app-customer:lang(en) .flow-head h2{letter-spacing:-.025em}
.app-customer .flow-price{font-size:var(--s-h2);font-weight:700}
.app-customer .mods legend{font-size:var(--s-md);font-weight:700}
.app-customer .mods.rows .opt-list{background:var(--c-surface);border-radius:var(--r-lg);padding:0 14px;box-shadow:0 0 0 1px var(--c-line)}
.app-customer .mods.rows .opt{min-height:52px}
.app-customer .mods.seg .opt{border-radius:16px;min-height:52px}
.sugg-sec{display:flex;flex-direction:column;gap:10px}
.sugg-sec h3{font-size:var(--s-md);font-weight:700}
.sugg-rail{display:flex;gap:10px;overflow-x:auto;margin-inline:calc(-1 * var(--sp-5));padding:2px var(--sp-5) 4px;scrollbar-width:none;scroll-snap-type:x proximity}
.sugg-rail::-webkit-scrollbar{display:none}
.sugg-card{flex:0 0 112px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;padding:6px 6px 8px;border:0;border-radius:18px;background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line);color:var(--c-text);font:inherit;text-align:start;cursor:pointer;transition:box-shadow var(--m-fast),transform var(--m-fast) var(--m-ease)}
.sugg-card:active{transform:scale(.97)}
.sugg-card.on{box-shadow:0 0 0 2px var(--c-accent);background:var(--c-accentSoft)}
.sugg-card .sugg-img{--ar:1;border-radius:13px}
.sugg-card .sugg-img .ft-ic{width:40px;height:40px}
.sugg-card .nm{font-size:var(--s-xs);font-weight:600;line-height:var(--lh-snug);padding:0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.sugg-card .pr{padding:0 2px;font-size:var(--s-xs);color:var(--c-text2)}
.sugg-card .tick{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--c-surface2);color:var(--c-ink)}
.sugg-card.on .tick{background:var(--c-accent);color:var(--c-onAccent)}
.sugg-open{padding:14px;border-radius:var(--r-lg);background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line)}
.app-customer .flow-cta{background:var(--c-bg);margin-inline:calc(-1 * var(--sp-5));padding:10px var(--sp-5) 4px;z-index:2}

/* ── feed: food first, then who, then ONE order action; social actions stay in a light side rail ── */
.app-customer .rslide .side{bottom:calc(196px + env(safe-area-inset-bottom));gap:6px}
.app-customer .reel .side button{width:46px;height:46px}
.app-customer .reel .side button svg{width:27px;height:27px}
.app-customer .reel .who{font-size:var(--s-sm);min-height:40px;gap:8px}
.app-customer .reel .who .av{width:28px;height:28px;border-radius:50%;font-size:var(--s-xs)}
.app-customer .reel .caption{font-family:var(--f-display);font-weight:700;font-size:var(--s-md);line-height:var(--lh-snug);color:var(--c-onDark);max-width:80%}
:lang(en) .app-customer .reel .caption,.app-customer:lang(en) .reel .caption{letter-spacing:-.02em}
.order-cta{display:flex;flex-direction:column;gap:6px;margin-top:4px;width:86%;max-width:340px}
.order-main{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:6px;padding-inline-start:14px;border:0;border-radius:18px;background:rgba(255,255,255,.97);color:var(--c-text);font:inherit;text-align:start;cursor:pointer;box-shadow:0 12px 30px -16px rgba(0,0,0,.55);transition:transform var(--m-fast) var(--m-ease)}
.order-main:active:not(:disabled){transform:scale(.98)}
.order-main .nm{display:block;font-size:var(--s-sm);font-weight:600;line-height:var(--lh-snug);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-main .pr{display:block;font-size:var(--s-xs);color:var(--c-text2)}
.order-main .go{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:var(--r-pill);background:var(--c-primary);color:var(--c-onPrimary);font-size:var(--s-sm);font-weight:600}
.order-main:disabled{cursor:not-allowed}
.order-main:disabled .go{background:var(--c-surface2);color:var(--c-text3)}
.order-alt{align-self:flex-start;min-height:30px;padding:0 10px;border:0;border-radius:var(--r-pill);background:rgba(8,8,8,.42);color:var(--c-onDark);font:inherit;font-size:var(--s-xxs);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-alt strong{font-weight:600}
.order-alt:disabled{opacity:.55;cursor:not-allowed}
/* Main feed: a lighter bottom block so the clip carries the screen. Name only (the logo lives on the side rail). */
.app-customer .rrow .who{font-size:var(--s-fn);font-weight:700;min-height:32px}
.app-customer .rrow .facts{font-size:var(--s-xxs);gap:2px 8px}
.app-customer .rrow .facts.deliv>span:not(.chip-dark)+span:not(.chip-dark)::before{margin-inline-end:8px}
.app-customer .rrow .facts svg{width:11px;height:11px}
.app-customer .rrow .facts .chip-dark{padding:2px 8px;font-size:var(--s-xxs);gap:4px}
.app-customer .rrow .caption{font-size:var(--s-sm);max-width:76%}
.app-customer .rrow .order-cta{gap:5px;width:76%;max-width:300px}
.app-customer .rrow .order-main{min-height:42px;padding:4px;padding-inline-start:12px;gap:10px;border-radius:15px}
.app-customer .rrow .order-main .nm{font-size:var(--s-xs)}
.app-customer .rrow .order-main .pr{font-size:var(--s-xxs)}
.app-customer .rrow .order-main .go{min-height:32px;padding:0 12px;font-size:var(--s-xs);gap:4px}
.app-customer .rrow .order-main .go svg{width:13px;height:13px}
.app-customer .rrow .order-alt{min-height:26px;padding:0 9px}
.app-customer .reel .side .r-mark{width:46px;height:46px;display:grid;place-items:center}
.app-customer .reel .side .r-logo{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--c-surface);color:var(--c-ink);font-weight:700;font-size:var(--s-sm);box-shadow:0 0 0 2px rgba(255,255,255,.95),0 4px 12px -4px rgba(0,0,0,.5)}
.app-customer .reel .side .r-logo img{width:100%;height:100%;object-fit:cover;display:block}

/* ── cart & checkout: clear items, a compact "add more" rail, transparent totals, one pay action ── */
.app-customer .co-section{border-bottom-color:var(--c-line)}
.app-customer .cart-line{padding:10px;border-radius:var(--r-lg);background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line)}
.app-customer .cart-line .thumb{width:72px;height:72px;--ar:1;border-radius:14px}
.app-customer .cart-line .thumb .ft-ic{width:40px;height:40px}
.app-customer .cart-line .stepper{background:var(--c-surface2);box-shadow:none}
.more-rail{display:flex;gap:10px;overflow-x:auto;margin-inline:-16px;padding:2px 16px 4px;scrollbar-width:none}
.more-rail::-webkit-scrollbar{display:none}
.more-card{flex:0 0 120px;display:flex;flex-direction:column;gap:6px;padding:6px 6px 8px;border-radius:18px;background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line)}
.more-card .more-img{--ar:1;border-radius:13px}
.more-card .more-img .ft-ic{width:40px;height:40px}
.more-card .nm{font-size:var(--s-xs);font-weight:600;line-height:var(--lh-snug);padding:0 2px;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.more-card .pr{font-size:var(--s-xs);color:var(--c-text2);padding-inline-start:2px}
.more-card .add-ic{width:32px;height:32px;border-radius:50%;border:0;background:var(--c-ink);color:var(--c-onInk);display:grid;place-items:center;cursor:pointer}
.more-card .add-ic:active{transform:scale(.9)}
.app-customer .link-btn.disclose{display:inline-flex;align-items:center;gap:8px;color:var(--c-text);min-height:44px;font-size:var(--s-sm)}
.app-customer .link-btn.disclose svg{color:var(--c-text2)}
.app-customer .bill .total{font-size:var(--s-lg)}
.app-customer .pay-bar .btn.lg{min-height:58px}

/* ── restaurant profile: dark identity header, stories, Menu · About ── */
.r-head{position:relative;margin:0 -16px;padding:calc(64px + env(safe-area-inset-top)) 16px 20px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--c-dark);color:var(--c-onDark);overflow:hidden;border-radius:0 0 28px 28px}
.r-head>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r-head .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.86) 0,rgba(8,8,8,.35) 60%,rgba(8,8,8,.5) 100%)}
.r-head:not(.has-img) .shade{display:none}
.r-head .r-top{color:var(--c-onDark);align-items:center}
.r-head .r-top .icon-btn{background:rgba(255,255,255,.14);color:var(--c-onDark)}
.r-head .demo-flag{color:var(--c-onDark2)}
.r-id{position:relative;z-index:2;display:flex;align-items:center;gap:12px}
.r-id h1{font-size:var(--s-xl);line-height:var(--lh-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:lang(en) .r-id h1,.app-customer:lang(en) .r-id h1{letter-spacing:-.02em}
.r-logo{flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--c-onDark);color:#fff;font-family:var(--f-display);font-weight:700;font-size:24px;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.r-logo img{width:100%;height:100%;object-fit:cover}
.r-logo.has-img{background:#fff}
.r-facts{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:var(--s-xs);color:var(--c-onDark2)}
.r-facts .op{opacity:.8}
.r-save{flex:none}
.r-head .r-save:not(.primary){background:rgba(255,255,255,.14);border-color:transparent;color:var(--c-onDark)}
.r-head .r-save.primary{background:var(--c-onDark);border-color:var(--c-onDark);color:var(--c-ink)}
.r-head .r-save.primary:hover:not(:disabled){background:#fff}
.r-tabs{margin:12px 0 4px}
.r-about{padding-top:12px}
.r-about .list-row{cursor:default}
.app-customer .item .thumb{width:104px;height:104px;--ar:1;border-radius:18px;font-size:inherit}
.app-customer .item .thumb .ft-ic{width:44px;height:44px}
.app-customer .media.food-tile{--ar:4/3}
.app-customer .list-card .media.food-tile{--ar:1}
.app-customer .list-card .media .ft-ic{width:44px;height:44px}

/* ── friends: people row, activity cards with a quiet reorder ── */
.people-row{display:flex;gap:14px;overflow-x:auto;margin:4px -16px 0;padding:4px 16px 8px;scrollbar-width:none}
.people-row::-webkit-scrollbar{display:none}
.person-chip{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:0;cursor:pointer;color:var(--c-text);font:inherit}
.person-chip .av{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--c-accentSoft);color:var(--c-ink);font-family:var(--f-display);font-weight:700;font-size:22px;box-shadow:0 0 0 2px var(--c-bg),0 0 0 4px var(--c-accent)}
.person-chip .av.add{background:var(--c-surface);box-shadow:0 0 0 1px var(--c-lineStrong);color:var(--c-text2)}
.person-chip .nm{font-size:var(--s-xs);font-weight:500;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-post .btn.reorder{background:var(--c-surface);border-color:var(--c-ink);color:var(--c-ink)}

/* ── taste profile: lavender DNA card, picks as tiles ── */
.app-customer .taste-dna{background:var(--c-accentSoft);color:var(--c-ink);box-shadow:none}
.taste-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.taste-tile{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 14px 8px 8px;padding-inline:8px 14px;border:0;border-radius:var(--r-pill);background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line);color:var(--c-text);font:inherit;font-weight:600;font-size:var(--s-sm);text-align:start;cursor:pointer;transition:box-shadow var(--m-fast),background var(--m-fast)}
.taste-tile .ic{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--c-surface2);color:var(--c-text)}
.taste-tile[aria-pressed=true]{box-shadow:0 0 0 2px var(--c-accent);background:var(--c-accentSoft)}
.taste-tile[aria-pressed=true] .ic{background:var(--c-surface)}
.taste-save{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom));z-index:3}

/* ── taste onboarding: familiar categories as tiles, one primary action ── */
.pick-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pick.tile{position:relative;flex-direction:column;justify-content:center;gap:8px;min-height:104px;padding:12px 6px;border-radius:20px;background:var(--c-surface);border-color:var(--c-line);text-align:center;font-size:var(--s-sm);line-height:var(--lh-snug)}
.pick.tile .ic{width:48px;height:48px;border-radius:50%;background:var(--c-surface2);color:var(--c-text)}
.pick.tile>svg{position:absolute;top:8px;inset-inline-end:8px;color:var(--c-ink)}
.pick.tile[aria-pressed=true]{background:var(--c-accentSoft);border-color:var(--c-accent);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-accent)}
.pick.tile[aria-pressed=true] .ic{background:var(--c-surface);color:var(--c-ink)}
.app-customer .onboard-hello h1{font-size:var(--s-xxl)}
:lang(en) .app-customer .onboard-hello h1,.app-customer:lang(en) .onboard-hello h1{letter-spacing:-.03em}

/* ── welcome: big wordmark, one action, sign-in as a quiet link ── */
.app-customer .welcome .top{padding-bottom:12px}
.app-customer .welcome .tag{font-size:var(--s-h1)}
.welcome .signin{display:block;margin:6px auto 0;min-height:44px;border:0;background:none;font:inherit;font-size:var(--s-sm);color:var(--c-text2);cursor:pointer}
.welcome .signin strong{color:var(--c-text);font-weight:700}

/* ── orders: Active · Past, a mini track on live orders ── */
.order-card{display:flex;flex-direction:column;gap:12px;width:100%;padding:14px;border:0;border-radius:var(--r-lg);background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line);color:inherit;font:inherit;text-align:start;cursor:pointer;transition:transform var(--m-fast) var(--m-ease)}
.order-card:active{transform:scale(.985)}
.o-logo{width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;background:var(--c-ink);color:#fff;font-family:var(--f-display);font-weight:700;font-size:20px}
.o-logo.has-img{background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px var(--c-line,rgba(0,0,0,.06))}
.o-logo img{width:100%;height:100%;object-fit:cover}
.trip.mini{margin:0}
.trip.mini .node{width:30px;height:30px}
.trip.mini .node.now{box-shadow:0 0 0 4px var(--c-accentSoft)}
.trip.mini .seg{height:3px}
.o-view{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--c-ink);font-size:var(--s-sm);font-weight:600}

/* ── live tracking: map first, then one card with ETA, a 3-step track and the rider ── */
.app-customer .route{height:260px;border-radius:24px}
.app-customer .route .path,.app-customer .route .pin,.app-customer .route .courier{margin-top:30px}
.app-customer .track-hero.on-map{margin-top:-44px;position:relative;z-index:2;padding:20px;border-radius:24px;background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line),0 16px 30px -22px rgba(8,8,8,.35)}
.app-customer .trip-labels{margin-top:2px}
.app-customer .trip-labels span.now{color:var(--c-text);font-weight:600}

/* ── profile: one grouped list; details open in place ── */
.disclose-body{padding:4px 16px 16px;border-top:1px solid var(--c-line)}
.disclose-chev{transition:transform var(--m-fast)}
.app-customer .disclose-chev svg{transform:rotate(-90deg)}
.app-customer .disclose-chev.open svg{transform:rotate(90deg)}

/* ── bottom bar: raised YUM disc in the centre opens the cart ── */
.app-customer .tabbar .tab-yum{justify-content:flex-start;padding-top:0}
.app-customer .tabbar .tab-yum::before{display:none}
.app-customer .tabbar .yum-disc{width:58px;height:58px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;background:var(--c-surface);color:var(--c-ink);box-shadow:0 2px 10px rgba(8,8,8,.08),0 0 0 1px rgba(8,8,8,.05),0 0 0 4px var(--c-bg);transition:transform var(--m-fast) var(--m-spring)}
.app-customer .tabbar .tab-yum:active .yum-disc{transform:scale(.92)}
.app-customer .tabbar .tab-yum[aria-current="page"] .yum-disc{background:var(--c-ink);color:var(--c-surface);box-shadow:0 3px 12px rgba(8,8,8,.16),0 0 0 4px var(--c-accent)}
.app-customer .tabbar.dark .yum-disc{box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 0 4px rgba(8,8,8,.78)}
.app-customer .tabbar .tab-yum .dot{top:-18px;inset-inline-end:calc(50% - 34px)}
.app-customer .tabbar .tab-yum:focus-visible{outline:0}
.app-customer .tabbar .tab-yum:focus-visible .yum-disc{outline:2px solid var(--c-accent);outline-offset:3px}

/* ── white-first identity (22 Oct 2026) ──
   White stays the ground; food slots without a photo are warm light sand, never cold gray boxes. */
.app-customer :is(.media,.r-hero,.item .thumb,.opt .opt-ic,.cart-line .thumb,.flow-media,.sugg-thumb,.reel-card){background:var(--c-sandSoft)}
.app-customer .food-tile .ft-ic{background:var(--c-surface);color:var(--c-text3)}
/* YUM+ reads as a soft lavender card with a purple mark, not a full purple block. */
.app-customer .plus-hero{background:var(--c-accentSoft);color:var(--c-ink)}
.app-customer .plus-hero .wordmark,.app-customer .plus-hero .plus-mark{color:var(--c-accent)}
.app-customer .plus-hero .go{background:var(--c-ink);color:var(--c-onInk)}
/* Food Orange: rating stars only. */
.app-customer svg.yi-star{color:var(--c-orange);fill:currentColor}
/* Share fallback sheet. */
.share-sheet{gap:12px;padding:4px 0 8px}
.share-sheet h3{margin:0 0 4px}

/* ── brand personality: warm sand + lavender on the white base (22 Oct 2026) ──
   Sand (warmth) sits behind food, categories and optional things; lavender (personality) marks what is
   selected, active or social. Neither goes full-screen or behind long text. Visual only. */
/* food image slots */
.app-customer .food-tile{background:var(--c-sandSoft)}
.app-customer .food-tile[style*="--tint"]{background:color-mix(in srgb,var(--tint) 14%,var(--c-sandSoft))}
/* segmented tabs (Active · Past, Menu · Reviews · About): lavender pill, black label */
.app-customer .segmented{background:var(--c-surface2)}
.app-customer .segmented button[aria-selected=true]{background:var(--c-accentMid);color:var(--c-ink);box-shadow:inset 0 0 0 1.5px var(--c-accent)}
/* Explore categories: warm discs, lavender when chosen */
.app-customer .cat .ic{background:var(--c-sandSoft);box-shadow:none}
.app-customer .cat[aria-pressed=true] .ic{background:var(--c-accentSoft);color:var(--c-accentText);box-shadow:inset 0 0 0 2px var(--c-accent)}
/* filter chips (Explore filters, the menu's category nav): warm, lavender when active */
.app-customer .chip{background:var(--c-sandSoft);border-color:transparent}
.app-customer .chip[aria-pressed=true]{background:var(--c-accentSoft);border-color:var(--c-accent);color:var(--c-ink);box-shadow:inset 0 0 0 .5px var(--c-accent)}
/* onboarding + preference picks: sand until picked, then soft lavender with a purple outline */
.app-customer .pick{background:var(--c-sandSoft);border-color:transparent}
.app-customer .pick .ic{color:var(--c-text2)}
.app-customer .pick[aria-pressed=true],.app-customer .pick[aria-checked=true]{background:var(--c-accentSoft);border-color:var(--c-accent);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-accent)}
.app-customer .pick[aria-pressed=true] .ic,.app-customer .pick[aria-checked=true] .ic{color:var(--c-accentText)}
.app-customer .pick.tile{background:var(--c-sandSoft);border-color:transparent}
.app-customer .pick.tile .ic{background:var(--c-surface)}
.app-customer .pick.tile[aria-pressed=true]{background:var(--c-accentSoft);border-color:var(--c-accent)}
.app-customer .taste-tile{background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line)}
.app-customer .taste-tile .ic{background:var(--c-sandSoft)}
.app-customer .taste-tile[aria-pressed=true]{background:var(--c-accentSoft);box-shadow:0 0 0 2px var(--c-accent)}
/* customisation: required single choices stay crisp; optional extras sit on a warm card; chosen = purple */
.app-customer .mods.rows .opt-list{background:var(--c-sandSoft);box-shadow:none}
.app-customer .mods.rows .opt{border-bottom-color:rgba(8,8,8,.07)}
.app-customer :is(.opt,.choice) input:checked{background-color:var(--c-accent);border-color:var(--c-accent)}
.app-customer .mods.seg .opt:has(input:checked){background:var(--c-accentSoft);border-color:var(--c-accent);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-accent)}
.app-customer .mods.seg .opt:has(input:checked) .num{color:var(--c-text2)}
.app-customer .mods.seg .opt:has(input:focus-visible){outline-color:var(--c-accent)}
/* cart + customisation recommendations on warm cards */
.app-customer :is(.sugg-card,.more-card){background:var(--c-sandSoft);box-shadow:none}
.app-customer .sugg-card .tick{background:var(--c-surface)}
.app-customer .sugg-card.on{background:var(--c-accentSoft);box-shadow:0 0 0 2px var(--c-accent)}
.app-customer .sugg-card.on .tick{background:var(--c-accent);color:var(--c-onAccent)}
/* tracking: warm map, purple route, white cards */
.app-customer .route{background-color:var(--c-sandSoft)}
.app-customer .progress i.done{background:var(--c-accent)}
/* settings rows: warm icon discs */
.app-customer .list-row .ic{background:var(--c-sandSoft)}
/* empty states: a warm tile instead of a gray one */
.app-customer .empty-ic{background:var(--c-sandSoft)}
/* welcome: white ground, two soft sand shapes in the corners, behind everything */
.app-customer .welcome{overflow:hidden;isolation:isolate}
.app-customer .welcome::before,.app-customer .welcome::after{content:"";position:absolute;z-index:-1;pointer-events:none;background:var(--c-sand)}
.app-customer .welcome::before{width:260px;height:240px;top:-90px;inset-inline-end:-80px;border-radius:58% 42% 55% 45%/52% 60% 40% 48%;opacity:.75}
.app-customer .welcome::after{width:170px;height:160px;top:45%;inset-inline-start:-112px;border-radius:45% 55% 40% 60%/55% 45% 55% 45%;background:var(--c-sandSoft)}
/* onboarding overlay: one warm corner shape */
.app-customer .onboard.onboarding{isolation:isolate;background:radial-gradient(240px 200px at 100% 0,var(--c-sandSoft) 0 60%,transparent 61%) no-repeat,var(--c-bg)}
/* Taste Profile: soft lavender card with organic lavender + sand shapes in its corners */
.app-customer .taste-dna{position:relative;overflow:hidden;isolation:isolate}
.app-customer .taste-dna::before,.app-customer .taste-dna::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50% 40% 55% 45%/45% 55% 45% 55%}
.app-customer .taste-dna::before{width:150px;height:130px;top:-50px;inset-inline-end:-40px;background:var(--c-accentMid)}
.app-customer .taste-dna::after{width:120px;height:100px;bottom:-46px;inset-inline-start:-30px;background:var(--c-sand);opacity:.8}
/* YUM+ card: soft lavender with a medium-lavender shape and a purple edge */
.app-customer .plus-hero{position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px var(--c-accentMid)}
.app-customer .plus-hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:180px;height:150px;top:-60px;inset-inline-end:-50px;border-radius:55% 45% 50% 50%/50% 55% 45% 50%;background:var(--c-accentMid)}

/* Taste DNA graph (Taste Graph): lavender radar + three insight cards, soft reveal only */
.taste-radar{width:100%;max-width:300px;height:auto;align-self:center;overflow:visible}
.taste-radar-shape{transform-origin:50% 50%;animation:taste-reveal var(--m-slow) var(--m-ease) both}
@keyframes taste-reveal{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.taste-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.taste-insight{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-sm);background:var(--c-surface);box-shadow:var(--sh-card);min-width:0}
.taste-insight strong{font-size:var(--s-sm);line-height:var(--lh-snug);overflow-wrap:anywhere}

/* Taste Graph in the feed: one small lavender label near the food facts, the why sheet, the session mode pill */
.rslide .facts .chip-dark.fit{border:0;cursor:pointer;font:inherit;font-size:var(--s-xs);font-weight:600;background:rgba(241,232,255,.94);color:#4B2AA8;box-shadow:0 2px 10px -4px rgba(139,92,246,.6);transition:transform var(--m-fast) var(--m-ease)}
.rslide .facts .chip-dark.fit::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-accent)}
.rslide .facts .chip-dark.fit:active{transform:scale(.96)}
.why-list{margin:0;padding-inline-start:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.why-list li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-sm);background:var(--c-accentSoft);font-weight:600;font-size:var(--s-sm)}
.why-list li::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--c-accent)}
.rfeed-head .taste-mode-on{border:0;cursor:pointer;font:inherit;font-size:var(--s-xs);background:var(--c-accentSoft);color:var(--c-ink);margin-inline-start:auto}

/* Taste Twins */
.twins{display:flex;flex-direction:column;gap:8px}
.twin{display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;border-radius:var(--r-md);background:var(--c-surface);box-shadow:var(--sh-card);font:inherit;color:var(--c-text);cursor:pointer;text-align:start;transition:transform var(--m-fast) var(--m-ease)}
.twin:active{transform:scale(.98)}
.twin .av{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--c-accentSoft);color:var(--c-accentText);font-weight:700}
.twin-label{color:var(--c-accentText);font-weight:600}
.danger-text{color:var(--c-danger)}

/* Feed: YUM wordmark as a quiet watermark, top centre (brand presence without competing with the video). */
.rfeed-head .feed-watermark{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);color:#fff;opacity:.55;pointer-events:none;filter:drop-shadow(0 1px 6px rgba(0,0,0,.3));line-height:0}
/* The tabs sit on their own line under the wordmark, so the longer English tabs never run over it. */
.rfeed-head:has(.feed-watermark){padding-top:calc(34px + env(safe-area-inset-top))}

/* ── Customer App UX v2.0: one video per screen; swipe right (physical, both languages) to the restaurant ── */
.rfeed>.rrow{touch-action:pan-y}
.rfeed .swipe-layer{position:absolute;inset:0}
.rfeed .swipe-peek{position:absolute;inset-block:0;left:0;width:42%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--c-onDark);font-size:var(--s-xs);font-weight:600;opacity:var(--swipe,0);pointer-events:none}
.rfeed .facts.deliv{gap:4px 10px;color:var(--c-onDark);font-weight:500}
.rfeed .facts.deliv>span:not(.chip-dark)+span:not(.chip-dark)::before{content:"·";margin-inline-end:10px;opacity:.6}
.rfeed .facts .muted-hint{color:var(--c-onDark2);font-weight:400}
.rfeed .facts .chip-dark.demo{background:transparent;border:1px dashed rgba(255,248,239,.55);color:var(--c-onDark2)}
.order-main.browse .go{background:var(--c-surface2);color:var(--c-text);box-shadow:inset 0 0 0 1px var(--c-line)}
.r-enter{animation:r-enter .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes r-enter{from{transform:translate3d(-28%,0,0);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.r-enter{animation:none}}
.tabbar .live-dot{position:absolute;top:8px;inset-inline-end:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 2px var(--c-surface)}
.tabbar.dark .live-dot{box-shadow:0 0 0 2px var(--c-dark)}
@media (prefers-reduced-motion:no-preference){.tabbar .live-dot{animation:live-dot 2.4s ease-in-out infinite}}
@keyframes live-dot{0%,100%{opacity:1}50%{opacity:.45}}

/* ── Restaurant feed (فيد المطعم): 9:16 preview cards in a row, then a vertical full-screen player ── */
.r-feed .section-head{margin-bottom:10px}
.r-feed-row{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin-inline:-16px;padding:2px 16px 6px;scroll-padding-inline:16px;scrollbar-width:none}
.r-feed-row::-webkit-scrollbar{display:none}
.reel-card-wrap{flex:none;scroll-snap-align:start}
.reel-card{position:relative;display:block;width:clamp(96px,27vw,124px);aspect-ratio:9/16;border:0;padding:0;border-radius:14px;overflow:hidden;cursor:pointer;color:var(--c-onDark);font:inherit;-webkit-tap-highlight-color:transparent;transition:transform var(--m-fast) var(--m-ease)}
.reel-card:active{transform:scale(.97)}
.reel-card img,.reel-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity var(--m-base) var(--m-ease)}
.reel-card.ready img,.reel-card.ready video{opacity:1}
.reel-card.loading{background:linear-gradient(90deg,var(--c-sandSoft) 0,var(--c-surface2) 50%,var(--c-sandSoft) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.reel-card-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(23,20,18,.62) 0,rgba(23,20,18,0) 46%);pointer-events:none}
.reel-card.failed .reel-card-shade{background:none}
.reel-card-play{position:absolute;top:8px;inset-inline-end:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(23,20,18,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.reel-card.failed .reel-card-play{inset:0;margin:auto;background:transparent;color:var(--c-text3)}
.reel-card-cap{position:absolute;inset-inline:8px;bottom:8px;font-size:var(--s-xxs);font-weight:600;line-height:1.3;text-align:start;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.reel-card.failed .reel-card-cap{color:var(--c-text2);text-shadow:none}
.reel-card:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.r-feed-empty{margin:0}
@media (prefers-reduced-motion:reduce){.reel-card.loading{animation:none}.reel-card,.reel-card img,.reel-card video{transition:none}}
.rviewer{position:fixed;inset:0;z-index:70;max-width:480px;margin:0 auto;height:auto;animation:fade var(--m-base)}
.rviewer-head{gap:4px;padding-inline:4px 8px}
.rviewer-title{font-family:var(--f-display);font-size:var(--s-md);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.app-customer .rviewer .rslide .meta{bottom:calc(24px + env(safe-area-inset-bottom))}
.app-customer .rviewer .rslide .side{bottom:calc(132px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){.rviewer{animation:none}}
.video-failed{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--c-onDark);font-size:var(--s-sm);text-align:center}
.video-failed .chip-dark{border:0;cursor:pointer;font:inherit;font-size:var(--s-xs)}

/* ── clip comments ── */
.reel .clip-report{position:absolute;inset-inline-end:14px;bottom:calc(90px + env(safe-area-inset-bottom));z-index:3;width:34px;height:34px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(8,8,8,.28);color:rgba(255,255,255,.82);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform var(--m-fast) var(--m-spring),opacity var(--m-fast)}
.reel .clip-report:active{transform:scale(.88)}
.comments-sheet{gap:12px}
.comments-sheet h3 .count{font-weight:500;font-size:var(--s-sm);margin-inline-start:8px}
.comments{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;max-height:52vh;max-height:52dvh;overflow:auto;overscroll-behavior:contain}
.comment{display:flex;gap:10px;align-items:flex-start}
.comment .av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--c-sand);color:var(--c-ink);font-size:var(--s-xs);font-weight:600}
.comment .body{margin:0;font-size:var(--s-sm);line-height:var(--lh-snug);white-space:pre-wrap;overflow-wrap:anywhere}
.comment-actions{gap:14px}
.comment-actions button{border:0;background:none;padding:2px 0;font:inherit;font-size:var(--s-xs);color:var(--c-text3);cursor:pointer}
.comments-empty{text-align:center;padding:18px 0}
.comment-compose{gap:8px;position:sticky;bottom:0;background:var(--c-bg);padding-top:4px}
.comment-compose .input{min-width:0}

/* ── Explore: calm, white, glass. Food types as glass cards, cuisines as glass dots, one sand family entry,
   «قريب منك» as small 3:4 cards, «مقترحة لك» as clean rows. System emoji (no photo to load) until the Glass 3D
   icon set is delivered. Lavender only for selection and the family icon. ── */
.app-customer .xp-top{flex-direction:column;align-items:stretch;gap:10px;padding-bottom:12px}
.app-customer .xp-top-row{align-items:center;min-height:40px}
.app-customer .xp-top .loc-pill{cursor:pointer;font:inherit;font-size:var(--s-sm);font-weight:500;gap:5px;max-width:52%;min-height:36px}
.app-customer .xp-top .loc-pill:active{transform:scale(.97)}
.app-customer .xp-top .search{min-height:46px}
.app-customer .xp-head{margin:22px 0 10px;align-items:center}
.app-customer .xp-top+.screen>section:first-child>.xp-head{margin-top:16px}
.app-customer .xp-head h2{font-size:var(--s-lg);font-weight:700;letter-spacing:-.01em}
.app-customer .xp-more{border:0;background:none;padding:6px 2px;min-height:32px;font:inherit;font-size:var(--s-xs);font-weight:600;color:var(--c-accentText);cursor:pointer}
.app-customer .xp-rail{gap:10px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.app-customer .xp-name{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.app-customer .xp-sym{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;line-height:1;font-size:34px}
.app-customer .xp-sym-img{width:78%;height:78%;object-fit:contain}
.app-customer .xp-food{flex:0 0 76px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:7px;border:0;padding:0;background:none;cursor:pointer;font:inherit;text-align:center;transition:transform var(--m-fast) var(--m-ease)}
.app-customer .xp-food:active,.app-customer .xp-cuisine:active{transform:scale(.95)}
.app-customer .xp-glasscard{position:relative;width:76px;aspect-ratio:1;border-radius:22px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,247,252,.86));box-shadow:inset 0 0 0 1px rgba(23,20,18,.06),0 1px 2px rgba(23,20,18,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.app-customer .xp-food[aria-pressed=true] .xp-glasscard,.app-customer .xp-cuisine[aria-pressed=true] .xp-glassdot{box-shadow:inset 0 0 0 1.5px var(--c-accent);background:var(--c-accentSoft)}
.app-customer .xp-new{position:absolute;top:-6px;inset-inline:auto;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:var(--r-pill);background:var(--c-accentSoft);color:var(--c-accentText)}
.app-customer .xp-check{position:absolute;inset-inline-end:-4px;top:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--c-accent);color:var(--c-onAccent);box-shadow:0 0 0 2px var(--c-bg)}
.app-customer .xp-cuisine{flex:0 0 68px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:7px;border:0;padding:0;background:none;cursor:pointer;font:inherit;text-align:center;transition:transform var(--m-fast) var(--m-ease)}
.app-customer .xp-cuisine .xp-name{font-weight:500;color:var(--c-text2)}
.app-customer .xp-glassdot{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,247,252,.86));box-shadow:inset 0 0 0 1px rgba(23,20,18,.06),0 1px 2px rgba(23,20,18,.04)}
.app-customer .xp-glassdot .xp-sym{font-size:28px}
.app-customer .xp-family{display:flex;align-items:center;gap:12px;width:100%;margin-top:22px;padding:12px 14px;border:0;border-radius:20px;background:var(--c-sandSoft);box-shadow:inset 0 0 0 1px rgba(23,20,18,.04);color:var(--c-text);font:inherit;text-align:start;cursor:pointer;transition:transform var(--m-fast) var(--m-ease)}
.app-customer .xp-family:active{transform:scale(.98)}
.app-customer .xp-family-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--c-accentSoft);color:var(--c-accentText)}
.app-customer .xp-family-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.app-customer .xp-family-txt b{font-size:15px;font-weight:700}
.app-customer .xp-family-txt span{font-size:var(--s-xs);color:var(--c-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-customer .xp-family-go{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.8);color:var(--c-text2)}
.app-customer .xp-near{gap:10px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;align-items:flex-start}
.app-customer .xp-nc{flex:0 0 clamp(124px,40%,190px);scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;border:0;padding:0;background:none;cursor:pointer;color:inherit;font:inherit;text-align:start;transition:transform var(--m-fast) var(--m-ease)}
.app-customer .xp-nc:active{transform:scale(.97)}
.app-customer .xp-nc-media.food-tile{--ar:3/4;width:100%;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(23,20,18,.05)}
.app-customer .xp-nc-name{font-size:var(--s-sm);font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;margin:2px 2px 0}
.app-customer .xp-nc-meta{display:flex;align-items:center;gap:0;font-size:11.5px;color:var(--c-text2);margin:0 2px;white-space:nowrap;overflow:hidden}
.app-customer .xp-nc-meta>span{display:inline-flex;align-items:center;gap:3px}
.app-customer .xp-nc-meta>span+span::before,.app-customer .xp-facts>span+span::before{content:"·";margin-inline:6px;color:var(--c-text3)}
.app-customer .xp-nc-meta svg,.app-customer .xp-facts svg{color:#E8A317;fill:#E8A317;flex:none}
.app-customer .xp-list .list-card{padding:12px 0;border-bottom-color:rgba(23,20,18,.06);gap:14px;align-items:flex-start}
.app-customer .xp-list .list-card:last-child{border-bottom:0}
.app-customer .xp-card .media.food-tile{--ar:1;width:76px;flex:none;border-radius:16px}
.app-customer .xp-card.off{opacity:.62}
.app-customer .xp-card-body{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:1px}
.app-customer .xp-title{font-size:15.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.app-customer .xp-kitchen{font-size:var(--s-xs);color:var(--c-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-customer .xp-facts{display:flex;flex-wrap:wrap;align-items:center;font-size:var(--s-xs);color:var(--c-text2);margin-top:2px}
.app-customer .xp-facts>span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.app-customer .xp-facts2{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:var(--s-xs);color:var(--c-text2)}
.app-customer .xp-facts2 .muted{color:var(--c-text3)}
.app-customer .xp-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.app-customer .xp-state{font-size:11px;font-weight:600;padding:1px 8px;border-radius:var(--r-pill);background:var(--c-surface2);color:var(--c-text2)}
.app-customer .xp-state.orderable{background:var(--c-successSoft);color:var(--c-success)}
.app-customer .xp-skel{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.app-customer .xp-skel-row{display:flex;gap:10px;overflow:hidden}
.app-customer .xp-skel-card{flex:0 0 76px;height:76px;border-radius:22px}
.app-customer .xp-skel-dot{flex:0 0 60px;height:60px;border-radius:50%}
.app-customer .xp-skel-banner{height:64px;border-radius:20px;margin:8px 0}
.app-customer .xp-skel-tall{flex:0 0 40%;aspect-ratio:3/4;border-radius:18px}
.app-customer .xp-locs{display:flex;flex-direction:column;margin-top:10px}
.app-customer .xp-loc{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 2px;border:0;border-bottom:1px solid var(--c-line);background:none;font:inherit;color:var(--c-text);text-align:start;cursor:pointer}
.app-customer .xp-loc[aria-pressed=true]{color:var(--c-accentText)}
.app-customer .xp-locs .link-btn{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:8px}
.app-customer .xp-sub{font-size:var(--s-md)}
.app-customer .xp-sheet{max-height:70vh;overflow-y:auto;margin-inline:-4px;padding-inline:4px}
.app-customer .xp-sheet .section-head{margin:20px 0 10px}
.app-customer .xp-sheet .section-head h3{font-size:var(--s-md);font-weight:700}
.app-customer .xp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px}
.app-customer .xp-grid.round{margin-top:16px;grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
.app-customer .xp-grid .xp-food{flex:none}
.app-customer .xp-filters{margin:12px -16px 0;padding-inline:16px}
.app-customer .xp-filters .chip{min-height:36px;padding:0 14px}
.app-customer .xp-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
@media (min-width:560px){.app-customer .xp-videos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.app-customer .xp-video{position:relative;aspect-ratio:9/16;border:0;padding:0;border-radius:var(--r-lg);overflow:hidden;background:var(--c-sandSoft);cursor:pointer;color:#fff;font:inherit;text-align:start;display:grid;place-items:center}
.app-customer .xp-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.app-customer .xp-video-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,8,8,.62))}
.app-customer .xp-video-meta{position:absolute;inset-inline:10px;bottom:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.app-customer .xp-video-meta b{font-size:var(--s-sm)}
@media (prefers-reduced-motion:reduce){.app-customer .xp-food,.app-customer .xp-cuisine,.app-customer .xp-family,.app-customer .xp-nc,.app-customer .xp-top .loc-pill{transition:none}.app-customer .xp-food:active,.app-customer .xp-cuisine:active,.app-customer .xp-nc:active,.app-customer .xp-family:active{transform:none}}

/* ── Explore, top to bottom: «وش تشتهي؟» one row of four foods (bundled cutout in a soft round glass container,
   lavender / sand / warm neutral in turn, name centred below; the rest in place behind «عرض الكل»), «استكشف بالمقاطع»
   one row of 9:16 clips (the rest behind «عرض الكل»), the «من بيوتنا 💜» banner, then the restaurants with a native
   cuisine menu and two quick orders. ── */
.app-customer .xg-foods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px}
.app-customer .xg-food{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;min-height:44px;border:0;padding:0;background:none;font:inherit;color:var(--c-text);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--m-fast) var(--m-ease)}
.app-customer .xg-food:active{transform:scale(.94)}
.app-customer .xg-circle{position:relative;width:100%;max-width:76px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 55%),var(--xg-tint,#F4EEFB);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -6px 14px rgba(23,20,18,.035),0 4px 12px -6px rgba(23,20,18,.14)}
.app-customer .xg-food:nth-child(3n+1) .xg-circle{--xg-tint:#F4EEFB}
.app-customer .xg-food:nth-child(3n+2) .xg-circle{--xg-tint:#FBF1E4}
.app-customer .xg-food:nth-child(3n) .xg-circle{--xg-tint:#F5F2EE}
.app-customer .xg-img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(23,20,18,.14));-webkit-user-drag:none;user-select:none}
.app-customer .xg-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;line-height:1;font-size:clamp(26px,9vw,36px);filter:drop-shadow(0 3px 4px rgba(23,20,18,.12))}
.app-customer .xg-name{font-size:12.5px;font-weight:600;line-height:1.25;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.app-customer .xg-food:focus-visible,.app-customer .xr-tile:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

.app-customer .xr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.app-customer .xr-tile{position:relative;display:block;aspect-ratio:9/16;border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--c-sandSoft);color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--m-fast) var(--m-ease),opacity var(--m-fast)}
.app-customer .xr-tile:active{transform:scale(.97);opacity:.92}
.app-customer .xr-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.app-customer .xr-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--c-text3)}
.app-customer .xr-shade{position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(180deg,rgba(8,8,8,0),rgba(8,8,8,.42))}
.app-customer .xr-meta{position:absolute;bottom:7px;inset-inline-start:8px;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.app-customer .xr-meta svg{fill:currentColor;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.app-customer .xr-tile.off img{opacity:.7}
.app-customer .xr-off{position:absolute;top:6px;inset-inline-start:6px;padding:1px 7px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:var(--c-text);font-size:10.5px;font-weight:600}
.app-customer .xr-skel{aspect-ratio:9/16;border-radius:12px}
.app-customer .xr-more{margin-top:12px}
.app-customer .xr-empty{margin:4px 0 0}
.app-customer .xr-error{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
@media (max-width:339px){
  .app-customer .xg-foods{gap:12px 6px}
  .app-customer .xg-name{font-size:11.5px}
  .app-customer .xr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.app-customer .xg-food,.app-customer .xr-tile{transition:none}.app-customer .xg-food:active,.app-customer .xr-tile:active{transform:none}}
.app-customer .xr-grid.one>:nth-child(n+4){display:none}
@media (max-width:339px){.app-customer .xr-grid.one>:nth-child(n+3){display:none}}
.app-customer .xp-bar{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 4px;padding:2px 16px}
.app-customer .xp-bar::-webkit-scrollbar{display:none}
.app-customer .xp-bar .chip{flex:none;min-height:38px;padding:0 11px;gap:4px;font-size:var(--s-xs)}
.app-customer .xp-bar .chip svg{flex:none}
.app-customer .xp-select{position:relative;flex:none;display:inline-flex;align-items:center;min-height:38px;border-radius:var(--r-pill);background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line);color:var(--c-text)}
.app-customer .xp-select.on{background:var(--c-accentSoft);box-shadow:inset 0 0 0 1.5px var(--c-accent)}
.app-customer .xp-select select{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;font-size:var(--s-xs);font-weight:600;color:inherit;min-height:38px;padding-inline:12px 30px;cursor:pointer;max-width:42vw;text-overflow:ellipsis}
.app-customer .xp-select select:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:var(--r-pill)}
.app-customer .xp-select svg{position:absolute;inset-inline-end:10px;pointer-events:none;color:var(--c-text2)}
.app-customer .xp-family-pics{flex:none;display:flex;align-items:center}
.app-customer .xp-family-pics img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--c-sandSoft);background:var(--c-bg2)}
.app-customer .xp-family-pics img+img{margin-inline-start:-12px}
.app-customer .xp-family-pics .xp-family-ic{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:22px}
.app-customer .xp-heart{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:.95em}

/* ── Website alignment (8 Nov 2026): the same character as yumfoodco.com (website/src/app/globals.css: white
   paper, #080808 ink, #6B6B6B secondary text, #EBEBEB/#D9D9D9 hairlines, #8855FF accent, #F3EDFF soft lavender,
   #FFF2E2 light sand, #FAF9F7 warm, medium-weight pill labels, the lavender-dot eyebrow, glass category icons kept).
   FONT SIZES ARE NOT CHANGED: the app's smaller scale is deliberate; only weights, spacing, radii, rings and
   flatness move. Visual only, no behaviour. ── */

/* Buttons: the site's pills are medium weight; the main action (.lg) keeps semibold so it stays the clearest thing
   on screen. Secondary pills get the site's stronger hairline ring. */
.app-customer .btn{font-weight:var(--fw-medium)}
.app-customer .btn.lg{font-weight:var(--fw-semibold)}
.app-customer .btn:where(:not(.primary,.dark,.accent,.ghost,.danger)){border-color:var(--c-lineStrong)}

/* Section labels as the site's eyebrow: small, medium weight, secondary colour, a lavender dot. Same size as before. */
.app-customer .group-title{display:flex;align-items:center;gap:8px;font-weight:var(--fw-medium);color:var(--c-text2);margin:10px 4px -4px}
.app-customer .group-title::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c-accent)}

/* Profile: calmer rows (medium titles, round warm icon discs of one size), a little less height per row. */
.app-customer .me-name{font-size:var(--s-xl);line-height:var(--lh-snug);overflow-wrap:anywhere}
.app-customer .me-head .btn.ghost{flex:none;border-color:var(--c-lineStrong);background:var(--c-surface)}
.app-customer .list-row{min-height:56px;padding:11px 16px;gap:12px}
.app-customer .list-row .t{font-weight:var(--fw-medium)}
.app-customer .list-row .ic{width:36px;height:36px;border-radius:50%}
.app-customer .list-row .chev{color:var(--c-text3);opacity:.8}

/* Empty states: a flat warm disc, a semibold (not bold) title, the same calm copy. */
.app-customer .empty-ic{box-shadow:none}
.app-customer .empty h3{font-weight:var(--fw-semibold)}

/* Explore foods: the glass discs stay as they are (owner's call, 8 Nov 2026); names only go to medium weight. */
.app-customer .xg-name{font-weight:var(--fw-medium)}
.app-customer .xp-food .xp-name{font-weight:var(--fw-medium)}

/* Every 9:16 clip card has one corner radius (14 px) and the grid a slightly wider gutter. */
.app-customer .xr-grid{gap:6px}
.app-customer :is(.xr-tile,.xr-skel,.xp-video,.reel-card){border-radius:14px}

/* Search as the site draws it: a filled light-gray pill, no outline until focused. */
.app-customer .xp-top .search{background:var(--c-surface2);box-shadow:none}
.app-customer .xp-top .search:focus-within{background:var(--c-surface);box-shadow:inset 0 0 0 1.5px var(--c-ink),0 0 0 4px var(--c-accentSoft)}

/* Restaurant filters: the two quick sorts match the cuisine menu (white pill, hairline); chosen = soft lavender. */
.app-customer .xp-bar .chip:not([aria-pressed=true]){background:var(--c-surface);border-color:var(--c-line);color:var(--c-text)}

/* Restaurant list: closed / out-of-area rows keep readable text (only the photo dims), hairlines from the token,
   rating stars in the brand's food orange. */
.app-customer .xp-card.off{opacity:1}
.app-customer .xp-card.off .media{opacity:.55;filter:saturate(.6)}
.app-customer .xp-card.off .xp-title{color:var(--c-text2)}
.app-customer .xp-list .list-card{border-bottom-color:var(--c-line)}
.app-customer .xp-card-body{gap:2px}
.app-customer :is(.xp-nc-meta,.xp-facts) svg{color:var(--c-orange);fill:var(--c-orange)}

/* Feed: legibility over light and dark clips (a soft text shadow, not decoration) and the facts grouped with the
   name, a little air before the order action. Sizes, layout and behaviour unchanged. */
.app-customer .rrow :is(.who,.facts,.caption){text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 14px rgba(0,0,0,.28)}
.app-customer .rrow .meta{gap:8px}
.app-customer .rrow .order-cta{margin-top:6px}
/* Profile rows in English: the «more» chevron points forward (right), as it already does in Arabic (left). */
[dir=ltr] .app-customer .list-row .chev:not(.disclose-chev) svg{transform:scaleX(-1)}

/* Explore clips (8 Nov 2026): one side-scrolling row of at most six 9:16 cards; «عرض الكل» goes to Home (the main
   video feed) instead of growing the page. About three cards show at a time, the next one peeks in. */
.app-customer .xr-row{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-16px;padding:0 16px 2px;scroll-padding-inline:16px;touch-action:pan-x pan-y}
.app-customer .xr-row::-webkit-scrollbar{display:none}
.app-customer .xr-row>*{flex:0 0 calc((100% - 12px) / 3.25);scroll-snap-align:start}

/* Partner landing pages (yumfoodco-restaurants.com, yumfoodco-partners.com). Every rule is scoped to
   .app-landing. YUM white-first identity (packages/brand IDENTITY): white grounds, YUM Black type and pill
   actions, Electric Purple as the one accent, Soft Lavender and Warm Sand as quiet bands. Apple-like: large
   type, generous space, hairlines over shadows, motion that eases in and respects reduced motion.
   Logical properties throughout, so Arabic (RTL) and English (LTR) both just work. */
.app-landing{--lp-white:#FFFFFF;--lp-ink:#080808;--lp-ink2:#1A1A1A;--lp-purple:#8855FF;--lp-purple-text:#7343EB;--lp-lav:#F3EDFF;--lp-lav-mid:#E8D8FF;--lp-sand:#F2E1CD;--lp-sand-l:#FFF2E2;--lp-gray:#F6F6F6;--lp-line:#EBEBEB;--lp-text2:#5F5F5F;--lp-max:1180px;
  background:var(--lp-white);color:var(--lp-ink);overflow-x:hidden}
.app-landing a{text-decoration:none}
.app-landing ::selection{background:var(--lp-lav-mid)}
.app-landing .lp-wrap{max-width:var(--lp-max);margin-inline:auto;padding-inline:clamp(18px,5vw,40px)}
.app-landing .lp-wrap.narrow{max-width:720px;padding-block:28px 72px}
.app-landing .center{text-align:center;justify-content:center}
.app-landing .lp-muted{color:var(--lp-text2)}
.app-landing .lp-muted-dark{color:#BDBDBD}
.app-landing .stack.center{align-items:center}

/* ── buttons ── */
.app-landing .lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-weight:var(--fw-semibold);font-size:var(--s-md);cursor:pointer;transition:transform var(--m-fast) var(--m-ease),background var(--m-base),box-shadow var(--m-base);white-space:nowrap;-webkit-user-select:none;user-select:none}
.app-landing .lp-btn:active{transform:scale(.97)}
.app-landing .lp-btn.primary{background:var(--lp-ink);color:var(--lp-white)}
.app-landing .lp-btn.primary:hover{background:#262626;box-shadow:0 10px 24px -12px rgba(8,8,8,.5)}
.app-landing .lp-btn.ghost{background:transparent;color:var(--lp-ink);border-color:#D9D9D9}
.app-landing .lp-btn.ghost:hover{background:var(--lp-gray)}
.app-landing .lp-btn.lg{min-height:54px;padding:0 28px;font-size:calc(var(--s-md) * 1.06)}
.app-landing .lp-btn.sm{min-height:40px;padding:0 16px;font-size:var(--s-sm)}
.app-landing .lp-btn.xs{min-height:30px;padding:0 12px;font-size:var(--s-xs)}
.app-landing .lp-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.app-landing .lp-link-quiet{color:var(--lp-ink);font-weight:var(--fw-medium);background:none;border:0;padding:0;cursor:pointer;font-size:inherit;text-decoration:underline;text-decoration-color:#CCCCCC;text-underline-offset:4px}
.app-landing .lp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.app-landing .lp-actions.center{justify-content:center}

/* ── header ── */
.app-landing .lp-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid transparent;transition:border-color var(--m-base)}
.app-landing .lp-header.scrolled{border-bottom-color:var(--lp-line)}
.app-landing .lp-header-in{display:flex;align-items:center;gap:20px;min-height:64px}
.app-landing .lp-brand{display:inline-flex;align-items:baseline;gap:8px;color:var(--lp-ink);flex:none}
.app-landing .lp-sys{font-family:var(--f-latin);font-weight:var(--fw-medium);font-size:calc(var(--s-md) * 1.05);letter-spacing:-.01em;color:var(--lp-ink)}
.app-landing .lp-nav{display:flex;gap:26px;margin-inline-start:12px}
.app-landing .lp-nav a{color:var(--lp-text2);font-size:var(--s-sm);font-weight:var(--fw-medium);transition:color var(--m-fast)}
.app-landing .lp-nav a:hover{color:var(--lp-ink)}
.app-landing .lp-header-actions{display:flex;align-items:center;gap:14px;margin-inline-start:auto}
.app-landing .lp-lang{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--lp-text2);font-size:var(--s-sm);font-weight:var(--fw-medium);cursor:pointer;min-height:44px;padding:0 4px}
.app-landing .lp-lang:hover{color:var(--lp-ink)}
.app-landing .lp-header-actions .lp-link-quiet{font-size:var(--s-sm);text-decoration:none}
.app-landing .lp-burger{display:none;width:44px;height:44px;border-radius:999px;border:0;background:var(--lp-gray);align-items:center;justify-content:center;cursor:pointer}
.app-landing .lp-burger-lines{display:flex;flex-direction:column;gap:5px}
.app-landing .lp-burger-lines i{display:block;width:18px;height:2px;border-radius:2px;background:var(--lp-ink)}
.app-landing .lp-sheet{display:none}
@media (max-width:900px){
  .app-landing .lp-nav,.app-landing .hide-sm{display:none}
  .app-landing .lp-burger{display:inline-flex}
  .app-landing .lp-header-actions{gap:8px}
  .app-landing .lp-header-actions .lp-lang span{display:none}
  .app-landing .lp-sheet:not([hidden]){display:flex;flex-direction:column;padding:8px clamp(18px,5vw,40px) 18px;border-top:1px solid var(--lp-line);background:var(--lp-white);animation:lp-drop var(--m-base) var(--m-ease)}
  .app-landing .lp-sheet a{padding:14px 0;border-bottom:1px solid var(--lp-line);color:var(--lp-ink);font-weight:var(--fw-medium);font-size:var(--s-lg)}
}
@media (max-width:420px){.app-landing .lp-header .lp-btn.sm{padding:0 12px}.app-landing .lp-sys{display:none}}
@keyframes lp-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── hero ── */
.app-landing .lp-hero{position:relative;padding-block:clamp(40px,7vw,96px) clamp(48px,7vw,104px);overflow:hidden}
.app-landing .lp-hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.app-landing .lp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--s-sm);font-weight:var(--fw-semibold);color:var(--lp-purple-text);margin-bottom:14px}
.app-landing .lp-hero h1{font-size:clamp(40px,6.4vw,76px);line-height:1.08;letter-spacing:var(--tr-display);font-weight:var(--fw-bold)}
:lang(ar) .app-landing .lp-hero h1,.app-landing:lang(ar) .lp-hero h1{line-height:1.2}
.app-landing .lp-lead{font-size:clamp(18px,1.9vw,22px);line-height:1.55;color:var(--lp-text2);margin-top:20px;max-width:34ch}
.app-landing .lp-points{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px 20px}
.app-landing .lp-points li{display:inline-flex;align-items:center;gap:8px;font-size:var(--s-sm);font-weight:var(--fw-medium)}
.app-landing .lp-points .yi{color:var(--lp-purple)}
.app-landing .lp-hero-art{position:relative;display:flex;justify-content:center;min-height:420px}
.app-landing .lp-blob{position:absolute;border-radius:48% 52% 55% 45% / 50% 45% 55% 50%;z-index:0}
.app-landing .lp-blob.sand{width:72%;aspect-ratio:1;background:var(--lp-sand-l);inset-inline-start:2%;top:10%}
.app-landing .lp-blob.lav{width:52%;aspect-ratio:1;background:var(--lp-lav);inset-inline-end:0;bottom:4%}
.app-landing .lp-tag{position:absolute;z-index:3;inset-inline-end:8px;bottom:0;background:rgba(255,255,255,.92);border:1px solid var(--lp-line);color:var(--lp-text2);font-size:var(--s-xxs);padding:4px 10px;border-radius:999px}
.app-landing .lp-tag.in-card{position:static;display:inline-block;margin-top:12px;align-self:flex-start}
@media (max-width:900px){
  .app-landing .lp-hero-in{grid-template-columns:1fr}
  .app-landing .lp-hero-art{min-height:0;padding-top:8px}
  .app-landing .lp-lead{max-width:none}
}

/* ── phone with a clip ── */
.app-landing .lp-phone{position:relative;z-index:2;width:min(300px,74vw);aspect-ratio:9/19;border-radius:44px;background:var(--lp-ink);padding:10px;box-shadow:0 40px 80px -30px rgba(8,8,8,.45),0 0 0 1px rgba(8,8,8,.06);transform:rotate(-2deg);transition:transform var(--m-slow) var(--m-ease)}
[dir=ltr] .app-landing .lp-phone{transform:rotate(2deg)}
.app-landing .lp-phone:hover{transform:rotate(0)}
.app-landing .lp-phone-screen{position:relative;width:100%;height:100%;border-radius:35px;overflow:hidden;background:#111}
.app-landing .lp-clip{width:100%;height:100%;object-fit:cover;display:block}
.app-landing .lp-phone-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;color:#fff;background:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 24%,transparent 62%,rgba(0,0,0,.62))}
.app-landing .lp-chip-dark{font-family:var(--f-latin);font-weight:700;font-size:13px;letter-spacing:.02em;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px 10px;border-radius:999px}
.app-landing .lp-phone-side{position:absolute;inset-inline-end:12px;bottom:110px;display:flex;flex-direction:column;gap:18px}
.app-landing .lp-phone-side span{display:inline-flex;width:40px;height:40px;border-radius:999px;align-items:center;justify-content:center;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.app-landing .lp-phone-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.app-landing .lp-phone-bottom strong{font-size:17px;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.app-landing .lp-order-pill{display:inline-flex;align-items:center;gap:6px;background:var(--lp-white);color:var(--lp-ink);font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px}

/* ── sections ── */
.app-landing .lp-section{padding-block:clamp(64px,9vw,120px);scroll-margin-top:64px}
.app-landing .lp-section.tone-sand{background:var(--lp-sand-l)}
.app-landing .lp-section.tone-lavender{background:var(--lp-lav)}
.app-landing .lp-head{max-width:760px;margin-bottom:clamp(32px,4.5vw,56px)}
.app-landing .lp-head h2{font-size:clamp(30px,4.2vw,50px);line-height:1.15;letter-spacing:var(--tr-display)}
.app-landing .lp-sub{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--lp-text2);margin-top:14px;max-width:60ch}
.app-landing .lp-h3{font-size:var(--s-xl)}

/* features */
.app-landing .lp-features{display:grid;gap:16px}
.app-landing .lp-features.cols-4{grid-template-columns:repeat(4,1fr)}
.app-landing .lp-features.cols-3{grid-template-columns:repeat(3,1fr)}
.app-landing .lp-features.cols-2{grid-template-columns:repeat(2,1fr)}
.app-landing .lp-feature{background:var(--lp-white);border:1px solid var(--lp-line);border-radius:24px;padding:26px 24px;transition:transform var(--m-base) var(--m-ease),box-shadow var(--m-base)}
.app-landing .tone-sand .lp-feature,.app-landing .tone-lavender .lp-feature{border-color:transparent}
.app-landing .lp-feature:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(8,8,8,.25)}
.app-landing .lp-ico{display:inline-flex;width:46px;height:46px;border-radius:14px;align-items:center;justify-content:center;background:var(--lp-lav);color:var(--lp-purple-text);margin-bottom:18px}
.app-landing .tone-lavender .lp-ico{background:var(--lp-lav-mid)}
.app-landing .lp-feature h3{font-size:calc(var(--s-md) * 1.12);margin-bottom:8px}
.app-landing .lp-feature p{color:var(--lp-text2);font-size:var(--s-sm);line-height:1.6}
@media (max-width:1000px){.app-landing .lp-features.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.app-landing .lp-features.cols-3{grid-template-columns:1fr}}
@media (max-width:560px){.app-landing .lp-features.cols-4,.app-landing .lp-features.cols-2{grid-template-columns:1fr}}

/* steps */
.app-landing .lp-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));counter-reset:s}
@media (min-width:1100px){.app-landing .lp-steps.n-5{grid-template-columns:repeat(5,1fr)}.app-landing .lp-steps.n-4{grid-template-columns:repeat(4,1fr)}}
.app-landing .lp-step{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:24px;background:var(--lp-white);border:1px solid var(--lp-line)}
.app-landing .tone-sand .lp-step,.app-landing .tone-lavender .lp-step{border-color:transparent}
.app-landing .lp-step-n{display:inline-flex;width:38px;height:38px;border-radius:999px;align-items:center;justify-content:center;background:var(--lp-ink);color:var(--lp-white);font-weight:700;font-size:15px}
.app-landing .lp-step h3{font-size:calc(var(--s-md) * 1.1);margin-bottom:6px}
.app-landing .lp-step p{color:var(--lp-text2);font-size:var(--s-sm);line-height:1.6}

/* split (preview + features) */
.app-landing .lp-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.app-landing .lp-split{grid-template-columns:1fr}.app-landing .lp-split.reverse>:first-child{order:2}}

/* product previews */
.app-landing .lp-preview{position:relative;background:var(--lp-white);border:1px solid var(--lp-line);border-radius:28px;padding:18px;box-shadow:0 30px 70px -40px rgba(8,8,8,.35)}
.app-landing .lp-preview.dark{background:var(--lp-ink);border-color:var(--lp-ink);color:var(--lp-white);z-index:2;width:min(460px,100%)}
.app-landing .lp-hero-art .lp-preview.dark{margin-block:30px;transform:rotate(-1.5deg)}
[dir=ltr] .app-landing .lp-hero-art .lp-preview.dark{transform:rotate(1.5deg)}
.app-landing .lp-preview-bar{display:flex;align-items:center;gap:12px;font-size:var(--s-sm);font-weight:var(--fw-semibold);padding:4px 4px 14px}
.app-landing .lp-preview-bar .dots{display:inline-flex;gap:6px}
.app-landing .lp-preview-bar .dots i{width:10px;height:10px;border-radius:99px;background:#E1E1E1}
.app-landing .lp-preview.dark .lp-preview-bar .dots i{background:#3A3A3A}
.app-landing .lp-orders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.app-landing .lp-orders li{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--lp-gray);font-size:var(--s-sm)}
.app-landing .lp-orders li.tone-new{background:var(--lp-lav);outline:1.5px solid var(--lp-purple)}
.app-landing .lp-order-n{font-weight:700}
.app-landing .lp-status{font-size:var(--s-xs);color:var(--lp-text2);white-space:nowrap}
.app-landing .lp-orders li.tone-ready .lp-status{color:#276B43;font-weight:600}
.app-landing .lp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.app-landing .lp-kpis div{background:var(--lp-ink2);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:4px}
.app-landing .lp-kpis strong{font-size:28px;font-weight:700}
.app-landing .lp-kpis span{font-size:var(--s-xs);color:#BDBDBD}
.app-landing .lp-bars{display:flex;align-items:flex-end;gap:6px;height:120px;padding:8px 2px 30px}
.app-landing .lp-bars i{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(to top,var(--lp-purple),#B79BFF);min-height:6px}
.app-landing .lp-clips{position:relative;display:flex;justify-content:center;padding-bottom:20px}

/* coverage art */
.app-landing .lp-coverage{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(8,8,8,.35)}
.app-landing .lp-coverage svg{display:block;width:100%;height:auto}
.app-landing .lp-zone{position:absolute;font-size:var(--s-xs);font-weight:600;background:var(--lp-white);border:1px solid var(--lp-line);padding:3px 10px;border-radius:999px}
.app-landing .lp-zone.z1{top:18%;inset-inline-start:18%}
.app-landing .lp-zone.z2{top:44%;inset-inline-end:10%}
.app-landing .lp-zone.z3{bottom:14%;inset-inline-start:36%}
.app-landing .lp-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.app-landing .lp-checks li{display:flex;gap:12px;align-items:flex-start;font-size:calc(var(--s-md) * 1.04);line-height:1.55}
.app-landing .lp-checks .yi{flex:none;color:var(--lp-purple);margin-top:3px}

/* POS */
.app-landing .lp-pos{display:grid;gap:16px}
.app-landing .lp-pos-main{background:var(--lp-ink);color:var(--lp-white);border-radius:28px;padding:30px}
.app-landing .lp-pos-main h3{font-family:var(--f-latin);font-size:30px}
.app-landing .lp-pos-main p{color:#D6D6D6;margin-top:10px;max-width:70ch;line-height:1.6}
.app-landing .lp-badge{display:inline-flex;align-items:center;font-size:var(--s-xs);font-weight:600;padding:5px 12px;border-radius:999px}
.app-landing .lp-badge.ok{background:#E3F2E7;color:#1E5A36}
.app-landing .lp-badge.soon{background:var(--lp-lav-mid);color:var(--lp-ink)}
.app-landing .lp-note{display:flex;gap:10px;align-items:flex-start;margin-top:20px;color:var(--lp-text2);font-size:var(--s-sm);line-height:1.6}
.app-landing .lp-note .yi{flex:none;margin-top:2px}

/* plans & trial */
.app-landing .lp-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.app-landing .lp-plan{background:var(--lp-white);border-radius:24px;padding:28px;border:1px solid var(--lp-line)}
.app-landing .tone-sand .lp-plan{border-color:transparent}
.app-landing .lp-plan h3{font-size:var(--s-lg);margin-bottom:10px}
.app-landing .lp-plan p{color:var(--lp-text2);line-height:1.6}
.app-landing .lp-plan.wide{grid-column:span 2}
@media (max-width:640px){.app-landing .lp-plan.wide{grid-column:auto}}
.app-landing .lp-plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.app-landing .lp-plan li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.app-landing .lp-plan li .yi{flex:none;color:var(--lp-purple);margin-top:2px}
.app-landing .lp-price{font-size:34px;font-weight:700;color:var(--lp-ink)!important}
.app-landing .lp-price small{font-size:var(--s-sm);font-weight:500;color:var(--lp-text2)}
.app-landing .lp-trial{display:flex;gap:clamp(20px,4vw,48px);align-items:center;margin-top:24px;background:var(--lp-ink);color:var(--lp-white);border-radius:32px;padding:clamp(26px,4vw,48px)}
.app-landing .lp-trial h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:10px}
.app-landing .lp-trial p{color:#D6D6D6;line-height:1.65;max-width:62ch}
.app-landing .lp-trial .lp-muted{color:#A8A8A8;margin-top:10px}
.app-landing .lp-trial-num{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(120px,16vw,170px);aspect-ratio:1;border-radius:999px;background:var(--lp-purple);color:var(--lp-white)}
.app-landing .lp-trial-num span{font-size:clamp(44px,6vw,64px);font-weight:700;line-height:1}
.app-landing .lp-trial-num small{font-size:var(--s-sm);opacity:.9}
@media (max-width:640px){.app-landing .lp-trial{flex-direction:column;text-align:center}}
.app-landing .lp-req{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){.app-landing .lp-req{grid-template-columns:1fr}}

/* FAQ */
.app-landing .lp-faq{display:flex;flex-direction:column;gap:10px;max-width:860px}
.app-landing .lp-faq-item{background:var(--lp-white);border-radius:20px;border:1px solid var(--lp-line)}
.app-landing .tone-sand .lp-faq-item{border-color:transparent}
.app-landing .lp-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;font-weight:var(--fw-semibold);font-size:calc(var(--s-md) * 1.04);min-height:44px}
.app-landing .lp-faq-item summary::-webkit-details-marker{display:none}
.app-landing .lp-faq-item summary .yi{flex:none;transition:transform var(--m-base) var(--m-ease);color:var(--lp-text2)}
.app-landing .lp-faq-item[open] summary .yi{transform:rotate(180deg)}
.app-landing .lp-faq-item p{padding:0 22px 22px;color:var(--lp-text2);line-height:1.7;animation:lp-drop var(--m-base) var(--m-ease)}

/* CTA band + footer */
.app-landing .lp-cta{padding-block:clamp(72px,10vw,128px);background:var(--lp-ink);color:var(--lp-white);text-align:center;position:relative;overflow:hidden}
.app-landing .lp-cta::before{content:"";position:absolute;width:520px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(136,85,255,.38),transparent);top:-200px;inset-inline-start:-120px;pointer-events:none}
.app-landing .lp-cta-in{position:relative}
.app-landing .lp-cta h2{font-size:clamp(34px,5vw,60px);line-height:1.12}
.app-landing .lp-cta p{color:#CCCCCC;margin-top:14px;font-size:clamp(17px,1.6vw,20px)}
.app-landing .lp-cta .lp-btn.primary{background:var(--lp-white);color:var(--lp-ink)}
.app-landing .lp-cta .lp-btn.ghost{color:var(--lp-white);border-color:#4A4A4A}
.app-landing .lp-cta .lp-btn.ghost:hover{background:#1F1F1F}
.app-landing .lp-cta-note{margin-top:22px!important}
.app-landing .lp-cta-note a{color:#CCCCCC;text-decoration:underline;text-underline-offset:4px}
.app-landing .lp-footer{padding-block:40px 28px;border-top:1px solid var(--lp-line)}
.app-landing .lp-footer-in{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.app-landing .lp-footer-links{display:flex;flex-wrap:wrap;gap:12px 24px}
.app-landing .lp-footer-links a{color:var(--lp-text2);font-size:var(--s-sm)}
.app-landing .lp-footer-links a:hover{color:var(--lp-ink)}

/* reveal on scroll: only once scripts run (html.js), so prerendered content is never hidden */
.js .app-landing .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--m-ease),transform .7s var(--m-ease);transition-delay:var(--d,0ms)}
.js .app-landing .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .app-landing .reveal{opacity:1;transform:none}.app-landing .lp-phone{transform:none}}

/* ═════════════ request form, status, activation ═════════════ */
.app-landing .lp-apply{min-height:100vh;background:linear-gradient(to bottom,var(--lp-sand-l),var(--lp-white) 320px)}
.app-landing .lp-apply-top{padding-block:16px}
.app-landing .lp-apply-top .row{min-height:44px}
.app-landing .lp-apply-title{font-size:clamp(28px,4vw,40px);line-height:1.2;margin-bottom:10px}
.app-landing .lp-progress{list-style:none;margin:28px 0 8px;padding:0;display:flex;gap:6px}
.app-landing .lp-progress li{flex:1;display:flex;flex-direction:column;gap:8px;font-size:var(--s-xs);color:var(--lp-text2)}
.app-landing .lp-progress li::before{content:"";display:block;height:4px;border-radius:4px;background:#E6E6E6}
.app-landing .lp-progress li.done::before{background:var(--lp-ink)}
.app-landing .lp-progress li.on::before{background:var(--lp-purple)}
.app-landing .lp-progress li.on{color:var(--lp-ink);font-weight:600}
.app-landing .lp-progress li span{display:none}
.app-landing .lp-progress em{font-style:normal}
@media (max-width:560px){.app-landing .lp-progress li:not(.on) em{display:none}}
.app-landing .lp-form{display:flex;flex-direction:column;gap:18px;margin-top:22px;background:var(--lp-white);border:1px solid var(--lp-line);border-radius:28px;padding:clamp(20px,4vw,32px);box-shadow:0 30px 60px -48px rgba(8,8,8,.4)}
.app-landing .lp-field{display:flex;flex-direction:column;gap:8px}
.app-landing .lp-label{font-weight:var(--fw-semibold);font-size:var(--s-sm)}
.app-landing .lp-label b{color:var(--lp-purple-text)}
.app-landing .lp-input{width:100%;min-height:50px;border:1px solid #D9D9D9;border-radius:14px;padding:12px 14px;background:var(--lp-white);font-size:16px;transition:border-color var(--m-fast),box-shadow var(--m-fast);-webkit-appearance:none;appearance:none}
.app-landing select.lp-input{background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%);background-size:6px 6px;background-repeat:no-repeat;background-position:left 18px center,left 12px center;padding-inline-end:36px}
[dir=ltr] .app-landing select.lp-input{background-position:right 12px center,right 18px center}
.app-landing textarea.lp-input{min-height:96px;resize:vertical}
.app-landing .lp-input:focus{outline:none;border-color:var(--lp-ink);box-shadow:0 0 0 4px var(--lp-lav)}
.app-landing .lp-field.has-err .lp-input{border-color:#B3261E}
.app-landing .lp-err{color:#B3261E;font-size:var(--s-xs)}
.app-landing .lp-hint{color:var(--lp-text2);font-size:var(--s-xs)}
.app-landing .lp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.app-landing .lp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.app-landing .lp-grid2{grid-template-columns:1fr}}
.app-landing .lp-mini{display:flex;flex-direction:column;gap:6px;font-size:var(--s-xs);color:var(--lp-text2)}
.app-landing .lp-chips{display:flex;flex-wrap:wrap;gap:8px}
.app-landing .lp-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #D9D9D9;background:var(--lp-white);font-size:var(--s-sm);cursor:pointer;transition:background var(--m-fast),border-color var(--m-fast)}
.app-landing .lp-chip[aria-pressed=true]{background:var(--lp-lav);border-color:var(--lp-purple);color:var(--lp-ink);font-weight:600}
.app-landing .lp-chip .yi{color:var(--lp-purple)}
.app-landing .lp-form-actions{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
.app-landing .lp-form-actions .lp-btn.primary{margin-inline-start:auto;min-width:140px}
.app-landing .lp-alert{border-radius:16px;padding:14px 16px;font-size:var(--s-sm);line-height:1.6;margin-top:12px}
.app-landing .lp-alert.bad{background:#FCE4E1;color:#8C1D17}
.app-landing .lp-alert.warn{background:#FFF2E2;color:#6B4600}
.app-landing .lp-alert.ok{background:#E3F2E7;color:#1E5A36}
.app-landing .lp-hp{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
.app-landing .lp-doc{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;border:1px dashed #CFCFCF}
.app-landing .lp-doc.ok{border-style:solid;border-color:var(--lp-line);background:var(--lp-gray)}
.app-landing .lp-doc-ic{display:inline-flex;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;background:var(--lp-lav);color:var(--lp-purple-text);flex:none}
.app-landing .lp-doc.ok .lp-doc-ic{background:#E3F2E7;color:#1E5A36}
.app-landing .lp-req-tag{font-size:var(--s-xxs);font-weight:600;color:var(--lp-purple-text)}
.app-landing .lp-icon-btn{width:40px;height:40px;border-radius:999px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--lp-text2)}
.app-landing .lp-icon-btn:hover{background:#ECECEC}
.app-landing .lp-summary{margin:0;display:flex;flex-direction:column}
.app-landing .lp-summary div{display:grid;grid-template-columns:minmax(120px,38%) 1fr auto;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--lp-line)}
.app-landing .lp-summary dt{color:var(--lp-text2);font-size:var(--s-sm)}
.app-landing .lp-summary dd{margin:0;font-weight:500}
.app-landing .lp-consent{display:flex;gap:12px;align-items:flex-start;font-size:var(--s-sm);line-height:1.6;cursor:pointer}
.app-landing .lp-consent input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--lp-ink)}
.app-landing .lp-done,.app-landing .lp-activate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding-top:24px}
.app-landing .lp-activate .stack,.app-landing .lp-activate .lp-form{width:100%;text-align:start}
.app-landing .lp-done-ic{display:inline-flex;width:72px;height:72px;border-radius:999px;align-items:center;justify-content:center;background:#E3F2E7;color:#1E5A36}
.app-landing .lp-done-ic.lav{background:var(--lp-lav);color:var(--lp-purple-text)}
.app-landing .lp-linkbox{width:100%;display:flex;flex-direction:column;gap:10px;align-items:stretch;background:var(--lp-white);border:1px solid var(--lp-line);border-radius:20px;padding:16px;text-align:start}
.app-landing .lp-linkbox code{font-size:12px;word-break:break-all;background:var(--lp-gray);padding:10px;border-radius:10px}
.app-landing .lp-status-card{background:var(--lp-white);border:1px solid var(--lp-line);border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:8px}
.app-landing .lp-status-card h2{font-size:var(--s-xl)}
.app-landing .lp-status-card.s-approved,.app-landing .lp-status-card.s-activated{border-color:var(--lp-purple);background:var(--lp-lav)}
.app-landing .lp-track{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.app-landing .lp-track li{display:flex;align-items:center;gap:12px;color:var(--lp-text2)}
.app-landing .lp-track li>span{display:inline-flex;width:30px;height:30px;border-radius:999px;align-items:center;justify-content:center;background:#EDEDED;font-size:13px;font-weight:600}
.app-landing .lp-track li.done{color:var(--lp-ink)}
.app-landing .lp-track li.done>span{background:var(--lp-ink);color:var(--lp-white)}
.app-landing .lp-track li.on{color:var(--lp-ink);font-weight:600}
.app-landing .lp-track li.on>span{background:var(--lp-purple);color:var(--lp-white)}
.app-landing .lp-invite-card{background:var(--lp-lav);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:6px}
.app-landing .lp-otp{font-size:24px;letter-spacing:.3em;text-align:center}
.app-landing .lp-doc .grow{flex:1;min-width:0}
@media (max-width:560px){.app-landing .lp-doc{flex-wrap:wrap}.app-landing .lp-doc .grow{flex:1 1 calc(100% - 52px)}.app-landing .lp-doc .lp-btn{margin-inline-start:52px}}
/* Join: new account or sign in */
.app-landing .lp-choice{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:28px}
.app-landing .lp-choice-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;border-radius:28px;border:1px solid var(--lp-line);background:#fff}
.app-landing .lp-choice-card.primary{background:var(--lp-lav);border-color:transparent}
.app-landing .lp-choice-card h2{margin:0;font-size:var(--s-lg, 22px)}
.app-landing .lp-choice-card p{margin:0}
.app-landing .lp-choice-card .lp-btn{align-self:stretch;justify-content:center;margin-top:auto}
@media (max-width:760px){.app-landing .lp-choice{grid-template-columns:1fr}}
.app-landing .lp-auth{padding:28px;border-radius:28px;border:1px solid var(--lp-line);background:#fff;margin-top:24px}
.app-landing .lp-auth-title{margin:0 0 6px}
.app-landing .lp-account{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:16px;background:var(--lp-gray);margin:16px 0}
.app-landing .lp-choice-card.primary .lp-ico{background:#fff;margin-bottom:0}.app-landing .lp-choice-card .lp-ico{margin-bottom:0}