/* The content sections — features, blog, help centre.
 *
 * Separate from legal.css on purpose. That file is still on the teal palette
 * the product left behind when it went forest, and repainting two shipped
 * legal pages is a change to make deliberately rather than as a side effect
 * of adding a blog. These tokens are the current ones, taken from the app's
 * globals.css — change them there first.
 *
 * The landing page keeps its inline styles: it is one art-directed page out
 * of a design handoff, and it is not trying to be a system. */
:root {
  --page: #fdfcf8;
  --chrome: #eaf4ee;
  --section: #eff2ec;
  --raised: #ffffff;
  --foreground: #16341f;
  --body-foreground: #3c4a41;
  --muted-foreground: #4f5c53;
  --primary: #1d4023;
  --primary-hover: #26502e;
  --primary-foreground: #f2f4ec;
  --hairline: #dce3d8;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--body-foreground);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Visible only once tabbed to — the first stop on every page, and the one
   thing a keyboard user needs that a mouse user never sees. */
.skip {
  position: absolute; left: -9999px;
  background: var(--primary); color: var(--primary-foreground);
  padding: 12px 20px; border-radius: 0 0 12px 0; z-index: 10;
}
.skip:focus { left: 0; top: 0; }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }

/* ---------------------------------------------------------------- chrome */
.bar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--chrome);
  padding: 16px clamp(20px, 5vw, 56px);
}
.brand { display: flex; align-items: center; margin-right: auto; }
.brand img { height: 38px; width: auto; display: block; }
.sections { display: flex; gap: clamp(14px, 2.4vw, 28px); flex-wrap: wrap; }
.sections a {
  font-size: 14px; font-weight: 500; color: var(--body-foreground);
  text-decoration: none; transition: color 0.3s var(--ease);
}
.sections a:hover { color: var(--foreground); }
.cta {
  background: var(--primary); color: var(--primary-foreground);
  border-radius: 999px; padding: 10px 20px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: background 0.4s var(--ease);
}
.cta:hover { background: var(--primary-hover); color: #fff; }

/* ------------------------------------------------------------------ page */
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 32px) 88px;
}
.crumbs {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted-foreground); margin-bottom: 26px;
}
.crumbs a { color: var(--muted-foreground); }
.crumbs span[aria-hidden] { opacity: 0.5; }

.kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 10px;
}
h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1;
  letter-spacing: -0.015em; font-weight: 600;
  color: var(--foreground); margin: 0 0 14px;
}
.standfirst { font-size: 19px; line-height: 1.5; color: var(--muted-foreground); margin: 0 0 34px; }
.meta { font-size: 13.5px; color: var(--muted-foreground); margin: 0 0 26px; }

.prose h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--foreground); margin: 44px 0 12px;
}
.prose h3 {
  font-size: 18px; font-weight: 650; color: var(--foreground); margin: 30px 0 8px;
}
.prose p, .prose li { font-size: 16.5px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 7px 0; }
.prose strong { color: var(--foreground); font-weight: 650; }
.prose code {
  background: var(--section); border-radius: 5px; padding: 2px 6px;
  font-size: 0.9em; font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.prose blockquote {
  margin: 26px 0; padding: 2px 0 2px 20px;
  border-left: 3px solid var(--hairline); color: var(--muted-foreground);
}
.prose hr { border: 0; height: 1px; background: var(--hairline); margin: 40px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; }
.prose thead th { background: var(--section); font-weight: 650; color: var(--foreground); }
.prose tbody tr + tr td { border-top: 1px solid var(--hairline); }

/* ----------------------------------------------------------- index cards */
.cards { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 12px; }
.card { background: var(--section); border-radius: 16px; }
.card a {
  display: block; padding: 20px 22px; text-decoration: none; color: inherit;
  border-radius: 16px; transition: background 0.3s var(--ease);
}
.card a:hover { background: var(--chrome); }
.card h3 {
  font-size: 17.5px; font-weight: 650; color: var(--foreground);
  margin: 0 0 5px; letter-spacing: -0.005em;
}
.card p { margin: 0; font-size: 15px; color: var(--muted-foreground); }
.card .meta { margin: 8px 0 0; font-size: 13px; }
.page > h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  color: var(--foreground); margin: 34px 0 12px;
}

/* ---------------------------------------------------------------- footer */
.foot { background: var(--chrome); padding: 44px clamp(20px, 5vw, 56px) 30px; }
.foot-in {
  max-width: 1100px; margin: 0 auto; display: flex; gap: 32px;
  flex-wrap: wrap; justify-content: space-between;
}
.foot p { margin: 0; font-size: 14.5px; color: var(--muted-foreground); }
.foot-brand {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  color: var(--foreground) !important; margin-bottom: 4px !important;
}
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; align-content: flex-start; }
.foot nav a { font-size: 14.5px; color: var(--body-foreground); text-decoration: none; }
.foot nav a:hover { color: var(--foreground); text-decoration: underline; }
.foot-fine {
  max-width: 1100px; margin: 30px auto 0; padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 13px; color: var(--muted-foreground);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}