/* The styles every page shares. The logo's colors — #22d3ee, #8b5cf6, and #e040fb — are fixed; every other color is
   a neutral placeholder until the palette is approved. The typefaces are the desktop app's, served from the site.
   The pages are dark only: the wordmark's gradient has no version for a light background, and a light theme waits
   for the palette. */

/* Inter for text and JetBrains Mono for commands, the desktop app's typefaces: the same latin and latin-ext subsets of
   the variable fonts, served from /fonts/, each under the SIL Open Font License 1.1 in the LICENSE beside it. The
   system's fonts in the stacks below cover any other script, and stand in while a file loads. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter/inter-latin-opsz-normal.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter/inter-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --bg: #0b0f1a;
  --text: #e6e8ee;
  --muted: #9aa1b2;
  --rule: #262c3d;
  --accent: #22d3ee;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* The content's width, and the gutter beside it on a narrow screen */
  --gutter: max(1.5rem, calc((100% - 64rem) / 2));
}

* { box-sizing: border-box; }

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

code, kbd, pre, samp { font-family: var(--font-mono); }

a { color: inherit; text-underline-offset: 0.2em; }

a:hover, a:focus-visible { color: var(--accent); }

/* Off screen until it takes the focus */
.skip-link {
  position: absolute;
  top: -4rem;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--bg);
  border: 1px solid var(--rule);
}

.skip-link:focus { top: 1rem; }

/* The header stays at the top as the page scrolls, over a translucent copy of the background */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  padding: 0.875rem var(--gutter);
  background: rgb(11 15 26 / 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.site-header ul, .site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand img { display: block; }

/* The sections sit in the middle, between the brand and the call to action */
.site-sections { flex: 1; display: flex; justify-content: center; }

.site-sections a { color: var(--muted); text-decoration: none; }

.site-sections a:hover, .site-sections a:focus-visible { color: var(--text); }

/* The header's one call to action: a solid pill, the only filled control in the header */
.header-cta {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.header-cta:hover, .header-cta:focus-visible { background: var(--accent); color: var(--bg); }

main {
  flex: 1;
  padding: 2rem var(--gutter);
}

h1 {
  margin: 0 0 1rem;
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* The footer: what HarmFlow is, then the links in two columns */
.site-footer {
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 2rem;
  padding: 3rem var(--gutter);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer p { margin: 0; }

.footer-about { max-width: 22rem; }

.footer-title { margin-bottom: 0.75rem !important; color: var(--text); font-size: 0.8125rem; font-weight: 600; }

.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

.site-footer .footer-links ul { flex-direction: column; gap: 0.375rem; }

.site-footer a { text-decoration: none; }

/* The copyright and trademark notes, across both columns under a rule */
.footer-legal {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.375rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
}

.footer-legal a { text-decoration: underline; }

/* On a narrow screen the sections drop out of the header, which the footer still lists */
@media (max-width: 52rem) {
  .site-header { gap: 0.75rem 1rem; }
  .brand { flex: 1; }
  .site-sections { display: none; }
  .site-footer { grid-template-columns: 1fr; }
}

/* A page of running text — the privacy policy and the support page: one column narrow enough to read */
.prose { max-width: 44rem; }

.prose h2 { margin: 2.5rem 0 0.75rem; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.01em; }

.prose h3 { margin: 1.75rem 0 0.5rem; font-size: 1.0625rem; line-height: 1.4; }

.prose p, .prose ul { margin: 0 0 1rem; }

.prose ul { padding-left: 1.25rem; }

.prose li + li { margin-top: 0.5rem; }

.prose .updated { color: var(--muted); font-size: 0.875rem; }