/* Shared by every page that is not the homepage: About, Careers, Privacy and
 * Terms.
 *
 * A file rather than a fifth copy of the inline block in index.html. The
 * homepage keeps its CSS inline because it is one page with a lot of it and no
 * build step to bundle anything; these are documents, they need a fraction of
 * it, and pages that must look identical to each other are exactly the case a
 * stylesheet is for. */

/* Colours come from brand.generated.css, which every page links before this
   one. Redefining them here is how the homepage drifted from the product in
   the first place. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ── Chrome ────────────────────────────────────────────────────────────────
   Deliberately not the homepage's nav. That one has a dropdown, a burger and
   three calls to action, all of which would have to be kept in step by hand
   across three files. Somebody reading a privacy policy wants one thing from
   the header — the way back. */
header.bar { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
header.bar .wrap { display: flex; align-items: center; gap: 10px; height: 64px; }
header.bar a.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 17px; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
header.bar img { width: 28px; height: 28px; border-radius: 8px; }
header.bar .back { margin-left: auto; font-size: 13.5px; font-weight: 600; }

main { padding: 56px 0 72px; }
h1 { font-size: 38px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px; }
.updated { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 34px; }
.lede { font-size: 17px; color: var(--ink-soft); margin-bottom: 34px; }

h2 {
  font-size: 21px; font-weight: 800; letter-spacing: -.02em;
  margin: 40px 0 12px; padding-top: 26px; border-top: 1px solid var(--line);
}
h3 { font-size: 15.5px; font-weight: 800; margin: 22px 0 6px; }
p { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 14px; }
ul, ol { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 14px 22px; }
li { margin-bottom: 7px; }
strong { color: var(--ink); font-weight: 700; }

/* Wide on a laptop, scrollable on a phone — the page body must never be the
   thing that scrolls sideways. */
.table-scroll { overflow-x: auto; margin-bottom: 16px; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
td { color: var(--ink-soft); }

.note {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 0 12px 12px 0; padding: 16px 18px; margin: 20px 0;
}
.note p:last-child { margin-bottom: 0; }

footer { border-top: 1px solid var(--line); padding: 28px 0 40px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
footer a { font-weight: 600; }

@media (max-width: 640px) {
  h1 { font-size: 30px; }
  main { padding: 40px 0 56px; }
}

/* ── Things the prose pages need ──────────────────────────────────────────── */

.principle { margin-bottom: 26px; }
.principle b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }

/* Used where a page has to say something plainly rather than dress it up —
   "there are no vacancies" being the case it was written for. Stating that
   clearly is worth more to somebody than a page that implies otherwise. */
.panel {
  border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; margin: 24px 0; background: var(--bg-soft);
}
.panel h3 { margin-top: 0; }
.panel p:last-child { margin-bottom: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 12px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.btn:hover { background: var(--bg-soft); color: var(--ink); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  /* Near-black, not white. See brand.generated.css. */
  color: var(--on-primary); border: none;
}
.btn-primary:hover { opacity: .92; color: var(--on-primary); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }

/* ── Keyboard access ──────────────────────────────────────────────────────
   Matches the homepage. Off-screen until focused, so it costs a mouse user
   nothing and saves everybody else tabbing through the header on every page. */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: top .15s ease;
}
.skip:focus { top: 8px; color: #fff; }

/* :focus-visible, not :focus — the keyboard gets a ring, a mouse click does
   not. The browser default is invisible against the gold, so this is drawn. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Prose at 15.5px is comfortable on a laptop and tight on a phone held at
   arm's length. 16px is the floor a body text should not go under on mobile. */
@media (max-width: 640px) {
  p, ul, ol, .principle b { font-size: 16px; }
  td, th { font-size: 14.5px; }
}