/* Shared by terms.html, privacy.html and 404.html. The home page keeps its own inline styles;
   the tokens here are the same values (Prylo's colourway, Libre Caslon Text and Source Sans 3). */
:root {
  --canvas: #F8F7F4;
  --surface: #FFFFFF;
  --ink: #132238;
  --muted: #526174;
  --border: #D9DEDF;
  --primary: #155EEF;
  --primary-hover: #0B46C5;
  --on-dark-2: #B4BFCD;
  --dark-line: #2C3D57;
  --display: "Libre Caslon Text", Georgia, serif;
  --text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 20px;
  --dur-fast: 150ms;
  --ease-out: cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 18px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol { margin: 0; }
a { color: inherit; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

.page-head { border-bottom: 2px solid var(--ink); background: var(--canvas); }
.page-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 22px/1 var(--display); }
.brand svg { width: 40px; height: 36px; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--primary); }
.back:hover { color: var(--primary); }
.back svg { width: 18px; height: 18px; }

.doc { padding-block: 64px 96px; }
.doc-head { max-width: 46rem; }
.doc h1 { font: 700 clamp(40px, 4vw + 16px, 64px)/1.06 var(--display); letter-spacing: -0.01em; }
.doc-meta { margin-top: 16px; color: var(--muted); font-size: 16px; }
.doc-lead { margin-top: 24px; font-size: 21px; line-height: 1.5; }
.doc-body { margin-top: 56px; max-width: 46rem; border-top: 2px solid var(--ink); }
.doc-body section { padding-block: 32px; border-bottom: 2px solid var(--border); }
.doc-body h2 { font: 700 26px/1.2 var(--display); letter-spacing: -0.01em; }
.doc-body p, .doc-body ul { margin-top: 14px; }
.doc-body ul { padding-left: 1.2em; }
.doc-body li + li { margin-top: 8px; }
.doc-body li::marker { color: var(--primary); }
.doc-body a, .doc-lead a { color: var(--primary); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.doc-body a:hover, .doc-lead a:hover { color: var(--primary-hover); }
.doc-body strong { font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 54px; padding: 0 1.5rem;
  font: 600 18px/1.2 var(--text); border: 2px solid var(--ink); text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast); }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--primary); color: #FFFFFF; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { background: var(--surface); color: var(--ink); }
.btn-outline:hover { background: var(--canvas); }

.page-foot { background: var(--ink); color: #FFFFFF; border-top: 2px solid var(--dark-line); }
.page-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-block: 32px; font-size: 16px; }
.page-foot nav { display: flex; flex-wrap: wrap; gap: 0 32px; }
.page-foot a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.page-foot a:hover { color: var(--on-dark-2); }
.page-foot p { color: var(--on-dark-2); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Scrollbars: slim and square, a slate bar on the cream page that turns navy under the pointer.
   Only where there's a mouse: phones keep their own thin overlay bars. Firefox takes the two colours only. */
@media (hover: hover) and (pointer: fine) {
  @supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--muted) var(--canvas); scrollbar-width: thin; } }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--canvas); }
  ::-webkit-scrollbar-thumb { background: var(--muted); border: 2px solid var(--canvas); }
  ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: var(--ink); }
}