/* Shared by the standalone pages (/store, /download). Tokens copied from the
   site's own stylesheet so these pages match the home page. */
:root { --background: 220 20% 97%; --foreground: 234 20% 12%; --card: 0 0% 100%; --border: 220 14% 88%;
        --muted: 220 14% 93%; --muted-foreground: 234 10% 45%; --primary: 220 80% 55%; --primary-foreground: 0 0% 100%;
        --accent: 262 80% 60%; --success: 142 65% 42%; }
.dark { --background: 234 20% 9%; --foreground: 0 0% 95%; --card: 234 18% 12%; --border: 234 15% 16%;
        --muted: 234 15% 16%; --muted-foreground: 234 10% 60%; --primary: 220 80% 60%; --accent: 262 80% 65%; --success: 142 65% 45%; }
* { box-sizing: border-box; }
body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
[lang="ar"] body { font-family: Tajawal, Inter, system-ui, sans-serif; }
a { color: inherit; }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid hsl(var(--border)); }
header.top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 19px; }
header.top .brand img { width: 36px; height: 36px; border-radius: 10px; border: 1px solid hsl(var(--border)); }
header.top .brand b { color: hsl(var(--primary)); font-weight: inherit; }
header.top nav { display: flex; align-items: center; gap: 14px; font-size: 14px; }
header.top nav a { text-decoration: none; color: hsl(var(--muted-foreground)); }
header.top nav a:hover, header.top nav a[aria-current] { color: hsl(var(--foreground)); }
.lang { background: none; border: 1px solid hsl(var(--border)); color: inherit; border-radius: 10px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
main { max-width: 1080px; margin: 0 auto; padding: 40px 16px 64px; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: 8px; }
h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; margin: 0 0 10px; text-wrap: balance; }
h2 { font-size: 22px; margin: 44px 0 6px; }
.lead { color: hsl(var(--muted-foreground)); font-size: 16px; line-height: 1.7; margin: 0 0 22px; max-width: 62ch; }
.note { color: hsl(var(--muted-foreground)); font-size: 13px; line-height: 1.6; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.card.featured { border-color: hsl(var(--primary) / .6); box-shadow: 0 0 0 1px hsl(var(--primary) / .35); }
.card h3 { margin: 0; font-size: 19px; }
.badge { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: hsl(var(--primary) / .14); color: hsl(var(--primary)); }
.soon { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
ul.features { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
ul.features li { display: flex; gap: 8px; }
ul.features li::before { content: "✓"; color: hsl(var(--success)); font-weight: 700; flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid hsl(var(--border));
       background: hsl(var(--card)); color: inherit; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.btn.primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.card .btn { margin-top: auto; }
.btn:focus-visible, .lang:focus-visible, a:focus-visible { outline: 3px solid hsl(var(--primary) / .45); outline-offset: 2px; }
.devices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.devices li { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid hsl(var(--border)); }
.devices li.soon { border-style: dashed; }
footer.bottom { border-top: 1px solid hsl(var(--border)); padding: 22px 16px; text-align: center; font-size: 13px; color: hsl(var(--muted-foreground)); }
footer.bottom a { margin: 0 8px; }
[hidden] { display: none !important; }
@media (max-width: 560px) { header.top nav a.hide-sm { display: none; } }

/* Ad spots: in the page flow, labelled, never taller than the content around them. */
.fg-ad { margin: 28px auto; max-width: 970px; min-height: 0; text-align: center; }
.fg-ad::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin-bottom: 6px; }

/* Front page: two choices. */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 24px; }
.choice { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 20px; text-decoration: none; color: inherit; border: 1px solid rgba(127,127,127,.25); transition: transform .15s ease, border-color .15s ease; }
.choice:hover { transform: translateY(-2px); border-color: rgba(99,102,241,.6); }
.choice h2 { margin: 0; font-size: 24px; }
.choice .go { margin-top: auto; font-weight: 700; }
.choice[aria-disabled="true"] { opacity: .6; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .choice { transition: none; } }