/* Shared by index.html, terms.html and privacy.html. A neutral palette on
   purpose: this is the platform site, not any one tenant, so it doesn't reuse
   a tenant's brand colors. Mobile-first. Theme comes from theme.js
   ([data-theme] on <html>); the media query only covers JS being off. */
/* Geist (SIL Open Font License, see fonts/Geist-OFL-LICENSE.txt), self-hosted
   so visitors' browsers don't contact a third-party font service. Variable
   weight axis: light through extra bold from one file. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
  --bg: #f3f4f6;
  --text: #15181e;
  --muted: #5a6270;
  --link: #1f4fd8;
  --rule: #d6dae1;
  --hover: #e6e9ee;
  /* Footer wordmark: the lightest grey that still meets AAA (7:1) on --bg. */
  --wordmark-quiet: #505358;
  --focus: #1f4fd8;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101216;
  --text: #e6e8ec;
  --muted: #9ba3b1;
  --link: #8fb0ff;
  --rule: #2a2e36;
  --hover: #1d2128;
  --focus: #8fb0ff;
  --wordmark-quiet: #9d9fa3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #101216;
    --text: #e6e8ec;
    --muted: #9ba3b1;
    --link: #8fb0ff;
    --rule: #2a2e36;
    --hover: #1d2128;
    --focus: #8fb0ff;
    --wordmark-quiet: #9d9fa3;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 350 1rem/1.6 var(--font-sans);
}

/* Links: underline at 40% opacity, fading to fully opaque on hover/focus. */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.2s ease;
}
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

/* Header: site name on the left (legal pages), theme toggle on the right */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  padding: 0 0.5rem 0 1rem;
}
/* Legal pages: header lines up with the reading column (same width as main and
   footer) so the wordmark meets the title's left edge. The right padding is
   small because the 44px toggle's 18px icon already sits 13px inside it. */
.site-header-contained { width: 100%; max-width: 42rem; margin: 0 auto; padding-right: 0.1875rem; }
.site-name { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 800; text-decoration-color: transparent; }
.site-name:hover { text-decoration-color: currentColor; }

.theme-toggle {
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.theme-toggle:hover { background: var(--hover); color: var(--text); }
.theme-toggle svg { width: 18px; height: 18px; }
/* Show the icon for the theme you'd switch to */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

main {
  flex: 1;
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
}

h1 { margin: 0 0 0.25rem; font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
h2 { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 1rem; }

.effective { margin-bottom: 2rem; color: var(--muted); font-size: 0.9375rem; }

/* Home: wordmark + Beta tag, then one line */
.home { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.home { --wordmark-size: 2rem; }
.home h1 { display: inline-flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; font-size: var(--wordmark-size); font-weight: 800; }
.home p { margin: 0; font-size: 1.125rem; }
/* A little extra side whitespace (on top of main's 1rem) so the line doesn't
   run edge to edge. 17px keeps it on two lines at 375px; at 18px any extra
   padding pushes it to three. */
.home .lede { max-width: 25rem; margin-bottom: 1.5rem; padding-inline: 0.5rem; font-size: 1.0625rem; }
.beta-tag {
  /* Centered on the wordmark's lowercase letters, not its line box: the line
     box's middle sits above the x-height's middle, so the tag is nudged down by
     a share of the wordmark size (measured ~7.5% at 32px and 40px). */
  position: relative;
  top: calc(var(--wordmark-size) * 0.075);
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--muted);
  border-radius: 999px;
  background: var(--rule);
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Legal documents */
.sections { list-style: none; margin: 0; padding: 0; }
.sections > li { padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.sections > li:last-child { padding-bottom: 0; }
.sections p:last-child { margin-bottom: 0; }
.num { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.875rem; }

footer { border-top: 1px solid var(--rule); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  max-width: 42rem;
  margin: 0 auto;
  padding: 0.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}
footer nav { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
/* 44px touch targets */
footer a, footer span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; }
/* Footer links read as plain footer text; hover/focus brings up the link look. */
footer a {
  color: inherit;
  text-decoration-color: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
footer a:hover { color: var(--text); text-decoration-color: currentColor; }
footer a[aria-current="page"] { font-weight: 500; }
footer span { color: var(--wordmark-quiet); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  a, footer a, .theme-toggle { transition: none; }
}

@media (min-width: 768px) {
  .site-header { padding: 0 1rem 0 1.5rem; }
  .site-header-contained { padding: 0 0.1875rem 0 1rem; }
  main { padding-top: 2.5rem; }
  h1 { font-size: 2.125rem; }
  .home { --wordmark-size: 2.5rem; }
}

/* Consent banner (injected by analytics.js): a small non-blocking bar. Both
   buttons share one style so neither choice is nudged. */
html.has-consent-banner body { padding-bottom: var(--consent-h, 0); }
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  font-size: 0.9375rem;
}
.consent p { flex: 1 1 18rem; margin: 0; }
/* Phones: the two buttons share the full width (easy thumb targets, neither
   one favored); from 768px they sit at the right of the bar. */
.consent-actions { display: flex; flex: 1 1 100%; gap: 0.5rem; }
.consent-actions button { flex: 1; }
.consent button, .cookie-settings {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--muted);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s;
}
.consent button:hover { background: var(--hover); }
/* Footer "Cookie settings": reads as a footer link, like Terms and Privacy. */
.cookie-settings {
  border: none;
  border-radius: 0;
  padding: 0 0.5rem;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.cookie-settings:hover { background: transparent; color: var(--text); text-decoration-color: currentColor; }
@media (min-width: 768px) {
  .consent-actions { flex: 0 0 auto; }
  .consent-actions button { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .consent button, .cookie-settings { transition: none; }
}