/* The app's clean-air look for every page that is not a homepage: sky-blue head with a sun and clouds that melt into the
   page, Maya as the mark, Rubik for headings. Loaded last, so it wins over each page's own tokens. Orange stays with SOS. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&family=Assistant:wght@400;600;700;800&display=swap');

:root {
  --air: #ffffff;
  --sky: #eef5fd;
  --ink: #0f2235;
  --inksoft: #3d4e60;
  --ink-soft: #3d4e60;
  --ember: #2471d8;
  --emberdeep: #1a5cb4;
  --ember-deep: #1a5cb4;
  --line: #dce8f5;
  --bg: #ffffff;
  --panel: #ffffff;
  --muted: #5b6b7b;
  --teal: #2471d8;
  --teal-ink: #1f6fc4;
  --gold: #1f6fc4;
  --calm-bg: #ffffff;
  --calm-card: #ffffff;
  --calm-ink: #0f2235;
  --calm-soft: #3d4e60;
  color-scheme: light;
}

html { background: #fff; }
body { background: #fff; color: #0f2235; font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
html[lang="he"] body, [dir="rtl"] { font-family: 'Assistant', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
h1, h2, h3, .brand, .brand-name { font-family: 'Rubik', 'Assistant', system-ui, sans-serif; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }
a { color: #1f6fc4; }

/* The sky over the page. */
header.site {
  position: relative;
  top: auto;
  z-index: 10;
  overflow: hidden;
  border: 0;
  background: #2471d8;
  padding-bottom: 34px;
}
header.site::before {
  content: '';
  position: absolute;
  top: -70px;
  inset-inline-end: -40px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #ffd86b;
}
header.site::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='34' viewBox='0 0 400 34'%3E%3Cg fill='%23fff' opacity='.35'%3E%3Ccircle cx='30' cy='22' r='17'/%3E%3Ccircle cx='150' cy='18' r='21'/%3E%3Ccircle cx='290' cy='20' r='19'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='0' cy='30' r='15'/%3E%3Ccircle cx='40' cy='28' r='12'/%3E%3Ccircle cx='85' cy='30' r='16'/%3E%3Ccircle cx='135' cy='26' r='18'/%3E%3Ccircle cx='185' cy='31' r='11'/%3E%3Ccircle cx='225' cy='28' r='16'/%3E%3Ccircle cx='280' cy='31' r='13'/%3E%3Ccircle cx='330' cy='26' r='18'/%3E%3Ccircle cx='380' cy='30' r='14'/%3E%3Ccircle cx='400' cy='30' r='15'/%3E%3Crect y='28' width='400' height='6'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left;
}
header.site .wrap { position: relative; z-index: 1; }
header.site .brand { color: #fff; }
header.site .brand span:not(.brand-dot) { color: #ffd86b; }
header.site nav.top a { color: #fff; opacity: .92; }
header.site nav.top a:hover { color: #fff; opacity: 1; }

/* Maya is the mark. */
.brand-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2471d8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -6 158 132'%3E%3Cpath d='M86 34 C80 18 94 6 108 13 C117 18 112 30 103 27' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M34 108 C16 108 10 90 22 82 C17 64 34 54 48 60 C52 38 76 28 92 40 C104 30 128 38 128 58 C142 60 148 80 136 88 C144 102 130 112 116 108 Z' fill='%23fff'/%3E%3Cellipse cx='66' cy='76' rx='5' ry='6.6' fill='%230F2235'/%3E%3Cellipse cx='96' cy='76' rx='5' ry='6.6' fill='%230F2235'/%3E%3Cpath d='M73 87 Q81 95 89 87' fill='none' stroke='%230F2235' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 84% no-repeat;
}
.brand-dot::after { display: none; }
header.site .brand-dot { background-color: transparent; width: 34px; height: 34px; background-size: 100%; }

/* Quiet, consistent pieces. */
.eyebrow { color: #1f6fc4; }
.callout { background: #eef5fd; border-color: #dce8f5; }
.cta-card { background: #2471d8; border: 0; color: #fff; }
.cta-card h2, .cta-card h3 { color: #fff; }
.cta-card p { color: #fff; opacity: .94; }
.cta-card a { background: #fff; color: #0f2235; }
footer.site { background: #1b2e4a; color: #c4d3e2; border: 0; }
footer.site p, footer.site small { color: #c4d3e2; }
footer.site a { color: #fff; }

@media print {
  header.site { background: none; padding: 0; }
  header.site::before, header.site::after { display: none; }
  header.site .brand, header.site nav.top a { color: #000; }
}

/* The links stay clear of the sun; pages without a dot still get Maya. */
header.site::before { top: -56px; inset-inline-end: -44px; width: 124px; height: 124px; }
header.site nav.top { padding-inline-end: 60px; }
header.site .brand { display: inline-flex; align-items: center; gap: 8px; }
header.site .brand:not(:has(.brand-dot))::before {
  content: '';
  width: 34px;
  height: 34px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -6 158 132'%3E%3Cpath d='M86 34 C80 18 94 6 108 13 C117 18 112 30 103 27' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M34 108 C16 108 10 90 22 82 C17 64 34 54 48 60 C52 38 76 28 92 40 C104 30 128 38 128 58 C142 60 148 80 136 88 C144 102 130 112 116 108 Z' fill='%23fff'/%3E%3Cellipse cx='66' cy='76' rx='5' ry='6.6' fill='%230F2235'/%3E%3Cellipse cx='96' cy='76' rx='5' ry='6.6' fill='%230F2235'/%3E%3Cpath d='M73 87 Q81 95 89 87' fill='none' stroke='%230F2235' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

@media (max-width: 560px) {
  header.site::before { top: -44px; inset-inline-end: -40px; width: 96px; height: 96px; }
  header.site nav.top { padding-inline-end: 26px; white-space: nowrap; }
  header.site nav.top a { font-size: 13px; margin-left: 12px; }
  [dir="rtl"] header.site nav.top a { margin-left: 0; margin-right: 12px; }
}

/* Phones: the slim page head has no room for a sun beside the links, so the sun stays on bigger screens and on the homepage. */
@media (max-width: 640px) {
  header.site::before { display: none; }
  header.site nav.top { padding-inline-end: 0; }
  header.site .wrap { flex-wrap: wrap; height: auto; min-height: 60px; row-gap: 2px; padding-block: 8px; }
  header.site .brand { font-size: 16px; }
  header.site nav.top a { font-size: 13px; margin-left: 12px; }
  [dir="rtl"] header.site nav.top a { margin-left: 0; margin-right: 12px; }
}