/* Shared shell for ranktruck.com/terms and /privacy — light dispatch board.
   NOTE: the canonical legal text lives in the product app
   (SEO APP/src/app/(legal)/). These pages mirror it; change both together.
   Legal text changes rarely and deliberately (the terms promise 30 days'
   notice), so the duplication is a maintenance note, not a landmine.
   Palette matches site/index.html and SEO APP/src/app/globals.css —
   change them together. Fonts are self-hosted in /fonts/ because the
   deployed CSP (font-src 'self') blocks any CDN. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/BarlowCondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/BarlowCondensed-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexMono-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/SourceSans3-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/SourceSans3-600.woff2') format('woff2'); }

/* ---------------------------------------------------------------------------
   Metric-matched fallbacks, so the page does not jump when the real faces land.
   Same six as index.html and tour/index.html - if those change, change these.

   local() only: it fetches nothing, so font-src 'self' is untouched and the
   CSP needs no change. The overrides make the fallback occupy the same space
   the real face will, which is the whole point - without them the reader
   starts a paragraph in Segoe UI or Courier New and it reflows under their
   thumb a moment later.

   Metrics were measured on Windows against the real faces; a Linux
   measurement of Arial Narrow and Segoe UI is not trustworthy.
   --------------------------------------------------------------------------- */
@font-face { font-family: 'Source Sans 3 Fallback'; font-style: normal; font-weight: 400; src: local('Segoe UI'), local('SegoeUI'); size-adjust: 89.28%; ascent-override: 114.69%; descent-override: 44.80%; line-gap-override: 0%; }
@font-face { font-family: 'Source Sans 3 Fallback'; font-style: normal; font-weight: 600; src: local('Segoe UI Semibold'), local('SegoeUI-Semibold'); size-adjust: 93.65%; ascent-override: 109.35%; descent-override: 42.71%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Condensed Fallback'; font-style: normal; font-weight: 600; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Liberation Sans Narrow Bold'), local('LiberationSansNarrow-Bold'); size-adjust: 89.67%; ascent-override: 111.52%; descent-override: 22.30%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Condensed Fallback'; font-style: normal; font-weight: 700; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Liberation Sans Narrow Bold'), local('LiberationSansNarrow-Bold'); size-adjust: 91.81%; ascent-override: 108.92%; descent-override: 21.78%; line-gap-override: 0%; }
@font-face { font-family: 'IBM Plex Mono Fallback'; font-style: normal; font-weight: 400; src: local('Courier New'), local('CourierNewPSMT'); size-adjust: 99.98%; ascent-override: 102.52%; descent-override: 27.50%; line-gap-override: 0%; }
@font-face { font-family: 'IBM Plex Mono Fallback'; font-style: normal; font-weight: 600; src: local('Courier New Bold'), local('CourierNewPS-BoldMT'); size-adjust: 99.98%; ascent-override: 102.52%; descent-override: 27.50%; line-gap-override: 0%; }
:root {
  color-scheme: light;
  --bg: #F7F5F2; --border: #DCD6CD;
  --ink: #1C1917; --ink-soft: #44403C; --meta: #57534E;
  --brand: #0F5F63; --link: #106D72; --link-hover: #0C5055;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.65;
}
::selection { background: var(--brand); color: var(--bg); }
/* The ring is ink: 2.4:1 against the teal it rings, so the 3px gap of page colour is what makes it visible. outline-offset:0 on a filled button deletes it. */
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
h1, h2 {
  font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', sans-serif;
  text-transform: uppercase; line-height: 1.1;
}
h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: .02em; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: .03em; margin-top: 30px; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
header { border-bottom: 1px solid var(--border); }
.top { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', sans-serif;
  font-weight: 700; font-size: 1.2rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.wordmark::before {
  content: ""; width: 26px; height: 19px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 26'%3E%3Crect x='13' y='4' width='21' height='13' rx='1.5' fill='none' stroke='%230F5F63' stroke-width='2'/%3E%3Cpath d='M2 17 v-6 a2 2 0 0 1 2-2 h5 l4 5 v3 z' fill='none' stroke='%230F5F63' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='20' r='3.5' fill='none' stroke='%230F5F63' stroke-width='2'/%3E%3Ccircle cx='26' cy='20' r='3.5' fill='none' stroke='%230F5F63' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.nav {
  display: flex; gap: 18px;
  font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', 'Courier New', monospace;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
}
.nav a { color: var(--link); text-decoration: none; padding: 8px 0; }
.nav a:hover { color: var(--link-hover); text-decoration: underline; }
main { padding: 44px 0 64px; }
main p, main li { color: var(--ink-soft); margin-top: 12px; }
main ul { padding-left: 22px; margin-top: 8px; }
.date {
  font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', 'Courier New', monospace;
  font-size: .8rem; letter-spacing: .06em; color: var(--meta);
}
footer {
  border-top: 1px solid var(--border); padding: 22px 0 40px;
  font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', 'Courier New', monospace;
  font-size: .78rem; letter-spacing: .06em; color: var(--meta);
}