/* Landing page, in the shared "printed paper" theme: big rounded Arabic display type, a highlighter
   stroke in the signal orange, cards with ink outlines and hard shadows, tape, ticket stubs for the
   steps, and a live demo as the hero instead of a picture. */
.wrap { width: min(1180px, 100%); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.section-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.1; }
/* a quick highlighter swipe under every section title */
.section-title::after { content: ""; display: block; width: 92px; height: 10px; margin-top: 10px; border-radius: 6px 2px 6px 2px; background: color-mix(in srgb, var(--signal) 55%, transparent); transform: rotate(-1.5deg); }
.section-sub { color: var(--ink-2); font-size: 1.08rem; max-width: 60ch; margin-top: 8px; }
section { padding-block: clamp(56px, 8vw, 96px); }
/* the cards on this page share one recipe */
.try-grid, .pain-grid article, .ticket, .perks > div, .sci-grid, .uses-grid article, .roi-out, .price, .faq details, .lead-form, .demo-cashier {
  background: var(--surface) var(--grain);
  border: 2px solid var(--outline);
  box-shadow: var(--shadow-2);
}

.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--plane) var(--grain); border-bottom: 2px solid var(--outline); }
body.site::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--plane); }
.nav-row { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.nav-links { display: flex; gap: 4px; margin-inline-start: 12px; }
.nav-links a { color: var(--ink-2); text-decoration: none; padding: 8px 10px; border-radius: 10px; font-weight: 600; font-size: 0.93rem; }
.nav-links a:hover { color: var(--ink); background: linear-gradient(transparent 60%, color-mix(in srgb, var(--signal) 35%, transparent) 60% 88%, transparent 88%); }
.nav-cta { margin-inline-start: auto; display: flex; gap: 8px; }
@media (max-width: 860px) { .nav-links { display: none; } }

.hero { position: relative; padding-top: clamp(28px, 5vw, 64px); overflow: hidden; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
/* the kicker is a label stuck on at an angle */
.kicker { display: inline-block; padding: 5px 14px; border: 2px solid var(--outline); border-radius: 8px; background: var(--signal-soft); color: var(--signal-ink); font-weight: 700; font-size: 0.88rem; box-shadow: var(--shadow-1); transform: rotate(-1.5deg); }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.8rem, 7vw, 5.2rem); line-height: 1.05; margin: 18px 0 16px; letter-spacing: -0.01em; }
.hero h1 mark { color: inherit; padding-inline: 6px; background: linear-gradient(transparent 52%, color-mix(in srgb, var(--signal) 60%, transparent) 52% 90%, transparent 90%); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-2); max-width: 52ch; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 18px; }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-weight: 600; font-size: 0.92rem; }
.ticks li::before { content: "✓ "; color: var(--good); font-weight: 800; }

.demo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; justify-content: center; }
@media (max-width: 560px) { .demo { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
/* Base mockup in core.css; --k is the scale of the 390px-wide screen. */
.phone-frame { --k: 0.72; box-shadow: 8px 9px 0 var(--ink-shadow); transform: rotate(-2deg); }
@media (max-width: 380px) { .phone-frame { --k: 0.64; } }
.demo-cashier { position: relative; width: min(260px, 100%); display: grid; gap: 10px; padding: 18px; border-radius: var(--r-lg); transform: rotate(1deg); }
.demo-cashier::before { content: ""; position: absolute; top: -11px; left: 50%; width: 64px; height: 21px; margin-left: -32px; background: var(--tape); transform: rotate(-3deg); }
.dc-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--muted); font-size: 0.86rem; }
.dot-live { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--outline); background: var(--good); animation: blink 1.4s infinite; }
.dc-num { font-family: var(--font-display); font-weight: 800; font-size: 3.6rem; line-height: 1; direction: ltr; text-align: start; }
.dc-state { font-weight: 700; color: var(--warn-ink); }
.dc-state.ready { color: var(--good-ink); }
.dc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-actions .btn-lg { width: 100%; }
.dc-hint { font-size: 0.85rem; color: var(--signal-ink); font-weight: 700; }
@keyframes blink { 50% { opacity: 0.3; } }

.try { padding-block: 28px; }
.try-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; border-radius: var(--r-xl); }
@media (max-width: 640px) { .try-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } }
.try-qr { width: 180px; height: 180px; padding: 10px; border-radius: 14px; background: #fff; border: 2px solid var(--outline); transform: rotate(-2deg); }
.try-qr img { width: 100%; height: 100%; display: block; }
.try h2 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; margin-bottom: 8px; }
.try p { color: var(--ink-2); max-width: 60ch; }

.pain-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
@media (max-width: 960px) { .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pain-grid { grid-template-columns: minmax(0, 1fr); } }
.pain-grid article { padding: 22px; border-radius: var(--r-lg); display: grid; gap: 8px; align-content: start; }
.pain-grid b { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--ink); }
.pain-grid p { color: var(--ink-2); }
.pain-grid .win { background: var(--signal); transform: rotate(-1deg); }
.pain-grid .win b, .pain-grid .win p { color: #fff; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } }
/* tickets, with the punched notches on both sides */
.ticket { position: relative; padding: 26px 22px 22px; border-radius: 18px; display: grid; gap: 8px; align-content: start; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--plane); border: 2px solid var(--outline); }
.ticket::before { right: -15px; }
.ticket::after { left: -15px; }
.ticket .n { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; background: var(--signal); color: #fff; border: 2px solid var(--outline); box-shadow: var(--shadow-1); transform: rotate(-4deg); }
.ticket h3 { font-size: 1.15rem; }
.ticket p { color: var(--ink-2); }

/* The games, as sticker cards taped to a sheet of paper (same look as on the customer's phone). */
.fun-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; margin-top: 28px; padding: 30px 24px 26px; border: 2px solid var(--outline); border-radius: 22px; background: var(--surface) var(--grain); box-shadow: 5px 6px 0 var(--ink-shadow); }
@media (max-width: 860px) { .fun-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 26px 14px 18px; gap: 22px 12px; } }
.game { --tilt: -1.4deg; position: relative; min-height: 158px; padding: 18px 16px 16px; border: 2px solid var(--outline); border-radius: 18px; color: var(--ink); background: var(--surface) var(--grain); display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 4px 5px 0 var(--ink-shadow); transform: rotate(var(--tilt)); }
.game:nth-child(even) { --tilt: 1.2deg; }
.game:nth-child(3n) { --tilt: -0.5deg; }
.game::before { content: ""; position: absolute; top: -12px; left: 50%; width: 64px; height: 22px; margin-left: -32px; background: var(--tape); transform: rotate(-4deg); }
.game .gi { position: absolute; top: 14px; inset-inline-end: 14px; font-size: 2.9rem; line-height: 1; filter: var(--sticker); transform: rotate(9deg); }
.game:nth-child(even) .gi { transform: rotate(-7deg); }
.game h3 { width: fit-content; padding-inline: 3px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; line-height: 1.1; background: linear-gradient(transparent 56%, color-mix(in srgb, var(--signal) 40%, transparent) 56% 90%, transparent 90%); }
.game p { margin-top: 4px; color: var(--muted); font-size: 0.9rem; }
.game .new { position: absolute; top: 14px; inset-inline-start: 12px; padding: 1px 8px; border: 2px solid currentColor; border-radius: 6px; color: #d23c3c; font-family: var(--font-display); font-size: 0.85rem; font-weight: 800; transform: rotate(-8deg); }
.game.dhikr h3 { background: linear-gradient(transparent 56%, rgba(47, 155, 116, 0.35) 56% 90%, transparent 90%); }
.perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
@media (max-width: 860px) { .perks { grid-template-columns: minmax(0, 1fr); } }
.perks > div { padding: 18px; border-radius: var(--r-lg); }
.perks b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.perks p { color: var(--ink-2); font-size: 0.93rem; }

.sci-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 28px; border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 860px) { .sci-grid { grid-template-columns: minmax(0, 1fr); } }
.sci-grid article { padding: 22px; display: grid; gap: 6px; align-content: start; border-inline-start: 2px dashed var(--line-strong); }
.sci-grid article:first-child { border-inline-start: 0; }
@media (max-width: 860px) { .sci-grid article { border-inline-start: 0; border-top: 2px dashed var(--line-strong); } .sci-grid article:first-child { border-top: 0; } }
.sci-grid h3 { font-size: 1.05rem; }
.sci-grid p { color: var(--ink-2); font-size: 0.93rem; }
.cite { margin-top: 14px; }

/* The control section is an ink board; the mini dashboard on it is paper, like the real one. */
.control { background: #231e19 var(--grain); color: #efe4cf; border-block: 2px solid #000; }
.control .section-title { color: #fff; }
.control .section-title::after { background: color-mix(in srgb, var(--signal) 75%, transparent); }
.control-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 960px) { .control-grid { grid-template-columns: minmax(0, 1fr); } }
.control-list { display: grid; gap: 12px; margin: 22px 0 26px; padding: 0; list-style: none; }
.control-list li { padding-inline-start: 26px; position: relative; color: #d8ccb4; }
.control-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.5em; width: 11px; height: 11px; border-radius: 3px; background: var(--signal); transform: rotate(45deg); }
.control-list b { color: #fff; }
.control .btn-primary { box-shadow: 3px 3px 0 #000; border-color: #000; }
.mock { padding: 20px; border-radius: var(--r-xl); background: #fbf5e9 var(--grain); color: #201c17; border: 2px solid #000; box-shadow: 7px 8px 0 #000; display: grid; gap: 16px; transform: rotate(1deg); }
.mock-head { display: flex; justify-content: space-between; align-items: center; color: #746856; font-size: 0.86rem; }
.mock-head .pill { background: #dcefdc; color: #0b6b3c; }
.mock-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mock-kpis div { padding: 12px; border-radius: 12px; background: #f2e7d2; border: 1.5px solid #201c17; }
.mock-kpis small { display: block; color: #746856; font-size: 0.78rem; }
.mock-kpis b { font-size: 1.6rem; font-weight: 700; }
.mock-bars { height: 120px; display: flex; align-items: flex-end; gap: 4px; direction: ltr; border-bottom: 1.5px solid #bfae93; }
.mock-bars i { flex: 1; border-radius: 4px 4px 0 0; background: #2a78d6; }
.mock-bars i.hi { background: #e0521b; }
.mock-foot { display: flex; justify-content: space-between; font-size: 0.75rem; color: #746856; }

.uses-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
@media (max-width: 960px) { .uses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .uses-grid { grid-template-columns: minmax(0, 1fr); } }
.uses-grid article { padding: 20px; border-radius: var(--r-lg); display: grid; gap: 10px; align-content: start; }
.uses-grid span { font-size: 2.3rem; line-height: 1; filter: var(--sticker); }
.uses-grid h3 { font-size: 1.1rem; }
.uses-grid p { color: var(--ink-2); font-size: 0.93rem; }
/* the push notification each kind of place sends, as a speech bubble */
.uses-grid .bubble { justify-self: start; padding: 7px 14px; border: 2px solid var(--outline); border-radius: 16px 16px 16px 4px; background: var(--good-soft); color: var(--good-ink); font-weight: 700; font-size: 0.95rem; }
[dir="rtl"] .uses-grid .bubble { border-radius: 16px 16px 4px 16px; }

.roi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) { .roi-grid { grid-template-columns: minmax(0, 1fr); } }
.roi-grid > div:first-child { display: grid; gap: 16px; }
.roi input[type="range"] { width: 100%; accent-color: var(--signal); }
.roi-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 20px; border-radius: var(--r-xl); }
.roi-out > div { padding: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1.5px solid var(--outline); display: grid; gap: 4px; }
.roi-out > div.hi { background: var(--signal); color: #fff; grid-column: 1 / -1; box-shadow: var(--shadow-1); }
.roi-out small { font-size: 0.82rem; color: inherit; opacity: 0.85; }
.roi-out b { font-size: 1.6rem; font-weight: 700; }
.roi-out .hi b { font-size: 2.4rem; }
.roi-out p { grid-column: 1 / -1; color: var(--muted); }

.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
@media (max-width: 960px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }
.price { display: grid; gap: 14px; align-content: start; padding: 26px; border-radius: var(--r-xl); }
.price.featured { position: relative; box-shadow: 6px 6px 0 var(--signal); transform: rotate(-0.6deg); }
/* the "most popular" stamp */
.price.featured::before { content: "الأكثر طلبًا"; position: absolute; top: -15px; inset-inline-start: 22px; padding: 3px 12px; border: 2px solid var(--outline); border-radius: 8px; background: var(--signal); color: #fff; font-size: 0.82rem; font-weight: 800; transform: rotate(-3deg); }
.price h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; }
.price .amount { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1; }
.price .amount small { font-family: var(--font-ui); font-size: 0.95rem; color: var(--muted); font-weight: 500; }
.price ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-2); }
.price li::before { content: "✓ "; color: var(--good); font-weight: 800; }

.faq-wrap { max-width: 820px; display: grid; gap: 14px; }
.faq details { padding: 16px 20px; border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.faq details[open] { box-shadow: var(--shadow-2); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--outline); border-radius: 8px; font-size: 1.1rem; line-height: 1; color: var(--ink); }
.faq details[open] summary::after { content: "−"; background: var(--signal); color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin-top: 10px; color: var(--ink-2); }

.final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .final-grid { grid-template-columns: minmax(0, 1fr); } }
.final-grid > div p { color: var(--ink-2); margin: 14px 0 22px; max-width: 48ch; }
.lead-form { position: relative; display: grid; gap: 14px; padding: 26px 24px 24px; border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
.lead-form::before { content: ""; position: absolute; top: -12px; left: 50%; width: 80px; height: 22px; margin-left: -40px; background: var(--tape); transform: rotate(2deg); }
.lead-ok { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 24px; }
.lead-ok b { font-size: 1.3rem; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .row2 { grid-template-columns: minmax(0, 1fr); } }
.form-err { color: var(--bad-ink); font-weight: 600; min-height: 1.2em; }

.foot { padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 2px dashed var(--line-strong); }
.foot-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 14px; flex-wrap: wrap; }
.foot nav a { color: var(--ink-2); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.foot .muted { margin-inline-start: auto; }