/* Archivo, self-hosted. The page claims no trackers and no third-party
   anything; loading this from fonts.gstatic.com handed every visitor's IP to
   Google and made that claim false. One variable file covers 400–800, so the
   whole family costs a single 35 KB request.

   Licensed under the SIL Open Font License — see fonts/OFL.txt. The
   unicode-range is Google's own latin subset, so glyphs outside it (✓, ↔)
   fall back to a system face exactly as they did before. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Modernist tokens — mirrored from the design system's styles.css.
   Shared by every page: the landing page, support, and the privacy policy.
   Page-specific rules stay inline in the page that needs them. */
:root{
  --color-bg:#f3f2f2;
  --color-text:#201e1d;
  --color-accent:#ec3013;
  --color-accent-600:#dd2b0f;
  --color-accent-700:#ae1800;
  --color-neutral-300:#d7d3d3;
  --color-neutral-400:#bab6b6;
  --color-neutral-900:#2d2b2b;
  --color-divider:color-mix(in srgb,#201e1d 40%,transparent);
  --font-heading:"Archivo",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:15px;line-height:1.55;text-wrap:pretty}
img{display:block;max-width:100%}
a{color:var(--color-accent-700);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--color-accent)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}

/* The design system's button pair */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;font-family:var(--font-heading);font-weight:800;font-size:14px;line-height:1.2;color:var(--color-text);background:transparent;border:1px solid transparent;padding:8px 14.4px;border-radius:0}
.btn-primary{background:var(--color-accent);color:var(--color-bg)}
.btn-primary:hover{background:var(--color-accent-600);color:var(--color-bg)}
.btn-primary:active{background:var(--color-accent-700)}
/* Pre-launch: the download CTAs hold their place but don't press. Same
   metrics as the button they stand in for. Restore .btn-primary at launch. */
.btn-soon{border:2px solid var(--color-divider);color:color-mix(in srgb,var(--color-text) 55%,transparent);background:none;cursor:default}

.container{max-width:1120px;margin:0 auto;padding-left:clamp(20px,5vw,64px);padding-right:clamp(20px,5vw,64px)}
.kicker{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--color-accent-700)}
.mono{font-family:var(--mono)}
.muted{color:color-mix(in srgb,var(--color-text) 60%,transparent)}

/* Footer link list and the social squares beneath it */
.flink{color:var(--color-text);font-weight:600}
.flink:hover{color:var(--color-accent)}
.social{width:36px;height:36px;border:2px solid var(--color-divider);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:800;font-size:11px;color:var(--color-text);text-decoration:none}
.social:hover{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}

/* Touch: the social squares draw at 36px (32px on the text pages), which is
   under the 44px a finger needs. !important because .social-sm sets its size
   from a later stylesheet. */
@media (pointer:coarse){
  .social{width:44px !important;height:44px !important}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}