/*
 * Styles for the static pages under /privacy and /support.
 *
 * A separate file rather than the app bundle's CSS, and deliberately not imported by it. Vite
 * fingerprints `dist/assets/*.css`, so a hand-written page linking that would break on the next
 * build; anything in `public/` keeps its name and can be linked forever.
 *
 * Those pages are plain HTML on purpose. They are legal and support text that Apple's reviewer,
 * crawlers and people with JavaScript off all need to read, and none of that should depend on a
 * React bundle booting.
 *
 * Tokens are copied from the app's light theme rather than shared. Two files agreeing by copy is the
 * right trade when the alternative is coupling static pages to a build step.
 */

:root {
  --paper: #ffffff;
  --paper-2: #f7f7f7;
  --line: #dededf;
  --line-w: 1.5px;
  --ink: #222222;
  --ink-2: #717171;
  --ink-3: #767676;
  --brand: #ff385c;
  --brand-soft: #fff0f3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 1.25rem 5rem;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.7 'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 42rem;
  margin: 0 auto;
}

header {
  padding: 2.5rem 0 2rem;
  border-bottom: var(--line-w) solid var(--line);
  margin-bottom: 2.25rem;
}

/* The mark plus the name, matching the site masthead. The square is drawn in CSS rather than
   loading the SVG, so these pages need no second request to show their own logo. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

/* The brand dot after the name, matching the app's own wordmark and the site masthead. */
.wordmark::after {
  content: '';
  /* A pseudo-element on a flex container IS a flex item, so it can ask for the baseline on its own —
     which keeps `align-items: center` for the HG square beside it. */
  align-self: flex-end;
  width: 0.286em;
  height: 0.286em;
  margin-left: 0.143em;
  margin-bottom: 0.25em;
  border-radius: 999px;
  background: var(--brand);
}

.wordmark i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2.2px solid var(--brand);
  border-radius: 7px;
  color: var(--brand);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1 {
  margin: 1.5rem 0 0.4rem;
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 {
  margin: 2.25rem 0 0.6rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

p,
li {
  color: var(--ink-2);
}

ul {
  padding-left: 1.15rem;
}

li {
  margin: 0.35rem 0;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

a {
  color: var(--brand);
}

.updated {
  color: var(--ink-3);
  font-size: 0.8125rem;
}

/* The one thing on the page that must not be skimmed. */
.note {
  margin: 1.75rem 0;
  padding: 1.1rem 1.3rem;
  border-radius: 0.85rem;
  background: var(--brand-soft);
}

.note p {
  margin: 0;
}

/* A quieter variant, for context rather than warnings. */
.note.plain {
  background: var(--paper-2);
}

footer {
  max-width: 42rem;
  margin: 3.5rem auto 0;
  padding-top: 1.25rem;
  border-top: var(--line-w) solid var(--line);
  color: var(--ink-3);
  font-size: 0.8125rem;
}

footer a {
  margin-right: 1.15rem;
}