@font-face{font-family:Barlow;src:url(assets/fonts/Barlow-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/Barlow-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  /* One palette, matching index.html. This file kept the old two-theme structure long
     after the site stopped having two themes: the base :root here had been updated to
     the steel ramp, but :root[data-theme="light"] and the prefers-color-scheme block
     below it still held the retired violet — #F7F6FA canvas, #17141F text, #E3E0EE
     rules, #88829A muted. Since the media query wins for anyone whose OS is set to
     light, which is most people, the terms and privacy pages have been rendering in
     the old violet scheme for most visitors while looking correct to anyone testing in
     dark mode. Collapsing to one palette removes the second copy that drifted. */
  color-scheme:light;
  --canvas:#f2f2f3;--panel:#e9e9ea;--line:color-mix(in srgb,#1d1f20 16%,transparent);
  --accent:#416180;--accent-hover:#1d2d3d;
  --text:#1d1f20;--text-2:#424244;--text-3:#5d5d60;   /* neutral-800 / neutral-700 */
  /* Muted text stops at neutral-700. neutral-600 is the obvious choice for it and
     measures 3.82:1 on paper — under the 4.5 body-text line — which is the same trap
     that was already fixed once on the main page. */
  --ease:cubic-bezier(.2,.8,.2,1);--t:180ms;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--text);
  font:400 16.5px/1.7 Barlow,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent-hover)}
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:18px;
  padding:16px clamp(20px,5vw,44px);
  background:color-mix(in srgb, var(--canvas) 92%, transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text)}
.brand .mark{width:22px;height:22px;color:var(--accent)}
.brand .wm{font-family:Barlow;font-weight:500;font-size:18px;letter-spacing:-.018em}
.bar .back{margin-left:auto;font-size:14.5px;color:var(--text-2);text-decoration:none}
.bar .back:hover{color:var(--text)}
main{max-width:74ch;margin:0 auto;padding:clamp(44px,7vw,84px) clamp(20px,5vw,44px) 90px}
.kicker{font-family:BarlowMono;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 14px}
h1{font-family:Barlow;font-weight:500;font-size:clamp(28px,5vw,40px);letter-spacing:-.022em;
  line-height:1.12;margin:0 0 10px}
.updated{color:var(--text-3);font-size:14px;margin:0 0 40px}
h2{font-family:Barlow;font-weight:500;font-size:19px;letter-spacing:-.01em;
  margin:38px 0 10px;padding-top:26px;border-top:1px solid var(--line)}
p{margin:0 0 16px;color:var(--text-2)}
ul{margin:0 0 16px;padding-left:20px;color:var(--text-2)}
li{margin-bottom:7px}
strong{color:var(--text);font-weight:500}
.note{border:1px solid var(--line);background:var(--panel);border-radius:12px;
  padding:20px 22px;margin:30px 0}
.note p:last-child{margin-bottom:0}
footer{border-top:1px solid var(--line);padding:26px clamp(20px,5vw,44px);
  color:var(--text-3);font-size:12.5px;text-align:center}
footer a{color:var(--text-2);text-decoration:none;margin:0 10px}
@media(pointer:coarse){.bar a,footer a{display:inline-flex;align-items:center;min-height:44px}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* The logo is the same arc-gap ring as the nav on index.html, with the same geometry.
   These pages were still carrying the mark it replaced — a dotted ring from the violet
   design, two rebuilds ago — so the link back to the site showed a different company's
   logo than the site it linked to. */
.mark.ring circle{fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-dasharray:44.84 7.00;stroke-linecap:butt;
  transform-origin:50% 50%;animation:ov-spin 9s linear infinite}
@keyframes ov-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mark.ring circle{animation:none}}