/* jewahirji.com in the app's glass look (2026-10-07): Glass Dark / Glass Light, the app's blurred scene behind every page,
   flat buttons, no boxes (hairline splitters), no purple / gold text, flat icons. One layer for the three pages; each page
   keeps its own markup and script — only its colour names are pointed at the glass tokens (html[data-pg]). */

/* ── glass tokens ── */
html[data-theme="dark"] {
    color-scheme: dark;
    --g-bg: #0e0f12; --g-bg-rgb: 14, 15, 18;
    --g-text: #f2f4f7; --g-text-2: rgba(242, 244, 247, .66); --g-text-3: rgba(242, 244, 247, .42);
    --g-line: rgba(255, 255, 255, .10); --g-line-2: rgba(255, 255, 255, .17);
    --g-glass: rgba(20, 22, 27, .56); --g-glass-2: rgba(22, 24, 29, .86);
    --g-chip: rgba(232, 240, 251, .08); --g-chip-2: rgba(232, 240, 251, .14);
    --g-pill: #e8f0fb; --g-on-pill: #0e0f12; --g-field: rgba(255, 255, 255, .08);
    --g-ok: #3fe29b; --g-bad: #ff7966;
    --g-rim: inset 0 0 0 1.5px rgba(255, 255, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .12);
    --g-drop: 0 30px 60px -30px rgba(0, 0, 0, .75);
    --g-fx1: #d9dde3; --g-fx2: #b9bec6; --g-fx-o: .2;
    --g-scene:
        radial-gradient(70% 22% at 50% 62%, rgb(210 215 222 / .16), transparent 70%),
        radial-gradient(60% 18% at 20% 78%, rgb(210 215 222 / .12), transparent 70%),
        linear-gradient(180deg, transparent 52%, rgb(14 15 18 / .7) 72%, #0e0f12 92%),
        linear-gradient(118deg, transparent 49.7%, rgb(255 255 255 / .09) 50%, transparent 50.3%),
        linear-gradient(64deg, transparent 49.7%, rgb(255 255 255 / .06) 50%, transparent 50.3%),
        conic-gradient(from 152deg at 56% 20%, transparent 0 20%, #7d838c 20% 25%, #3d4148 25% 31%, #a2a8b0 31% 34%, #26292e 34% 45%, transparent 45%),
        conic-gradient(from 146deg at 14% 44%, transparent 0 23%, #5a5f67 23% 30%, #2c2f34 30% 41%, transparent 41%),
        conic-gradient(from 160deg at 90% 38%, transparent 0 21%, #4e535b 21% 29%, #6f757d 29% 33%, #24272b 33% 44%, transparent 44%),
        radial-gradient(90% 40% at 50% 0%, rgb(190 196 204 / .55), transparent 70%),
        linear-gradient(180deg, #6c7178 0%, #3a3e44 34%, #1a1c20 64%, #0e0f12 100%);
}
html[data-theme="light"] {
    color-scheme: light;
    --g-bg: #eceff3; --g-bg-rgb: 236, 239, 243;
    --g-text: #121722; --g-text-2: rgba(18, 23, 34, .66); --g-text-3: rgba(18, 23, 34, .44);
    --g-line: rgba(18, 23, 34, .10); --g-line-2: rgba(18, 23, 34, .17);
    --g-glass: rgba(255, 255, 255, .58); --g-glass-2: rgba(248, 249, 252, .86);
    --g-chip: rgba(18, 23, 34, .06); --g-chip-2: rgba(18, 23, 34, .10);
    --g-pill: #121722; --g-on-pill: #ffffff; --g-field: rgba(18, 23, 34, .07);
    --g-ok: #0a7f4e; --g-bad: #c4321f;
    --g-rim: inset 0 0 0 1.5px rgba(255, 255, 255, .7), inset 0 1px 0 #fff;
    --g-drop: 0 30px 60px -34px rgba(30, 40, 60, .35);
    --g-fx1: #ffffff; --g-fx2: #dfe6ef; --g-fx-o: .35;
    --g-scene:
        radial-gradient(70% 22% at 50% 62%, rgb(255 255 255 / .55), transparent 70%),
        radial-gradient(60% 18% at 20% 78%, rgb(255 255 255 / .5), transparent 70%),
        linear-gradient(180deg, transparent 52%, rgb(236 239 243 / .75) 72%, #eceff3 92%),
        linear-gradient(118deg, transparent 49.7%, rgb(255 255 255 / .55) 50%, transparent 50.3%),
        linear-gradient(64deg, transparent 49.7%, rgb(60 70 90 / .06) 50%, transparent 50.3%),
        conic-gradient(from 152deg at 56% 20%, transparent 0 20%, #b9c0ca 20% 25%, #e4e8ed 25% 31%, #98a1ad 31% 34%, #d3d8df 34% 45%, transparent 45%),
        conic-gradient(from 146deg at 14% 44%, transparent 0 23%, #b3bac4 23% 30%, #dde1e7 30% 41%, transparent 41%),
        conic-gradient(from 160deg at 90% 38%, transparent 0 21%, #c6ccd4 21% 29%, #a4acb7 29% 33%, #e2e5ea 33% 44%, transparent 44%),
        radial-gradient(90% 40% at 50% 0%, rgb(255 255 255 / .85), transparent 70%),
        linear-gradient(180deg, #d9dee5 0%, #c9cfd8 34%, #e5e8ed 64%, #eceff3 100%);
}

/* ── the scene behind every page (the app's wallpaper, blurred) ── */
html[data-theme] { background: var(--g-bg) !important; }
html[data-theme] body { background: transparent !important; color: var(--g-text); }
html[data-theme] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--g-scene); background-size: 100% min(100vh, 900px); background-repeat: no-repeat; background-color: var(--g-bg); filter: blur(18px); transform: scale(1.08); }
html[data-theme] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--g-fx-o);
    background: radial-gradient(420px 420px at 30% 8%, var(--g-fx1), transparent 68%), radial-gradient(380px 380px at 82% 46%, var(--g-fx2), transparent 68%); filter: blur(30px); }

/* ── theme key (added to each header by glass.js) ── */
.g-theme { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 999px; border: 0; background: var(--g-chip); color: var(--g-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.g-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.g-theme .sun { display: none; }
html[data-theme="dark"] .g-theme .sun { display: block; }
html[data-theme="dark"] .g-theme .moon { display: none; }
.g-theme:active { transform: scale(.94); }

/* ═════════════ HOME (index.html) ═════════════ */
html[data-pg="home"][data-theme] {
    --bg: var(--g-bg); --card: var(--g-glass); --surface-2: var(--g-chip); --tint: var(--g-chip);
    --ink: var(--g-text); --ink-2: var(--g-text-2); --muted: var(--g-text-2);
    --line: var(--g-line); --line-2: var(--g-line-2);
    --em: var(--g-text); --em-deep: var(--g-text); --gold-text: var(--g-text-2);
    --shadow-1: none; --shadow-2: var(--g-drop);
}
html[data-pg="home"][data-theme] a { color: var(--g-text); }
html[data-pg="home"][data-theme] em { color: inherit; font-weight: inherit; background: none; text-decoration: underline; text-decoration-color: var(--g-line-2); text-decoration-thickness: 2px; text-underline-offset: .32em; }
/* header: the app's glass bar */
html[data-pg="home"][data-theme] .top { background: var(--g-glass) !important; -webkit-backdrop-filter: blur(24px) saturate(1.45); backdrop-filter: blur(24px) saturate(1.45); border-bottom: 1px solid var(--g-line) !important; box-shadow: none !important; }
html[data-pg="home"][data-theme] .mini img, html[data-pg="home"][data-theme] .ttl .logo { box-shadow: none !important; }
html[data-pg="home"][data-theme] .hp { background: var(--g-chip-2) !important; border: 0 !important; }
html[data-pg="home"][data-theme] .links a { color: var(--g-text-2) !important; }
html[data-pg="home"][data-theme] .links a:hover, html[data-pg="home"][data-theme] .links a.cur { color: var(--g-text) !important; }
html[data-pg="home"][data-theme] .lang, html[data-pg="home"][data-theme] .mqp { background: var(--g-chip) !important; border: 0 !important; color: var(--g-text) !important; box-shadow: none !important; }
html[data-pg="home"][data-theme] .lang:hover, html[data-pg="home"][data-theme] .mqp:hover { background: var(--g-chip-2) !important; }
/* flat buttons: main = the theme pill, second = a chip */
html[data-pg="home"][data-theme] .bpill, html[data-pg="home"][data-theme] .navdl { background: var(--g-pill) !important; color: var(--g-on-pill) !important; box-shadow: none !important; border: 0 !important; }
html[data-pg="home"][data-theme] .bpill:hover, html[data-pg="home"][data-theme] .navdl:hover { filter: brightness(.94); }
html[data-pg="home"][data-theme] .ghost { background: var(--g-chip) !important; color: var(--g-text) !important; border: 0 !important; box-shadow: none !important; }
html[data-pg="home"][data-theme] .ghost:hover { background: var(--g-chip-2) !important; }
html[data-pg="home"][data-theme] .tl, html[data-pg="home"][data-theme] .htext .tl { color: var(--g-text) !important; }
/* hero text */
html[data-pg="home"][data-theme] .name { color: var(--g-text) !important; }
html[data-pg="home"][data-theme] .eb, html[data-pg="home"][data-theme] .blk .eb { color: var(--g-text-2) !important; }
html[data-pg="home"][data-theme] .eb::before, html[data-pg="home"][data-theme] .eb::after, html[data-pg="home"][data-theme] .st2 .eb::after, html[data-pg="home"][data-theme] .blk .eb::after { background: var(--g-line-2) !important; }
html[data-pg="home"][data-theme] .wash { background: linear-gradient(180deg, rgba(var(--g-bg-rgb), .9) 0, rgba(var(--g-bg-rgb), .82) calc(var(--tb, 560px) - 40px), rgba(var(--g-bg-rgb), 0) calc(var(--tb, 560px) + 120px)) !important; }
@media (min-width: 900px) {
    html[data-pg="home"][data-theme] .wash { background: linear-gradient(270deg, rgba(var(--g-bg-rgb), .9) 0, rgba(var(--g-bg-rgb), .8) 44%, rgba(var(--g-bg-rgb), 0) 62%) !important; }
    html[data-pg="home"][data-theme] [dir="ltr"] .wash, html[dir="ltr"][data-pg="home"][data-theme] .wash { background: linear-gradient(90deg, rgba(var(--g-bg-rgb), .9) 0, rgba(var(--g-bg-rgb), .8) 44%, rgba(var(--g-bg-rgb), 0) 62%) !important; }
}
html[data-pg="home"][data-theme] .hint .line { background: linear-gradient(180deg, var(--g-text-3), transparent) !important; }
/* device frames (pictures of the app) stay framed: phone body black, window bars as chips */
html[data-pg="home"][data-theme] .phone, html[data-pg="home"][data-theme] .sc.sync .mph { background: #0b0c0f !important; }
html[data-pg="home"][data-theme] .phone::before { background: #1d1f24 !important; }
html[data-pg="home"][data-theme] .win, html[data-pg="home"][data-theme] .panel { background: var(--g-glass-2) !important; border: 0 !important; box-shadow: var(--g-rim), var(--g-drop) !important; }
html[data-pg="home"][data-theme] .win .wb, html[data-pg="home"][data-theme] .pbar { background: var(--g-chip) !important; border-bottom: 1px solid var(--g-line) !important; }
html[data-pg="home"][data-theme] .win .wb i, html[data-pg="home"][data-theme] .pbar i { background: var(--g-line-2) !important; }
html[data-pg="home"][data-theme] .rsh { opacity: .5; }
html[data-pg="home"][data-theme] .pwrap { background: radial-gradient(70% 60% at 50% 60%, var(--g-chip-2), transparent 70%) !important; }
html[data-pg="home"][data-theme] .sc.lock { background: radial-gradient(60% 60% at 50% 50%, var(--g-chip-2), transparent) !important; color: var(--g-text) !important; }
html[data-pg="home"][data-theme] .sc.lock span { background: var(--g-chip) !important; box-shadow: none !important; }
/* accordion */
html[data-pg="home"][data-theme] .it.on .ah .n { color: var(--g-text) !important; }
html[data-pg="home"][data-theme] .pr i { background: var(--g-text) !important; }
/* chips: flat, neutral dot */
html[data-pg="home"][data-theme] .chip { background: var(--g-chip) !important; border: 0 !important; color: var(--g-text) !important; box-shadow: none !important; }
html[data-pg="home"][data-theme] .chip::before { background: var(--g-text-3) !important; box-shadow: none !important; }
/* steps: no boxes — columns split by hairlines */
html[data-pg="home"][data-theme] .step { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding-inline: 4px !important; border-top: 1px solid var(--g-line) !important; }
html[data-pg="home"][data-theme] .step::after { display: none !important; }
html[data-pg="home"][data-theme] .step .n { color: var(--g-text) !important; }
@media (min-width: 900px) {
    html[data-pg="home"][data-theme] .stl { gap: 0 !important; }
    html[data-pg="home"][data-theme] .step { border-top: 0 !important; padding: 8px 28px !important; }
    html[data-pg="home"][data-theme] .step + .step { border-inline-start: 1px solid var(--g-line) !important; }
}
/* download: no cards — three columns split by hairlines; the icon a chip, the first one a pill */
html[data-pg="home"][data-theme] .halo { background: radial-gradient(circle, var(--g-chip-2), transparent 62%) !important; }
html[data-pg="home"][data-theme] .card, html[data-pg="home"][data-theme] .card.primary, html[data-pg="home"][data-theme] .card.soon { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--g-line) !important; transform: none !important; }
html[data-pg="home"][data-theme] .card .ic { background: var(--g-chip) !important; color: var(--g-text) !important; border: 0 !important; }
html[data-pg="home"][data-theme] .card.primary .ic { background: var(--g-pill) !important; color: var(--g-on-pill) !important; }
html[data-pg="home"][data-theme] .card .k { color: var(--g-text-2) !important; }
html[data-pg="home"][data-theme] .card .go { background: var(--g-chip) !important; border: 0 !important; color: var(--g-text) !important; }
html[data-pg="home"][data-theme] a.card:hover .go { background: var(--g-pill) !important; color: var(--g-on-pill) !important; }
html[data-pg="home"][data-theme] .card.soon { opacity: .72; }
html[data-pg="home"][data-theme] .pill { background: var(--g-chip-2) !important; color: var(--g-text) !important; border: 0 !important; box-shadow: none !important; }
@media (min-width: 900px) {
    html[data-pg="home"][data-theme] .dl { gap: 0 !important; }
    html[data-pg="home"][data-theme] .card { border-top: 0 !important; padding: 8px 28px !important; }
    html[data-pg="home"][data-theme] .card + .card { border-inline-start: 1px solid var(--g-line) !important; }
}
html[data-pg="home"][data-theme] .note { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--g-line) !important; padding-inline: 4px !important; color: var(--g-text-2) !important; }
html[data-pg="home"][data-theme] .note svg { color: var(--g-text) !important; }
/* section dots + footer */
html[data-pg="home"][data-theme] .dots { background: var(--g-glass) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 0 !important; box-shadow: var(--g-rim) !important; }
html[data-pg="home"][data-theme] .dots a::before { background: var(--g-text-3) !important; }
html[data-pg="home"][data-theme] .dots a.on::before { background: var(--g-text) !important; }
html[data-pg="home"][data-theme] .dots .lbl { background: var(--g-glass-2) !important; color: var(--g-text) !important; border: 0 !important; }
html[data-pg="home"][data-theme] footer { background: transparent !important; border-top: 1px solid var(--g-line) !important; color: var(--g-text-2) !important; }
html[data-pg="home"][data-theme] .foot a { color: var(--g-text) !important; }
html[data-pg="home"][data-theme] :focus-visible { outline-color: var(--g-text) !important; }

/* ═════════════ ABOUT (about.html) ═════════════ */
html[data-pg="about"][data-theme] {
    --bg: var(--g-bg); --panel: var(--g-glass); --panel-2: var(--g-chip); --border: var(--g-line); --border-strong: var(--g-line-2);
    --text: var(--g-text); --text-2: var(--g-text-2); --text-3: var(--g-text);
    --olive: var(--g-text); --olive-dark: var(--g-text); --olive-ink: var(--g-on-pill);
    --gold: var(--g-text); --green: var(--g-ok); --shadow: none;
}
html[data-pg="about"][data-theme] .blob { display: none !important; }
html[data-pg="about"][data-theme] .site-head { background: var(--g-glass) !important; border-bottom: 1px solid var(--g-line) !important; box-shadow: none !important; -webkit-backdrop-filter: blur(24px) saturate(1.45); backdrop-filter: blur(24px) saturate(1.45); }
html[data-pg="about"][data-theme] .brand img { box-shadow: none !important; }
html[data-pg="about"][data-theme] .brand-name, html[data-pg="about"][data-theme] h1 { background: none !important; -webkit-text-fill-color: var(--g-text) !important; color: var(--g-text) !important; animation: none !important; }
html[data-pg="about"][data-theme] .nav-link, html[data-pg="about"][data-theme] .lang-toggle { background: var(--g-chip) !important; border: 0 !important; color: var(--g-text) !important; box-shadow: none !important; border-radius: 999px !important; }
html[data-pg="about"][data-theme] .nav-link.primary { background: var(--g-pill) !important; color: var(--g-on-pill) !important; }
html[data-pg="about"][data-theme] header.page .logo { filter: grayscale(1) !important; opacity: .85; }
html[data-pg="about"][data-theme] .story, html[data-pg="about"][data-theme] .contact-card { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--g-line) !important; padding-inline: 4px !important; }
html[data-pg="about"][data-theme] .story::before, html[data-pg="about"][data-theme] .contact-card::before { display: none !important; }
html[data-pg="about"][data-theme] .row-label { color: var(--g-text-2) !important; }
html[data-pg="about"][data-theme] footer a { color: var(--g-text) !important; }

/* ═════════════ SIGN-UP (signup.html) ═════════════ */
html[data-pg="signup"][data-theme] {
    --bg: var(--g-bg); --bg-2: var(--g-bg); --surface: var(--g-glass-2); --surface-2: var(--g-glass-2); --field: var(--g-field);
    --khaki: var(--g-text-2); --olive: var(--g-text); --olive-bright: var(--g-text);
    --ink: var(--g-text); --ink-soft: var(--g-text-2); --muted: var(--g-text-2);
    --gold: var(--g-text); --gold-soft: var(--g-text); --gold-hi: var(--g-text); --gold-deep: var(--g-text);
    --gold-line: var(--g-line-2); --gold-line-soft: var(--g-line); --on-gold: var(--g-on-pill);
    --ok: var(--g-ok); --bad: var(--g-bad);
}
html[data-pg="signup"][data-theme] .velvet { display: none !important; }
html[data-pg="signup"][data-theme] .top, html[data-pg="signup"][data-theme] header.top, html[data-pg="signup"][data-theme] .nav { background: var(--g-glass) !important; -webkit-backdrop-filter: blur(24px) saturate(1.45); backdrop-filter: blur(24px) saturate(1.45); border-bottom: 1px solid var(--g-line) !important; box-shadow: none !important; }
html[data-pg="signup"][data-theme] .mini img { box-shadow: none !important; }
html[data-pg="signup"][data-theme] .links a::after { background: var(--g-text) !important; }
html[data-pg="signup"][data-theme] .lang { background: var(--g-chip) !important; border: 0 !important; color: var(--g-text) !important; border-radius: 999px !important; }
html[data-pg="signup"][data-theme] .kicker::before { background: var(--g-line-2) !important; }
html[data-pg="signup"][data-theme] .glass { background: var(--g-glass-2) !important; box-shadow: var(--g-rim), var(--g-drop) !important; border-color: transparent !important; -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35); }
html[data-pg="signup"][data-theme] .cm::before, html[data-pg="signup"][data-theme] .cm::after { display: none !important; }
html[data-pg="signup"][data-theme] .in { background: var(--g-field) !important; border-color: transparent !important; color: var(--g-text) !important; box-shadow: none !important; }
html[data-pg="signup"][data-theme] .in:focus { background: var(--g-chip-2) !important; box-shadow: none !important; }
html[data-pg="signup"][data-theme] .seg button { background: var(--g-chip) !important; border-color: transparent !important; color: var(--g-text) !important; }
html[data-pg="signup"][data-theme] .seg button[aria-checked="true"] { background: var(--g-pill) !important; color: var(--g-on-pill) !important; }
html[data-pg="signup"][data-theme] .btn.gold { background: var(--g-pill) !important; color: var(--g-on-pill) !important; box-shadow: none !important; }
html[data-pg="signup"][data-theme] .btn.ghost { background: var(--g-chip) !important; border: 0 !important; color: var(--g-text) !important; }
html[data-pg="signup"][data-theme] .btn.link { color: var(--g-text) !important; }
html[data-pg="signup"][data-theme] .msg.bad { color: var(--g-bad) !important; background: none !important; }
html[data-pg="signup"][data-theme] .msg.ok { color: var(--g-ok) !important; background: none !important; }
html[data-pg="signup"][data-theme] .card, html[data-pg="signup"][data-theme] .card.primary, html[data-pg="signup"][data-theme] .card.soon { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--g-line) !important; }
html[data-pg="signup"][data-theme] .card .ic { background: var(--g-chip) !important; border: 0 !important; color: var(--g-text) !important; }
html[data-pg="signup"][data-theme] .card.primary .ic { background: var(--g-pill) !important; color: var(--g-on-pill) !important; }
html[data-pg="signup"][data-theme] .pill { background: var(--g-chip-2) !important; color: var(--g-text) !important; box-shadow: none !important; }
html[data-pg="signup"][data-theme] .steps li::before { border-color: var(--g-line-2) !important; color: var(--g-text) !important; background: var(--g-chip) !important; }

/* ── no yellow anywhere (owner 2026-10-07: "remove any yellow text, any yellow buttons; keep buttons flat") ── */
/* the hero bangle, its light trail and the ring around the phone: platinum instead of gold */
html[data-pg="home"][data-theme] .macro, html[data-pg="home"][data-theme] .trail { filter: grayscale(1) brightness(1.04) contrast(1.05); }
html[data-pg="home"][data-theme] .ringbox::before { filter: grayscale(1) brightness(1.05); }
html[data-pg="home"][data-theme] .hint { background: var(--g-glass) !important; color: var(--g-text-2) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
/* hard-coded green / gold icon strokes on the sign-up download list follow the text colour */
html[data-pg="signup"][data-theme] .card .ic svg { stroke: currentColor !important; }
html[data-pg="signup"][data-theme] .card.primary .ic svg { stroke: var(--g-on-pill) !important; }
/* every button stays flat: no gradient, no glow, no bevel */
html[data-theme] .bpill, html[data-theme] .ghost, html[data-theme] .navdl, html[data-theme] .btn, html[data-theme] .nav-link, html[data-theme] .lang, html[data-theme] .lang-toggle, html[data-theme] .mqp, html[data-theme] .g-theme { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
/* sign-up page: its header is a plain <header>; the footer had a gold rule */
html[data-pg="signup"][data-theme] body > header { background: var(--g-glass) !important; border-bottom: 1px solid var(--g-line) !important; -webkit-backdrop-filter: blur(24px) saturate(1.45); backdrop-filter: blur(24px) saturate(1.45); }
html[data-pg="signup"][data-theme] footer { background: transparent !important; border-top: 1px solid var(--g-line) !important; }
html[data-pg="signup"][data-theme] footer::before { display: none !important; }
html[data-pg="home"][data-theme] .phone, html[data-pg="home"][data-theme] .sc.sync .mph { box-shadow: 0 0 0 1px var(--g-line-2), var(--g-drop) !important; }
/* ── the karat dial (owner 2026-10-07: "add a bit of gold to the ring and reshape it to something with meaning") ──
   platinum band engraved with the karat purity marks (999 · 916 · 875 · 750 · 585 · 375 · 24K … 9K) in gold, gold inlay edges;
   the hero bangle and the ring around the phone are the same drawing (the still stage shows ring.svg) */
html[data-pg="home"][data-theme] .macro { filter: none !important; }
html[data-pg="home"][data-theme] .ringbox::before { filter: none !important; background: url(ring.svg) center / contain no-repeat !important; }
[dir="ltr"] .macro .eng { transform: scaleX(-1); transform-origin: 200px 200px; transform-box: view-box; }   /* the bangle is mirrored in English; the marks are not */
/* the small phone over the clients screen (sync feature): keep the picture's shape */
html[data-pg="home"] .sc.sync .mph img { width: 100% !important; height: auto !important; }

/* ── 3D liquid-gold wave (dark theme; wave3d.js draws it on #jw3d, fixed behind the page) ── */
#jw3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: none; }
html.w3d[data-theme="dark"] #jw3d { display: block; }
html.w3d[data-theme="dark"] { background: radial-gradient(70% 55% at 35% 40%, rgba(120, 80, 20, .14), transparent 70%), #08090b !important; }
html.w3d[data-theme="dark"] body::before, html.w3d[data-theme="dark"] body::after { display: none !important; }
html.w3d[data-theme="dark"][data-pg="home"] .macro, html.w3d[data-theme="dark"][data-pg="home"] .wash, html.w3d[data-theme="dark"][data-pg="home"] .trail { display: none !important; }
html.w3d[data-theme="dark"] .top, html.w3d[data-theme="dark"] .site-head, html.w3d[data-theme="dark"][data-pg="signup"] body > header { background: rgba(10, 11, 13, .74) !important; -webkit-backdrop-filter: blur(22px) !important; backdrop-filter: blur(22px) !important; }
html.w3d[data-theme="dark"] main, html.w3d[data-theme="dark"] footer, html.w3d[data-theme="dark"] .page, html.w3d[data-theme="dark"] .wrap { text-shadow: 0 1px 16px rgba(0, 0, 0, .6); }
html.w3d[data-theme="dark"] input, html.w3d[data-theme="dark"] textarea, html.w3d[data-theme="dark"] select, html.w3d[data-theme="dark"] button, html.w3d[data-theme="dark"] .bpill, html.w3d[data-theme="dark"] .navdl { text-shadow: none; }
/* hero copy: room between the tall Arabic title and the lines under it */
html[data-pg="home"] .htext .lede { margin-top: 16px; }
html[data-pg="home"] .htext .hx-p { margin-top: 16px; line-height: 1.8; }
html[data-pg="home"] .htext .btns { margin-top: 30px; }
/* about: flat line icons instead of the coloured emoji */
.g-ico { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: 6px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* ── the wave in the light theme too (wave3d.js draws a light version) ── */
html.w3d[data-theme="light"] #jw3d { display: block; }
html.w3d[data-theme="light"] { background: #eceff3 !important; }
html.w3d[data-theme="light"] body::before, html.w3d[data-theme="light"] body::after { display: none !important; }
html.w3d[data-theme="light"][data-pg="home"] .macro, html.w3d[data-theme="light"][data-pg="home"] .wash, html.w3d[data-theme="light"][data-pg="home"] .trail { display: none !important; }
html.w3d[data-theme="light"] .top, html.w3d[data-theme="light"] .site-head, html.w3d[data-theme="light"][data-pg="signup"] body > header { background: rgba(244, 245, 247, .8) !important; -webkit-backdrop-filter: blur(22px) !important; backdrop-filter: blur(22px) !important; }
html.w3d[data-theme="light"] main, html.w3d[data-theme="light"] footer, html.w3d[data-theme="light"] .page, html.w3d[data-theme="light"] .wrap { text-shadow: 0 1px 14px rgba(255, 255, 255, .8); }
html.w3d[data-theme="light"] input, html.w3d[data-theme="light"] textarea, html.w3d[data-theme="light"] select, html.w3d[data-theme="light"] button, html.w3d[data-theme="light"] .bpill, html.w3d[data-theme="light"] .navdl { text-shadow: none; }
/* ── 2026-10-07 batch ── */
/* top bar: no glass, no border, no sliding pill — brand, links and buttons over a soft fade of the page colour */
html.w3d[data-theme][data-pg] .top, html.w3d[data-theme][data-pg] .site-head, html.w3d[data-theme][data-pg="signup"] body > header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 0 !important; box-shadow: none !important; }
html.w3d[data-theme="dark"][data-pg] .top, html.w3d[data-theme="dark"][data-pg] .site-head, html.w3d[data-theme="dark"][data-pg="signup"] body > header { background: linear-gradient(to bottom, rgba(8, 9, 11, .96), rgba(8, 9, 11, .9) 70%, rgba(8, 9, 11, 0)) !important; }
html.w3d[data-theme="light"][data-pg] .top, html.w3d[data-theme="light"][data-pg] .site-head, html.w3d[data-theme="light"][data-pg="signup"] body > header { background: linear-gradient(to bottom, rgba(236, 239, 243, .97), rgba(236, 239, 243, .92) 70%, rgba(236, 239, 243, 0)) !important; }
html.w3d[data-pg] .hp { display: none !important; }
html.w3d[data-pg="home"] .links a.cur { font-weight: 700 !important; }

/* app screenshot cards: see-through glass (the wave shows behind them) */
html.w3d[data-theme][data-pg="home"] .win, html.w3d[data-theme][data-pg="home"] .panel { border-radius: 16px !important; overflow: hidden; }
html.w3d[data-theme="dark"][data-pg="home"] .win, html.w3d[data-theme="dark"][data-pg="home"] .panel { background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6) !important; }
html.w3d[data-theme="light"][data-pg="home"] .win, html.w3d[data-theme="light"][data-pg="home"] .panel { background: rgba(255, 255, 255, .3) !important; border: 1px solid rgba(255, 255, 255, .75) !important; box-shadow: 0 30px 80px -34px rgba(20, 30, 50, .28) !important; }
html.w3d[data-theme][data-pg="home"] .win .wb, html.w3d[data-theme][data-pg="home"] .pbar { background: transparent !important; border-bottom: 1px solid rgba(127, 127, 127, .18) !important; }
html.w3d[data-theme][data-pg="home"] .win img, html.w3d[data-theme][data-pg="home"] .panel .scr { opacity: .78; }
html.w3d[data-theme][data-pg="home"] .pwrap { background: none !important; }
html.w3d[data-theme="dark"][data-pg="home"] .phone { background: rgba(20, 22, 26, .3) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 30px 70px -24px rgba(0, 0, 0, .6) !important; }
html.w3d[data-theme="light"][data-pg="home"] .phone { background: rgba(255, 255, 255, .3) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 30px 70px -28px rgba(20, 30, 50, .3) !important; }
html.w3d[data-theme][data-pg="home"] .phone img { opacity: .82; }
@media (min-width: 861px) {
  html.w3d[data-theme][data-pg="home"] .win, html.w3d[data-theme][data-pg="home"] .panel, html.w3d[data-theme][data-pg="home"] .phone { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}

/* one spacing scale for the home page: sections 80 (phone) / 128 (wide) apart, heading → content 32 / 40 */
html[data-pg="home"] .sec { padding-top: 80px; padding-bottom: 0; }
html[data-pg="home"] #feat.sec { padding-top: 64px; }
html[data-pg="home"] .chips.sec { padding-top: 88px; }
html[data-pg="home"] #steps.sec { padding-top: 88px; }
html[data-pg="home"] .rvh { margin-bottom: 32px; }
html[data-pg="home"] .chead { margin-bottom: 24px; }
html[data-pg="home"] .steps .btns { margin-top: 32px; }
html[data-pg="home"] .cta { padding: 112px var(--gut) 96px; }
html[data-pg="home"] .dl { margin-top: 40px; }
html[data-pg="home"] .notes { margin-top: 24px; }
@media (min-width: 900px) {
  html[data-pg="home"] .sec { padding-top: 128px; padding-bottom: 0; }
  html[data-pg="home"] #feat.sec { padding-top: 112px; }
  html[data-pg="home"] .chips.sec { padding-top: 128px; }
  html[data-pg="home"] #steps.sec { padding-top: 128px; }
  html[data-pg="home"] .rvh { margin-bottom: 40px; }
  html[data-pg="home"] .steps .btns { margin-top: 40px; }
  html[data-pg="home"] .cta { padding: 144px 24px 128px; }
  html[data-pg="home"] .dl { margin-top: 48px; }
  html[data-pg="home"] .notes { margin-top: 32px; }
}

/* privacy policy page (same frame as About) */
.pol-date { margin-top: 8px; font-size: 13px; color: var(--g-text-3, #8a8f99); }
html[data-pg="about"] .policy { margin-bottom: 40px; }
html[data-pg="about"] .policy h2 { font-size: 18px; font-weight: 700; line-height: 1.5; margin: 0 0 10px; padding-top: 24px; border-top: 1px solid var(--g-line, rgba(127, 127, 127, .2)); color: var(--g-text) !important; }
html[data-pg="about"] .policy h2:first-child { padding-top: 0; border-top: 0; }
html[data-pg="about"] .policy p, html[data-pg="about"] .policy li { font-size: 16px; line-height: 1.85; color: var(--g-text-2) !important; }
html[data-pg="about"] .policy p { margin-bottom: 24px; }
html[data-pg="about"] .policy ul { margin: 0 0 24px; padding-inline-start: 20px; }
html[data-pg="about"] .policy li { margin-bottom: 8px; }
html[data-pg="about"] .policy strong { color: var(--g-text) !important; font-weight: 700; }
html[data-pg="about"] .policy a { color: var(--g-text) !important; text-decoration: underline; text-underline-offset: 3px; }
html[data-pg="about"] .policy.ar p, html[data-pg="about"] .policy.ar li { line-height: 1.95; }
/* about / privacy on phones: the brand name collided with the header buttons — the logo alone there */
@media (max-width: 480px) { html[data-pg="about"] .site-head .brand-name, html[data-pg="about"] .site-head .brand-tag { display: none !important; } }