/*
 * The legal pages: the homepage's palette and fonts, set for long reading —
 * the body face only, a 70-character measure and generous line height. The
 * pages themselves are generated by app/scripts/build-legal-site.ts.
 */
@font-face { font-family: 'Karantina'; font-weight: 700; font-display: swap; src: url(../fonts/karantina-hebrew-700.woff2) format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Plex'; font-weight: 400; font-display: swap; src: url(../fonts/plex-hebrew-400.woff2) format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Plex'; font-weight: 400; font-display: swap; src: url(../fonts/plex-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Plex'; font-weight: 600; font-display: swap; src: url(../fonts/plex-hebrew-600.woff2) format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Plex'; font-weight: 600; font-display: swap; src: url(../fonts/plex-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

:root {
  --ink: #03070c;
  --panel: #07101a;
  --line: #13283b;
  --blue: #47b8ff;
  --silver: #dce5f0;
  --text: #b4c3d3;
  --quiet: #7d90a6;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--ink); color: var(--text); font: 400 18px/1.8 'Plex', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--silver); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 50; background: var(--silver); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }

.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.top img { height: 26px; width: auto; display: block; }
.home { color: var(--quiet); text-decoration: none; font-size: 16px; }
.home:hover { color: var(--silver); }

.doc { padding-block: 56px 96px; }
.doc > * { max-width: 70ch; }
/* A long web address must wrap on a phone instead of widening the page. */
.doc p { overflow-wrap: anywhere; }
h1 { font: 700 clamp(56px, 8vw, 96px)/.95 'Karantina', 'Plex', sans-serif; color: #fff; }
.updated { margin-top: 12px; font-size: 15px; color: var(--quiet); }
.intro { margin-top: 28px; font-size: 19px; color: var(--silver); }
h2 { margin-top: 48px; font-size: 21px; font-weight: 600; line-height: 1.4; color: #fff; }
.doc p + p { margin-top: 14px; }
h2 + p { margin-top: 12px; }

details { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); max-width: none; }
summary { cursor: pointer; padding: 14px 18px; color: var(--silver); font-weight: 600; }
pre { padding: 0 18px 18px; font: 13px/1.6 Consolas, 'Courier New', monospace; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; color: var(--text); }

footer { border-top: 1px solid var(--line); padding-block: 40px 56px; font-size: 15px; color: var(--quiet); }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 18px; }
footer a { color: var(--text); text-decoration: none; }
footer a:hover, footer a[aria-current] { color: var(--silver); text-decoration: underline; }

@media (max-width: 640px) { body { font-size: 17px; } .doc { padding-block: 40px 72px; } }