/* Shared across every page: reset, tokens, footer.
   Colours sampled from reference/screenshots. */

:root {
  --blue:        #2563eb;
  --blue-dark:   #1d4ed8;
  --blue-icon:   #3b82f6;
  --blue-shadow: rgba(191, 219, 254, .55);

  --ink:         #1b1b1b;
  --slate-700:   #334155;
  --slate-400:   #94a3b8;
  --slate-200:   rgba(226, 232, 240, .5);
  --muted:       #a7afbb;
  --rule:        #ebeef2;
  --red:         #ef4444;
  --green:       #10b981;

  --page-bg:     #f4f8fb;

  /* Montserrat for headings only; everything else stays on the system stack,
     which is what the original Tailwind form rendered in. */
  --font-head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, "Apple Color Emoji", sans-serif;

  --container: 940px;   /* footer width, matches the reference */
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
}

img, svg { display: block; max-width: 100%; }

h1, h2, p { margin: 0; }

a { color: inherit; text-decoration: none; }

/* the hand-drawn hook arrow, used on the lander and the feed pages */
.arrow-hook { flex: none; color: var(--blue); }

/* ------------------------------------------------------------------ footer */

.site-footer {
  padding: 32px 20px 48px;
}

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-logo { width: 300px; height: auto; }

.footer-links {
  display: flex;
  gap: 28px;
  font-size: 15px;
  color: var(--muted);
}

.footer-links a:hover { color: var(--slate-700); }

.footer-rule {
  height: 1px;
  margin: 22px 0 26px;
  background: var(--rule);
}

.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  color: var(--muted);
}

.footer-copyright { font-size: 16px; }

.footer-disclaimer {
  max-width: 527px;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 767px) {
  .site-footer { padding: 28px 20px 40px; text-align: center; }
  .footer-top { flex-direction: column; gap: 20px; }
  .footer-logo { width: 240px; margin: 0 auto; }
  .footer-links { gap: 22px; justify-content: center; flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 18px; }
  .footer-disclaimer { max-width: none; }
}