/* =========================================================
   Niqati — Menu landing pages
   Loads after style.css + premium.css on /menu/, /menu/restaurants/,
   /menu/cafes/ and their /ar/ mirrors. Reuses the brand tokens from
   style.css; adds nothing to the global namespace that isn't prefixed.

   THREE HOUSE RULES THIS FILE OBEYS — read before editing:

   1. Every dark band sets a solid `background-color`, never only a
      gradient. js/main.js:40-52 samples the computed backgroundColor
      just under the sticky nav on every scroll frame to decide whether
      to flip the bar to .on-dark; a gradient-only background reads as
      transparent there and the nav would stay in light mode over it.

   2. RESTING STATE == FINAL STATE for every animation. style.css:1464
      kills all animation AND transition under prefers-reduced-motion
      with !important, so anything that only becomes visible via
      keyframes would stay invisible forever for those users.

   3. Logical properties throughout (inline-start/end, padding-inline).
      These pages ship in Arabic RTL first; there are no [dir="rtl"]
      overrides in this file and there should never need to be.
   ========================================================= */

/* ── Shared atoms ─────────────────────────────────────────────── */

/* Eyebrow on a dark ground. The light .eyebrow is an orange-50 pill,
   which disappears against --ink. */
.m-eyebrow-dark {
  background: rgba(255, 107, 26, .14);
  color: var(--orange-300);
  border-color: rgba(255, 107, 26, .3);
}

/* A hairline that fades at both ends — used to separate bands inside a
   dark card without drawing a hard box. */
.m-rule {
  block-size: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}
.m-rule-light {
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* Numeric runs (prices, counts, latin words) inside Arabic prose.
   Without the isolate, "15" next to "٥٠٠" reorders unpredictably. */
.m-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ── Hero ──────────────────────────────────────────────────────
   Same ambient aurora idea as .cards-hero, rebuilt for two columns.
   The glow is one transform-animated pseudo-element so it lives on the
   compositor: never animate its gradient stops, that repaints a
   600px-tall blurred layer every frame. */
.m-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: 118px 72px;
}
.m-hero::before {
  content: "";
  position: absolute;
  inset: -28% -18% auto -18%;
  block-size: 640px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(660px 380px at 82% 4%, rgba(255, 107, 26, .16), transparent 62%),
    radial-gradient(520px 360px at 6% 18%, rgba(109, 94, 246, .10), transparent 62%),
    radial-gradient(460px 340px at 46% 46%, rgba(14, 165, 233, .07), transparent 66%);
  will-change: transform;
  animation: mAurora 20s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes mAurora {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(2%, 1.4%, 0) scale(1.07); }
}
/* Dot grid, masked to fade out before it reaches the copy. */
.m-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(11, 11, 11, .035) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(62% 58% at 50% 26%, #000, transparent 76%);
  mask-image: radial-gradient(62% 58% at 50% 26%, #000, transparent 76%);
}

.m-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 392px);
  align-items: center;
  gap: 48px 56px;
}
/* justify-self:center below 980px makes this item content-sized, so a
   percentage inside it would resolve against the phone's own intrinsic
   392px rather than the track. Cap it at the track width explicitly. */
.m-hero-stage { min-inline-size: 0; max-inline-size: 100%; }
.m-hero h1 {
  line-height: 1.1;
  margin-block: 16px 0;
}
/* The extractable opening statement — the paragraph an answer engine
   lifts. Deliberately the largest body text on the page. */
.m-lede {
  font-size: clamp(17px, 1.7vw, 20.5px);
  line-height: 1.7;
  color: var(--ink-2);
  max-inline-size: 60ch;
  margin-block: 18px 0;
}
.m-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-block-start: 30px;
}
.m-hero-note {
  font-size: 13.5px;
  color: var(--muted);
  margin-block-start: 16px;
}

@media (max-width: 980px) {
  .m-hero { padding-block: 100px 48px; }
  .m-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .m-hero-stage { justify-self: center; }
}
@media (max-width: 720px) {
  .m-hero { padding-block: 88px 36px; }
  /* A 640px blurred layer animating behind a scrolling page is the most
     expensive thing here on a mid-range phone. Keep the colour, drop
     the motion. */
  .m-hero::before { animation: none; inset: -18% -10% auto -10%; block-size: 420px; }
}

/* ── Proof strip ───────────────────────────────────────────────
   Four claims under the hero. Not a stat row — these are qualitative,
   so no giant numerals; the weight goes on the label. */
.m-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-block-start: 44px;
  padding-block-start: 30px;
  border-block-start: 1px solid var(--line);
}
.m-proof-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.m-proof-mark {
  flex: none;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  background: var(--orange-50);
  border: 1px solid #FFE2CE;
}
.m-proof-item strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.m-proof-item > div > span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-block-start: 3px;
}
@media (max-width: 900px) { .m-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } }
@media (max-width: 520px) { .m-proof { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   THE PHONE — the in-page replica of the real menu
   ---------------------------------------------------------
   The website uses a styled sample rather than an iframe. Its five
   layout choices mirror menu_web/src/lib/templates.ts; the sample
   photography and warm cafe palette are presentation assets.
   The palette below mirrors menu_web/src/app/globals.css :root, kept
   under an --m- prefix so it can never leak into the marketing page.

   The five templates share ONE set of markup and differ only in CSS
   keyed off [data-template] on .m-screen — which is exactly how the
   real product works. Adding a sixth template here should mean adding
   a selector, never a second copy of the markup.
   ========================================================= */
.m-phone {
  --m-brand: #F97316;
  --m-brand-ink: #B4490B;   /* the ≥4.5:1-on-white value theme.ts derives */
  --m-tint: #FEF1E7;        /* 92% wash toward white */
  --m-on-brand: #FFFFFF;
  --m-bg: #FBFAF9;
  --m-surface: #FFFFFF;
  --m-sunk: #F4F2F0;
  --m-line: #E9E5E1;
  --m-text: #17140F;
  --m-text-2: #6B6259;
  --m-text-3: #9A9088;
  --m-danger: #C2410C;

  position: relative;
  /* A grid item defaults to min-width:auto, so a hard 392px here grows the
     track past a 375px viewport — and html{overflow-x:hidden} then clips
     the RTL start edge silently instead of showing a scrollbar. min() makes
     the phone itself shrink; aspect-ratio keeps it in proportion. */
  inline-size: min(392px, 100%);
  aspect-ratio: 392 / 800;
  margin-inline: auto;
  padding: 12px;
  border-radius: 54px;
  background: linear-gradient(160deg, #2A2A2E 0%, #141416 52%, #202024 100%);
  box-shadow:
    0 50px 100px -30px rgba(11, 11, 11, .45),
    0 12px 30px -12px rgba(11, 11, 11, .3),
    inset 0 0 0 1px rgba(255, 255, 255, .1);
}
/* Side buttons — two on the start edge, one on the end edge. Purely
   decorative, so they are pseudo-elements and carry no markup cost. */
.m-phone::before,
.m-phone::after {
  content: "";
  position: absolute;
  inline-size: 3px;
  border-radius: 3px;
  background: #303035;
}
.m-phone::before { inset-inline-start: -3px; inset-block-start: 128px; block-size: 58px; }
.m-phone::after  { inset-inline-end: -3px;  inset-block-start: 108px; block-size: 92px; }

.m-screen {
  position: relative;
  block-size: 100%;
  overflow: hidden;
  border-radius: 43px;
  background: var(--m-bg);
  color: var(--m-text);
  /* The real menu ships Cairo, self-hosted. Rather than pull a third
     family in for a mock, the replica inherits the page font — Tajawal on
     the Arabic pages, Inter on the English ones — so it always matches the
     language it is being read in. */
  font-size: 14px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
}
/* Dynamic island */
.m-island {
  position: absolute;
  inset-block-start: 9px;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 96px;
  block-size: 26px;
  border-radius: 999px;
  background: #0B0B0B;
  z-index: 5;
}

/* ── Menu header: cover wash, logo, name, announcement ────────── */
.m-mhead {
  position: relative;
  flex: none;
  padding: 46px 18px 14px;
  background: linear-gradient(170deg, var(--m-tint) 0%, var(--m-surface) 100%);
  border-block-end: 1px solid var(--m-line);
}
.m-mbrand { display: flex; align-items: center; gap: 11px; }
.m-mlogo {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  background: var(--m-brand);
  color: var(--m-on-brand);
  box-shadow: 0 4px 12px rgba(249, 115, 22, .28);
}
/* Both are spans inside one span so the markup stays flat; block display
   keeps the name and the location on their own lines instead of flowing
   around the logo when the phone is scaled down (homepage teaser). */
.m-mname { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.m-mmeta { display: block; font-size: 12px; line-height: 1.35; color: var(--m-text-2); }
.m-announce {
  margin-block-start: 12px;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--m-brand-ink);
  background: var(--m-tint);
  border: 1px solid rgba(249, 115, 22, .2);
}

/* Sticky category rail — the real page scroll-spies this. */
.m-rail {
  flex: none;
  display: flex;
  gap: 7px;
  padding: 11px 18px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--m-surface);
  border-block-end: 1px solid var(--m-line);
}
.m-rail::-webkit-scrollbar { display: none; }
.m-rail span {
  flex: none;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--m-text-2);
  background: var(--m-sunk);
  white-space: nowrap;
}
.m-rail span[data-on] {
  color: var(--m-on-brand);
  background: var(--m-brand);
}

/* ── The scrolling list ───────────────────────────────────────── */
.m-list {
  flex: 1;
  min-block-size: 0;
  overflow: hidden;           /* phone previews enable scrolling below */
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-sec {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--m-text-3);
  margin-block-start: 2px;
}

/* One item, one markup. Everything below is a template variation. */
.m-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border-radius: 14px;
  background: var(--m-surface);
  border: 1px solid var(--m-line);
}
.m-item-thumb {
  grid-row: 1;
  grid-column: 2;
  inline-size: 68px;
  block-size: 68px;
  border-radius: 11px;
  background: var(--m-sunk) center / cover no-repeat;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
}
.m-item-body { min-inline-size: 0; }
.m-item-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.m-item-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--m-text-2);
  margin-block-start: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-item-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-block-start: 6px;
}
.m-price { font-size: 13.5px; font-weight: 800; color: var(--m-brand-ink); }
.m-price-was {
  font-size: 12px;
  color: var(--m-text-3);
  text-decoration: line-through;
}
.m-kcal { font-size: 11.5px; color: var(--m-text-3); }
.m-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2.5px 7px;
  border-radius: 999px;
  color: var(--m-brand-ink);
  background: var(--m-tint);
  border: 1px solid rgba(249, 115, 22, .22);
}
.m-tag-new { color: #15803D; background: #ECFDF3; border-color: #BBF7D0; }
.m-dots { display: none; }

/* Sold out — the overlay the live endpoint drives on the real page. */
.m-item[data-sold] { background: var(--m-sunk); }
.m-item[data-sold] .m-item-thumb,
.m-item[data-sold] .m-item-name,
.m-item[data-sold] .m-item-desc,
.m-item[data-sold] .m-item-foot { opacity: .42; }
.m-item[data-sold] .m-item-name::after {
  content: attr(data-soldlabel);
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: var(--m-danger);
  opacity: 1;
  vertical-align: middle;
}

/* Powered-by — forced on for free menus, server-side. */
.m-power {
  flex: none;
  padding: 10px 18px 16px;
  text-align: center;
  font-size: 11px;
  color: var(--m-text-3);
  border-block-start: 1px solid var(--m-line);
  background: var(--m-surface);
}

/* ── Template variations — CSS only, one markup ───────────────── */

/* classic — the default: list + a small photo. Nothing to override. */

/* compact — for the 200-item menu. No photos, no descriptions, one
   line per product. The thumb is display:none rather than hidden, so
   nothing lays out for it. */
.m-screen[data-template="compact"] .m-item-thumb,
.m-screen[data-template="compact"] .m-item-desc { display: none; }
.m-screen[data-template="compact"] .m-item {
  padding: 8px 11px;
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.m-screen[data-template="compact"] .m-item-foot { margin-block-start: 2px; }
.m-screen[data-template="compact"] .m-list { gap: 6px; }

/* elegant — a printed fine-dining card. No photos by design; a dotted
   leader carries the eye to the price. */
.m-screen[data-template="elegant"] .m-item-thumb { display: none; }
.m-screen[data-template="elegant"] .m-item {
  padding: 9px 2px;
  border: 0;
  border-radius: 0;
  background: none;
  border-block-end: 1px solid var(--m-line);
}
.m-screen[data-template="elegant"] .m-item-name {
  font-weight: 700;
  letter-spacing: .01em;
}
.m-screen[data-template="elegant"] .m-dots {
  display: block;
  flex: 1;
  min-inline-size: 18px;
  block-size: 1px;
  align-self: flex-end;
  margin-block-end: 5px;
  border-block-end: 1px dotted var(--m-line);
}
.m-screen[data-template="elegant"] .m-item-foot { flex-wrap: nowrap; }
.m-screen[data-template="elegant"] .m-tag { display: none; }
.m-screen[data-template="elegant"] .m-list { gap: 0; }

/* photo — photography leads. Full-width 16/10 above the copy. */
.m-screen[data-template="photo"] .m-item {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}
.m-screen[data-template="photo"] .m-item-thumb {
  grid-row: auto;
  grid-column: 1;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  font-size: 40px;
}
.m-screen[data-template="photo"] .m-item-body { padding: 11px 13px 13px; }

/* grid — two columns of square tiles. */
.m-screen[data-template="grid"] .m-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}
.m-screen[data-template="grid"] .m-sec { grid-column: 1 / -1; }
.m-screen[data-template="grid"] .m-item {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}
.m-screen[data-template="grid"] .m-item-thumb {
  grid-row: auto;
  grid-column: 1;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  font-size: 32px;
}
.m-screen[data-template="grid"] .m-item-body { padding: 9px 10px 11px; }
.m-screen[data-template="grid"] .m-item-desc { display: none; }

/* The layout swap. A View Transition where the browser has one; a plain
   opacity settle everywhere else. Both land on the same resting state,
   so prefers-reduced-motion (which kills each with !important) leaves a
   correct, fully-visible menu either way. */
@supports not (view-transition-name: none) {
  .m-screen { transition: opacity .18s ease; }
  .m-screen[data-swapping] { opacity: .55; }
}

/* ── Template switcher ─────────────────────────────────────────
   Real radio inputs behind the chips, sitting under the phone in the
   hero: keyboard arrows move between templates for free, and the whole
   control is one <fieldset> so a screen reader announces it as a group.
   With JS off the <noscript> rule hides the chip row and the phone
   simply stays on `classic` — a correct page, minus one control. */
.m-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-block: 22px 0;
  padding: 0;
  border: 0;
}
.m-chips legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.m-chip { position: relative; }
.m-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.m-chip > span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: color .2s, background-color .2s, border-color .2s, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.m-chip:hover > span { transform: translateY(-1px); border-color: #FFD9BF; }
.m-chip input:checked + span {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 6px 18px rgba(255, 107, 26, .28);
}
.m-chip input:focus-visible + span { outline: 3px solid var(--orange-300); outline-offset: 2px; }

/* Miniature layout diagram inside each chip and each template card —
   abstract bars, the same idea as the app's Design-tab thumbnails.
   currentColor so it inverts with the chip. */
.m-mini {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  display: grid;
  gap: 1.5px;
  opacity: .8;
}
.m-mini i { display: block; background: currentColor; border-radius: 1px; min-block-size: 1.5px; }
.m-mini-classic { grid-template-columns: 1fr 4.5px; grid-auto-rows: 1fr; }
.m-mini-compact { grid-auto-rows: 1fr; }
.m-mini-photo   { grid-template-rows: 8px 1fr 1fr; }
.m-mini-elegant { grid-auto-rows: 1fr; }
.m-mini-elegant i:nth-child(even) { opacity: .4; }
.m-mini-grid    { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* The live blurb under the chips. min-block-size stops the phone from
   jumping when a longer description swaps in. */
.m-tdesc {
  min-block-size: 62px;
  margin-block-start: 16px;
  text-align: center;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.m-tdesc [hidden] { display: none; }
.m-tdesc b { color: var(--ink); font-weight: 700; }

/* Template cards — the five explained, each with a bigger version of
   the same diagram. No second phone: the hero already has the real one. */
.m-tcards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-block-start: 40px;
}
.m-tcard {
  padding: 22px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.m-tcard .m-mini {
  inline-size: 40px;
  block-size: 40px;
  gap: 3px;
  color: var(--orange);
  opacity: 1;
  margin-block-end: 14px;
}
.m-tcard h3 { font-size: 16px; margin-block-end: 6px; }
.m-tcard p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.m-tcard .m-lock {
  display: inline-block;
  margin-block-start: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: var(--orange-600);
  background: var(--orange-50);
  border: 1px solid #FFD9BF;
}
@media (max-width: 1000px) { .m-tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .m-tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .m-tcards { grid-template-columns: minmax(0, 1fr); } }

/* ── QR permanence diagram ─────────────────────────────────────
   Dark band. Solid background-color first — see house rule 1. */
.m-qrband {
  background-color: #0B0B0B;
  background-image:
    radial-gradient(680px 360px at 84% -14%, rgba(255, 107, 26, .34), transparent 62%),
    radial-gradient(520px 320px at 4% 106%, rgba(109, 94, 246, .2), transparent 62%);
  color: #fff;
}
.m-qrband h2, .m-qrband h3 { color: #fff; }
.m-qrband p { color: rgba(255, 255, 255, .74); }

.m-flow {
  display: grid;
  grid-template-columns: minmax(0, 208px) auto minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  margin-block-start: 42px;
  padding: 30px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
}
/* The printed sticker. */
.m-sticker {
  padding: 18px 18px 14px;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6);
  /* A hair of rotation so it reads as a physical object on a table
     rather than a UI panel. Resting state, not an animation. */
  transform: rotate(-2.2deg);
}
.m-sticker-cap { font-size: 12.5px; font-weight: 800; color: var(--orange-600); }
.m-sticker-sub { font-size: 11px; color: var(--muted); margin-block-start: 2px; }
.m-sticker svg { display: block; inline-size: 128px; block-size: 128px; margin: 11px auto 9px; }
.m-sticker-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
  direction: ltr;
}
.m-arrow {
  inline-size: 34px;
  color: var(--orange-300);
  display: grid;
  place-items: center;
}
.m-arrow svg { inline-size: 34px; block-size: 20px; }
html[dir="rtl"] .m-arrow svg { transform: scaleX(-1); }

.m-hops { display: grid; gap: 10px; min-inline-size: 0; }
.m-hop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
}
.m-hop-badge {
  flex: none;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #0B0B0B;
  background: var(--orange-300);
}
.m-hop code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: #fff;
  direction: ltr;
  word-break: break-all;
}
.m-hop small { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); margin-block-start: 3px; }

/* The rename control — retype the address, the sticker still resolves. */
.m-rename {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block-start: 22px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
}
.m-rename label { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.m-rename input {
  flex: 1;
  min-inline-size: 140px;
  padding: 9px 13px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: #fff;
  direction: ltr;
  text-align: start;
  background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(255, 255, 255, .18);
}
.m-rename input:focus-visible { outline: 3px solid var(--orange-300); outline-offset: 1px; }
.m-rename-ok {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #6EE7A8;
}

@media (max-width: 900px) {
  .m-flow { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; padding: 22px; }
  .m-arrow { transform: rotate(90deg); }
  html[dir="rtl"] .m-arrow { transform: rotate(90deg); }
  .m-hops { inline-size: 100%; }
}
/* Stacked, the arrow is rotated by its parent; the RTL mirror on the
   glyph would then point it back up. Cancel the mirror when stacked. */
@media (max-width: 900px) {
  html[dir="rtl"] .m-arrow svg { transform: none; }
}

/* ── Analytics ─────────────────────────────────────────────────
   The section this page is really for: three numbers that are
   deliberately not one number. */
.m-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-block-start: 40px;
}
.m-metric {
  position: relative;
  overflow: hidden;
  padding: 24px 24px 22px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.m-metric-k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.m-metric-k i {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--orange);
}
.m-metric-2 .m-metric-k i { background: var(--violet); }
.m-metric-3 .m-metric-k i { background: var(--sky); }
.m-metric-n {
  font-size: clamp(34px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-block: 10px 6px;
  font-variant-numeric: tabular-nums;
}
.m-metric p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 860px) { .m-metrics { grid-template-columns: minmax(0, 1fr); } }

/* The honest explainer — the sentence that makes the three numbers
   worth having. Deliberately loud. */
.m-explain {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-block-start: 20px;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--orange-50);
  border: 1px solid #FFE2CE;
}
.m-explain span { font-size: 20px; line-height: 1.2; flex: none; }
.m-explain p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); }

/* Dashboard mock: chart + sources + top items */
.m-dash {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
  margin-block-start: 18px;
}
.m-card {
  padding: 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.m-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 16px;
}
.m-card-h h3 { font-size: 16px; margin: 0; }
.m-range { display: flex; gap: 4px; }
.m-range span {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-soft);
}
.m-range span[data-on] { color: #fff; background: var(--ink); }

/* Inline SVG bar chart — no chart library, matching the site's
   zero-dependency rule. Bars are <rect>s scaled by the viewBox, so it
   is resolution-independent and costs one element each. */
.m-chart { inline-size: 100%; block-size: auto; display: block; overflow: visible; }
.m-chart .bar-v { fill: var(--orange); }
.m-chart .bar-s { fill: #FFD9BF; }
.m-chart .axis  { fill: var(--muted); font-size: 9px; font-weight: 600; }
.m-chart .grid  { stroke: var(--line); stroke-width: 1; }
.m-legend {
  display: flex;
  gap: 18px;
  margin-block-start: 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.m-legend i {
  display: inline-block;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 3px;
  margin-inline-end: 6px;
  vertical-align: -1px;
}

.m-rows { display: grid; gap: 11px; }
.m-row { display: grid; gap: 5px; }
.m-row-t {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}
.m-row-t b { font-weight: 700; }
.m-row-t span { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.m-bar {
  block-size: 7px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
}
.m-bar i {
  display: block;
  block-size: 100%;
  border-radius: 999px;
  background: var(--grad-brand);
  inline-size: var(--w, 0%);
}
.m-note { font-size: 12.5px; color: var(--muted); margin-block-start: 16px; }
@media (max-width: 900px) { .m-dash { grid-template-columns: minmax(0, 1fr); } }

/* ── Privacy panel ─────────────────────────────────────────────
   A browser-devtools frame. Dark, so: solid background-color. */
.m-privacy {
  background-color: #0B0B0B;
  background-image: radial-gradient(620px 340px at 12% -10%, rgba(14, 165, 233, .16), transparent 62%);
  color: #fff;
}
.m-privacy h2, .m-privacy h3 { color: #fff; }
.m-privacy p { color: rgba(255, 255, 255, .74); }

.m-devtools {
  margin-block-start: 40px;
  border-radius: 18px;
  overflow: hidden;
  background: #131316;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .8);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.m-dt-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  background: #1B1B1F;
  border-block-end: 1px solid rgba(255, 255, 255, .1);
}
.m-dt-dot { inline-size: 11px; block-size: 11px; border-radius: 50%; }
.m-dt-tabs {
  display: flex;
  gap: 3px;
  margin-inline-start: 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
}
.m-dt-tabs b {
  padding: 4px 11px;
  border-radius: 7px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .1);
}
.m-dt-tabs i { padding: 4px 11px; font-style: normal; }
.m-dt-body { padding: 8px 0; }
.m-dt-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-block-end: 1px solid rgba(255, 255, 255, .055);
}
.m-dt-row:last-child { border-block-end: 0; }
.m-dt-row b { font-weight: 600; color: rgba(255, 255, 255, .9); direction: ltr; }
.m-dt-row small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .45); margin-block-start: 2px; }
.m-dt-zero { color: #6EE7A8; font-weight: 700; font-size: 16px; }
.m-dt-keep { color: #FDBA74; font-weight: 700; font-size: 16px; }
.m-dt-empty {
  padding: 26px 18px;
  text-align: center;
  color: rgba(255, 255, 255, .42);
  font-size: 12.5px;
}

/* Prose inside the devtools frame follows the PAGE language, not the
   monospace stack the frame sets. There is no Arabic monospace face in
   the loaded fonts, so Arabic falling through to `monospace` renders
   letter-spaced and broken; only the latin API names stay mono. */
.m-dt-tabs,
.m-dt-row small,
.m-dt-empty { font-family: var(--font-en); }
html[dir="rtl"] .m-dt-tabs,
html[dir="rtl"] .m-dt-row small,
html[dir="rtl"] .m-dt-empty { font-family: var(--font-ar); }

/* ── Item anatomy — "what you can put on a dish" ───────────────
   A real item card with the fields called out beside it. Only fields a
   merchant can actually set in the app today are listed; the badges
   vocabulary, compare-at price, add-on groups and cover image render on
   the diner page but have no editor UI yet, so they are not here. */
.m-anatomy {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 34px 48px;
  margin-block-start: 40px;
}
.m-anatomy-card {
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.m-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.m-field {
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--orange-50);
}
.m-field strong { display: block; font-size: 14.5px; font-weight: 700; }
.m-field span { display: block; font-size: 13px; line-height: 1.55; color: var(--muted); margin-block-start: 3px; }
@media (max-width: 900px) {
  .m-anatomy { grid-template-columns: minmax(0, 1fr); }
  .m-anatomy-card { max-inline-size: min(340px, 100%); }
}
@media (max-width: 560px) { .m-fields { grid-template-columns: minmax(0, 1fr); } }

/* ── Plans ─────────────────────────────────────────────────────
   A comparison table, not the three pricing cards — the question here
   is "how far does free go", and a table answers it in one glance.
   Scrolls inside its own box; the page body never scrolls sideways. */
.m-plans-wrap {
  margin-block-start: 38px;
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.m-plans {
  inline-size: 100%;
  min-inline-size: 520px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.m-plans th, .m-plans td {
  padding: 13px 18px;
  text-align: start;
  border-block-end: 1px solid var(--line);
}
.m-plans thead th {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--muted);
  background: var(--bg-soft);
  white-space: nowrap;
}
.m-plans thead th:first-child { inline-size: 42%; }
.m-plans tbody th { font-weight: 600; color: var(--ink-2); }
.m-plans td { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-plans tbody tr:last-child th, .m-plans tbody tr:last-child td { border-block-end: 0; }
.m-plans .pro { color: var(--orange-600); background: rgba(255, 107, 26, .045); }
.m-yes,
.m-plans .pro.m-yes { color: #15803D; }
.m-no  { color: var(--muted); }
.m-plans-foot { font-size: 13.5px; color: var(--muted); margin-block-start: 16px; }

/* ── Honest scope — what this is not ───────────────────────────
   Stated plainly and without apology. It is the section answer engines
   quote, and the one that stops a bad-fit signup. */
.m-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-block-start: 36px;
}
.m-scope-card {
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.m-scope-card h3 { font-size: 17px; margin-block-end: 8px; }
.m-scope-card p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0; }
.m-scope-card.is-yes { background: #fff; border-color: #FFE2CE; }
.m-scope-card.is-yes h3 { color: var(--orange-600); }
@media (max-width: 760px) { .m-scope { grid-template-columns: minmax(0, 1fr); } }

/* ── Loyalty tie-in ────────────────────────────────────────────
   Two panels: the foot of the menu, and the wallet pass it ends in. */
.m-bridge {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 30px;
  margin-block-start: 40px;
  padding: 32px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.m-bridge-mock {
  padding: 20px;
  border-radius: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  text-align: center;
}
.m-bridge-mock strong { display: block; font-size: 15px; }
.m-bridge-mock p { font-size: 13.5px; color: var(--muted); margin: 6px 0 14px; }
@media (max-width: 800px) { .m-bridge { grid-template-columns: minmax(0, 1fr); padding: 24px; } }

/* ── Related links ─────────────────────────────────────────────
   Exact-match anchors into the loyalty pillars and the sibling menu
   pages. Each pillar owns its keyword; this is how the link graph is
   kept honest — see blog-map.json conventions.cannibalization. */
.m-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-block-start: 34px;
}
.m-related a {
  display: block;
  padding: 18px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
.m-related a:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: #FFD9BF; }
.m-related a:focus-visible { outline: 3px solid var(--orange-300); outline-offset: 2px; }
.m-related strong { display: block; font-size: 15.5px; color: var(--orange-600); }
.m-related span { display: block; font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-block-start: 5px; }
@media (max-width: 820px) { .m-related { grid-template-columns: minmax(0, 1fr); } }

/* ── Homepage teaser band (index.html / ar/index.html) ─────────
   Lives between #backfields and #features. Light, because #features
   below it is light and #backfields above is --bg-soft. */
.m-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: center;
  gap: 36px 48px;
  padding: 36px 40px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
/* Keep the coloured phrase whole so the headline breaks between clauses
   rather than stranding a single word (and its full stop) on line two. */
.m-teaser h2 .gradient-text { white-space: nowrap; }

.m-teaser-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-block: 18px 24px;
  padding: 0;
  list-style: none;
}
.m-teaser-points li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.m-teaser-points li::before {
  content: "";
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--orange-50) center / 10px 10px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F25A07' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
/* A miniature of the phone: the same replica markup at 62% scale. */
.m-teaser .m-phone {
  inline-size: min(240px, 100%);
  padding: 8px;
  border-radius: 36px;
}
.m-teaser .m-screen { border-radius: 29px; font-size: 12px; }
.m-teaser .m-island { inline-size: 66px; block-size: 18px; inset-block-start: 7px; }
.m-teaser .m-mhead { padding: 34px 13px 11px; }
.m-teaser .m-list { padding: 10px 13px 13px; gap: 8px; }
@media (max-width: 860px) {
  .m-teaser { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; justify-items: center; text-align: center; }
  .m-teaser-points { justify-content: center; }
}
@media (max-width: 460px) {
  .m-teaser-points { flex-direction: column; align-items: center; gap: 10px; }
}


/* Dark variation of the homepage company section, retaining its layout. */
.company-band.m-company-dark {
  background: #101010;
  border-color: #2c2c2c;
}
.m-company-dark .eyebrow {
  color: #ffbc8f;
  background: #2b211a;
  border-color: #67412a;
}
.m-company-dark .company-name-ar { color: #fff; }
.m-company-dark .company-name-en { color: #ffbc8f; }
.m-company-dark .company-desc { color: #c6c1bc; }
.m-company-dark .company-badges .b {
  color: #f3efeb;
  background: #202020;
  border-color: #3b3b3b;
  box-shadow: none;
}

/* Guest-first simplicity, directly after the QR menu introduction. */
.m-simple { background: #fff; }
.m-simple-panel {
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 52px);
  text-align: center;
  background: #fff8f1;
  border: 1px solid #ffe2ce;
  border-radius: 28px;
}
.m-simple-panel h2 { margin: 18px 0; }
.m-simple-lede { max-width: 700px; margin-inline: auto; color: var(--ink-2); font-size: 18px; line-height: 1.8; }
.m-simple-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; margin: 28px 0; list-style: none; }
.m-simple-benefits li { padding: 12px 18px; background: #fff; border: 1px solid #ffe2ce; border-radius: 12px; color: var(--ink); font-size: 14px; font-weight: 600; }
.m-simple-close { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
@media (max-width: 520px) {
  .m-simple-lede { font-size: 16px; }
  .m-simple-benefits { flex-direction: column; }
}

/* Editorial styling for the website's sample menus. */
.m-phone {
  --m-brand: #9A542F;
  --m-brand-ink: #884323;
  --m-tint: #F7EBDE;
  --m-bg: #F7F3ED;
  --m-line: #E9E0D5;
  --m-text: #292018;
  --m-text-2: #76695C;
  --m-text-3: #807264;
  padding: 10px;
  background: linear-gradient(145deg, #4D4946, #171615 22%, #35322F 78%, #77706A);
  box-shadow: 0 36px 70px -24px #38261966, 0 8px 22px #38261920, inset 0 0 0 1px #ffffff50;
}
.m-phone .m-mhead {
  padding: 51px 20px 17px;
  background: radial-gradient(ellipse at 95% 0%, #754C32, transparent 70%), #2B211A;
  border: 0;
  color: #FFF8EE;
}
.m-phone .m-mlogo {
  background: #FFF2DF;
  color: #704527;
  border: 1px solid #D4AD7B;
  border-radius: 50%;
  inline-size: 47px;
  block-size: 47px;
  box-shadow: 0 4px 12px #0002;
}
.m-phone .m-mname { font-size: 19px; letter-spacing: -.025em; }
.m-phone .m-mmeta { color: #D8C4AE; font-size: 11px; margin-block-start: 3px; }
.m-phone .m-announce {
  background: #ffffff0c;
  border-color: #ffffff20;
  color: #F3D6AF;
  font-size: 11px;
  letter-spacing: .01em;
  margin-block-start: 17px;
  padding: 7px 10px;
}
.m-phone .m-rail { padding: 13px 15px; gap: 6px; background: #FFFDF9; }
.m-phone .m-rail span { font-size: 11px; padding: 7px 12px; background: #F1ECE5; }
.m-phone .m-rail span[data-on] { background: #30251D; color: #FFF5E7; }
.m-phone .m-list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #C7B5A2 transparent; padding: 16px 14px; gap: 11px; }
.m-phone .m-list:focus-visible { outline: 2px solid #9A542F; outline-offset: -3px; }
.m-phone .m-list > * { flex-shrink: 0; }
.m-phone .m-sec { color: #8B603F; font-size: 11px; letter-spacing: .055em; margin-block: 2px 0; }
.m-phone .m-screen[data-template="classic"] .m-item { padding: 10px; border-radius: 17px; gap: 11px; box-shadow: 0 3px 9px #54331506; }
.m-phone .m-screen[data-template="classic"] .m-item-thumb { inline-size: 82px; block-size: 90px; border-radius: 12px; }
.m-phone .m-item-name { font-size: 14px; font-weight: 800; }
.m-phone .m-item-desc { font-size: 11px; line-height: 1.55; }
.m-phone .m-item-foot { gap: 5px 7px; }
.m-phone .m-price { font-size: 13px; }
.m-phone .m-kcal { font-size: 10px; }
.m-phone .m-tag { font-size: 9px; padding: 2px 6px; border-color: #EAD4B9; }
.m-phone .m-tag-new { border-color: #BBDFC8; }
.m-food-photo { position: relative; overflow: hidden; }
.m-food-photo::before {
  content: "";
  position: absolute;
  inline-size: 100%;
  aspect-ratio: 1;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: url('/assets/menu/food-photography.jpg');
  background-size: 300% 300%;
  background-position: var(--food-x) var(--food-y);
}
.m-phone .m-screen[data-template="classic"] .m-food-photo::before { inline-size: 110%; inset-inline-start: -5%; }
.m-phone .m-screen[data-template="photo"] .m-item-thumb,
.m-phone .m-screen[data-template="grid"] .m-item-thumb { grid-row: 1; }
.m-phone .m-screen[data-template="photo"] .m-item-body,
.m-phone .m-screen[data-template="grid"] .m-item-body { grid-row: 2; grid-column: 1; }
.m-phone .m-screen[data-template="photo"] .m-item { border-radius: 18px; }
.m-phone .m-screen[data-template="photo"] .m-item-body { padding: 13px 15px 15px; }
.m-phone .m-screen[data-template="photo"] .m-item-name { font-size: 16px; }
.m-phone .m-screen[data-template="grid"] .m-item { border-radius: 15px; gap: 0; }
.m-phone .m-screen[data-template="grid"] .m-item-name { font-size: 12px; }
.m-phone .m-screen[data-template="grid"] .m-price { font-size: 12px; }
.m-phone .m-screen[data-template="compact"] .m-item { background: transparent; border: 0; border-bottom: 1px solid var(--m-line); border-radius: 0; padding: 10px 2px; }
.m-phone .m-screen[data-template="compact"] .m-list { gap: 8px; }
.m-phone .m-screen[data-template="elegant"] { background: #FFF9EF; }
html[lang="en"] .m-phone .m-screen[data-template="elegant"] .m-item-name { font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
.m-phone .m-screen[data-template="elegant"] .m-item { padding-block: 16px; }
.m-phone .m-screen[data-template="elegant"] .m-dots { border-color: #B59B7E; }
.m-phone .m-power { background: #FFFDF9; color: #897969; font-size: 10px; padding-block: 9px 15px; }

/* Supported merchant contact options; phone icons are sample UI. */
.m-contact-preview { display: flex; flex: none; justify-content: center; gap: 16px; padding: 12px 16px; background: #FFFDF9; border-bottom: 1px solid var(--m-line); }
.m-contact-sample { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border: 1px solid #E9E0D5; border-radius: 50%; color: #704527; background: #F7F3ED; }
.m-contact-sample svg { display: block; }
.m-social-section { background: var(--bg-soft); }
.m-social-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.m-social-card { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.m-social-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #fff1e6; color: #9A542F; margin-bottom: 16px; }
.m-social-card h3 { font-size: 17px; margin-bottom: 8px; }
.m-social-card p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }
@media (max-width: 900px) { .m-social-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .m-social-cards { grid-template-columns: 1fr; } }

/* Safari-inspired bottom chrome makes the guest's web experience explicit. */
.m-browser {
  flex: none;
  position: relative;
  padding: 10px 13px 8px;
  background: linear-gradient(180deg, #f1efedd9, #eeeceaf5 60%, #f5f3f1);
  color: #262626;
  border-top: 1px solid #d8d5d2;
  box-shadow: 0 -6px 18px #30251d08, inset 0 1px 0 #fff;
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.m-browser-address {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 40px;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px 2px;
  border-radius: 13px;
  background: #fffaf7;
  border: 1px solid #ffffffb3;
  box-shadow: 0 3px 12px #30251d10, 0 0 0 1px #d6d2ce80;
  position: relative;
  overflow: hidden;
}
.m-browser-reader { font-size: 16px; letter-spacing: -1.5px; text-align: center; }
.m-browser-reader small { font-size: 11px; }
.m-browser-url { display: flex; justify-content: center; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; font-size: 14px; letter-spacing: -.25px; font-weight: 400; }
.m-browser-url svg { flex: none; color: #716c66; }
.m-browser-refresh { display: grid; place-items: center; width: 40px; min-height: 44px; padding: 0; border: 0; background: transparent; color: #34322f; cursor: pointer; border-radius: 10px; }
.m-browser-refresh:hover { background: #ece8e3; }
.m-browser-refresh:focus-visible { outline: 2px solid #007aff; outline-offset: -3px; }
.m-browser-refresh:disabled { opacity: .45; cursor: default; }
.m-browser-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 9px 12px; color: #007aff; }
.m-browser-toolbar > span { display: grid; place-items: center; width: 26px; }
.m-browser-muted { color: #b9b6b3; }
.m-browser-home { display: block; width: 112px; height: 4px; margin: 0 auto; border-radius: 999px; background: #242321; }
.m-browser-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.m-browser.is-refreshing .m-browser-refresh svg { animation: m-browser-spin .55s ease-in-out; }
.m-browser.is-refreshing .m-browser-address::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: #007aff; transform-origin: left; animation: m-browser-load .55s ease-out; }
@keyframes m-browser-spin { to { transform: rotate(360deg); } }
@keyframes m-browser-load { from { transform: scaleX(.08); } to { transform: scaleX(1); } }
.m-teaser .m-browser { padding-inline: 7px; }
.m-teaser .m-browser-address { grid-template-columns: 22px minmax(0, 1fr) 32px; padding-inline: 3px 0; }
.m-teaser .m-browser-url { font-size: 11px; gap: 3px; }
.m-teaser .m-browser-refresh { width: 32px; }
.m-teaser .m-browser-toolbar { padding-inline: 2px; }
.m-teaser .m-browser-home { width: 85px; }
@media (prefers-reduced-motion: reduce) {
  .m-browser.is-refreshing .m-browser-refresh svg,
  .m-browser.is-refreshing .m-browser-address::after { animation: none; }
}

/* Decorative iPhone status bar, with room for the central camera island. */
.m-statusbar { position: absolute; z-index: 6; inset: 0 0 auto; height: 44px; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; color: #fff8ee; font-family: -apple-system, BlinkMacSystemFont, sans-serif; pointer-events: none; }
.m-status-time { font-size: 13px; font-weight: 700; letter-spacing: -.3px; }
.m-status-network { display: flex; align-items: center; gap: 4px; }
.m-status-carrier { font-size: 9px; font-weight: 600; letter-spacing: -.2px; }
.m-status-network svg { display: block; flex: none; }
.m-teaser .m-statusbar { height: 30px; padding-inline: 12px; }
.m-teaser .m-status-time { font-size: 10px; }
.m-teaser .m-status-network { gap: 2px; }
.m-teaser .m-status-carrier { font-size: 7px; }
.m-teaser .m-status-signal, .m-teaser .m-status-wifi { width: 10px; height: 9px; }
.m-teaser .m-status-battery { width: 18px; height: 10px; }

.m-status-left { display: flex; align-items: center; gap: 6px; }
.m-teaser .m-status-left { gap: 3px; }