/* جه دورك design system
   Voice: warm, playful, Egyptian. The number is the hero; the "ready" moment is the signature.
   Type: Readex Pro (UI, Arabic + Latin) + Lalezar (brand moments: name, numbers, big calls).
   Color: brand green carries identity, amber marks "attention / in progress", a crisp
   green-tinted off-white keeps everything bright and readable in sunlight. */

:root {
  /* brand */
  --green: oklch(0.52 0.11 165);          /* #0E7C5A */
  --green-strong: oklch(0.44 0.10 165);
  --green-deep: oklch(0.30 0.065 168);    /* pass card / TV */
  --green-ink: oklch(0.25 0.05 168);
  --green-soft: oklch(0.95 0.035 165);
  --green-wash: oklch(0.975 0.018 165);
  --amber: oklch(0.80 0.165 80);          /* #F2A900 */
  --amber-strong: oklch(0.72 0.16 70);
  --amber-soft: oklch(0.96 0.05 88);
  --amber-ink: oklch(0.38 0.09 65);
  --red: oklch(0.56 0.19 27);
  --red-soft: oklch(0.96 0.025 25);

  /* neutrals, tinted toward the brand hue */
  --bg: oklch(0.985 0.005 165);
  --surface: oklch(1 0 0);
  --sunk: oklch(0.965 0.008 165);
  --line: oklch(0.91 0.012 165);
  --line-strong: oklch(0.84 0.015 165);
  --ink: oklch(0.21 0.025 165);
  --ink-2: oklch(0.38 0.02 165);
  --ink-3: oklch(0.50 0.018 165);

  /* type */
  --font: 'Readex Pro', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --display: 'Lalezar', 'Readex Pro', system-ui, sans-serif;
  --fs-xs: .78rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.8rem;

  /* shape & depth */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --shadow-1: 0 1px 2px oklch(0.2 0.03 165 / .06), 0 2px 6px oklch(0.2 0.03 165 / .05);
  --shadow-2: 0 2px 4px oklch(0.2 0.03 165 / .05), 0 10px 28px oklch(0.2 0.03 165 / .09);
  --shadow-3: 0 6px 12px oklch(0.2 0.03 165 / .08), 0 28px 60px oklch(0.2 0.03 165 / .18);

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 150ms; --t: 220ms; --t-slow: 420ms;

  /* layers */
  --z-sticky: 10; --z-sheet: 30; --z-modal: 40; --z-toast: 50;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; text-wrap: balance; font-weight: 700; }
p { margin: 0 0 .8em; text-wrap: pretty; }
a { color: var(--green-strong); }
img { max-width: 100%; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.hidden { display: none !important; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; }
:focus-visible { outline: 3px solid oklch(0.80 0.165 80 / .9); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--surface); --btn-ink: var(--ink); --btn-line: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .55em 1.15em;
  border: 1.5px solid var(--btn-line); border-radius: var(--r-md);
  background: var(--btn-bg); color: var(--btn-ink);
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  user-select: none;
}
.btn:hover { --btn-line: var(--ink-3); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { --btn-bg: var(--green); --btn-ink: #fff; --btn-line: var(--green); box-shadow: 0 6px 16px oklch(0.52 0.11 165 / .28); }
.btn-primary:hover { --btn-bg: var(--green-strong); --btn-line: var(--green-strong); }
.btn-amber { --btn-bg: var(--amber); --btn-ink: oklch(0.25 0.06 65); --btn-line: var(--amber); }
.btn-amber:hover { --btn-bg: var(--amber-strong); --btn-line: var(--amber-strong); }
.btn-ghost { --btn-bg: transparent; --btn-line: transparent; --btn-ink: var(--ink-2); }
.btn-ghost:hover { --btn-bg: var(--sunk); --btn-line: transparent; }
.btn-danger { --btn-ink: var(--red); }
.btn-danger:hover { --btn-bg: var(--red-soft); }
.btn-big { min-height: 60px; font-size: var(--fs-lg); border-radius: var(--r-lg); width: 100%; }
.btn-sm { min-height: 40px; padding: .35em .85em; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-icon { min-height: 44px; width: 44px; padding: 0; }

/* ---------- forms ---------- */
input, select {
  width: 100%; min-height: 52px; padding: .55em .95em;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: inherit;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
input::placeholder { color: var(--ink-3); }
input:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
label { display: block; font-weight: 600; margin: 1em 0 .4em; color: var(--ink-2); }
.form-error { color: var(--red); font-weight: 600; margin: .6em 0 0; min-height: 1.4em; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 12px 0 4px; color: var(--ink); }
.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--green); }

/* ---------- the animated mark ----------
   The bell swings from its top and the waves ring out, then everything rests for a beat,
   like a real call. Used in headers, the welcome sheet, the login card and the TV. */
.gd-mark { display: block; width: 100%; height: 100%; overflow: visible; }
[data-logo] { display: inline-block; flex: none; line-height: 0; }
.gd-mark.is-animated .gd-bell { transform-box: view-box; transform-origin: 262px 226px; animation: gd-swing 4.2s cubic-bezier(.36, .07, .19, .97) infinite; }
.gd-mark.is-animated .gd-waves path { transform-box: view-box; transform-origin: 262px 296px; animation: gd-wave 4.2s var(--ease) infinite; }
.gd-mark.is-animated .gd-w2 { animation-delay: .12s; }
@keyframes gd-swing { 0%, 6%, 40%, 100% { transform: rotate(0); } 11% { transform: rotate(14deg); } 18% { transform: rotate(-12deg); } 25% { transform: rotate(8deg); } 32% { transform: rotate(-4deg); } }
@keyframes gd-wave { 0%, 6% { opacity: 0; transform: scale(.8); } 15% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }

/* ---------- shared bits ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.pill {
  display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em;
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  background: var(--sunk); color: var(--ink-2);
}
.pill-green { background: var(--green-soft); color: var(--green-strong); }
.pill-amber { background: var(--amber-soft); color: var(--amber-ink); }
.pill-red { background: var(--red-soft); color: var(--red); }
.brand-mark { display: inline-flex; align-items: center; gap: .45em; text-decoration: none; color: var(--green); }
.brand-mark img { width: 34px; height: 34px; border-radius: 9px; }
.brand-name { font-family: var(--display); font-weight: 400; font-size: 1.65rem; line-height: 1; white-space: nowrap; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-lockup img, .brand-lockup [data-logo] { width: 46px; height: 46px; border-radius: 12px; }
.brand-mark [data-logo] { width: 36px; height: 36px; }
.sheet-badge [data-logo] { width: 100%; height: 100%; filter: drop-shadow(0 10px 18px oklch(0.25 0.06 165 / .3)); }
.login-card [data-logo] { width: 72px; height: 72px; filter: drop-shadow(0 10px 18px oklch(0.25 0.06 165 / .28)); }
.tv-head .brand-mark [data-logo] { width: 5.4vh; height: 5.4vh; }
.brand-words { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand-ar { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--green); white-space: nowrap; }
.brand-en { font-weight: 700; font-size: .72rem; letter-spacing: .08em; color: var(--green); direction: ltr; align-self: flex-end; margin-top: 3px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
.live.on .live-dot { background: oklch(0.70 0.16 155); box-shadow: 0 0 0 4px oklch(0.70 0.16 155 / .2); }

.toast {
  position: fixed; inset-inline: 16px; bottom: max(20px, env(safe-area-inset-bottom)); margin: 0 auto; width: fit-content; max-width: min(440px, calc(100% - 32px));
  background: var(--ink); color: #fff; padding: 13px 20px; border-radius: var(--r-pill);
  font-weight: 600; text-align: center; box-shadow: var(--shadow-3); z-index: var(--z-toast);
  animation: toast-in var(--t-slow) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }

/* ---------- message page (bad / old QR etc.) ---------- */
.page-msg { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--green-wash); }
.msg-card { text-align: center; max-width: 380px; background: var(--surface); border-radius: var(--r-xl); padding: 36px 26px; box-shadow: var(--shadow-2); }
.msg-card h1 { margin-top: .6em; font-size: var(--fs-2xl); }
.msg-card p { color: var(--ink-2); }

/* =====================================================================
   CUSTOMER PAGE
   ===================================================================== */
/* the page takes a faint tint of the shop's ticket color */
body.cust-page { --page-bg: color-mix(in oklch, var(--pass-a) 6%, white); background: var(--page-bg); min-height: 100vh; }
.cust { max-width: 460px; margin: 0 auto; padding: 14px 16px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; min-height: 100vh; }

.c-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px; }
.c-shop { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--fs-lg); min-width: 0; }
.c-shop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-shop-logo, .c-shop-initial { width: 40px; height: 40px; border-radius: 12px; flex: none; object-fit: cover; background: var(--surface); box-shadow: var(--shadow-1); }
.c-shop-initial { display: grid; place-items: center; background: var(--pass-a); color: #fff; font-family: var(--display); font-size: 1.35rem; }
.c-brand { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.c-brand img { width: 20px; height: 20px; border-radius: 6px; }

/* Ticket color themes a shop can pick (customer page + previews). */
:root, [data-theme="green"] { --pass-a: oklch(0.52 0.11 165); --pass-b: oklch(0.30 0.065 168); }
[data-theme="navy"] { --pass-a: oklch(0.47 0.11 262); --pass-b: oklch(0.26 0.065 265); }
[data-theme="burgundy"] { --pass-a: oklch(0.47 0.14 15); --pass-b: oklch(0.27 0.08 15); }
[data-theme="coffee"] { --pass-a: oklch(0.48 0.07 55); --pass-b: oklch(0.28 0.04 50); }
[data-theme="charcoal"] { --pass-a: oklch(0.40 0.012 250); --pass-b: oklch(0.19 0.006 250); }
[data-theme="orange"] { --pass-a: oklch(0.63 0.17 45); --pass-b: oklch(0.40 0.13 38); }

/* The pass: a boarding-pass ticket. Notches at the tear line are cut with a mask. */
.pass {
  --notch: 15px;
  position: relative; color: #fff; border-radius: var(--r-xl);
  background:
    radial-gradient(120% 70% at 85% 0%, oklch(0.60 0.12 165 / .55), transparent 60%),
    linear-gradient(170deg, var(--pass-a) 0%, var(--pass-b) 100%);
  box-shadow: 0 18px 40px color-mix(in oklch, var(--pass-b) 40%, transparent);
  animation: rise var(--t-slow) var(--ease);
}
.pass-main { padding: 24px 24px 20px; text-align: center; position: relative; }
.pass-label { font-size: var(--fs-sm); font-weight: 600; opacity: .85; letter-spacing: .01em; }
.pass-num {
  font-family: var(--display); font-weight: 400; line-height: .9;
  font-size: clamp(6.5rem, 34vw, 9rem); margin: 10px 0 6px; font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 0 oklch(0.25 0.05 168 / .35);
}
.pass-status {
  display: inline-flex; align-items: center; gap: .5em; padding: .45em 1em .45em 1.1em;
  background: oklch(1 0 0 / .14); border: 1px solid oklch(1 0 0 / .22); border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-md);
}
.pass-status .ico { color: var(--amber); }
.pass[data-step="last"] .pass-status { background: var(--amber); color: oklch(0.25 0.06 65); border-color: var(--amber); }
.pass[data-step="last"] .pass-status .ico { color: currentColor; }
/* tear line with a notch cut on each side (circles in the page color) */
.pass-tear { position: relative; height: 0; margin: 0 24px; border-top: 2px dashed oklch(1 0 0 / .28); }
.pass-tear::before, .pass-tear::after {
  content: ''; position: absolute; top: calc(-1px - var(--notch)); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2);
  border-radius: 50%; background: var(--page-bg, var(--green-wash));
}
.pass-tear::before { left: calc(-24px - var(--notch)); }
.pass-tear::after { right: calc(-24px - var(--notch)); }
.pass-foot { padding: 18px 22px 22px; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600; color: oklch(1 0 0 / .6); text-align: center; position: relative; }
.steps li::before { content: ''; position: absolute; top: 9px; inset-inline-start: 50%; width: 100%; height: 3px; background: oklch(1 0 0 / .18); border-radius: 3px; }
.steps li:last-child::before { display: none; }
.steps li.is-done::before { background: var(--amber); }
.steps .step-dot { position: relative; z-index: 1; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--pass-b); border: 2.5px solid oklch(1 0 0 / .35); }
.steps li.is-done { color: #fff; }
.steps li.is-done .step-dot { background: var(--amber); border-color: var(--amber); color: oklch(0.25 0.06 65); }
.steps li.is-done .step-dot .ico { width: 13px; height: 13px; stroke-width: 3.5; }
.steps li.is-current { color: #fff; }
.steps li.is-current .step-dot { border-color: var(--amber); background: var(--pass-b); box-shadow: 0 0 0 5px oklch(0.80 0.165 80 / .25); animation: breathe 1.8s var(--ease) infinite; }
.steps li.is-current .step-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
@keyframes breathe { 50% { box-shadow: 0 0 0 9px oklch(0.80 0.165 80 / .08); } }
.pass-eta { margin: 16px 0 0; text-align: center; font-size: var(--fs-sm); color: oklch(1 0 0 / .85); display: flex; justify-content: center; align-items: center; gap: .45em; }
.pass-eta b { color: #fff; }

/* alert status under the pass */
.c-alert { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 16px 18px; display: grid; gap: 12px; animation: rise var(--t-slow) var(--ease) 60ms backwards; }
.c-alert-row { display: flex; align-items: center; gap: 14px; }
.c-alert-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--green-soft); color: var(--green); }
.c-alert-icon .ico { width: 24px; height: 24px; }
.c-alert.is-off .c-alert-icon { background: var(--amber-soft); color: var(--amber-ink); }
.c-alert-text strong { display: block; font-size: var(--fs-md); }
.c-alert-text span { display: block; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.c-alert.is-on .c-alert-icon { animation: ring-wiggle 3.2s var(--ease) infinite; }
@keyframes ring-wiggle { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(14deg); } 90% { transform: rotate(-12deg); } 93% { transform: rotate(8deg); } 96% { transform: rotate(-4deg); } }
.c-tips { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.c-tips.ok { background: var(--green-soft); color: var(--green-strong); }
.c-alert-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.c-alert-actions .btn { flex: 1; }
.c-hint { text-align: center; color: var(--ink-2); font-size: var(--fs-sm); margin: 2px 0 0; }

/* welcome: a bottom sheet over the pass */
.sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-sheet); background: oklch(0.2 0.04 168 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade-in var(--t) var(--ease); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  position: relative; width: 100%; max-width: 480px; background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 14px 22px calc(24px + env(safe-area-inset-bottom));
  text-align: center; box-shadow: var(--shadow-3); animation: sheet-up var(--t-slow) var(--ease);
}
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet-grip { width: 44px; height: 5px; border-radius: 5px; background: var(--line-strong); margin: 0 auto 14px; }
.sheet-x { position: absolute; top: 14px; inset-inline-end: 14px; }
.sheet-badge { position: relative; width: 92px; height: 92px; margin: 6px auto 12px; }
.sheet-badge img { width: 100%; height: 100%; border-radius: 26px; object-fit: cover; box-shadow: var(--shadow-2); }
.sheet-badge .sheet-num { position: absolute; bottom: -8px; inset-inline-start: -14px; min-width: 46px; height: 38px; padding: 0 10px; border-radius: var(--r-pill); background: var(--amber); color: oklch(0.25 0.06 65); font-family: var(--display); font-size: 1.35rem; display: grid; place-items: center; box-shadow: var(--shadow-1); border: 3px solid var(--surface); }
.sheet h2 { font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--green-ink); margin: 14px 0 6px; }
.sheet p { color: var(--ink-2); font-size: var(--fs-md); margin: 0 0 18px; }
.sheet .btn-big { font-weight: 700; }
.sheet-note { display: flex; align-items: center; justify-content: center; gap: .45em; margin: 12px 0 0 !important; font-size: var(--fs-sm) !important; color: var(--ink-3) !important; }

/* ready: the signature moment */
body.is-ready { background: var(--pass-a); color: #fff; transition: background-color var(--t-slow) var(--ease); }
body.is-ready .c-shop, body.is-ready .c-brand { color: #fff; }
.c-ready { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 10px 0 8px; }
.ready-rings { position: relative; width: 132px; height: 132px; display: grid; place-items: center; margin-bottom: 10px; }
.ready-rings span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid oklch(0.80 0.165 80 / .9); animation: wave 2.2s var(--ease) infinite; opacity: 0; }
.ready-rings span:nth-child(2) { animation-delay: .7s; }
.ready-rings span:nth-child(3) { animation-delay: 1.4s; }
@keyframes wave { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.ready-bell { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--amber); color: oklch(0.25 0.06 65); display: grid; place-items: center; box-shadow: 0 12px 30px oklch(0.25 0.06 65 / .35); animation: shake 1.1s ease-in-out infinite; }
.ready-bell .ico { width: 50px; height: 50px; stroke-width: 2.2; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 12% { transform: rotate(16deg); } 26% { transform: rotate(-14deg); } 40% { transform: rotate(10deg); } 54% { transform: rotate(-6deg); } 68% { transform: rotate(0); } }
.ready-title { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 15vw, 4.4rem); line-height: 1.05; margin: 6px 0 0; animation: pop var(--t-slow) var(--ease); }
.ready-num { font-family: var(--display); font-size: clamp(7rem, 40vw, 10.5rem); line-height: .9; color: var(--amber); text-shadow: 0 6px 0 oklch(0.30 0.065 168 / .45); font-variant-numeric: tabular-nums; }
.ready-msg { font-size: var(--fs-xl); font-weight: 600; opacity: .95; margin: 6px 0 22px; }
.c-ready .btn-big { --btn-bg: #fff; --btn-ink: var(--green-ink); --btn-line: #fff; max-width: 400px; font-weight: 700; box-shadow: 0 10px 26px oklch(0.25 0.05 168 / .3); }
.ready-acked { display: inline-flex; align-items: center; gap: .5em; background: oklch(1 0 0 / .16); border: 1px solid oklch(1 0 0 / .25); padding: 14px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-lg); }

/* done / closed */
.c-end { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: 34px 22px 28px; text-align: center; animation: rise var(--t-slow) var(--ease); }
.c-end-icon { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.c-end-icon .ico { width: 40px; height: 40px; }
.c-end h2 { font-family: var(--display); font-weight: 400; font-size: 2.2rem; color: var(--green-ink); margin: 0 0 4px; }
.c-end .muted { margin-bottom: 18px; }
.stars { display: flex; justify-content: center; gap: 6px; direction: ltr; margin-top: 8px; }
.stars button { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--line-strong); transition: transform var(--t-fast) var(--ease), color var(--t) var(--ease); }
.stars button .ico { width: 38px; height: 38px; }
.stars button.on { color: var(--amber); }
.stars button:active { transform: scale(.88); }

/* =====================================================================
   CASHIER
   ===================================================================== */
body.cashier-page { background: var(--sunk); }
.app { min-height: 100vh; display: flex; flex-direction: column; }
.bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; justify-content: space-between;
  padding: 12px max(16px, 2vw); background: var(--surface); border-bottom: 1px solid var(--line);
}
.bar-shop { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bar-shop .divider { width: 1px; height: 28px; background: var(--line); }
.bar-shop-logo { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; box-shadow: var(--shadow-1); }
.bar-shop-name { font-weight: 700; font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live { display: inline-flex; align-items: center; gap: .45em; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.bar-stats { display: flex; gap: 22px; }
.bar-stat { display: flex; flex-direction: column; line-height: 1.15; }
.bar-stat span { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.bar-stat b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.bar-actions { display: flex; align-items: center; gap: 8px; }
.bar-actions .btn-primary { min-height: 52px; padding-inline: 1.4em; font-size: var(--fs-lg); font-weight: 700; border-radius: var(--r-md); }

.workspace { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; padding: 20px max(16px, 2vw) 32px; align-items: start; }
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.col { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; min-height: 320px; }
.col-head { display: flex; align-items: center; gap: 10px; padding: 6px 6px 12px; font-weight: 700; font-size: var(--fs-lg); }
.col-head .count { min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: var(--fs-sm); background: var(--surface); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.col-ready { background: var(--green-wash); border-color: oklch(0.86 0.05 165); }
.col-ready .col-head { color: var(--green-strong); }
.col-ready .count { background: var(--green); color: #fff; border-color: var(--green); }
.col-list { display: grid; gap: 12px; }
.empty { display: grid; place-items: center; gap: 8px; text-align: center; color: var(--ink-3); padding: 34px 16px; border: 2px dashed var(--line-strong); border-radius: var(--r-md); font-size: var(--fs-sm); }
.empty .ico { width: 30px; height: 30px; opacity: .6; }

.tk { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px; display: grid; gap: 10px; box-shadow: var(--shadow-1); animation: pop var(--t) var(--ease); }
.tk[data-status="ready"] { border-color: oklch(0.78 0.08 165); box-shadow: 0 0 0 4px var(--green-soft), var(--shadow-1); }
.tk[data-status="scan"] { border-style: dashed; border-color: var(--amber-strong); }
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tk-num { font-family: var(--display); font-size: 2.9rem; line-height: .95; font-variant-numeric: tabular-nums; color: var(--ink); }
.tk[data-status="ready"] .tk-num { color: var(--green-strong); }
.tk-time { display: inline-flex; align-items: center; gap: .35em; font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 600; font-size: var(--fs-sm); }
.tk-signals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sig { display: inline-flex; align-items: center; gap: .35em; font-size: var(--fs-xs); font-weight: 600; padding: .3em .65em; border-radius: var(--r-pill); background: var(--sunk); color: var(--ink-2); }
.sig.ok { background: var(--green-soft); color: var(--green-strong); }
.sig.warn { background: var(--amber-soft); color: var(--amber-ink); }
.tk-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-actions .btn-main { flex: 1 1 100%; min-height: 52px; font-weight: 700; font-size: var(--fs-md); }
.tk-actions .btn-sm { flex: 1; }

.recent { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 2px; }
.recent-title { font-weight: 700; color: var(--ink-2); margin-inline-end: 6px; font-size: var(--fs-sm); }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 6px 4px 12px; font-weight: 700; font-size: var(--fs-sm); }
.chip s { color: var(--ink-3); }
.chip .btn-ghost { min-height: 30px; width: 30px; padding: 0; border-radius: 50%; }

.tools { display: grid; gap: 14px; position: sticky; top: 92px; }
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.tool-qr { padding: 18px; text-align: center; }
.tool-qr h3 { font-size: var(--fs-md); margin: 0 0 10px; display: flex; align-items: center; justify-content: center; gap: .45em; }
.tool-qr .qr { background: #fff; border-radius: var(--r-md); padding: 10px; border: 1px solid var(--line); }
.tool-qr .qr svg { width: 100%; max-width: 200px; height: auto; display: block; margin: 0 auto; }
.tool-qr p { font-size: var(--fs-xs); color: var(--ink-3); margin: 10px 0 0; line-height: 1.55; }
.tool-links { display: grid; padding: 6px; }
.tool-link { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); text-decoration: none; color: var(--ink); font-weight: 600; transition: background-color var(--t) var(--ease); }
.tool-link:hover { background: var(--sunk); }
.tool-link .ico { width: 20px; height: 20px; color: var(--green); }
.tool-link small { display: block; font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); }
details.tool > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 15px 16px; cursor: pointer; font-weight: 700; }
details.tool > summary::-webkit-details-marker { display: none; }
details.tool > summary .ico:first-child { color: var(--green); }
details.tool > summary .chev { margin-inline-start: auto; color: var(--ink-3); transition: transform var(--t) var(--ease); }
details.tool[open] > summary .chev { transform: rotate(180deg); }
.tool-body { padding: 0 16px 16px; }
.tool-body label:first-child { margin-top: 0; }
.tool-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tool-row .btn { flex: 1; }
.tool-note { font-size: var(--fs-xs); color: var(--ink-3); margin: 10px 0 0; line-height: 1.55; }
.logo-preview { display: grid; place-items: center; min-height: 96px; border: 2px dashed var(--line-strong); border-radius: var(--r-md); padding: 10px; background: var(--sunk); }
.logo-preview img { max-width: 110px; max-height: 110px; border-radius: 16px; object-fit: contain; }

@media (max-width: 1100px) { .workspace { grid-template-columns: 1fr; } .tools { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 720px) {
  .board { grid-template-columns: 1fr; }
  .col-ready { order: -1; }
  .bar-stats { order: 3; width: 100%; justify-content: space-between; }
  .bar-actions .btn-primary { min-height: 48px; }
}

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--green-wash); }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: var(--r-xl); padding: 32px 26px; text-align: center; box-shadow: var(--shadow-2); animation: rise var(--t-slow) var(--ease); }
.login-card img { width: 64px; height: 64px; border-radius: 18px; box-shadow: var(--shadow-1); }
.login-card h2 { margin: 14px 0 4px; }
.login-card input { text-align: center; font-size: 1.8rem; letter-spacing: .5em; direction: ltr; margin-top: 18px; font-weight: 700; }
.demo-hint { display: inline-flex; align-items: center; gap: .4em; background: var(--amber-soft); color: var(--amber-ink); border-radius: var(--r-pill); padding: 6px 14px; margin-top: 14px; font-weight: 600; font-size: var(--fs-sm); }

/* modal: new order + order QR */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 16px; background: oklch(0.2 0.04 168 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in var(--t) var(--ease); }
.modal-card { width: 100%; max-width: 440px; background: var(--surface); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--shadow-3); animation: pop var(--t-slow) var(--ease); }
.modal-card h2 { font-size: var(--fs-2xl); }
.order-qr { text-align: center; }
.order-qr .order-label { color: var(--ink-3); font-weight: 600; margin: 0; }
.order-num { font-family: var(--display); font-size: 4.4rem; line-height: 1; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.order-qr .qr { background: #fff; border-radius: var(--r-lg); padding: 12px; border: 1px solid var(--line); margin: 6px auto 0; max-width: 300px; }
.order-qr .qr svg { width: 100%; height: auto; display: block; }
.order-hint { font-weight: 700; margin: 14px 0 8px; display: flex; align-items: center; justify-content: center; gap: .45em; }
.order-status { display: flex; align-items: center; justify-content: center; gap: .5em; background: var(--amber-soft); color: var(--amber-ink); border-radius: var(--r-md); padding: 12px; font-weight: 700; margin-bottom: 12px; }
.order-status.ok { background: var(--green-soft); color: var(--green-strong); }

/* =====================================================================
   TV DISPLAY
   ===================================================================== */
body.tv { background: var(--green-ink); color: #fff; min-height: 100vh; overflow: hidden; }
.tv-wrap { height: 100vh; display: grid; grid-template-rows: auto 1fr; padding: 2.6vh 2.8vw; gap: 2.4vh; }
.tv-head { display: flex; justify-content: space-between; align-items: center; }
.tv-head .shop { font-size: 3.6vh; font-weight: 700; display: flex; align-items: center; }
.tv-head .clock { font-size: 3.2vh; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.tv-head .brand-mark img { width: 4.6vh; height: 4.6vh; }
.tv-body { display: grid; grid-template-columns: 1.7fr 1fr .9fr; gap: 2vw; min-height: 0; }
.tv-col { background: oklch(1 0 0 / .05); border: 1px solid oklch(1 0 0 / .08); border-radius: 3vh; padding: 3vh; display: flex; flex-direction: column; min-height: 0; }
.tv-col h2 { font-size: 3.8vh; margin-bottom: 2.4vh; display: flex; align-items: center; gap: .4em; }
.tv-col.ready h2 { color: var(--amber); }
.tv-col.waiting h2 { color: oklch(1 0 0 / .75); }
.tv-nums { display: flex; flex-wrap: wrap; gap: 1.8vh; align-content: flex-start; overflow: hidden; }
.tv-nums span { font-family: var(--display); font-variant-numeric: tabular-nums; border-radius: 2vh; text-align: center; line-height: 1.15; }
.ready .tv-nums span { font-size: 10vh; min-width: 18vh; padding: .6vh 2.4vh; background: oklch(1 0 0 / .1); color: #fff; }
.ready .tv-nums span.fresh { background: var(--amber); color: oklch(0.25 0.06 65); box-shadow: 0 0 0 1vh oklch(0.80 0.165 80 / .25); animation: tv-flash 1s ease-in-out 6; }
.waiting .tv-nums span { font-size: 6vh; min-width: 12vh; padding: .3vh 1.6vh; background: oklch(1 0 0 / .06); color: oklch(1 0 0 / .8); }
@keyframes tv-flash { 50% { transform: scale(1.07); } }
.tv-nums span.tv-empty { background: none; min-width: 0; padding: 0; color: oklch(1 0 0 / .3); font-size: 5vh; box-shadow: none; }
.tv-qr { align-items: center; justify-content: center; text-align: center; background: var(--surface); color: var(--ink); border: 0; }
.tv-qr .qr svg { width: 100%; max-width: 30vh; height: auto; }
.tv-qr h2 { color: var(--green-ink) !important; font-size: 3.2vh; margin: 1.6vh 0 .6vh; justify-content: center; }
.tv-qr p { color: var(--ink-2); font-size: 2.1vh; margin: 0; }
.tv-qr .timer { height: .8vh; background: var(--line); border-radius: 99px; overflow: hidden; width: 80%; margin: 1.6vh auto 0; }
.tv-qr .timer i { display: block; height: 100%; background: var(--green); transition: width 1s linear; }
.tv-start { position: fixed; inset: 0; background: oklch(0.2 0.04 168 / .92); display: grid; place-items: center; z-index: var(--z-modal); cursor: pointer; text-align: center; }
.tv-start div { font-size: 4.4vh; font-weight: 700; display: grid; justify-items: center; gap: 1.6vh; }
.tv-start .ico { width: 9vh; height: 9vh; color: var(--amber); }
.tv-start small { display: block; font-size: 2.4vh; opacity: .7; font-weight: 500; }
.tv-logo { height: 5.4vh; width: 5.4vh; border-radius: 1.2vh; object-fit: cover; margin-inline-end: 1.4vh; background: #fff; }

/* =====================================================================
   POSTER (A4 print)
   ===================================================================== */
body.poster-page { background: var(--sunk); }
.poster-tools { max-width: 800px; margin: 16px auto; padding: 0 16px; display: flex; gap: 10px; justify-content: center; }
.poster {
  width: 210mm; min-height: 297mm; margin: 0 auto 30px; background: var(--green); color: #fff; padding: 16mm 16mm 12mm;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7mm; box-shadow: var(--shadow-3);
}
.poster .p-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 22pt; }
.poster .p-brand img { width: 44px; height: 44px; border-radius: 12px; }
.poster .p-logo { width: 30mm; height: 30mm; border-radius: 7mm; object-fit: cover; background: #fff; }
.poster h1 { font-size: 34pt; margin: 0; }
.poster .p-sub { font-family: var(--display); font-size: 30pt; color: var(--amber); margin: 0; line-height: 1.1; }
.poster .p-qr { width: 112mm; background: #fff; border-radius: 9mm; padding: 7mm; box-shadow: 0 0 0 3mm oklch(0.80 0.165 80); }
.poster .p-qr svg { width: 100%; height: auto; display: block; }
.poster ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 4mm; font-size: 16pt; font-weight: 600; text-align: start; }
.poster ol li { display: flex; align-items: center; gap: 4mm; }
.poster ol li b { display: inline-grid; place-items: center; width: 11mm; height: 11mm; border-radius: 50%; background: var(--amber); color: oklch(0.25 0.06 65); flex: none; font-family: var(--display); font-weight: 400; font-size: 17pt; }
.poster .p-foot { margin-top: auto; opacity: .8; font-size: 12pt; }
@media screen and (max-width: 840px) { .poster { width: 100%; min-height: auto; padding: 24px 16px; } .poster .p-qr { width: 80%; } }
@media print {
  @page { size: A4; margin: 0; }
  body.poster-page { background: #fff; }
  .poster-tools { display: none; }
  .poster { margin: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =====================================================================
   VOICE RECORDING PAGE
   ===================================================================== */
.voice-page { max-width: 880px; margin: 0 auto; padding: 0 16px 60px; display: grid; gap: 16px; }
.voice-page .topbar { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.voice-page .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 14px; font-size: var(--fs-sm); }
.voice-page .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 20px; }
.voice-progress { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.voice-progress i { display: block; height: 100%; background: var(--green); transition: width var(--t-slow) var(--ease); }
.voice-example { font-size: 1.15rem; font-weight: 700; color: var(--green-strong); }
.voice-current { text-align: center; }
.voice-current.is-recording { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.voice-word { font-family: var(--display); font-size: clamp(2.8rem, 9vw, 4.2rem); margin: 6px 0 14px; color: var(--green-ink); }
.btn-danger-solid { --btn-bg: var(--red); --btn-line: var(--red); --btn-ink: #fff; }
.voice-group { margin: 10px 0 0; font-size: var(--fs-md); color: var(--ink-2); }
.voice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-chip { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.voice-chip.done { border-color: oklch(0.80 0.07 165); background: var(--green-wash); }
.voice-chip.current { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.voice-pick { border: 0; background: none; font: inherit; font-weight: 600; padding: 8px 12px; cursor: pointer; color: var(--ink); }
.voice-page .note { background: var(--amber-soft); color: var(--amber-ink); border-radius: var(--r-sm); padding: 10px 12px; }

/* =====================================================================
   LANDING
   ===================================================================== */
/* Fixed header: transparent over the hero, turns solid once the page scrolls. */
.l-nav {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-sticky);
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.l-nav-inner { max-width: 1180px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: padding var(--t) var(--ease); }
.l-nav.is-scrolled { background: oklch(0.30 0.065 168 / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px oklch(0.15 0.04 168 / .25); }
.l-nav.is-scrolled .l-nav-inner { padding-block: 10px; }
.l-nav .brand-lockup img { transition: width var(--t) var(--ease), height var(--t) var(--ease); }
.l-nav.is-scrolled .brand-lockup [data-logo] { width: 38px; height: 38px; }
.l-nav .brand-lockup [data-logo] { transition: width var(--t) var(--ease), height var(--t) var(--ease); }
.l-nav .l-nav-links { display: flex; align-items: center; gap: 4px; }
.l-nav .l-nav-links a:not(.btn) { color: oklch(1 0 0 / .85); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); padding: 8px 12px; border-radius: var(--r-sm); }
.l-nav .l-nav-links a:not(.btn):hover { background: oklch(1 0 0 / .1); color: #fff; }
html { scroll-padding-top: 76px; scroll-behavior: smooth; }
@media (max-width: 720px) { .l-nav .l-nav-links a:not(.btn) { display: none; } }
.l-nav .brand-ar, .l-nav .brand-en { color: #fff; }
.l-nav .btn { --btn-bg: oklch(1 0 0 / .12); --btn-line: oklch(1 0 0 / .3); --btn-ink: #fff; }
.l-nav .btn:hover { --btn-bg: oklch(1 0 0 / .2); }

.l-hero {
  /* Clip decoration without creating an inner scroll container for #demo. */
  position: relative; overflow: clip; color: #fff;
  background:
    radial-gradient(60% 70% at 15% 20%, oklch(0.62 0.13 160 / .55), transparent 60%),
    radial-gradient(50% 60% at 90% 100%, oklch(0.80 0.165 80 / .22), transparent 60%),
    var(--green-deep);
  padding: 110px 20px 0;
}
.l-hero-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; }
.l-hero-copy { padding-bottom: 90px; }
.l-hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.9rem, 6.4vw, 5.6rem); line-height: 1.08; margin: 0 0 22px; letter-spacing: 0; }
.l-hero h1 em { font-style: normal; color: var(--amber); }
.l-hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: oklch(1 0 0 / .86); max-width: 34em; margin-bottom: 30px; }
.l-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.l-hero-actions .btn { min-height: 58px; padding-inline: 1.6em; font-size: var(--fs-lg); font-weight: 700; border-radius: var(--r-lg); }
.l-hero-actions .btn-amber { box-shadow: 0 10px 26px oklch(0.80 0.165 80 / .3); }
.l-hero-actions .btn-outline { --btn-bg: transparent; --btn-line: oklch(1 0 0 / .4); --btn-ink: #fff; }
.l-hero-actions .btn-outline:hover { --btn-bg: oklch(1 0 0 / .1); --btn-line: #fff; }
.l-hero-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; color: oklch(1 0 0 / .8); font-size: var(--fs-sm); font-weight: 500; }
.l-hero-proof span { display: inline-flex; align-items: center; gap: .45em; }
.l-hero-proof .ico { color: var(--amber); }

/* phone mockups that show the real product */
.l-phones { position: relative; height: 560px; }
.phone {
  position: absolute; width: 268px; height: 548px; border-radius: 44px; padding: 12px;
  background: oklch(0.18 0.02 168); box-shadow: 0 40px 80px oklch(0.10 0.03 168 / .55), inset 0 0 0 2px oklch(1 0 0 / .08);
}
.phone-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.phone-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 20px; background: oklch(0.12 0.01 168); z-index: 2; }
.phone-a { inset-inline-start: 0; bottom: -40px; transform: rotate(-4deg); }
.phone-b { inset-inline-start: 210px; bottom: -90px; transform: rotate(5deg); }
.mini { background: var(--green-wash); padding: 46px 14px 14px; gap: 10px; color: var(--ink); }
.mini-shop { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .82rem; }
.mini-shop i { width: 26px; height: 26px; border-radius: 8px; background: var(--amber); display: grid; place-items: center; font-style: normal; font-family: var(--display); color: oklch(0.25 0.06 65); }
.mini-pass { border-radius: 22px; color: #fff; text-align: center; padding: 16px 12px; background: linear-gradient(170deg, var(--green) 0%, var(--green-deep) 100%); }
.mini-pass small { font-size: .7rem; opacity: .8; }
.mini-pass b { display: block; font-family: var(--display); font-weight: 400; font-size: 4.6rem; line-height: .95; margin: 4px 0; }
.mini-pass span { display: inline-block; font-size: .72rem; font-weight: 600; background: oklch(1 0 0 / .15); border-radius: 99px; padding: 3px 10px; }
.mini-steps { display: flex; gap: 4px; margin-top: 12px; }
.mini-steps i { flex: 1; height: 4px; border-radius: 4px; background: oklch(1 0 0 / .2); }
.mini-steps i.on { background: var(--amber); }
.mini-row { background: #fff; border-radius: 16px; padding: 10px; display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 600; }
.mini-row .ico { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: var(--green-soft); color: var(--green); }
.mini-ready { background: var(--green); color: #fff; justify-content: center; align-items: center; text-align: center; gap: 2px; padding: 40px 14px 16px; }
.mini-ready .bell { width: 64px; height: 64px; border-radius: 50%; background: var(--amber); color: oklch(0.25 0.06 65); display: grid; place-items: center; margin-bottom: 8px; box-shadow: 0 0 0 10px oklch(0.80 0.165 80 / .2), 0 0 0 22px oklch(0.80 0.165 80 / .08); }
.mini-ready .bell .ico { width: 32px; height: 32px; }
.mini-ready strong { font-family: var(--display); font-weight: 400; font-size: 2.4rem; line-height: 1.05; }
.mini-ready b { font-family: var(--display); font-weight: 400; font-size: 4.4rem; line-height: .95; color: var(--amber); }
.mini-ready span { font-size: .75rem; opacity: .9; }
.mini-ready em { font-style: normal; margin-top: 12px; background: #fff; color: var(--green-ink); border-radius: 14px; padding: 9px 18px; font-size: .78rem; font-weight: 700; }

.l-section { max-width: 1180px; margin: 0 auto; padding: 96px 20px 0; }
.l-section h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.1; color: var(--green-ink); margin-bottom: 14px; }
.l-section .l-intro { font-size: var(--fs-lg); color: var(--ink-2); max-width: 40em; margin-bottom: 34px; }

/* before / after */
.l-swap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.l-swap > div { border-radius: var(--r-xl); padding: 30px 28px; }
.l-before { background: var(--surface); border: 1px solid var(--line); }
.l-after { background: var(--green); color: #fff; }
.l-swap h3 { font-size: var(--fs-xl); margin-bottom: 16px; display: flex; align-items: center; gap: .5em; }
.l-swap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.l-swap li { display: flex; gap: 10px; align-items: flex-start; }
.l-swap li .ico { margin-top: .25em; }
.l-before li { color: var(--ink-2); }
.l-before li .ico { color: var(--red); }
.l-after li .ico { color: var(--amber); }

/* how it works: a real 3-step sequence */
.l-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; counter-reset: how; }
.l-how li { counter-increment: how; }
.l-how li::before { content: counter(how); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--amber); color: oklch(0.25 0.06 65); font-family: var(--display); font-size: 1.9rem; margin-bottom: 18px; }
.l-how h3 { font-size: var(--fs-xl); }
.l-how p { color: var(--ink-2); }

/* verticals */
.l-verticals { display: flex; flex-wrap: wrap; gap: 12px; }
.l-vertical { flex: 1 1 240px; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.l-vertical .ico { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--green-soft); color: var(--green); }
.l-vertical strong { display: block; }
.l-vertical span { color: var(--ink-2); font-size: var(--fs-sm); }

/* demo */

/* pricing */
.l-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: stretch; }
.l-price { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px 26px; display: flex; flex-direction: column; }
.l-price h3 { font-size: var(--fs-xl); margin-bottom: 4px; }
.l-price .amount { font-family: var(--display); font-size: 3.4rem; line-height: 1.1; color: var(--green-ink); }
.l-price .amount small { font-family: var(--font); font-size: var(--fs-md); color: var(--ink-3); font-weight: 500; }
.l-price ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; color: var(--ink-2); }
.l-price li { display: flex; gap: 8px; }
.l-price li .ico { color: var(--green); margin-top: .25em; }
.l-price.featured { background: var(--green-deep); color: #fff; border-color: var(--green-deep); box-shadow: var(--shadow-3); }
.l-price.featured .amount { color: var(--amber); }
.l-price.featured .amount small, .l-price.featured ul { color: oklch(1 0 0 / .8); }
.l-price.featured li .ico { color: var(--amber); }
.l-price .pill { align-self: flex-start; margin-bottom: 12px; }

/* signup */
.l-signup { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.l-signup form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--shadow-2); }
.l-signup form label:first-child { margin-top: 0; }
.l-signup form .btn { margin-top: 20px; }
.l-gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.l-gets li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.l-gets li .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--green-soft); color: var(--green); }

.site-footer { max-width: 1180px; margin: 96px auto 0; padding: 28px 20px 44px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.site-footer p { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }

@media (max-width: 960px) {
  .l-hero-inner { grid-template-columns: 1fr; }
  .l-hero-copy { padding-bottom: 10px; }
  .l-phones { height: 470px; max-width: 480px; width: 100%; margin: 0 auto; }
  .phone { width: 220px; height: 450px; border-radius: 38px; }
  .phone-b { inset-inline-start: auto; inset-inline-end: 0; }
  .l-how, .l-swap, .l-signup { grid-template-columns: 1fr; }
}
/* Phones: tighter rhythm. Sections sit closer, the hero mockups are shorter, and the
   demo block drops its phone (the hero already shows the product). */
@media (max-width: 720px) {
  .l-hero { padding-top: 84px; }
  .l-hero h1 { margin-bottom: 14px; }
  .l-hero .lead { margin-bottom: 22px; }
  .l-hero-actions .btn { flex: 1 1 100%; min-height: 54px; }
  .l-hero-proof { margin-top: 18px; gap: 6px 16px; }
  .l-section { padding-top: 52px; }
  .l-section h2 { margin-bottom: 8px; }
  .l-section .l-intro { font-size: var(--fs-md); margin-bottom: 20px; }
  .l-swap { gap: 12px; }
  .l-swap > div { padding: 22px 20px; border-radius: var(--r-lg); }
  .l-swap h3 { margin-bottom: 12px; }
  .l-swap ul { gap: 8px; }
  .l-how { gap: 22px; }
  .l-how li { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; }
  .l-how li::before { width: 44px; height: 44px; border-radius: 14px; font-size: 1.5rem; margin: 0; grid-row: span 2; }
  .l-how h3 { margin-bottom: 4px; font-size: var(--fs-lg); }
  .l-how p { margin: 0; }
  .l-verticals { gap: 10px; }
  .l-vertical { padding: 14px 16px; }
  .l-prices { gap: 12px; }
  .l-price { padding: 22px 20px; border-radius: var(--r-lg); }
  .l-price .amount { font-size: 2.8rem; }
  .l-price ul { margin-top: 12px; gap: 8px; }
  .l-signup { gap: 20px; }
  .l-signup form { padding: 20px; border-radius: var(--r-lg); }
  .site-footer { margin-top: 56px; padding: 22px 20px 32px; }
}
@media (max-width: 480px) {
  .phone { width: 168px; height: 344px; padding: 8px; border-radius: 30px; }
  .phone-screen { border-radius: 23px; }
  .phone-island { width: 58px; height: 18px; top: 8px; }
  .l-phones { height: 300px; }
  .phone-a { bottom: -60px; }
  .phone-b { bottom: -100px; }
  .mini { padding: 34px 10px 10px; gap: 8px; }
  .mini-pass { padding: 12px 10px; border-radius: 18px; }
  .mini-pass b { font-size: 3.2rem; }
  .mini-ready { padding: 30px 10px 12px; }
  .mini-ready .bell { width: 48px; height: 48px; }
  .mini-ready .bell .ico { width: 24px; height: 24px; }
  .mini-ready b { font-size: 3rem; }
  .mini-ready strong { font-size: 1.6rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .ready-rings span { display: none; }
  .gd-mark.is-animated .gd-bell, .gd-mark.is-animated .gd-waves path { animation: none !important; opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ---------- cashier: ticket customization ---------- */
.theme-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.theme-swatches label { margin: 0; cursor: pointer; }
.theme-swatches input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatches span { display: block; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(150deg, var(--pass-a), var(--pass-b)); box-shadow: inset 0 0 0 2px oklch(1 0 0 / .25); transition: transform var(--t-fast) var(--ease); }
.theme-swatches input:checked + span { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.theme-swatches input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 3px; }
.theme-swatches label:hover span { transform: scale(1.08); }
.pass-preview { margin: 4px 0 14px; padding: 14px; border-radius: var(--r-md); background: var(--green-wash); }
.pass-preview .pass { --notch: 11px; animation: none; border-radius: var(--r-lg); }
.pass-preview .pass-main { padding: 14px 14px 12px; }
.pass-preview .pass-num { font-size: 4.2rem; margin: 4px 0; }
.pass-preview .pass-status { font-size: var(--fs-sm); padding: .3em .8em; }
.pass-preview .pass-tear { margin: 0 18px; }
.pass-preview .pass-tear::before { left: calc(-18px - var(--notch)); }
.pass-preview .pass-tear::after { right: calc(-18px - var(--notch)); }
.pass-preview .pass-foot { padding: 12px 12px 14px; }
.pass-preview .steps li { font-size: .68rem; }
.custom-form label { margin: 12px 0 4px; font-size: var(--fs-sm); }
.custom-form input { min-height: 44px; font-size: var(--fs-sm); }
.custom-stages { display: grid; gap: 6px; }
.custom-form .theme-swatches label { margin: 0; }

/* ---------- customer: shop offer while waiting ---------- */
.c-offer {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--amber-soft); border: 1.5px solid oklch(0.88 0.09 85); animation: rise var(--t-slow) var(--ease) 40ms backwards;
}
.c-offer > div { flex: 1; min-width: 0; }
.c-offer strong { display: block; color: oklch(0.30 0.07 65); }
.c-offer span:not(.c-offer-icon) { display: block; font-size: var(--fs-sm); color: var(--amber-ink); line-height: 1.5; }
.c-offer-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--amber); color: oklch(0.25 0.06 65); }
.c-offer-icon .ico { width: 22px; height: 22px; }
.c-offer .btn { flex: none; font-weight: 700; }
.c-offer.is-taken { background: var(--green-soft); border-color: oklch(0.85 0.06 165); }
.c-offer.is-taken strong { color: var(--green-strong); }
.c-offer.is-taken span:not(.c-offer-icon) { color: var(--green-strong); }
.c-offer.is-taken .c-offer-icon { background: var(--green); color: #fff; }

/* ---------- customer: after rating ---------- */
.c-review { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-strong); text-align: center; display: grid; gap: 12px; animation: rise var(--t-slow) var(--ease); }
.c-review p { margin: 0; color: var(--ink-2); }
.c-review p b { color: var(--ink); }
.c-review textarea {
  width: 100%; min-height: 96px; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  font: inherit; color: var(--ink); background: var(--surface); resize: vertical;
}
.c-review textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.c-review-thanks { margin: 18px 0 0; color: var(--green-strong); font-weight: 600; }

/* ---------- cashier: reviews panel ---------- */
.review-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.review-stats div { background: var(--sunk); border-radius: var(--r-sm); padding: 10px 8px; text-align: center; }
.review-stats b { display: block; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.review-stats span { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.private-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.private-notes li { background: var(--sunk); border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--fs-sm); font-weight: 600; }
.private-notes li p { margin: 4px 0 0; font-weight: 400; color: var(--ink-2); }
.note-stars { color: var(--amber-strong); letter-spacing: 1px; }
details.tool > summary .pill { font-size: var(--fs-xs); padding: .15em .6em; }

/* =====================================================================
   OWNER REPORT
   ===================================================================== */
.report { max-width: 1080px; margin: 0 auto; padding: 0 16px 60px; }
.report-bar { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--sunk); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.report-title { display: flex; align-items: center; gap: 12px; }
.report-title img, .report-title [data-logo] { width: 46px; height: 46px; border-radius: 13px; }
.report-title h1 { font-size: var(--fs-xl); margin: 0; }
.report-actions { display: flex; align-items: center; gap: 8px; }
.segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.segmented button { border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); padding: 7px 14px; border-radius: var(--r-pill); cursor: pointer; min-height: 36px; }
.segmented button.on { background: var(--green); color: #fff; }
.sample-note { display: flex; align-items: center; gap: .5em; background: var(--amber-soft); color: var(--amber-ink); border-radius: var(--r-md); padding: 10px 14px; font-size: var(--fs-sm); font-weight: 600; }

.report-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: 8px;
  background: radial-gradient(80% 120% at 0% 0%, oklch(0.60 0.12 160 / .5), transparent 60%), var(--green-deep);
  color: #fff; border-radius: var(--r-xl); padding: 30px 32px; box-shadow: var(--shadow-2);
}
.hero-kicker { margin: 0 0 6px; color: oklch(1 0 0 / .75); font-weight: 600; }
.hero-line { font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 600; line-height: 1.5; margin: 0 0 10px; max-width: 30em; }
.hero-line b { color: var(--amber); font-weight: 700; }
.hero-figure { text-align: center; font-weight: 600; color: oklch(1 0 0 / .85); max-width: 180px; line-height: 1.4; }
.hero-figure span { display: block; font-size: 4.2rem; font-weight: 700; line-height: 1; color: #fff; margin-bottom: 6px; }
.hero-figure small { font-size: 2rem; }
.report-hero .delta { color: oklch(1 0 0 / .85); }
.report-hero .delta.good { color: oklch(0.88 0.12 155); }

.report-h { font-size: var(--fs-xl); margin: 34px 0 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.stat-label { color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); }
.stat-value { font-size: 2.2rem; font-weight: 700; line-height: 1.15; color: var(--ink); }
.stat-value small { font-size: var(--fs-md); font-weight: 600; color: var(--ink-3); margin-inline-start: 6px; }
.stat-sub { color: var(--ink-3); font-size: var(--fs-xs); }
.delta { display: inline-flex; align-items: center; gap: .3em; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); margin-top: 4px; }
.delta.good { color: var(--green-strong); }
.delta.bad { color: var(--red); }
.delta .ico { width: 14px; height: 14px; }
.delta .ico.up { transform: rotate(90deg); }
.delta .ico.down { transform: rotate(-90deg); }

.report-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin-top: 34px; }
.chart { width: 100%; height: auto; display: block; margin-top: 8px; font-family: var(--font); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .bar path { fill: var(--green); transition: opacity var(--t-fast) var(--ease); }
.chart .bar .hit { fill: transparent; }
.chart:hover .bar path { opacity: .55; }
.chart .bar:hover path { opacity: 1; }
.chart .bar.is-peak path { fill: var(--green-strong); }
.chart .peak-label { fill: var(--ink); font-size: 12px; font-weight: 700; }
.chart-tip { position: fixed; z-index: var(--z-toast); pointer-events: none; transform: translate(-50%, -100%); background: var(--ink); color: #fff; padding: 7px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); white-space: nowrap; box-shadow: var(--shadow-2); }
.table-view { margin-top: 12px; font-size: var(--fs-sm); }
.table-view summary { cursor: pointer; color: var(--green-strong); font-weight: 600; }
.table-view table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.table-view th, .table-view td { text-align: start; padding: 6px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.report-foot { margin-top: 26px; text-align: center; }

@media (max-width: 720px) {
  .report-hero { grid-template-columns: 1fr; padding: 24px 22px; }
  .hero-figure { max-width: none; text-align: start; }
}
@media print {
  .report-bar .btn, .segmented, .table-view, .chart-tip { display: none !important; }
  body.cashier-page { background: #fff; }
  .report-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-card, .stat-tile { break-inside: avoid; }
}

/* =====================================================================
   LANDING MOTION
   Principles: content is always visible by default; motion only enhances it.
   - Hero: a one-time staggered entrance on load + gentle idle life (glow drift, phone float, ringing bell).
   - Below the fold: reveals are driven by scroll position (animation-timeline: view()),
     so nothing waits on a timer and nothing can get stuck invisible. Browsers without
     scroll-driven animations just show the page as is.
   - Easing is exponential (ease-out-quart family); no bounce. Reduced motion turns it all off.
   ===================================================================== */
.l-hero { isolation: isolate; }
.l-hero::before {
  content: ''; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(35% 40% at 30% 30%, oklch(0.62 0.13 160 / .45), transparent 70%),
    radial-gradient(30% 35% at 75% 80%, oklch(0.80 0.165 80 / .16), transparent 70%);
}
.l-how { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* ---- hero entrance (on load) ---- */
  .l-hero h1, .l-hero .lead, .l-hero-actions, .l-hero-proof { animation: hero-rise 1.1s cubic-bezier(.16, 1, .3, 1) both; }
  .l-hero .lead { animation-delay: .12s; }
  .l-hero-actions { animation-delay: .24s; }
  .l-hero-proof { animation-delay: .36s; }
  .l-nav { animation: fade-in .8s ease-out both; }
  .phone-a { animation: phone-in-a 1.4s cubic-bezier(.16, 1, .3, 1) .2s both, float-a 7s ease-in-out 1.6s infinite; }
  .phone-b { animation: phone-in-b 1.4s cubic-bezier(.16, 1, .3, 1) .38s both, float-b 8s ease-in-out 1.8s infinite; }
  @keyframes hero-rise { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
  @keyframes phone-in-a { from { opacity: 0; transform: translateY(90px) rotate(-10deg); } to { opacity: 1; transform: rotate(-4deg); } }
  @keyframes phone-in-b { from { opacity: 0; transform: translateY(120px) rotate(12deg); } to { opacity: 1; transform: rotate(5deg); } }
  @keyframes float-a { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-10px); } }
  @keyframes float-b { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-14px); } }

  /* ---- hero idle life ---- */
  .l-hero::before { animation: glow-drift 18s ease-in-out infinite alternate; }
  @keyframes glow-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-6%, 4%) scale(1.08); } }
  .mini-ready .bell { animation: mini-ring 3.2s cubic-bezier(.36, .07, .19, .97) 2s infinite; }
  @keyframes mini-ring {
    0%, 30%, 100% { transform: rotate(0); box-shadow: 0 0 0 10px oklch(0.80 0.165 80 / .2), 0 0 0 22px oklch(0.80 0.165 80 / .08); }
    5% { transform: rotate(14deg); } 10% { transform: rotate(-12deg); } 15% { transform: rotate(8deg); }
    20% { transform: rotate(-4deg); box-shadow: 0 0 0 16px oklch(0.80 0.165 80 / .28), 0 0 0 34px oklch(0.80 0.165 80 / .1); }
  }
  .mini-steps i.on:last-of-type { animation: step-glow 1.8s ease-in-out infinite; }
  @keyframes step-glow { 50% { opacity: .45; } }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* ---- hero recedes as you scroll: copy fades, phones lag behind (parallax) ---- */
    .l-hero-copy { animation: hero-recede linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    .l-showcase .l-phones { animation: phones-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes hero-recede { to { opacity: .15; transform: translateY(-40px); filter: blur(3px); } }
    @keyframes phones-rise { from { transform: translateY(90px); } }

    /* ---- reveals tied to scroll position ---- */
    .l-section h2, .l-section .l-intro,
    .l-how li, .l-vertical, .l-price, .l-gets li, .l-signup form, .site-footer {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 60%;
    }
    .l-section .l-intro { animation-range: entry 12% entry 68%; }
    @keyframes reveal-up { from { opacity: 0; transform: translateY(36px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

    /* lists arrive one after another (the range shifts per item, so it still follows the scroll) */
    .l-how li:nth-child(2), .l-vertical:nth-child(2), .l-price:nth-child(2), .l-gets li:nth-child(2) { animation-range: entry 14% entry 70%; }
    .l-how li:nth-child(3), .l-vertical:nth-child(3), .l-price:nth-child(3), .l-gets li:nth-child(3) { animation-range: entry 23% entry 80%; }
    .l-vertical:nth-child(4), .l-gets li:nth-child(4) { animation-range: entry 32% entry 90%; }

    /* before / after cards slide in from opposite sides (RTL: "before" sits on the right) */
    .l-before { animation: slide-from-right linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
    .l-after { animation: slide-from-left linear both; animation-timeline: view(); animation-range: entry 12% entry 68%; }
    @keyframes slide-from-right { from { opacity: 0; transform: translateX(70px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
    @keyframes slide-from-left { from { opacity: 0; transform: translateX(-70px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

    /* the 3 steps get a line that draws across them as you scroll */
    .l-how::before {
      content: ''; position: absolute; top: 26px; inset-inline: 27px; height: 3px; border-radius: 3px; z-index: -1;
      background: linear-gradient(to left, var(--amber), oklch(0.80 0.165 80 / .25));
      transform-origin: right; transform: scaleX(0);
      animation: draw-line linear both; animation-timeline: view(); animation-range: entry 20% cover 45%;
    }
    @keyframes draw-line { to { transform: scaleX(1); } }

    /* the demo block and its phone */
    @keyframes reveal-scale { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
  }
}
@media (max-width: 960px) { .l-how::before { display: none; } }

/* sliding reveals start slightly off-screen; never let them cause sideways scrolling */
main, .site-footer { overflow-x: clip; }
.auto-ring { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 8px; margin: 6px 0 4px; }
.auto-ring label { margin: 0; font-size: var(--fs-sm); }
.auto-ring select { min-height: 40px; font-size: var(--fs-sm); padding: .3em .6em; }
.auto-ring.is-off { opacity: .45; pointer-events: none; }

/* ---------- landing: business ribbon ---------- */
.l-ribbon { background: var(--amber); color: oklch(0.25 0.06 65); overflow: hidden; padding: 14px 0; position: relative; z-index: 1; }
.l-ribbon-track { display: flex; width: max-content; gap: 0; }
.l-ribbon-track span { font-family: var(--display); font-size: 1.35rem; padding: 0 22px; white-space: nowrap; display: inline-flex; align-items: center; gap: 22px; }
.l-ribbon-track span::after { content: '●'; font-size: .55rem; opacity: .5; }

/* ---------- landing: key numbers ---------- */
.l-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding-top: 70px; }
.l-number { text-align: center; padding: 8px 12px; border-inline-start: 1px solid var(--line); }
.l-number:first-child { border-inline-start: 0; }
.l-number b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(3.2rem, 7vw, 5rem); line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.l-number span { display: block; margin-top: 8px; color: var(--ink-2); font-weight: 600; line-height: 1.45; }
@media (max-width: 720px) {
  .l-numbers { grid-template-columns: 1fr 1fr; row-gap: 26px; padding-top: 44px; }
  .l-number:nth-child(3) { border-inline-start: 0; }
}

/* ---------- landing: pricing hover (lift + light that follows the pointer) ---------- */
/* lift uses `translate` (not `transform`) so it never fights the scroll-reveal animation */
.l-price { position: relative; isolation: isolate; overflow: hidden; transition: translate var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease), border-color var(--t) var(--ease); }
.l-price::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity var(--t-slow) var(--ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), oklch(0.80 0.165 80 / .16), transparent 65%);
}
.l-price:hover { translate: 0 -8px; box-shadow: var(--shadow-3); border-color: oklch(0.80 0.08 165); }
.l-price:hover::before { opacity: 1; }
.l-price li { transition: translate var(--t) var(--ease); }
.l-price:hover li { translate: -3px 0; }
.l-price li:nth-child(2) { transition-delay: 30ms; } .l-price li:nth-child(3) { transition-delay: 60ms; }
.l-price li:nth-child(4) { transition-delay: 90ms; } .l-price li:nth-child(5) { transition-delay: 120ms; }
.l-price.featured::before { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), oklch(0.80 0.165 80 / .22), transparent 65%); }
/* the featured plan wears a slowly turning gold border */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.l-price.featured::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0 60%, var(--amber) 75%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---------- landing: FAQ ---------- */
.l-faq { display: grid; gap: 10px; max-width: 860px; }
.l-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); interpolate-size: allow-keywords; }
.l-faq details:hover { border-color: var(--line-strong); }
.l-faq details[open] { border-color: oklch(0.82 0.06 165); box-shadow: var(--shadow-1); }
.l-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; cursor: pointer; font-weight: 700; font-size: var(--fs-lg); }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--sunk); color: var(--green); font-style: normal; transition: transform var(--t-slow) var(--ease), background-color var(--t) var(--ease); }
.l-faq details[open] summary i { transform: rotate(180deg); background: var(--green-soft); }
.l-faq-body { padding: 0 22px 18px; color: var(--ink-2); }
.l-faq-body p { margin: 0; max-width: 65ch; }
/* smooth open/close where the browser supports animating details */
.l-faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-slow) var(--ease), content-visibility var(--t-slow) allow-discrete; }
.l-faq details[open]::details-content { block-size: auto; }

/* ---------- landing: final call to action ---------- */
.l-cta {
  text-align: center; color: #fff; border-radius: var(--r-xl); padding: 56px 24px; position: relative; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 0%, oklch(0.62 0.13 160 / .55), transparent 70%), var(--green-deep);
}
.l-cta [data-logo] { width: 76px; height: 76px; margin-bottom: 18px; filter: drop-shadow(0 14px 24px oklch(0.12 0.04 168 / .5)); }
.l-cta h2 { color: #fff !important; margin-bottom: 10px; }
.l-cta p { color: oklch(1 0 0 / .82); font-size: var(--fs-lg); margin-bottom: 26px; }
.l-cta .l-hero-actions { justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
  .l-ribbon-track { animation: ribbon 38s linear infinite; }
  .l-ribbon:hover .l-ribbon-track { animation-play-state: paused; }
  @keyframes ribbon { to { transform: translateX(50%); } }
  .l-price.featured::after { animation: spin-border 6s linear infinite; }
  @keyframes spin-border { to { --spin: 360deg; } }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .l-number, .l-faq details, .l-cta { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
    .l-number:nth-child(2) { animation-range: entry 12% entry 62%; }
    .l-number:nth-child(3) { animation-range: entry 19% entry 69%; }
    .l-number:nth-child(4) { animation-range: entry 26% entry 76%; }
  }
}


/* =====================================================================
   SUBSCRIPTION (cashier side)
   ===================================================================== */
.sub-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px max(16px, 2vw) 0; padding: 10px 14px; border-radius: var(--r-md);
  font-weight: 600; font-size: var(--fs-sm);
}
.sub-banner > span { flex: 1 1 240px; }
.sub-amber { background: var(--amber-soft); color: var(--amber-ink); }
.sub-red { background: var(--red-soft); color: var(--red); }
.sub-banner .btn { min-height: 36px; }
.lock-card { max-width: 420px; }
.lock-badge {
  display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 22px;
  background: var(--red-soft); color: var(--red);
}
.lock-badge .ico { width: 30px; height: 30px; }
.lock-card .btn { margin-top: 8px; }
.lock-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; }
.lock-live .live-dot { background: var(--amber); animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }

.l-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .l-form-row { grid-template-columns: 1fr; } }

/* =====================================================================
   ADMIN
   ===================================================================== */
.pill-blue { background: oklch(0.95 0.03 245); color: oklch(0.45 0.12 250); }
.pill-muted { background: var(--sunk); color: var(--ink-3); }
.block { display: block; }
.admin { min-height: 100vh; padding-bottom: 40px; }

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px;
  padding: 20px max(16px, 2vw) 0;
}
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.kpi-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.kpi-value { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.kpi-sub { font-size: var(--fs-xs); color: var(--ink-2); }
.kpi.warn { background: var(--amber-soft); border-color: oklch(0.88 0.08 85); }
.kpi.warn .kpi-label, .kpi.warn .kpi-sub { color: var(--amber-ink); }
.kpi.pulse .kpi-value::after {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-inline-start: 10px; vertical-align: middle;
  border-radius: 50%; background: oklch(0.70 0.16 155); box-shadow: 0 0 0 4px oklch(0.70 0.16 155 / .2);
}

.admin-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 22px max(16px, 2vw) 0; border-bottom: 1px solid var(--line);
}
.admin-tabs button {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink-3);
  padding: 10px 14px 12px; cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.admin-tabs button:hover { color: var(--ink); }
.admin-tabs button.on { color: var(--green-strong); border-bottom-color: var(--green); }
.admin-tabs .count {
  font-size: var(--fs-xs); background: var(--surface); color: var(--ink-2);
  padding: 1px 8px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums;
}
.admin-tabs button.on .count { background: var(--green-soft); color: var(--green-strong); }

.admin-card {
  margin: 16px max(16px, 2vw) 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.card-intro { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.search { position: relative; flex: 1 1 260px; margin: 0; }
.search .ico { position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%; color: var(--ink-3); pointer-events: none; }
.search input { min-height: 44px; padding-inline-start: 42px; border-radius: var(--r-pill); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.filters button span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.filters button.on { background: var(--green); border-color: var(--green); color: #fff; }
.filters button.on span { color: oklch(1 0 0 / .78); }

.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.admin-table th {
  text-align: start; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3);
  padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .num { font-variant-numeric: tabular-nums; }
.admin-table a { font-weight: 600; text-decoration: none; }
.shops-table tbody tr { cursor: pointer; transition: background var(--t-fast) var(--ease); }
.shops-table tbody tr:hover { background: var(--green-wash); }
.shops-table tbody tr:focus-visible { outline-offset: -3px; }
.admin-table tr.flash td { animation: row-flash 1.6s var(--ease); }
@keyframes row-flash { from { background: var(--amber-soft); } }

.shop-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.shop-cell img, .shop-initial { width: 36px; height: 36px; border-radius: 10px; flex: none; object-fit: cover; }
.shop-initial { display: grid; place-items: center; background: var(--green-soft); color: var(--green-strong); font-family: var(--display); font-size: 1.3rem; }
.shop-cell div { display: flex; flex-direction: column; line-height: 1.35; }
.cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.4; }
.owner-phone { display: inline-flex; align-items: center; gap: 8px; }
.owner-phone a { color: var(--ink-2); font-weight: 500; }
.owner-phone .wa { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green-soft); color: var(--green-strong); }
.live-count { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green-strong); }
.live-count i { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.70 0.16 155); animation: breathe 1.4s ease-in-out infinite; }
.ticket-no { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1; }
.ref { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-xs); color: var(--ink-2); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--ink-3); padding: 48px 20px; margin: 0; }
.empty .ico { width: 34px; height: 34px; color: var(--line-strong); }

/* database tab */
.db { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 520px; }
.db-side { border-inline-end: 1px solid var(--line); background: var(--bg); padding: 14px 10px; overflow-y: auto; max-height: 72vh; }
.db-h { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); margin: 6px 8px 8px; }
.db-tables, .db-records { list-style: none; margin: 0 0 14px; padding: 0; }
.db-tables li { display: flex; justify-content: space-between; padding: 6px 8px; font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-xs); direction: ltr; }
.db-records button {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: start;
  border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer;
}
.db-records button span { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 400; }
.db-records button:hover { background: var(--sunk); }
.db-records button.on { background: var(--green-soft); color: var(--green-strong); }
.db-main { display: flex; flex-direction: column; min-width: 0; }
.db-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.db-head b { font-family: ui-monospace, Consolas, monospace; direction: ltr; }
.json {
  margin: 0; padding: 16px; flex: 1; overflow: auto; max-height: 68vh; text-align: left;
  font: 12.5px/1.6 ui-monospace, 'Cascadia Code', Consolas, monospace;
  background: oklch(0.22 0.025 168); color: oklch(0.90 0.01 165); white-space: pre-wrap; word-break: break-word;
}
.j-key { color: oklch(0.82 0.10 165); }
.j-str { color: oklch(0.86 0.10 85); }
.j-num { color: oklch(0.80 0.10 250); }
.j-lit { color: oklch(0.78 0.12 20); }

/* shop drawer (a native dialog, slides in from the start side) */
.drawer {
  margin: 0; margin-inline-start: auto; height: 100dvh; max-height: 100dvh; width: min(480px, 100%);
  max-width: 100%; border: 0; padding: 0; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-3); overflow-y: auto;
}
.drawer::backdrop { background: oklch(0.2 0.04 168 / .45); }
.drawer[open] { animation: drawer-in var(--t-slow) var(--ease); }
@keyframes drawer-in { from { transform: translateX(-24px); opacity: 0; } }
.drawer-inner { padding: 0 20px 32px; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: sticky; top: 0; background: var(--surface); padding: 18px 0 10px; z-index: 1; }
.drawer-head h2 { margin: 0; font-size: var(--fs-xl); }
.d-status { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-2); margin: 6px 0 14px; }
.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; padding: 14px; background: var(--bg); border-radius: var(--r-md); }
.d-grid dt { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.d-grid dd { margin: 0; font-weight: 600; font-size: var(--fs-sm); }
.d-sec { margin-top: 22px; }
.d-sec h3 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); margin-bottom: 10px; }
.pay-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.pay-form label { margin: 0; font-size: var(--fs-xs); display: flex; flex-direction: column; gap: 4px; }
.pay-form input, .pay-form select { min-height: 44px; font-size: var(--fs-sm); }
.pay-form .span2 { grid-column: 1 / -1; }
.pay-form .btn { margin-top: 4px; }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.d-until { display: inline-flex; gap: 6px; align-items: center; }
.d-until input { min-height: 40px; width: auto; font-size: var(--fs-sm); padding: 0 10px; }
.drawer textarea {
  width: 100%; font: inherit; font-size: var(--fs-sm); padding: 10px 12px; resize: vertical;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
}
.drawer textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.d-pays { list-style: none; margin: 0; padding: 0; }
.d-pays li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }

@media (max-width: 760px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi-value { font-size: 1.35rem; }
  .admin-tabs button { padding-inline: 10px; font-size: var(--fs-sm); gap: 6px; }
  /* tables become stacked cards so nothing scrolls sideways on a phone */
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; }
  .admin-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .admin-table td { border: 0; padding: 3px 0; display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }
  .admin-table td::before { content: attr(data-label); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; flex: none; }
  .admin-table td .cell-stack { align-items: flex-end; text-align: end; }
  .admin-table td[data-label="المحل"] { padding-bottom: 6px; }
  .admin-table td[data-label="المحل"]::before { display: none; }
  .db { grid-template-columns: 1fr; }
  .db-side { max-height: 220px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .pay-form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-table tr.flash td, .drawer[open], .live-count i, .lock-live .live-dot { animation: none; }
}

/* =====================================================================
   HOMEPAGE: TRY IT LIVE
   The page is the cashier; the visitor's phone is the customer.
   ===================================================================== */
.try {
  position: relative; overflow: hidden;
  background: var(--green-deep); color: oklch(0.96 0.01 165);
  border-radius: var(--r-xl); padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 30px 60px oklch(0.25 0.06 168 / .25);
}
/* soft light where the "ready" moment happens */
.try::before {
  content: ''; position: absolute; inset: auto -20% -60% auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, oklch(0.80 0.165 80 / .16), transparent);
  pointer-events: none; transition: opacity var(--t-slow) var(--ease); opacity: .5;
}
.try.is-ready::before { opacity: 1; }
.try-head { position: relative; max-width: 560px; }
.try-head h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 10px 0 8px; }
.try-head p { color: oklch(0.86 0.03 165); margin: 0; }
.try-tag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--amber); }
.try-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px oklch(0.80 0.165 80 / .22); }

.try-body {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px);
  align-items: center; margin-top: 30px;
}

/* the ticket stub: number on top, QR below, notches like the logo's ticket */
.try-stub {
  position: relative; width: 236px; background: #fff; color: var(--ink); border-radius: 22px;
  padding: 18px 18px 16px; text-align: center; display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 20px 40px oklch(0.12 0.03 168 / .45); rotate: -2deg;
  transition: rotate var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
}
.try-stub::before, .try-stub::after {
  content: ''; position: absolute; top: 107px; width: 22px; height: 22px; border-radius: 50%; background: var(--green-deep);
}
.try-stub::before { inset-inline-start: -11px; }
.try-stub::after { inset-inline-end: -11px; }
.try.is-scanned .try-stub { rotate: 0deg; }
.try-stub-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.try-number { font-family: var(--display); font-weight: 400; font-size: 3.6rem; line-height: 1; color: var(--green); min-height: 58px; }
.try-qr {
  width: 176px; height: 176px; margin-top: 22px; padding-top: 14px; border-top: 2px dashed var(--line);
  display: grid; place-items: center; transition: opacity var(--t) var(--ease), filter var(--t) var(--ease);
}
.try-qr svg { width: 100%; height: 100%; display: block; }
.try.is-scanned .try-qr { opacity: .18; filter: blur(2px); }
.try-qr-wait { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--green); animation: try-spin 900ms linear infinite; }
@keyframes try-spin { to { transform: rotate(360deg); } }
.try-stub-hint { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin-top: 8px; }
.try.is-scanned .try-stub-hint::before { content: '✓ '; color: var(--green); }

.try-console { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.try-status {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; color: #fff; min-height: 1.6em;
}
.try-status i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: oklch(0.70 0.03 165); }
.try-status.is-wait i { background: var(--amber); animation: try-breathe 1.6s ease-in-out infinite; }
.try-status.is-good i { background: oklch(0.78 0.17 150); box-shadow: 0 0 0 5px oklch(0.78 0.17 150 / .22); }
.try-status.is-ring i { background: var(--amber); animation: try-ring 900ms ease-out infinite; }
.try-status.is-done i { background: oklch(0.78 0.17 150); }
.try-status.is-warn i { background: var(--red); }
@keyframes try-breathe { 50% { opacity: .3; } }
@keyframes try-ring { from { box-shadow: 0 0 0 0 oklch(0.80 0.165 80 / .7); } to { box-shadow: 0 0 0 14px oklch(0.80 0.165 80 / 0); } }

.try-track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; font-size: var(--fs-sm); font-weight: 600; }
.try-track li { display: inline-flex; align-items: center; gap: 7px; color: oklch(0.72 0.03 165); padding: 6px 12px 6px 10px; border-radius: var(--r-pill); background: oklch(1 0 0 / .06); }
.try-track li i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.try-track li.done { color: oklch(0.88 0.06 160); }
.try-track li.done i { background: currentColor; }
.try-track li.now { color: var(--green-deep); background: var(--amber); }
.try-track li.now i { background: currentColor; border-color: currentColor; }

.try-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.try-actions .btn { min-height: 54px; font-weight: 700; font-size: var(--fs-lg); padding-inline: 1.3em; }
.try-actions .btn:disabled { opacity: .4; }
.try-ghost { --btn-bg: transparent; --btn-ink: #fff; --btn-line: oklch(1 0 0 / .3); }
.try-ghost:hover { --btn-bg: oklch(1 0 0 / .08); --btn-line: oklch(1 0 0 / .5); }
.try.is-ready .btn-try-main, .try.is-ready [data-try="done"] { box-shadow: 0 0 0 6px oklch(0.80 0.165 80 / .18); }
.try-hint { font-size: var(--fs-sm); color: oklch(0.80 0.03 165); }
.try-alt {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 0;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: oklch(0.88 0.04 165);
  text-decoration: underline; text-decoration-color: oklch(1 0 0 / .3); text-underline-offset: 4px; cursor: pointer;
}
.try-alt[hidden] { display: none; }
.try-alt:hover { color: #fff; text-decoration-color: var(--amber); }
.try-alt .ico { width: 1.1em; height: 1.1em; }

.try-phone-frame {
  position: relative; width: 270px; height: 540px; padding: 10px; border-radius: 42px;
  background: oklch(0.14 0.02 168); box-shadow: 0 30px 60px oklch(0.08 0.03 168 / .6), inset 0 0 0 2px oklch(1 0 0 / .08);
  animation: rise var(--t-slow) var(--ease);
}
.try-phone-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 33px; background: var(--bg); display: block; }

.try-foot { position: relative; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid oklch(1 0 0 / .12); font-size: var(--fs-sm); color: oklch(0.82 0.03 165); }
.try-foot a { color: var(--amber); font-weight: 700; }
.try-foot b { color: #fff; }

@media (max-width: 720px) {
  .try { border-radius: var(--r-lg); }
  .try-body { grid-template-columns: 1fr; justify-items: center; }
  .try-console { align-items: center; text-align: center; width: 100%; }
  .try-status { justify-content: center; }
  .try-track, .try-actions { justify-content: center; }
  .try-stub { rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
  .try-status i, .try-qr-wait, .try-phone-frame { animation: none !important; }
  .try-stub { transition: none; }
}

/* try-it: keep the ticket and the controls lined up at the top when the phone makes the row tall */
.try-body { align-items: start; }
.try-console { padding-top: 8px; }
/* Keep the full ticket and QR on phones; the responsive grid stacks the controls below. */

.try-start { min-height: 54px; font-weight: 700; font-size: var(--fs-lg); }

/* ---------- popup: customer's phone + the cashier buttons ---------- */
.try-modal {
  border: 0; padding: 0; max-width: none; max-height: none; background: transparent; color: #fff;
  width: min(860px, calc(100% - 32px)); overflow: visible;
}
.try-modal::backdrop { background: oklch(0.14 0.03 168 / .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.try-modal[open] { animation: pop var(--t-slow) var(--ease); }
.try-modal-body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: center;
  background: var(--green-deep); border-radius: var(--r-xl); padding: 32px;
  box-shadow: 0 40px 100px oklch(0.08 0.03 168 / .6);
}
.try-modal-side .try-console { gap: 20px; }
.try-modal-side::before {
  content: 'إنت الكاشير'; display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--amber); margin-bottom: 12px;
}
.try-modal-close {
  position: absolute; top: -14px; inset-inline-end: -14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-2);
}
.try-modal-close .ico { width: 20px; height: 20px; }
.try-phone { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.try-phone-label { font-size: var(--fs-xs); font-weight: 600; color: oklch(0.80 0.03 165); }

@media (max-width: 720px) {
  /* on a phone the popup fills the screen: cashier buttons on top, customer page below */
  .try-modal { width: 100%; height: 100dvh; margin: 0; }
  .try-modal-body {
    height: 100%; border-radius: 0; padding: 14px 12px 0; gap: 12px;
    grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: stretch;
  }
  .try-modal-side::before { text-align: center; margin-bottom: 6px; }
  .try-modal-side .try-console { gap: 10px; }
  .try-modal-side .try-status { font-size: 1rem; }
  .try-modal-side .try-actions .btn { min-height: 46px; font-size: var(--fs-md); }
  .try-modal-close { top: 10px; inset-inline-end: 10px; width: 38px; height: 38px; }
  .try-phone { min-height: 0; }
  .try-phone-frame { width: 100%; height: 100%; padding: 0; border-radius: 22px 22px 0 0; box-shadow: none; }
  .try-phone-frame .phone-island { display: none; }
  .try-phone-frame iframe { border-radius: 22px 22px 0 0; }
  .try-phone-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .try-modal[open] { animation: none; } }
.try [hidden], .try-modal [hidden] { display: none !important; }

/* ---------- hero: the live demo sits next to the headline ---------- */
.l-hero-inner { align-items: center; }
.l-hero-copy { padding-bottom: 0; }
.l-hero { padding-bottom: 80px; }
.l-hero-try { min-width: 0; scroll-margin-top: 24px; }
.l-hero .try {
  background: oklch(0.21 0.04 168); border: 1px solid oklch(1 0 0 / .1);
  border-radius: 28px; padding: 22px 24px 24px;
  box-shadow: 0 40px 80px oklch(0.10 0.04 168 / .55);
}
.l-hero .try-head p { font-size: var(--fs-sm); margin-top: 4px; }
.l-hero .try-body { margin-top: 18px; gap: 22px; }
.l-hero .try-stub { width: 200px; padding: 14px 14px 12px; }
.l-hero .try-stub::before, .l-hero .try-stub::after { top: 93px; background: oklch(0.21 0.04 168); }
.l-hero .try-number { font-size: 3rem; min-height: 48px; }
.l-hero .try-qr { width: 150px; height: 150px; margin-top: 18px; padding-top: 12px; }
.l-hero .try-status { font-size: 1.05rem; }
.l-hero .try-actions .btn { min-height: 50px; font-size: var(--fs-md); }
@media (min-width: 961px) { .l-hero-trylink { display: none; } }
@media (max-width: 960px) {
  .l-hero-try { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 720px) {
  .l-hero { padding-bottom: 48px; }
  .l-hero .try { padding: 18px 16px 20px; border-radius: var(--r-lg); }
  .l-hero .try-head { text-align: center; }
}

/* ---------- banner: the two phones, below the hero ---------- */
.l-showcase-card {
  position: relative; overflow: hidden; color: #fff;
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end;
  border-radius: var(--r-xl); padding: 48px 48px 0;
  background:
    radial-gradient(60% 80% at 10% 100%, oklch(0.80 0.165 80 / .22), transparent 60%),
    radial-gradient(60% 70% at 90% 0%, oklch(0.62 0.13 160 / .5), transparent 60%),
    var(--green-deep);
}
.l-showcase-copy { align-self: center; padding-bottom: 48px; }
.l-showcase-copy h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; color: #fff; }
.l-showcase-copy h2 em { font-style: normal; color: var(--amber); }
.l-showcase-copy p { color: oklch(1 0 0 / .84); font-size: var(--fs-lg); max-width: 30em; margin-bottom: 24px; }
.l-showcase-copy .btn { min-height: 54px; font-weight: 700; padding-inline: 1.4em; }
.l-showcase .l-phones { height: 470px; }
@media (max-width: 960px) {
  .l-showcase-card { grid-template-columns: 1fr; padding: 36px 28px 0; }
  .l-showcase-copy { padding-bottom: 0; text-align: center; }
  .l-showcase-copy p { margin-inline: auto; }
}
@media (max-width: 480px) {
  .l-showcase-card { border-radius: var(--r-lg); padding: 28px 20px 0; }
  .l-showcase .l-phones { height: 320px; }
}

/* ---------- pricing on phones ---------- */
/* touch screens keep :hover after a tap, which left cards lifted and their lists shifted */
@media (hover: none) {
  .l-price:hover { translate: none; }
  .l-price:not(.featured):hover { box-shadow: none; border-color: var(--line); }
  .l-price:hover li { translate: none; }
  .l-price:hover::before { opacity: 0; }
}
@media (max-width: 720px) {
  .l-prices { max-width: 460px; margin-inline: auto; }
  .l-price.featured { order: -1; } /* the recommended plan first */
  /* plan name and price on one line, list underneath */
  .l-price { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; }
  .l-price .pill { grid-column: 1 / -1; justify-self: start; }
  .l-price h3 { margin: 0; font-size: var(--fs-lg); }
  .l-price .amount { font-size: 2.4rem; white-space: nowrap; }
  .l-price ul { grid-column: 1 / -1; padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--line); }
  .l-price.featured ul { border-top-color: oklch(1 0 0 / .14); }
}