/* Shared by every Smart Pro page: fonts, design tokens and element defaults.
   Colours come from the Smart Pro logo: near-black and its deep teal (tools/brand/). */
/* One family for everything: Cairo (variable, every weight in one file per script; Arabic + Latin subsets,
   so digits and punctuation in Arabic text come from the same font, not a system fallback). */
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/cairo-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/cairo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{color-scheme:light;--navy:#0E1312;--navy-deep:#070B0A;--primary:#05564A;--primary-mid:#076A5B;--accent:#066B5D;--bright:#0B8574;--sky:#0EA5E9;--paper:#fff;--cool:#F7FAF9;--surface:#E5F2EF;--border:#DFE7E5;--text:#111816;--muted:#4A5653;--green:#059669;--red:#DC2626;--arabic:'Cairo',Tahoma,Arial,sans-serif;--english:'Cairo','Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}
html{background:#fff;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;color:var(--text);font-family:var(--english);-webkit-font-smoothing:antialiased;border-top:3px solid var(--primary)}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* Launch screen, shown until the app's first screen replaces it (also matches the install splash colour). */
.splash{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;background:#F3F6F5}
.splash img{width:150px;height:auto}
/* The installed app already gets the system launch screen with the logo; don't show it a second time. */
[data-theme=dark] .splash{background:#070B0A}
.splash__dark,[data-theme=dark] .splash__light{display:none}
[data-theme=dark] .splash__dark{display:block}
.installed .splash img{display:none}
@media (display-mode: standalone),(display-mode: fullscreen){.splash img{display:none}}
/* Each page's readable copy for search engines and link previews (tools/build-pages.mjs). It sits under the
   launch screen and the app replaces it on start; without JavaScript it is the page. */
.page-copy{max-width:720px;margin:0 auto;padding:24px 16px 40px;font:500 16px/1.7 var(--arabic);color:var(--text)}
.page-copy h1{margin:0 0 8px;font-size:26px;line-height:1.3}
.page-copy h2{margin:24px 0 8px;font-size:19px}
.page-copy a{color:var(--primary)}
.page-copy ul{padding-inline-start:20px}
.page-copy nav{margin-bottom:16px;font-size:14px}