/* FamFit — long-form pages (privacy, support).
   Colours and fonts come from tokens.css (generated from lib/palette.ts, the
   same palette the app uses); this file only lays out a readable column.
   The home page has its own layout in home.css. */

:root {
  --max: 34rem;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0 20px 64px;
  background: var(--ground);
  color: var(--text);
  font: 17px/1.6 var(--font-sans);
  display: flex;
  flex-direction: column;
  align-items: center;
}

main,
header,
footer {
  width: 100%;
  max-width: var(--max);
}

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

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

h1 {
  font-size: clamp(2.1rem, 8.4vw, 3.05rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 20px 0 14px;
  text-wrap: balance;
}

section {
  margin-top: 56px;
}

h2 {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 18px;
}

/* --- site header ---
   People arrive on /privacy and /support straight from the App Store listing
   or the app's Settings screen, never via the homepage. Without this they land
   on an unbranded wall of text with no way back into the site. */
.site-head {
  padding: 24px 0 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand:hover {
  color: var(--focus);
}

.brand-mark {
  display: inline-block;
  width: 1.45em;
  height: auto;
  vertical-align: -0.3em;
}

/* --- long-form --- */
.prose {
  padding-top: 36px;
}

.prose h1 {
  font-size: 1.8rem;
  text-align: left;
  margin-bottom: 6px;
}

.prose h2 {
  font-size: 1.06rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin: 34px 0 10px;
}

.prose p,
.prose li {
  color: var(--text-secondary);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 0.92rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.prose th {
  color: var(--text);
}

/* Two columns inside a 375px phone leaves ~90px each, which turns every cell
   into a four-line stack of two-word lines. Below this width the rows become
   blocks — term, then explanation — which is what the table was saying anyway.
   The header row carries no information once stacked, so it goes. */
@media (max-width: 30rem) {
  .prose table,
  .prose tbody,
  .prose tr,
  .prose td {
    display: block;
    width: 100%;
  }

  .prose thead {
    display: none;
  }

  .prose tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .prose td {
    border: 0;
    padding: 0;
  }

  .prose td:first-child {
    color: var(--text);
    margin-bottom: 3px;
  }
}

.updated {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0;
}

/* --- footer --- */
footer {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  font-size: 0.9rem;
}

footer a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 0;
}

footer a:hover {
  color: var(--text);
}

/* A short rise as the page settles; nothing moves more than 12px. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  main section {
    animation: rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.24s both;
  }
}