/* almasjidi.com — the public site (resources/views/site). Brand: green #074330,
   gold #C89730, cream #F5E8D2; pure white / pure black surfaces like the app.
   Layout uses logical properties (inline-start/end) so Urdu and Arabic pages
   mirror without extra rules. The prayer board is always left-to-right. */

@font-face {
    font-family: "AM Nastaliq";
    src: url("fonts/noto-nastaliq-urdu.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}
/* The same face cut down to the slogan and the word اردو, for other pages. */
@font-face {
    font-family: "AM Nastaliq Slogan";
    src: url("fonts/noto-nastaliq-urdu-slogan.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: "DSEG7";
    src: url("../fonts/DSEG7Classic-BoldItalic.woff2") format("woff2");
    font-display: block;
}

:root {
    --green: #074330;
    --green-2: #0a5a41;
    --green-3: #0e6b4e;
    --gold: #c89730;
    --gold-2: #e2b655;
    --cream: #f5e8d2;
    --led: #3cb900;
    --led-red: #ff2e2e;

    --bg: #ffffff;
    --bg-alt: #f8f6f1;
    --card: #ffffff;
    --text: #13201b;
    --muted: #55635d;
    --line: #e6e2d8;
    --soft: #e9f2ee;
    --soft-gold: #faf3e3;
    --accent: var(--green);
    --link: #0b6b4f;
    --shadow: 0 1px 2px rgba(7, 67, 48, .06), 0 12px 32px rgba(7, 67, 48, .08);

    --radius: 20px;
    --wrap: 1140px;
    --gutter: 20px;
    --header: 80px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --font-ur: "AM Nastaliq", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", serif;
    --font-ur-slogan: "AM Nastaliq Slogan", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
    --font-ar: system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", sans-serif;
    --font-arabic-text: "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", "Amiri", serif;
    --font-bn: "Noto Sans Bengali", "Hind Siliguri", "Nirmala UI", "Vrinda", system-ui, sans-serif;
    --font-hi: "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --bg-alt: #0b0f0d;
        --card: #0f1513;
        --text: #eef2ef;
        --muted: #a0aea7;
        --line: #1f2b26;
        --soft: #10261e;
        --soft-gold: #251e10;
        --accent: #3fbf8f;
        --link: #5fd0a4;
        --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .35);
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16.5px;
    line-height: 1.6;
    overflow-x: hidden;
}
html[lang="ur"] body { font-family: var(--font-ur); font-size: 17px; line-height: 2.15; }
html[lang="ar"] body, html[lang="fa"] body, html[lang="ps"] body { font-family: var(--font-ar); font-size: 17px; line-height: 1.85; }
html[lang="fa"] body, html[lang="ps"] body { font-family: var(--font-ar); font-size: 17px; line-height: 1.85; }
html[lang="bn"] body { font-family: var(--font-bn); line-height: 1.8; }
html[lang="hi"] body { font-family: var(--font-hi); line-height: 1.8; }

img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
b, strong { font-weight: 700; }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.015em; }
html[lang="ur"] :is(h1, h2, h3), html[lang="ar"] :is(h1, h2, h3), html[lang="fa"] :is(h1, h2, h3), html[lang="ps"] :is(h1, h2, h3) { letter-spacing: 0; }
html[lang="ur"] :is(h1, h2, h3) { line-height: 1.95; font-weight: 700; }
html[lang="ar"] :is(h1, h2, h3), html[lang="fa"] :is(h1, h2, h3), html[lang="ps"] :is(h1, h2, h3) { line-height: 1.5; }
html[lang="bn"] :is(h1, h2, h3), html[lang="hi"] :is(h1, h2, h3) { line-height: 1.45; letter-spacing: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* Urdu and Latin snippets inside other-language pages */
.ur { font-family: var(--font-ur-slogan); line-height: 2; letter-spacing: 0; }
html[lang="ur"] .ur { font-family: var(--font-ur); }
.ar-text { font-family: var(--font-arabic-text); letter-spacing: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 480px) { :root { --gutter: 16px; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--gold); color: #13201b; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------------ language hint */
.hint {
    display: none;
    background: var(--gold);
    color: #13201b;
    font-size: 15px;
}
.hint.show { display: block; }
.hint .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding-block: 6px; }
.hint a { color: #13201b; font-weight: 700; }
.hint button { background: none; border: 0; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; color: #13201b; padding: 4px 8px; }

/* ------------------------------------------------------------------ header */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: var(--header); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
/* The artwork fills its box edge to edge, so the bar is taller than the
   logo: about 10px clear above and below. */
.brand .wm { width: 184px; margin: 0; }
/* The header cycles every language; Nastaliq and Naskh are tall, so they sit
   a little smaller here to stay inside the bar. */
.brand .wm-slogan span[lang="ur"] { font-size: calc(7.1cqw * var(--fit, 1)); line-height: 1.25; }
.brand .wm-slogan span[lang="ar"], .brand .wm-slogan span[lang="fa"], .brand .wm-slogan span[lang="ps"] { font-size: calc(7cqw * var(--fit, 1)); line-height: 1.15; }
@media (max-width: 420px) { :root { --header: 76px; } .brand .wm { width: 172px; } }
.nav { display: flex; gap: 4px; margin-inline-start: 12px; }
.nav a { color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
html[lang="ur"] .nav a { font-size: 15px; padding-block: 2px; }
.nav a:hover { background: var(--soft); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--soft); }
.header-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

.dropdown { position: relative; }
.dropdown > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line);
    font-size: 15px; font-weight: 600; background: var(--card); white-space: nowrap;
}
html[lang="ur"] .dropdown > summary { padding-block: 0; min-height: 40px; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary svg { width: 18px; height: 18px; flex: none; }
.dropdown[open] > summary { border-color: var(--accent); }
.dropdown-panel {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 210px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
    padding: 6px; display: grid; gap: 2px; z-index: 60;
}
.dropdown-panel a { display: flex; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: 9px; color: var(--text); text-decoration: none; font-weight: 600; }
.dropdown-panel a:hover { background: var(--soft); }
.dropdown-panel a[aria-current="true"] { color: var(--accent); }
.dropdown-panel a small { color: var(--muted); font-weight: 500; font-family: var(--font); }
.menu-btn { display: none; }
.menu-btn > summary { padding: 8px; }
.menu-panel { min-width: 240px; }
.menu-panel .btn { margin-top: 6px; justify-content: center; }
.header-cta { display: inline-flex; }

@media (max-width: 1020px) {
    .nav { display: none; }
    .menu-btn { display: block; }
}
@media (max-width: 560px) {
    /* (.header-end … beats the later .btn display rule; the menu has the button) */
    .header-end .header-cta { display: none; }
    .lang-label { display: none; }
}

/* ----------------------------------------------------------------- buttons */
.btn {
    max-width: 100%;
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: 12px; padding: 11px 20px; font-weight: 700; font-size: 15.5px;
    text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
html[lang="ur"] .btn { padding-block: 4px; }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-gold { background: var(--gold); color: #13201b; }
.btn-gold:hover { background: var(--gold-2); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-2); }
.btn-line { border-color: var(--line); color: var(--text); background: var(--card); }
.btn-line:hover { border-color: var(--accent); }
.btn-light { border-color: rgba(255, 255, 255, .35); color: #fff; background: rgba(255, 255, 255, .06); }
.btn-light:hover { background: rgba(255, 255, 255, .14); }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
    display: inline-flex; align-items: center; gap: 12px; min-width: 186px;
    padding: 9px 18px 9px 14px; border-radius: 14px;
    background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .22);
    font-family: var(--font); direction: ltr; line-height: 1.2;
    transition: transform .15s ease, border-color .15s ease;
}
a.store:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .55); }
.store svg { width: 26px; height: 26px; flex-shrink: 0; }
.store span { display: grid; text-align: start; }
.store small { font-size: 11.5px; opacity: .85; font-weight: 500; letter-spacing: .02em; }
.store strong { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.store.soon { opacity: .78; cursor: default; }
html[lang="ur"] .store small { font-family: var(--font-ur); font-size: 12px; line-height: 1.6; }
.store-note { margin-top: 12px; font-size: 14px; opacity: .85; }

/* -------------------------------------------------------------------- hero */
/* Background pattern: the AlMasjidi mark (arch, mihrab, two diamonds) tiled
   in a half-drop repeat, in brand gold at low opacity. */
.hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg transform='translate(15 12) scale(0.05)'%3E%3Cpath fill='%23C89730' fill-opacity='.065' fill-rule='evenodd' d='M172 730V390a328 328 0 0 1 656 0v340zM308 730V400c0-123.7 69.1-139.5 126.7-162C480.8 220 477 193 500 175c23 18 19.2 45 65.3 63C622.9 260.5 692 276.3 692 400v330z'/%3E%3Cpath fill='%23C89730' fill-opacity='.11' d='M395 670V448c0-48.9 29.4-63.9 64.1-74.2C484.3 365.6 491.6 353.2 500 345c8.4 8.2 15.7 20.6 41 28.8C575.6 384.1 605 399.1 605 448v222l-105-98zM395 735l105 105-105 105-105-105zM605 735l105 105-105 105-105-105z'/%3E%3C/g%3E%3Cg transform='translate(95 92) scale(0.05)'%3E%3Cpath fill='%23C89730' fill-opacity='.065' fill-rule='evenodd' d='M172 730V390a328 328 0 0 1 656 0v340zM308 730V400c0-123.7 69.1-139.5 126.7-162C480.8 220 477 193 500 175c23 18 19.2 45 65.3 63C622.9 260.5 692 276.3 692 400v330z'/%3E%3Cpath fill='%23C89730' fill-opacity='.11' d='M395 670V448c0-48.9 29.4-63.9 64.1-74.2C484.3 365.6 491.6 353.2 500 345c8.4 8.2 15.7 20.6 41 28.8C575.6 384.1 605 399.1 605 448v222l-105-98zM395 735l105 105-105 105-105-105zM605 735l105 105-105 105-105-105z'/%3E%3C/g%3E%3Cg transform='translate(95 -68) scale(0.05)'%3E%3Cpath fill='%23C89730' fill-opacity='.065' fill-rule='evenodd' d='M172 730V390a328 328 0 0 1 656 0v340zM308 730V400c0-123.7 69.1-139.5 126.7-162C480.8 220 477 193 500 175c23 18 19.2 45 65.3 63C622.9 260.5 692 276.3 692 400v330z'/%3E%3Cpath fill='%23C89730' fill-opacity='.11' d='M395 670V448c0-48.9 29.4-63.9 64.1-74.2C484.3 365.6 491.6 353.2 500 345c8.4 8.2 15.7 20.6 41 28.8C575.6 384.1 605 399.1 605 448v222l-105-98zM395 735l105 105-105 105-105-105zM605 735l105 105-105 105-105-105z'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(1200px 500px at 85% -10%, rgba(200, 151, 48, .22), transparent 60%),
        linear-gradient(165deg, #063a2a 0%, var(--green) 45%, #0b5d43 100%);
}
.hero::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .12));
    pointer-events: none;
}
.hero-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: center;
    padding-block: 56px 72px;
}
.hero-grid > *, .grid > *, .split > *, .teaser > *, .doc > *, .steps > li { min-width: 0; }
.wm { position: relative; width: min(340px, 78%); container-type: inline-size; direction: ltr; margin-bottom: 18px; }
html[lang="ur"] .hero .wm { margin-bottom: 30px; }
.wm picture { display: block; }
.wm img { display: block; width: 100%; height: auto; }
/* The slogan band of the artwork (x 355–1223, centred on y 385 of the
   1369 × 450 source), as BrandWordmark.sloganBox in the app. */
.wm-slogan {
    position: absolute; left: 25.931%; width: 63.404%; top: 62.739%; height: 45.633%;
    margin: 0; display: grid; place-items: center; color: var(--gold); font-weight: 600;
}
.wm-slogan span {
    grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(.45em);
    font-family: var(--font); font-size: 15px; font-size: calc(5.769cqw * var(--fit, 1));
    letter-spacing: .115cqw; line-height: 1.2;
    transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}
.wm-slogan span[lang="ur"] { font-family: var(--font-ur-slogan); font-size: calc(8.077cqw * var(--fit, 1)); line-height: 1.5; letter-spacing: 0; }
html[lang="ur"] .wm-slogan span[lang="ur"] { font-family: var(--font-ur); }
.wm-slogan span[lang="ar"], .wm-slogan span[lang="fa"], .wm-slogan span[lang="ps"] { font-family: var(--font-arabic-text); font-size: calc(7.692cqw * var(--fit, 1)); line-height: 1.3; letter-spacing: 0; }
.wm-slogan span[lang="bn"] { font-family: var(--font-bn); letter-spacing: 0; }
.wm-slogan span[lang="hi"] { font-family: var(--font-hi); letter-spacing: 0; }
.wm-slogan span.on { opacity: 1; transform: none; }
.wm-slogan span.out { opacity: 0; transform: translateY(-.45em); }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--gold-2);
}
html[lang="ur"] .eyebrow, html[lang="ar"] .eyebrow, html[lang="bn"] .eyebrow, html[lang="hi"] .eyebrow, html[lang="fa"] .eyebrow, html[lang="ps"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: 15px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 58px); font-weight: 800; margin: 10px 0 18px; text-wrap: balance; }
html[lang="ur"] .hero h1 { font-size: clamp(30px, 4.4vw, 48px); }
.hero h1 em { font-style: normal; color: var(--gold-2); }
.hero .lead { font-size: 18.5px; color: rgba(255, 255, 255, .9); max-width: 36em; }
html[lang="ur"] .hero .lead { font-size: 18px; }
.hero .stores { margin-top: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
}
html[lang="ur"] .chip { padding-block: 0; }
.chip svg { width: 15px; height: 15px; color: var(--gold-2); }

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 36px 56px; text-align: center; }
    .wm { margin-inline: auto; width: min(300px, 80%); }
    .eyebrow { justify-content: center; }
    .eyebrow::before { display: none; }
    .hero .lead { margin-inline: auto; }
    .stores, .chips { justify-content: center; }
}

/* sub-page hero */
.page-hero { color: #fff; }
.page-hero .hero-grid { grid-template-columns: minmax(0, 1fr); padding-block: 44px 52px; text-align: start; }
.page-hero h1 { font-size: clamp(32px, 4.6vw, 50px); max-width: 20em; }
html[lang="ur"] .page-hero h1 { font-size: clamp(28px, 4vw, 42px); }
.page-hero .eyebrow { justify-content: flex-start; }
.page-hero .lead { margin-inline: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, .75); margin-bottom: 16px; }
.crumbs a { color: #fff; }
.crumbs li { list-style: none; display: inline-flex; gap: 6px; }
.crumbs li + li::before { content: "›"; opacity: .6; }
[dir="rtl"] .crumbs li + li::before { content: "‹"; }
/* "30 days free": one line, a small ticked circle at the start. */
.badge {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
    padding-block: 6px; padding-inline: 6px 18px; border-radius: 999px;
    background: var(--gold); color: #13201b; box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    font-weight: 800; font-size: 15px; line-height: 1.3; white-space: nowrap;
}
.badge-tick {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--green); color: var(--gold-2);
}
.badge-tick svg { width: 15px; height: 15px; stroke-width: 3; }
html[lang="ur"] .badge { padding-block: 2px; line-height: 2; }

/* ------------------------------------------------------- phone + LED board */
.phone-stage { display: flex; justify-content: center; position: relative; }
.phone-stage::before {
    content: ""; position: absolute; width: 420px; height: 420px; max-width: 100%; top: 50%; left: 50%;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 151, 48, .28), transparent 65%);
}
.phone {
    position: relative; width: 318px; max-width: 100%;
    background: #000; border-radius: 44px; padding: 12px;
    box-shadow: 0 0 0 2px #2a2f2d, 0 30px 70px rgba(0, 0, 0, .45);
    direction: ltr; text-align: left; color: #fff; font-family: var(--font); line-height: 1.3;
}
.phone-screen { border-radius: 33px; overflow: hidden; background: #000; }
.phone-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; background: #000; border-radius: 14px; z-index: 2; }
.phone-cover {
    position: relative; height: 128px; padding: 40px 16px 12px;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .65)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 130'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f2b45a'/%3E%3Cstop offset='1' stop-color='%23c0603a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='320' height='130' fill='url(%23s)'/%3E%3Cg fill='%23143a2e'%3E%3Cpath d='M118 130V84a42 42 0 0 1 84 0v46z'/%3E%3Cpath d='M160 30c4 8 14 10 14 24h-28c0-14 10-16 14-24z'/%3E%3Crect x='154' y='50' width='12' height='12'/%3E%3Crect x='70' y='40' width='12' height='90'/%3E%3Cpath d='M76 18l8 22H68z'/%3E%3Crect x='238' y='40' width='12' height='90'/%3E%3Cpath d='M244 18l8 22h-16z'/%3E%3Crect x='0' y='112' width='320' height='18'/%3E%3C/g%3E%3C/svg%3E") center / cover;
}
.phone-cover strong { display: block; font-size: 17px; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.phone-cover small { font-size: 12px; opacity: .9; }
.phone-cover .info-chip { position: absolute; right: 12px; bottom: 12px; font-size: 10.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--gold); color: #fff; background: rgba(0, 0, 0, .35); }
.board { padding: 10px 12px 12px; background: #000; }
.board .kalima { text-align: center; font-family: var(--font-arabic-text); font-size: 15px; color: #f1f1f1; margin-bottom: 8px; line-height: 1.6; }
.board .head { display: grid; grid-template-columns: 1fr 1fr 70px; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: #8a9a92; text-align: center; margin-bottom: 2px; }
.board .row { display: grid; grid-template-columns: 1fr 1fr 70px; gap: 6px; align-items: center; margin: 5px 0; }
.led {
    font-family: "DSEG7", ui-monospace, monospace; font-style: italic; font-size: 16px; letter-spacing: 1px;
    color: var(--led); background: #050d08; border: 1px solid #16301f; border-radius: 7px;
    padding: 6px 0; text-align: center; text-shadow: 0 0 8px rgba(60, 185, 0, .55); white-space: nowrap;
}
.led.dim { color: #2d7f05; text-shadow: none; }
.led.red { color: var(--led-red); text-shadow: 0 0 8px rgba(255, 46, 46, .55); border-color: #3a1515; background: #0d0505; }
.board .pn { text-align: right; line-height: 1.15; }
.board .pn b { display: block; font-family: var(--font-arabic-text); font-size: 15px; font-weight: 700; }
.board .pn i { font-style: normal; font-size: 10px; font-weight: 700; color: #9aa7a1; }
.board .count { display: grid; grid-template-columns: 1fr 1fr 70px; gap: 6px; align-items: center; margin-bottom: 6px; }
.board .count .led { grid-column: span 2; font-size: 18px; }
.board .count .pn i { color: #ff8a8a; }
.board .date { margin-top: 8px; padding-top: 8px; border-top: 1px solid #1a221e; display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #8fbf7a; text-transform: uppercase; }
.board .date span:nth-child(2) { color: var(--gold-2); }
.phone-tabs { display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 4px 10px; background: #070a09; border-top: 1px solid #1a221e; }
.phone-tabs span { display: grid; justify-items: center; gap: 3px; font-size: 9.5px; color: #7d8a84; }
.phone-tabs span svg { width: 18px; height: 18px; }
.phone-tabs span.on { color: var(--gold); }
.phone-caption { text-align: center; font-size: 14px; color: rgba(255, 255, 255, .75); margin-top: 16px; }

/* ---------------------------------------------------------------- sections */
.section { padding-block: 84px; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; text-wrap: balance; }
html[lang="ur"] .section-head h2 { font-size: clamp(25px, 3.1vw, 34px); }
.section-head p { margin-top: 14px; font-size: 18px; color: var(--muted); }
.section-head .eyebrow { color: var(--gold); justify-content: center; margin-bottom: 10px; }
@media (max-width: 640px) { .section { padding-block: 60px; } .section-head { margin-bottom: 32px; } }

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 24px; box-shadow: var(--shadow);
}
.card h3 { font-size: 18.5px; font-weight: 750; margin-bottom: 6px; }
html[lang="ur"] .card h3 { font-size: 18px; }
.card p { color: var(--muted); font-size: 15.5px; }
.icon {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
    background: var(--soft); color: var(--accent); margin-bottom: 14px;
}
.icon svg { width: 24px; height: 24px; }
.why .card { text-align: start; }
.why .num { font-size: 15px; font-weight: 800; color: var(--gold); margin-bottom: 8px; display: block; font-family: var(--font); }
.why-quote {
    max-width: 820px; margin: 0 auto 40px; text-align: center; font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 650; color: var(--text);
}

/* accuracy band */
.band { background: linear-gradient(165deg, #062e22, var(--green) 70%); color: #fff; }
.band .section-head p { color: rgba(255, 255, 255, .82); }
.band .section-head .eyebrow { color: var(--gold-2); }
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: flow; }
.flow li {
    list-style: none; position: relative; counter-increment: flow;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius);
    padding: 24px 24px 22px;
}
.flow li::before {
    content: counter(flow); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--gold); color: #13201b; font-weight: 800; font-family: var(--font); margin-bottom: 12px;
}
.flow h3 { font-size: 18px; margin-bottom: 6px; }
.flow p { color: rgba(255, 255, 255, .82); font-size: 15.5px; }
/* One column per figure shown (a figure hides while its number is zero). */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; margin-top: 30px; }
.stat { text-align: center; padding: 18px 10px; border-radius: 16px; background: rgba(0, 0, 0, .18); }
.stat strong { display: block; font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; color: var(--gold-2); font-family: var(--font); line-height: 1.15; }
.stat span { font-size: 14px; color: rgba(255, 255, 255, .82); }
.source-note {
    margin: 26px auto 0; max-width: 760px; text-align: center; font-size: 15px; color: rgba(255, 255, 255, .8);
}
@media (max-width: 860px) {
    .flow { grid-template-columns: 1fr; }
    .stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* numbered steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.steps li { list-style: none; counter-increment: step; position: relative; }
.steps li::before {
    content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--green); color: #fff; font-weight: 800; font-size: 18px; margin-bottom: 14px; font-family: var(--font);
    box-shadow: 0 0 0 6px var(--soft);
}
.steps h3 { font-size: 18px; margin-bottom: 6px; }
.steps p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.center-cta { text-align: center; margin-top: 36px; }

/* imams split with poster */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.split .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.split .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
.split .steps li::before { grid-row: span 2; margin: 0; }
.split h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin-bottom: 12px; }
html[lang="ur"] .split h2 { font-size: clamp(25px, 3vw, 34px); }
.split .lead { color: var(--muted); font-size: 18px; margin-bottom: 28px; }
.poster {
    width: 300px; max-width: 100%; margin-inline: auto; aspect-ratio: 210 / 297; background: #fff; color: #13201b;
    border-radius: 10px; box-shadow: 0 30px 60px rgba(7, 67, 48, .25), 0 0 0 1px rgba(7, 67, 48, .08);
    display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; transform: rotate(-2deg);
    direction: ltr; font-family: var(--font); line-height: 1.3;
}
[dir="rtl"] .poster { transform: rotate(2deg); }
.poster-top { background: var(--green); padding: 16px 16px 12px; text-align: center; }
.poster-top .wm { width: 78%; margin: 0 auto; }
.poster-mid { display: grid; place-items: center; align-content: center; gap: 8px; padding: 14px; text-align: center; }
.poster-mid strong { font-size: 18px; }
.poster-mid small { font-size: 12px; color: #55635d; }
.poster-qr { width: 58%; padding: 8px; border: 3px solid var(--gold); border-radius: 12px; }
.poster-qr img { display: block; width: 100%; }
.poster-foot { background: var(--soft-gold); padding: 9px 12px; font-size: 11px; text-align: center; color: #55635d; }
@media (prefers-color-scheme: dark) { .poster-foot { background: #f3ead6; } }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* What the logo means (home #logo): the mark on a demo panel, then its parts.
   The panel builds the mark while on screen: the arch, then the imam, then
   the two followers, like the app's BrandLoader. */
.lm-arch { fill: var(--green); }
.lm-inner, .lm-dots { fill: var(--gold); }
@media (prefers-color-scheme: dark) { .lm-arch { fill: var(--cream); } }
.demo.logo-figure { padding: 48px 24px; min-height: 0; }
.logo-figure svg { width: min(300px, 70%); height: auto; overflow: visible; }
.logo-meaning .eyebrow { color: var(--gold); margin-bottom: 10px; }
.logo-meaning .lead { margin-bottom: 0; }
.logo-parts { margin-top: 28px; display: grid; gap: 22px; }
.logo-parts li { list-style: none; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: center; }
.logo-parts svg { width: 64px; height: 64px; }
.logo-parts h3 { font-size: 18px; font-weight: 800; }
.logo-parts p { color: var(--muted); margin-top: 2px; }
.logo-figure.run .lm-arch { animation: lmIn .7s ease both; }
.logo-figure.run .lm-inner { animation: lmIn .6s .6s ease both; }
.logo-figure.run .lm-dots { animation: lmIn .6s 1.1s ease both; }
@keyframes lmIn { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .logo-figure.run path { animation: none; } }
@media (max-width: 900px) { .demo.logo-figure { padding: 32px 24px; } .logo-figure svg { width: min(200px, 55%); } }

/* committee teaser */
.teaser {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 36px; align-items: center;
    background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 44px;
    box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.teaser::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: linear-gradient(var(--gold), var(--green)); }
.teaser h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; margin: 10px 0 12px; }
html[lang="ur"] .teaser h2 { font-size: clamp(24px, 2.8vw, 32px); }
.teaser .lead { color: var(--muted); font-size: 17.5px; }
.pill { display: inline-block; font-size: 13px; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: var(--soft-gold); color: #8a6516; }
html[lang="ur"] .pill { padding-block: 0; }
@media (prefers-color-scheme: dark) { .pill { color: var(--gold-2); } }
.checks { display: grid; gap: 10px; margin-top: 22px; }
.checks li { list-style: none; display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.checks svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: .2em; }
html[lang="ur"] .checks svg { margin-top: .55em; }
.price-box { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.price-box p { color: var(--muted); font-size: 15px; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.price-row:last-of-type { border-bottom: 0; }
.price-row strong { font-size: 24px; font-family: var(--font); direction: ltr; unicode-bidi: isolate; }
.price-row span { color: var(--muted); }
.price-box .btn { margin-top: 18px; width: 100%; justify-content: center; white-space: normal; text-align: center; }
@media (max-width: 900px) { .teaser { grid-template-columns: minmax(0, 1fr); padding: 30px 22px; } }

/* languages */
.langs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lang-card {
    display: grid; gap: 4px; align-content: start; text-decoration: none; color: var(--text);
    padding: 20px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); text-align: center;
    transition: border-color .15s ease, transform .15s ease;
}
.lang-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.lang-card strong { font-size: 22px; }
.lang-card span { font-size: 14.5px; color: var(--muted); }
.lang-card[aria-current="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px var(--soft-gold); }
@media (max-width: 900px) { .langs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .langs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.faq summary {
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
    padding: 18px 22px; font-weight: 700; font-size: 17px;
}
html[lang="ur"] .faq summary { padding-block: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; width: 12px; height: 12px; flex-shrink: 0; border-inline-end: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq .answer { padding: 0 22px 20px; color: var(--muted); }

/* final call to action */
.cta-band { padding-block: 72px; text-align: center; }
.cta-band h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; }
.cta-band p { margin: 12px auto 28px; font-size: 18px; color: rgba(255, 255, 255, .86); max-width: 34em; }
.cta-band .stores { justify-content: center; }

/* ------------------------------------------------------------ guide pages */
.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.toc { position: sticky; top: calc(var(--header) + 24px); }
.toc h2 { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
html[lang="ur"] .toc h2, html[lang="ar"] .toc h2, html[lang="bn"] .toc h2, html[lang="hi"] .toc h2, html[lang="fa"] .toc h2, html[lang="ps"] .toc h2 { letter-spacing: 0; text-transform: none; font-size: 15px; }
.toc ol { display: grid; gap: 2px; counter-reset: toc; }
.toc li { list-style: none; counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.4; }
html[lang="ur"] .toc a { line-height: 1.9; padding-block: 2px; }
.toc a::before { content: counter(toc); color: var(--gold); font-weight: 800; min-width: 1.2em; font-family: var(--font); }
.toc a:hover { background: var(--soft); }
.doc-body { display: grid; gap: 22px; }
.doc-section { scroll-margin-top: calc(var(--header) + 16px); }
.doc-section h2 { display: flex; align-items: center; gap: 14px; font-size: 23px; font-weight: 800; margin-bottom: 16px; }
html[lang="ur"] .doc-section h2 { font-size: 21px; }
.doc-section h2 .n {
    display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    background: var(--green); color: #fff; font-size: 17px; font-family: var(--font);
}
.howto { display: grid; gap: 12px; counter-reset: howto; }
.howto li { list-style: none; counter-increment: howto; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.howto li::before {
    content: counter(howto); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--gold); color: var(--text); font-weight: 800; font-size: 14px; font-family: var(--font); margin-top: .1em;
}
html[lang="ur"] .howto li::before { margin-top: .5em; }
.tip {
    display: flex; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 14px;
    background: var(--soft-gold); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); font-size: 15.5px;
}
.tip svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; margin-top: .15em; }
html[lang="ur"] .tip svg { margin-top: .5em; }
.who { margin-top: 18px; font-size: 16px; color: rgba(255, 255, 255, .8); }
.rules { background: var(--soft); border: 0; }
.rules ul { display: grid; gap: 10px; }
.rules li { list-style: none; display: flex; gap: 10px; }
.rules li svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: .25em; }
html[lang="ur"] .rules li svg { margin-top: .6em; }

@media (max-width: 960px) {
    .doc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .toc { position: static; }
    .toc ol { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: thin; }
    .toc a { white-space: nowrap; border: 1px solid var(--line); background: var(--card); }
}

/* committee page */
.price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 900px; margin-inline: auto; }
.price-card { text-align: center; padding: 32px 26px; position: relative; }
.price-card .country { font-size: 15px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
html[lang="ur"] .price-card .country, html[lang="ar"] .price-card .country, html[lang="fa"] .price-card .country, html[lang="ps"] .price-card .country { letter-spacing: 0; }
.price-card .amount { font-size: 44px; font-weight: 800; margin: 8px 0 0; font-family: var(--font); direction: ltr; unicode-bidi: isolate; display: block; }
.price-card .per { color: var(--muted); }
.price-card .checks { text-align: start; margin-top: 22px; }
.price-meta { text-align: center; margin-top: 22px; color: var(--muted); display: grid; gap: 6px; }
/* Currency converter (<x-fx>, public/site/fx.js): the dollar price in the visitor's currency. */
.fx { margin-top: 16px; text-align: start; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fx-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.fx-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fx-select {
    flex: 1 1 auto; min-width: 0; max-width: 100%; font: inherit; font-size: 14px; color: var(--text);
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px;
}
.fx-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fx-out { flex: none; font-size: 20px; font-weight: 800; font-family: var(--font); color: var(--text); white-space: nowrap; unicode-bidi: isolate; }
.fx:not(.fx-live) .fx-out { font-size: 17px; }
.fx-exact { font-size: 13px; color: var(--accent); font-weight: 600; }
.fx-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.fx-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-family: var(--font); }
.price-card .fx { padding: 14px; border-radius: 14px; background: var(--bg-alt); border: 1px solid var(--line); }
.price-box .fx { padding-top: 4px; }
@media (max-width: 420px) {
    .fx-row { flex-wrap: wrap; }
    .fx-select { flex-basis: 100%; }
}

.price-meta strong { color: var(--text); }
.methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.note-box { padding: 22px 24px; border-radius: 18px; background: var(--soft); }
.note-box h3 { font-size: 18px; margin-bottom: 6px; }
.note-box { display: flex; gap: 16px; align-items: flex-start; }
.note-box .icon { margin: 0; flex-shrink: 0; background: var(--card); }
p.note-box { display: block; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: #04130e; color: rgba(255, 255, 255, .78); padding-block: 56px 32px; font-size: 15px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h2 { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 12px; }
html[lang="ur"] .footer-grid h2, html[lang="ar"] .footer-grid h2, html[lang="bn"] .footer-grid h2, html[lang="hi"] .footer-grid h2, html[lang="fa"] .footer-grid h2, html[lang="ps"] .footer-grid h2 { letter-spacing: 0; text-transform: none; font-size: 15px; }
.footer-grid ul { display: grid; gap: 6px; }
.footer-grid li { list-style: none; }
.footer-brand .wm { width: 230px; max-width: 100%; margin: 0 0 16px; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 13.5px; color: rgba(255, 255, 255, .55); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ===================================================================== demos
   Phone mock-ups of the app beside each guide step (resources/views/site/demos).
   Text comes from the app's own strings; the look follows the page theme, like
   the app's light and dark themes. Animations loop only while the demo is on
   screen (.run, set by the layout script) and stop for reduced motion. */
.demo {
    position: relative; overflow: hidden; border-radius: 24px; padding: 26px 18px;
    display: grid; place-items: center; min-height: 100%;
    background:
        radial-gradient(circle, rgba(7, 67, 48, .13) 1px, transparent 1.3px) 0 0 / 18px 18px,
        linear-gradient(160deg, #eff7f2, #e1eee6);
    border: 1px solid #d6e6dc;
}
@media (prefers-color-scheme: dark) {
    .demo {
        background:
            radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.3px) 0 0 / 18px 18px,
            linear-gradient(160deg, #0a1612, #0c1e17);
        border-color: #183229;
    }
}
.demo:not(.run) *, .demo:not(.run) *::before, .demo:not(.run) *::after { animation-play-state: paused !important; }

/* the phone */
.m-phone {
    --mp-bg: #ffffff; --mp-surface: #f3f6f4; --mp-card: #ffffff; --mp-text: #13201b; --mp-muted: #6b7a73;
    --mp-line: #e3e9e6; --mp-primary: #074330; --mp-on-primary: #fff; --mp-accent: #c89730; --mp-soft: #e8f2ed;
    position: relative; width: 232px; height: 474px; flex-shrink: 0;
    background: var(--mp-bg); color: var(--mp-text);
    border: 7px solid #0d0f0e; border-radius: 34px; overflow: hidden;
    box-shadow: 0 0 0 1px #2c312f, 0 24px 50px rgba(7, 40, 30, .28);
    display: flex; flex-direction: column; font-size: 11px; line-height: 1.4; text-align: start;
}
@media (prefers-color-scheme: dark) {
    .m-phone {
        --mp-bg: #000000; --mp-surface: #0f1513; --mp-card: #131b18; --mp-text: #eef2ef; --mp-muted: #8d9b95;
        --mp-line: #1f2b26; --mp-primary: #1fa97a; --mp-on-primary: #04130e; --mp-soft: #10261e;
        box-shadow: 0 0 0 1px #2c312f, 0 24px 50px rgba(0, 0, 0, .6);
    }
}
html[lang="ur"] .m-phone { font-size: 10.5px; line-height: 1.9; }
/* the phone keeps its own type scale inside page cards */
.m-phone p, .m-phone h3, .m-browser p { margin: 0; font-size: inherit; color: inherit; line-height: inherit; }
.m-phone .m-sub, .m-browser .m-sub { font-size: 10px; color: var(--mp-muted, var(--muted)); }
.m-phone .m-title { font-size: 15px; }
html[lang="ur"] .m-phone .m-title { font-size: 14px; }
html[lang="ar"] .m-phone, html[lang="bn"] .m-phone, html[lang="hi"] .m-phone, html[lang="fa"] .m-phone, html[lang="ps"] .m-phone { line-height: 1.55; }
.m-phone b, .m-phone strong { font-weight: 700; }
.m-status { display: flex; justify-content: space-between; align-items: center; padding: 7px 16px 3px; font-size: 9.5px; font-weight: 700; direction: ltr; font-family: var(--font); line-height: 1; }
.m-status i { display: inline-flex; gap: 3px; align-items: center; }
.m-status i::before { content: ""; width: 12px; height: 7px; border-radius: 2px; border: 1.5px solid currentColor; opacity: .8; }
.m-status i::after { content: ""; width: 9px; height: 7px; background: linear-gradient(to top, currentColor 30%, transparent 30%, transparent 45%, currentColor 45%, currentColor 65%, transparent 65%, transparent 80%, currentColor 80%); opacity: .8; }
.m-notch { position: absolute; top: 5px; left: 50%; width: 64px; height: 17px; margin-left: -32px; background: #0d0f0e; border-radius: 10px; z-index: 6; }
.m-appbar { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; font-weight: 700; font-size: 13px; }
html[lang="ur"] .m-appbar { font-size: 12.5px; padding-block: 0 4px; }
.m-appbar svg { width: 16px; height: 16px; flex-shrink: 0; }
[dir="rtl"] .m-appbar .back svg { transform: scaleX(-1); }
.m-body { position: relative; flex: 1; overflow: hidden; padding: 4px 10px 10px; }
.m-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--mp-line); padding: 5px 2px 7px; background: var(--mp-bg); }
.m-tabs span { display: grid; justify-items: center; gap: 1px; color: var(--mp-muted); font-size: 8px; line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; }
html[lang="ur"] .m-tabs span { font-size: 8px; line-height: 1.7; }
.m-tabs span b { display: grid; place-items: center; width: 34px; height: 20px; border-radius: 10px; }
.m-tabs span svg, .m-tabs span img { width: 15px; height: 15px; }
.m-tabs span.on { color: var(--mp-text); font-weight: 700; }
.m-tabs span.on b { background: color-mix(in srgb, var(--mp-accent) 28%, transparent); color: var(--mp-text); }

/* building blocks */
.m-title { font-size: 15px; font-weight: 800; line-height: 1.3; margin: 4px 0 4px; }
html[lang="ur"] .m-title { font-size: 14px; line-height: 1.9; }
.m-sub { color: var(--mp-muted); font-size: 10px; }
.m-label { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-muted); margin: 10px 2px 4px; }
html[lang="ur"] .m-label, html[lang="ar"] .m-label, html[lang="bn"] .m-label, html[lang="hi"] .m-label, html[lang="fa"] .m-label, html[lang="ps"] .m-label { letter-spacing: 0; text-transform: none; font-size: 9.5px; }
.m-card { background: var(--mp-card); border: 1px solid var(--mp-line); border-radius: 12px; padding: 8px 10px; }
.m-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.m-stack > *, .m-grid > * { min-width: 0; }
.m-tile { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 11px; background: var(--mp-card); border: 1px solid var(--mp-line); }
.m-tile .t { flex: 1; min-width: 0; }
.m-tile .t b { display: block; font-size: 10.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[lang="ur"] .m-tile .t b { line-height: 1.8; }
.m-tile .t small { display: block; color: var(--mp-muted); font-size: 9px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[lang="ur"] .m-tile .t small { line-height: 1.8; }
.m-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--mp-soft); color: var(--mp-primary); flex-shrink: 0; }
.m-ico svg, .m-ico img { width: 15px; height: 15px; }
.m-ico.round { border-radius: 50%; }
.m-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    background: var(--mp-primary); color: var(--mp-on-primary); border-radius: 11px; padding: 8px 10px;
    font-weight: 700; font-size: 11px; text-align: center; line-height: 1.3; border: 1px solid transparent;
}
html[lang="ur"] .m-btn { padding-block: 3px; line-height: 1.9; }
.m-btn svg { width: 14px; height: 14px; }
.m-btn.gold { background: var(--mp-accent); color: #13201b; }
.m-btn.line { background: transparent; color: var(--mp-text); border-color: var(--mp-line); }
.m-btn.sm { width: auto; display: inline-flex; padding: 4px 9px; font-size: 9.5px; border-radius: 8px; }
.m-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; background: var(--mp-soft); color: var(--mp-primary); white-space: nowrap; }
.m-chip.gold { background: color-mix(in srgb, var(--mp-accent) 22%, transparent); color: var(--mp-text); }
.m-field { border: 1px solid var(--mp-line); border-radius: 10px; padding: 6px 9px; background: var(--mp-surface); color: var(--mp-muted); font-size: 10px; display: flex; align-items: center; gap: 6px; }
.m-field svg { width: 13px; height: 13px; }
.m-skel { height: 6px; border-radius: 4px; background: var(--mp-line); }
.m-toggle { position: relative; width: 26px; height: 15px; border-radius: 8px; background: var(--mp-line); flex-shrink: 0; }
.m-toggle::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.m-toggle.on { background: var(--mp-primary); }
.m-toggle.on::after { inset-inline-start: 13px; }
.m-toggle.flip { animation: mToggleBg 8s infinite; }
.m-toggle.flip::after { animation: mToggleKnob 8s infinite; }
[dir="rtl"] .m-toggle.flip::after { animation-name: mToggleKnobRtl; }
@keyframes mToggleBg { 0%, 30% { background: var(--mp-line); } 38%, 92% { background: var(--mp-primary); } 100% { background: var(--mp-line); } }
@keyframes mToggleKnob { 0%, 30% { transform: none; } 38%, 92% { transform: translateX(11px); } 100% { transform: none; } }
@keyframes mToggleKnobRtl { 0%, 30% { transform: none; } 38%, 92% { transform: translateX(-11px); } 100% { transform: none; } }
.m-photo { border-radius: 12px; overflow: hidden; height: 92px; position: relative;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 130'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f2b45a'/%3E%3Cstop offset='1' stop-color='%23c0603a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='320' height='130' fill='url(%23s)'/%3E%3Cg fill='%23143a2e'%3E%3Cpath d='M118 130V84a42 42 0 0 1 84 0v46z'/%3E%3Cpath d='M160 30c4 8 14 10 14 24h-28c0-14 10-16 14-24z'/%3E%3Crect x='154' y='50' width='12' height='12'/%3E%3Crect x='70' y='40' width='12' height='90'/%3E%3Cpath d='M76 18l8 22H68z'/%3E%3Crect x='238' y='40' width='12' height='90'/%3E%3Cpath d='M244 18l8 22h-16z'/%3E%3Crect x='0' y='112' width='320' height='18'/%3E%3C/g%3E%3C/svg%3E") center / cover; }
.m-photo .cap { position: absolute; inset-inline: 10px; bottom: 7px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.m-photo .cap b { display: block; font-size: 12px; }
.m-photo .cap small { font-size: 9px; opacity: .9; }
.m-sheet { position: absolute; inset-inline: 0; bottom: 0; background: var(--mp-card); border-radius: 16px 16px 0 0; padding: 12px 12px 14px; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); z-index: 3; }
.m-sheet::before { content: ""; display: block; width: 32px; height: 4px; border-radius: 2px; background: var(--mp-line); margin: -4px auto 8px; }
.m-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .38); z-index: 2; }
.m-dialog { position: absolute; inset-inline: 14px; top: 50%; transform: translateY(-50%); background: var(--mp-card); border-radius: 16px; padding: 14px; z-index: 3; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.m-notif { position: absolute; inset-inline: 8px; top: 6px; z-index: 5; background: color-mix(in srgb, var(--mp-card) 94%, transparent); border: 1px solid var(--mp-line); border-radius: 14px; padding: 8px 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, .22); backdrop-filter: blur(8px); }
.m-notif .head { display: flex; align-items: center; gap: 5px; font-size: 8.5px; color: var(--mp-muted); margin-bottom: 2px; }
.m-notif .head img { width: 12px; height: 12px; }
.m-notif b { display: block; font-size: 10.5px; }
.m-notif p { font-size: 9.5px; color: var(--mp-muted); }
.m-notif .acts { display: flex; gap: 6px; margin-top: 6px; }
.m-led { font-family: "DSEG7", ui-monospace, monospace; font-style: italic; color: #3cb900; background: #050d08; border: 1px solid #16301f; border-radius: 6px; padding: 3px 0; text-align: center; font-size: 12px; letter-spacing: 1px; direction: ltr; text-shadow: 0 0 6px rgba(60, 185, 0, .5); white-space: nowrap; }
.m-led.red { color: #ff2e2e; text-shadow: 0 0 6px rgba(255, 46, 46, .5); border-color: #3a1515; background: #0d0505; }
.m-led.dim { color: #2d7f05; text-shadow: none; }

/* multi-state screens: .st-a shows first, .st-b after the tap (8 s loop) */
.st { position: absolute; inset: 0; padding: inherit; }
.st-a { animation: mStA 8s infinite; }
.st-b { animation: mStB 8s infinite; opacity: 0; }
@keyframes mStA { 0%, 40% { opacity: 1; transform: none; } 46%, 94% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; } }
@keyframes mStB { 0%, 40% { opacity: 0; transform: translateY(8px); } 47%, 93% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.pop { animation: mPop 8s infinite; }
@keyframes mPop { 0%, 44% { opacity: 0; transform: translateY(10px) scale(.96); } 50%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.drop { animation: mDrop 8s infinite; }
@keyframes mDrop { 0%, 18% { opacity: 0; transform: translateY(-120%); } 26%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-120%); } }
.fade-in { animation: mFadeIn 8s infinite; }
@keyframes mFadeIn { 0%, 10% { opacity: 0; } 18%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* the finger: a ripple on the element about to be tapped (just before the state change) */
.tap { position: relative; }
.tap::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
    background: rgba(200, 151, 48, .55); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); pointer-events: none; opacity: 0;
    animation: mTap 8s infinite; z-index: 4;
}
@keyframes mTap { 0%, 26% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(.7); } 36% { opacity: .9; transform: scale(1); } 42% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; } }
.tap.late::after { animation-name: mTapLate; }
@keyframes mTapLate { 0%, 62% { opacity: 0; transform: scale(.4); } 66% { opacity: 1; transform: scale(.7); } 72% { opacity: .9; transform: scale(1); } 78% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; } }

/* approved stamp, like a rubber stamp on a form */
.stamp {
    position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border: 2.5px solid #1f9d6b; border-radius: 10px; color: #1f9d6b; background: rgba(255, 255, 255, .9);
    font-weight: 800; font-size: 13px; white-space: nowrap; transform: rotate(-9deg); animation: mStamp 8s infinite;
}
@media (prefers-color-scheme: dark) { .stamp { background: rgba(0, 0, 0, .78); color: #3fd197; border-color: #3fd197; } }
.stamp svg { width: 15px; height: 15px; }
@keyframes mStamp { 0%, 50% { opacity: 0; transform: rotate(-9deg) scale(1.9); } 55% { opacity: 1; transform: rotate(-9deg) scale(.94); } 58%, 92% { opacity: 1; transform: rotate(-9deg) scale(1); } 98%, 100% { opacity: 0; transform: rotate(-9deg) scale(1); } }

/* GPS rings around a pin */
.rings { position: relative; height: 128px; border-radius: 12px; overflow: hidden; background:
    linear-gradient(115deg, transparent 46%, color-mix(in srgb, var(--mp-line) 90%, transparent) 46%, color-mix(in srgb, var(--mp-line) 90%, transparent) 54%, transparent 54%),
    linear-gradient(20deg, transparent 60%, color-mix(in srgb, var(--mp-line) 90%, transparent) 60%, color-mix(in srgb, var(--mp-line) 90%, transparent) 66%, transparent 66%),
    var(--mp-surface); }
.rings i { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 1.5px dashed var(--mp-primary); background: color-mix(in srgb, var(--mp-primary) 8%, transparent); }
.rings i.pulse { border: 0; background: color-mix(in srgb, var(--mp-accent) 45%, transparent); animation: mRing 2.4s infinite ease-out; }
@keyframes mRing { from { transform: scale(.15); opacity: .9; } to { transform: scale(1); opacity: 0; } }
.rings img { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -16px 0 0 -13px; }
.rings .me { position: absolute; left: 58%; top: 60%; width: 11px; height: 11px; border-radius: 50%; background: #2f7cf6; box-shadow: 0 0 0 3px rgba(47, 124, 246, .3); }
.rings .r { position: absolute; bottom: 6px; inset-inline-end: 8px; font-size: 9px; font-weight: 800; color: var(--mp-primary); direction: ltr; }

/* camera scan frame */
.scanner { position: relative; height: 150px; border-radius: 12px; overflow: hidden; background: #111; display: grid; place-items: center; }
.scanner .frame { position: absolute; inset: 14px; border: 2px solid var(--gold); border-radius: 10px; }
.scanner .line { position: absolute; left: 16px; right: 16px; height: 2px; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: mScan 2.6s infinite ease-in-out; top: 16px; }
@keyframes mScan { 0% { top: 18px; } 50% { top: calc(100% - 20px); } 100% { top: 18px; } }

/* sound wave */
.wave { display: inline-flex; gap: 2px; align-items: center; height: 16px; }
.wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--mp-primary); animation: mWave 1s infinite ease-in-out; }
.wave i:nth-child(2) { animation-delay: .15s; } .wave i:nth-child(3) { animation-delay: .3s; } .wave i:nth-child(4) { animation-delay: .45s; } .wave i:nth-child(5) { animation-delay: .6s; }
@keyframes mWave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* compass */
.compass { position: relative; width: 150px; height: 150px; margin: 12px auto; border-radius: 50%; border: 2px solid var(--mp-line); background: radial-gradient(circle, var(--mp-surface) 60%, var(--mp-card) 61%); }
.compass .rose { position: absolute; inset: 0; animation: mQibla 8s infinite cubic-bezier(.3, .8, .3, 1); }
.compass .rose span { position: absolute; font-size: 9px; font-weight: 800; color: var(--mp-muted); font-family: var(--font); }
.compass .needle { position: absolute; left: 50%; top: 14px; width: 0; height: 0; margin-left: -10px; border: 10px solid transparent; border-bottom: 56px solid var(--mp-accent); border-top: 0; }
.compass .kaaba { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 4px; background: #111; box-shadow: inset 0 5px 0 #c89730; }
@keyframes mQibla { 0% { transform: rotate(62deg); } 45%, 90% { transform: rotate(0); } 100% { transform: rotate(62deg); } }

/* typing a line */
.type { display: block; overflow: hidden; white-space: nowrap; animation: mType 8s infinite steps(24); clip-path: inset(0 100% 0 0); }
[dir="rtl"] .type { animation-name: mTypeRtl; clip-path: inset(0 0 0 100%); }
@keyframes mType { 0%, 8% { clip-path: inset(0 100% 0 0); } 30%, 94% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes mTypeRtl { 0%, 8% { clip-path: inset(0 0 0 100%); } 30%, 94% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
.fill { animation: mFill 8s infinite; opacity: 0; }
@keyframes mFill { 0%, 20% { opacity: 0; } 26%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* browser window */
.m-browser { width: 100%; max-width: 330px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); font-size: 11px; text-align: start; }
.m-browser .bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.m-browser .bar i { width: 7px; height: 7px; border-radius: 50%; background: #e1e5e3; }
.m-browser .url { flex: 1; text-align: center; font-size: 9.5px; color: var(--muted); background: var(--card); border-radius: 6px; padding: 2px 8px; direction: ltr; font-family: var(--font); }
.m-browser .page { padding: 12px; }

/* numbered flow across a band (home, committee) */
.flow3 { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: center; justify-items: center; padding: 56px 24px 30px; }
.flow3 .step-tag {
    position: absolute; top: -40px; inset-inline-start: 50%; transform: translateX(-50%); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px;
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 700; font-size: 13.5px; color: var(--text);
}
[dir="rtl"] .flow3 .step-tag { transform: translateX(50%); padding: 5px 6px 5px 12px; }
html[lang="ur"] .flow3 .step-tag { padding-block: 0; }
.flow3 .step-tag b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; font-family: var(--font); }
.flow3 > div { position: relative; }
/* Phones: longer languages (Indonesian, French, Somali…) wrap the step
   label and a long button instead of running past the screen edge. */
@media (max-width: 600px) {
    .flow3 .step-tag { white-space: normal; width: max-content; max-width: calc(100vw - 2 * var(--gutter, 16px)); line-height: 1.35; }
    .btn { white-space: normal; text-align: center; }
}
.flow3 .link { position: absolute; top: 50%; width: 60px; height: 40px; inset-inline-end: -48px; z-index: 1; color: var(--accent); opacity: .7; }
[dir="rtl"] .flow3 .link { transform: scaleX(-1); }
.flow3 .link path { stroke-dasharray: 5 5; animation: mDash 1.2s linear infinite; }
@keyframes mDash { to { stroke-dashoffset: -20; } }
@media (max-width: 900px) {
    .flow3 { grid-template-columns: minmax(0, 1fr); gap: 72px; padding-top: 60px; }
    .flow3 .link { display: none; }
}

/* guide sections with a demo beside the steps */
.doc-section.has-demo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.doc-section.has-demo > .doc-text { min-width: 0; }
.doc-section.has-demo > .demo { min-height: 520px; }
@media (max-width: 1100px) { .doc-section.has-demo { grid-template-columns: minmax(0, 1fr); } .doc-section.has-demo > .demo { min-height: 0; } }


/* more mock pieces */
.m-chip svg { width: 11px; height: 11px; }
.m-toast { position: absolute; inset-inline: 10px; bottom: 10px; z-index: 4; background: #1b2420; color: #fff; border-radius: 10px; padding: 7px 10px; font-size: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
html[lang="ur"] .m-toast { padding-block: 2px; }
.clamp2, .clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp2 { -webkit-line-clamp: 2; } .clamp3 { -webkit-line-clamp: 3; }
.m-row { display: flex; align-items: center; gap: 6px; }
.m-row.between { justify-content: space-between; }
.m-phone.lock { --mp-text: #fff; color: #fff; background:
    radial-gradient(500px 300px at 80% -10%, rgba(200, 151, 48, .35), transparent 60%), linear-gradient(170deg, #0b3a2b, #062219); }
.m-phone.lock .m-tabs { display: none; }
.m-lockclock { text-align: center; margin-top: 26px; font-family: var(--font); line-height: 1; }
.m-lockclock b { display: block; font-size: 52px; font-weight: 300; letter-spacing: -1px; }
.m-lockclock small { font-size: 11px; opacity: .85; }
.m-phone.lock .m-notif { --mp-card: #ffffff; --mp-text: #13201b; --mp-muted: #5f6d67; --mp-line: #e3e9e6; color: #13201b; }
.m-board { background: #000; color: #fff; border-radius: 12px; padding: 8px 8px 6px; margin-top: 6px; direction: ltr; text-align: left; font-family: var(--font); line-height: 1.25; }
.m-board .kal { text-align: center; font-family: var(--font-arabic-text); font-size: 10px; margin-bottom: 5px; }
.m-board .r { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 4px; align-items: center; margin: 3px 0; }
.m-board .h { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 4px; font-size: 6.5px; letter-spacing: .1em; font-weight: 800; color: #8a9a92; text-align: center; }
.m-board .n { text-align: right; line-height: 1.05; }
.m-board .n b { display: block; font-family: var(--font-arabic-text); font-size: 10px; }
.m-board .n i { font-style: normal; font-size: 6.5px; color: #9aa7a1; font-weight: 700; }
.m-board .d { display: flex; justify-content: space-between; font-size: 6.5px; font-weight: 800; letter-spacing: .05em; color: #8fbf7a; margin-top: 5px; padding-top: 4px; border-top: 1px solid #1a221e; }
.m-board .d span + span { color: var(--gold-2); }
.m-board .m-led { font-size: 10px; padding: 2px 0; }
.m-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 4px; align-items: center; font-size: 10px; }
.m-grid .hd { font-size: 8.5px; font-weight: 800; color: var(--mp-muted); text-align: center; }
.m-grid .hd:first-child { text-align: start; }
.m-grid .c { border: 1px solid var(--mp-line); border-radius: 8px; text-align: center; padding: 4px 0; font-weight: 700; direction: ltr; background: var(--mp-surface); font-family: var(--font); }
.m-check { display: grid; grid-template-columns: 16px 1fr; gap: 6px; align-items: start; font-size: 9.5px; margin-top: 6px; }
.m-check .tick { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #1f9d6b; color: #fff; }
.m-check .tick svg { width: 10px; height: 10px; }
.m-appicons { display: flex; justify-content: space-between; margin: 10px 2px 8px; }
.m-appicons span { display: grid; justify-items: center; gap: 3px; font-size: 8px; color: var(--mp-muted); width: 25%; text-align: center; }
.m-appicons i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; }
.m-appicons i svg { width: 17px; height: 17px; }
.m-tabsbar { display: flex; gap: 4px; border-bottom: 1px solid var(--mp-line); margin: 0 -10px 8px; padding: 0 10px; }
.m-tabsbar span { padding: 5px 8px; font-size: 10px; font-weight: 700; color: var(--mp-muted); border-bottom: 2px solid transparent; }
.m-tabsbar span.on { color: var(--mp-text); border-color: var(--mp-accent); }
.m-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.m-sum div { border-radius: 10px; background: var(--mp-surface); padding: 6px 8px; }
.m-sum small { display: block; color: var(--mp-muted); font-size: 8.5px; }
.m-sum b { font-size: 11.5px; direction: ltr; unicode-bidi: isolate; font-family: var(--font); }
.in-amt { color: #1f9d6b; } .out-amt { color: #d64545; }
.m-fab { position: absolute; bottom: 12px; inset-inline-end: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; background: var(--mp-accent); color: #13201b; border-radius: 14px; padding: 8px 12px; font-weight: 800; font-size: 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.m-fab svg { width: 13px; height: 13px; }
.m-poster { background: #fff; color: #13201b; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); text-align: center; font-family: var(--font); }
.m-poster .top { background: var(--green); padding: 8px 10px 6px; }
.m-poster .top .wm { width: 80%; margin: 0 auto; }
.m-poster .qr { width: 52%; margin: 6px auto; padding: 4px; border: 2px solid var(--gold); border-radius: 8px; }
.m-poster .qr img { display: block; width: 100%; }
.m-poster b { display: block; font-size: 11px; margin-top: 6px; }
.m-poster small { display: block; font-size: 8px; color: #55635d; padding-bottom: 6px; }
.m-home { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; margin-top: 14px; }
.m-home i { aspect-ratio: 1; border-radius: 12px; background: rgba(255, 255, 255, .16); }
.m-widget { grid-column: span 4; border-radius: 18px; background: #000; padding: 10px; border: 1px solid #1f2b26; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); color: #fff; font-family: var(--font); direction: ltr; text-align: left; }
.m-widget .top { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: #c9d3ce; }
.m-widget .big { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 6px; }
.m-widget .big .m-led { font-size: 20px; padding: 3px 8px; }
.m-widget .rows { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.m-widget .rows span { text-align: center; font-size: 6.5px; color: #9aa7a1; min-width: 0; }
.m-widget .rows .m-led { display: block; font-size: 6.5px; letter-spacing: 0; padding: 1px 0; margin-top: 2px; }

@keyframes mPopMid { 0%, 44% { opacity: 0; transform: translateY(8px); } 48%, 62% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; } }
.pop-mid { animation: mPopMid 8s infinite; opacity: 0; }
@keyframes mLateB { 0%, 78% { opacity: 0; transform: translateY(8px); } 82%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.late-b { animation: mLateB 8s infinite; opacity: 0; }
@keyframes mUntilLate { 0%, 16% { opacity: 0; transform: translateY(-120%); } 24%, 77% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: none; } }
.drop.until-late { animation-name: mUntilLate; }
@keyframes mDropLate { 0%, 46% { opacity: 0; transform: translateY(-120%); } 54%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-120%); } }
.drop.late { animation-name: mDropLate; }
@keyframes mFillB { 0%, 48% { opacity: 0; transform: scale(.9); } 54%, 93% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.fill-b { animation: mFillB 8s infinite; opacity: 0; }
.drop, .pop { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .demo *, .demo *::before, .demo *::after { animation: none !important; transition: none !important; }
    .demo .st-a { opacity: 0; }
    .demo .st-b, .demo .pop, .demo .drop, .demo .fill, .demo .fill-b, .demo .fade-in, .demo .stamp, .demo .late-b { opacity: 1; transform: none; }
    .demo .pop-mid, .demo .drop.until-late { opacity: 0; }
    .demo .stamp { transform: rotate(-9deg); }
    .demo .type { clip-path: none; }
}
@keyframes mStampLate { 0%, 80% { opacity: 0; transform: rotate(-9deg) scale(1.9); } 84% { opacity: 1; transform: rotate(-9deg) scale(.94); } 86%, 95% { opacity: 1; transform: rotate(-9deg) scale(1); } 99%, 100% { opacity: 0; } }