/* Privacy, terms and 404. The home page keeps its own inline copy of these rules so it works
   as one file; the tokens and type below are the same. */

/* IBM Plex, served from this site (SIL OFL 1.1, fonts/OFL.txt): no third-party requests.
   Plex has no ⌘ ⇧ ↵, so both stacks keep system fonts behind it. The URLs resolve against
   this file, so they hold on 404.html too, which the server sends at any depth. */
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Variable.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* One Dark by default, One Light when the system asks for it. Text pages have no section
   tones to follow, so they follow the visitor. The light accent is one step darker than the
   app's #4078f2 so links and white button text reach 4.5:1; --ink3 is for rules and markers only. */
:root{
  color-scheme:dark;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --page:#101216;--page2:#16181d;--surface:#1b1e24;--ink:#d7dae0;--ink-strong:#f1f2f4;--ink2:#8b93a1;--ink3:#5f6673;
  --line:#23262d;--accent:#74ade8;--accent2:#8fbdee;--accent-ink:#0f1216;
}
@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --page:#f5f5f6;--page2:#ececee;--surface:#ffffff;--ink:#383a42;--ink-strong:#1d1f25;--ink2:#61646f;--ink3:#9a9ca4;
    --line:#e1e1e3;--accent:#2f66e0;--accent2:#2a5fd6;--accent-ink:#ffffff;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:64px}
/* A column, so a short page like 404 keeps its footer at the bottom of the window. */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;margin:0;background:var(--page);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{flex:1}
body>.wrap{width:100%}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:max(clamp(16px,4vw,40px),env(safe-area-inset-left,0px))}
.ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:12px;top:-60px;z-index:60;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink-strong);font-size:14.5px;text-decoration:none}
.skip:focus{top:10px}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--page);border-bottom:1px solid var(--line)}
.nav .wrap{height:60px;display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink-strong);text-decoration:none}
.logo svg{width:13.7px;height:20px}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14.5px}
.nav-end .gh{color:var(--ink2);text-decoration:none}
.nav-end .gh:hover{color:var(--ink-strong)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:6px;border:1px solid transparent;font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;white-space:nowrap}
.btn-p{background:var(--accent);color:var(--accent-ink)}
.btn-p:hover{background:var(--accent2)}
.btn-s{border-color:var(--line);color:var(--ink-strong);background:transparent}
.btn-s:hover{background:var(--page2)}
.btn-sm{height:34px;padding:0 13px;font-size:14px}
@media (max-width:520px){.nav-end .gh{display:none}}

/* ---------- Text pages ---------- */
.doc{padding-block:clamp(56px,8vw,112px) clamp(72px,9vw,128px)}
.doc-head{max-width:46rem}
.eyebrow{margin:0 0 18px;font-size:13px;color:var(--ink2)}
h1{margin:0;font-weight:600;font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.04em;color:var(--ink-strong);text-wrap:balance}
.dot{display:inline-block;width:.17em;height:.17em;border-radius:50%;background:var(--accent);margin-left:.05em}
.lede{margin:24px 0 0;max-width:40rem;font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--ink2);text-wrap:pretty}
/* The body sits in one readable column; each part opens on a hairline, like the home page's log. */
.prose{max-width:44rem;margin-top:clamp(40px,6vw,64px)}
.prose h2{margin:48px 0 14px;padding-top:18px;border-top:1px solid var(--line);font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--ink-strong)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:28px 0 8px;font-size:16.5px;font-weight:600;color:var(--ink-strong)}
.prose p,.prose li{font-size:16.5px;line-height:1.65;text-wrap:pretty}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:1.25em}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--ink3)}
/* Links in running text carry a hairline underline: their colour alone sits too close to the text around them. */
.prose a{color:var(--accent);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.prose a:hover{text-decoration-color:currentColor}
.prose strong{font-weight:600;color:var(--ink-strong)}
.prose code{padding:1px 4px;border:1px solid var(--line);border-radius:3px;background:var(--surface);font:400 .86em/1.5 var(--mono);overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.prose blockquote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:2px solid var(--accent);color:var(--ink-strong)}
.prose blockquote p{margin:0}
/* Scopes and stores: a plain table with hairlines; it scrolls on its own on a narrow phone. */
.table{margin:4px 0 20px;overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.prose th,.prose td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.prose td:first-child{width:36%;padding-right:20px;font:400 13px/1.6 var(--mono);color:var(--ink-strong);overflow-wrap:anywhere}
/* On a phone each row becomes the name over its explanation. */
@media (max-width:560px){
  .prose table,.prose tbody,.prose tr,.prose td{display:block;width:auto}
  .prose thead{display:none}
  .prose tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .prose td,.prose td:first-child{width:auto;padding:0;border:0}
  .prose td:first-child{margin-bottom:2px}
}
.short{margin:0 0 8px;padding:20px 22px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.short p:last-child,.short ul:last-child{margin-bottom:0}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}

/* ---------- Footer ---------- */
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding-block:22px calc(44px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.foot nav{display:flex;gap:18px}
.foot a{text-decoration:none}
.foot a:hover,.foot a[aria-current]{color:var(--ink)}

/* Touch screens: the small controls get a target of about 40px; the negative margins keep the layout as drawn. */
@media (pointer:coarse){
  .btn-sm{height:40px}
  .foot a{display:inline-block;padding-block:10px;margin-block:-10px}
  .logo{padding-block:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}