/* getselly.co.il landing (founder §4.1). The app's colours and self-hosted fonts; nothing loaded from elsewhere. */
@font-face { font-family: "Karantina"; src: url("fonts/karantina-700-hebrew.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lalezar"; src: url("fonts/lalezar-400-arabic.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Hebrew"; src: url("fonts/plex-hebrew-400-hebrew.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/plex-arabic-400-arabic.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #e9ecea; --card: #ffffff; --ink: #1e2a25; --ink-2: #4a5a53; --green: #1f4d3a; --brand: #2f7a5b; --tag: #ffd60a;
  --font: "IBM Plex Sans Hebrew", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --head: "Karantina", "Lalezar", system-ui, sans-serif;
  color-scheme: light dark;
}
:root[lang="ar"] { --font: "IBM Plex Sans Arabic", "IBM Plex Sans Hebrew", system-ui, sans-serif; --head: "Lalezar", "Karantina", system-ui, sans-serif; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0a0d0c; --card: #141a17; --ink: #eef2f0; --ink-2: #b6c2bc; --green: #8fd1b2; }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--bg); color: var(--ink); font-family: var(--font); }
.card { inline-size: min(100%, 420px); background: var(--card); border-radius: 24px; padding: 28px 24px 24px; text-align: center;
  border-block-start: 6px solid var(--tag); box-shadow: 0 10px 30px rgb(18 50 36 / 0.12); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lang { align-self: stretch; display: flex; justify-content: center; gap: 8px; }
.lang button { font: inherit; font-size: 15px; min-block-size: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--green);
  background: transparent; color: var(--green); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--green); color: var(--card); }
.logo { inline-size: 96px; block-size: 96px; margin-block-start: 8px; }
h1 { margin: 0; font-family: var(--head); font-weight: 700; font-size: 64px; line-height: 1; color: var(--green); }
.soon { margin: 0; font-size: 26px; font-weight: 400; }
.phone { display: none; flex-direction: column; align-items: center; gap: 6px; margin-block-start: 8px; padding-block-start: 16px;
  border-block-start: 2px dashed var(--ink-2); inline-size: 100%; }
.phone p { margin: 0; color: var(--ink-2); }
.qr { inline-size: 168px; block-size: 168px; background: #ffffff; padding: 6px; border-radius: 12px; }
.url { font-size: 14px; letter-spacing: 0.02em; }
.contact { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.contact a { color: var(--green); }
/* the QR is for desktop visitors: on a phone, the phone is already here */
@media (min-width: 720px) { .phone { display: flex; } }
/* round RA: the public legal pages (make_legal.py) */
.legal-page { inline-size: min(100%, 760px); text-align: start; }
.legal-page .legal { margin-block: 24px; }
.legal-page h1 { font-size: 1.5rem; }
.legal-page h2 { font-size: 1.1rem; margin-block: 18px 6px; }
.legal-page ul { padding-inline-start: 1.2em; }
.legal-page .muted, .legal-nav { color: var(--muted, #5b6b64); font-size: .9rem; }