:root { color-scheme: light; --shell: rgb(185, 207, 246); --main: rgb(214, 228, 255); --ink: #303c59; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; color: var(--ink); background: var(--main); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.site-header, .site-footer { background: var(--shell); }
.header-inner { max-width: 1280px; margin: auto; padding: 18px 48px; }
.brand { display: flex; align-items: center; gap: .18em; font-size: 100px; mix-blend-mode: multiply; }
.brand img { position: absolute; max-width: none; }
.blocks { display: block; position: relative; overflow: hidden; width: .55em; height: 1em; flex: none; }
.blocks img { width: 1.265em; left: -.06em; top: -.05em; }
.wordmark { display: block; position: relative; overflow: hidden; width: 1.65em; height: .4em; flex: none; }
.wordmark img { width: 3.59em; left: -1.78em; top: -2.33em; }
.brand-small { font-size: 60px; width: fit-content; text-decoration: none; }
main { flex: 1; display: grid; place-items: center; padding: 64px 24px 48px; }
.hero { width: 100%; max-width: 820px; text-align: center; }
.brand-hero { justify-content: center; font-size: clamp(130px, 19vw, 230px); margin: 0 auto 34px; }
h1 { margin: 0 0 22px; font-size: clamp(30px, 4.4vw, 48px); font-weight: 650; line-height: 1.18; letter-spacing: -.035em; }
.intro { max-width: 600px; margin: 0 auto; font-size: 18px; line-height: 1.75; color: #485773; text-wrap: pretty; }
.downloads { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.store { display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 9px; transition: transform .15s ease; }
.store:hover { transform: translateY(-3px); }
.store img { display: block; }
.apple img { width: 180px; height: 60px; }
.google { width: 202px; height: 60px; }
.google img { width: 232px; height: 90px; object-fit: contain; }
a:focus-visible, button:focus-visible { outline: 3px solid #254c8e; outline-offset: 6px; }
.download-status { font-size: 14px; line-height: 1.5; min-height: 21px; margin: 18px 0 0; }
.site-footer { padding: 30px 24px 23px; text-align: center; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 38px; }
.site-footer a { color: var(--ink); font-size: 14px; line-height: 24px; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer p { font-size: 12px; color: #4b5b76; margin: 20px 0 0; }
@media (max-width: 540px) {
 .header-inner { padding: 15px 24px; }
 .brand-small { font-size: 52px; }
 main { padding: 52px 24px 36px; }
 .brand-hero { font-size: clamp(112px, 30vw, 150px); margin-bottom: 32px; }
 .intro { font-size: 16px; line-height: 1.7; max-width: 350px; }
 .downloads { gap: 18px; flex-direction: column; margin-top: 28px; }
 .site-footer nav { gap: 10px 24px; max-width: 310px; margin: auto; }
 .site-footer a { min-height: 32px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .store { transition: none; } }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; direction: ltr; }
.brand { direction: ltr; }
.language-toggle { min-height: 44px; padding: 10px 18px; border: 0; border-radius: 24px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.language-toggle:hover { background: rgba(255, 255, 255, .25); }
html[lang="he"] h1 { letter-spacing: 0; }

/* Shared typography and information-page layout. Inter uses Heebo for Hebrew glyphs. */
body { font-family: 'Inter', 'Heebo', sans-serif; }
.hero h1 { font-family: 'Nunito', 'Varela Round', sans-serif; font-weight: 500; color: #4385F4; letter-spacing: -.02em; }
html[lang="he"] .hero h1 { font-family: 'Varela Round', sans-serif; font-weight: 400; letter-spacing: 0; }
[hidden] { display: none !important; }
.information-main { display: block; width: 100%; padding: 56px 24px 72px; }
.information-content { max-width: 820px; margin: 0 auto; font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.information-content h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.35; margin-bottom: 24px; }
.information-content h2 { font-size: 22px; line-height: 1.4; margin: 32px 0 12px; }
.information-content p { margin: 0 0 16px; }
.information-content ul, .information-content ol { padding-inline-start: 26px; margin: 0 0 20px; }
.information-content a { color: #284e85; text-underline-offset: 3px; }
.information-content .muted { color: #485773; }
.site-footer > p { direction: ltr; }
@media (max-width: 540px) { .information-main { padding: 36px 24px 48px; } }