/* The Terms and Privacy pages (terms/, privacy/): long reading, in the app's
   brand, as styles.css sets it for the landing page. */
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/OpenSauceSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/OpenSauceSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "League Spartan"; src: url("/fonts/LeagueSpartan-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --milk: #FFF9F5;
  --ink: #191717;
  --grey-dark: #605E5E;
  --pink: #C98292;
  --accent: #A25E6F;
  --cherry: #8B1E2D;
  --sans: "Open Sauce Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --title: "League Spartan", "Open Sauce Sans", system-ui, sans-serif;
  --gutter: 20px;
}
* { box-sizing: border-box; }
html { background: var(--milk); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--milk); line-height: 1.6; }
.bar { display: flex; align-items: center; min-height: 72px; padding: 0 var(--gutter); border-bottom: 2px solid var(--pink); }
.logo {
  display: block; width: 110px; height: 44px; background: var(--cherry);
  -webkit-mask: url("/assets/almari-logo.png") left center / contain no-repeat;
  mask: url("/assets/almari-logo.png") left center / contain no-repeat;
}
main { max-width: 720px; margin: 0 auto; padding: 32px var(--gutter) 64px; }
h1 { font-family: var(--title); font-size: clamp(32px, 8vw, 44px); line-height: 1.1; margin: 0 0 8px; }
.updated { margin: 0 0 24px; color: var(--grey-dark); font-size: 15px; }
.summary { background: #FFFFFF; border-radius: 16px; padding: 18px 20px; margin: 0 0 32px; }
.summary p { margin: 0 0 8px; }
.summary ul { margin: 0; padding-left: 20px; }
h2 { font-family: var(--title); font-size: 24px; line-height: 1.2; margin: 36px 0 8px; scroll-margin-top: 16px; }
h3 { font-size: 17px; margin: 20px 0 4px; }
p, li { font-size: 16px; }
ul, ol { padding-left: 22px; }
li { margin: 4px 0; }
a { color: var(--accent); font-weight: 700; }
a:hover, a:focus-visible { color: var(--cherry); }
footer { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter) 48px; color: var(--grey-dark); font-size: 14px; }
footer a { display: inline-block; min-height: 44px; line-height: 44px; margin-right: 16px; }