/* Shared shell for the scrubstalk.com static pages. Same palette and type as web/pay so the
   pages the app links to do not look like a different product. Bilingual: every page ships the
   Arabic and English text together and flips direction with the language toggle, because the
   audience is Saudi practitioners who read both and the store listings need both. */
:root {
  --p: #2E9C86;
  --pd: #1F7A69;
  --ink: #183B3A;
  --surface: #F5F8F6;
  --line: #DDE8E3;
  --muted: #5b6b6a;
}
* { box-sizing: border-box }
body {
  margin: 0;
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.6;
}
header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
header img { width: 30px; height: 30px; border-radius: 8px }
header b { font-size: 18px; font-weight: 800 }
header .spacer { flex: 1 }
/* The language toggle is a <button> (keyboard-reachable) wired up in _shared.js; no inline
   onclick, so the CSP in _headers can keep script-src at 'self'. */
header .lang {
  font: inherit;
  font-size: 14px;
  color: var(--pd);
  background: #fff;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
main { max-width: 760px; margin: 28px auto 64px; padding: 0 16px }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 16px;
}
h1 { font-size: 24px; margin: 0 0 4px }
h2 { font-size: 17px; margin: 26px 0 8px; color: var(--pd) }
h2:first-of-type { margin-top: 8px }
p, li { font-size: 15px }
ul { padding-inline-start: 20px }
.muted { color: var(--muted); font-size: 14px }
a { color: var(--pd) }
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px }
th, td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top }
th { color: var(--pd); font-weight: 700 }
footer { text-align: center; padding: 24px 16px 40px; font-size: 13px; color: var(--muted) }
footer a { margin: 0 8px }
.updated { font-size: 13px; color: var(--muted); margin-top: 0 }
/* Only one language is visible at a time; the toggle swaps which. */
[data-lang="en"] [lang="ar"], [data-lang="ar"] [lang="en"] { display: none }

/* Page-specific rules live here rather than in a <style> block on each page so that _headers can
   serve style-src 'self' without 'unsafe-inline' and no hash has to be recomputed on every edit. */

/* index.html */
.hero { text-align: center; padding: 12px 0 4px }
.hero img { width: 68px; height: 68px; border-radius: 16px }
.hero h1 { font-size: 30px; margin: 14px 0 6px }
.hero p { font-size: 17px; color: var(--muted); margin: 0 auto; max-width: 46ch }
.free { display: inline-block; background: #E8F5F1; color: var(--pd); border-radius: 999px;
        padding: 6px 14px; font-size: 14px; font-weight: 700; margin-top: 14px }
.cta-row { margin-top: 18px }
.cta { display: inline-block; background: var(--p); color: #fff; text-decoration: none;
       border-radius: 10px; padding: 12px 22px; font-size: 15px; font-weight: 700 }
.cta:hover, .cta:focus { background: var(--pd) }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px }
.feat h3 { font-size: 15px; margin: 0 0 4px; color: var(--pd) }
.feat p { font-size: 14px; margin: 0; color: var(--muted) }
.steps { counter-reset: s; padding: 0; list-style: none }
.steps li { counter-increment: s; position: relative; padding-inline-start: 34px; margin-bottom: 12px }
.steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 999px; background: var(--p); color: #fff;
  font-size: 13px; font-weight: 700; display: grid; place-items: center }

/* privacy/ and terms/ */
ol { padding-inline-start: 20px }
.site-note-rule { border: 0; border-top: 1px solid var(--line); margin: 32px 0 18px }
.site-note { font-size: 14px; color: var(--muted) }
.site-note h2 { font-size: 15px; margin: 0 0 6px }