/* Form Armour site: shared styles for every page. Page-specific styles stay inline in each page. */

/* Self-hosted variable fonts (Latin) */
@font-face{font-family:Montserrat;font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/montserrat.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/instrument-sans.woff2) format("woff2")}

:root{
  --paper:#0c0d0f;--tint:#15171a;--tint-2:#1c1f23;--hair:#272b30;
  --ink:#f2f3ef;--body:#c9cdd2;--muted:#a3a8ae;--soft:#6e747b;
  --accent:#c5f82a;--accent-hover:#d6ff5c;--on-accent:#0c0d0f;--blocked:#ff5f6d;
  --night:#121417;--night-2:#1b1e22;--night-3:#262a2f;--night-ink:#f2f3ef;--night-muted:#a3a8ae;
  --pass-night:#c5f82a;--blocked-night:#ff5f6d;
  --field:#101215;--shadow:0 1px 2px rgb(0 0 0 / .4),0 30px 60px -30px rgb(0 0 0 / .8);
  --max:1160px;--gutter:24px;
  --display:Montserrat,system-ui,sans-serif;--text:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.05}
h2{font-size:clamp(30px,3.6vw,42px);line-height:1.1;text-wrap:balance}
h3{font-size:19px;letter-spacing:-.015em;line-height:1.3}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.lede{color:var(--muted);font-size:clamp(17px,1.6vw,19px);line-height:1.55;max-width:46ch}
.lede a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:12px;font:500 16px var(--text);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background .15s}
.btn-primary{background:var(--accent);color:var(--on-accent);font-weight:600}
.btn-primary:hover{background:var(--accent-hover)}
.btn-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.btn-quiet:hover{background:var(--tint)}
.btn-sm{height:40px;padding:0 16px;font-size:15px;border-radius:10px}

/* Nav */
.nav{position:sticky;top:0;z-index:30;background:rgb(12 13 15 / .8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .2s,color .2s}
.nav .wrap{display:flex;align-items:center;gap:40px;height:72px}
.wordmark{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.wordmark img{display:block;height:28px;width:auto}
.foot-brand .wordmark{display:inline-block}
.foot-brand .wordmark img{height:34px}
.nav-links{display:flex;gap:28px;font-size:15px;color:var(--muted);margin-right:auto}
.nav-links a{text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--ink)}
.menu-btn{display:none;background:none;border:0;font:500 15px var(--text);color:var(--ink);padding:10px 4px;cursor:pointer;margin-left:auto}

/* Sheet (mobile menu) */
.sheet{border:0;padding:0;margin:auto 0 0;width:100%;max-width:100%;background:var(--paper);border-radius:20px 20px 0 0;color:var(--ink)}
.sheet::backdrop{background:rgb(0 0 0 / .6)}
.sheet[open]{animation:sheet-up .22s ease-out}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0}}
.sheet-inner{padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom))}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sheet nav a{display:block;padding:16px 0;font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--hair)}
.sheet .btn{width:100%;margin-top:20px}

/* Footer */
.site-footer{border-top:1px solid var(--hair);padding:72px 0 40px;font-size:15px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot-brand p{margin-top:14px;max-width:34ch;line-height:1.55}
.foot-h{font:600 13px var(--text);letter-spacing:.02em;color:var(--ink);margin:0 0 14px}
.foot-col a,.foot-col button{display:block;padding:5px 0;text-decoration:none}
.site-footer a:hover,.site-footer button:hover{color:var(--ink)}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--hair);font-size:14px}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot-legal a,.foot-legal button{text-decoration:none}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}

/* Cookie settings: dialog on every page, and inline on the cookies page */
.cookie-panel{border:0;padding:0;width:min(540px,calc(100vw - 32px));background:var(--tint);color:var(--ink);border-radius:20px;box-shadow:0 30px 80px rgb(0 0 0 / .6)}
.cookie-panel::backdrop{background:rgb(0 0 0 / .6)}
.cookie-panel[open]{animation:sheet-up .22s ease-out}
.cp-inner{padding:28px}
.cp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cp-head h2{font-size:24px}
.cp-intro{margin:10px 0 8px;color:var(--muted);font-size:15px;line-height:1.55}
.cp-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:18px 0;border-top:1px solid var(--hair)}
.cp-row h3{font-family:var(--text);font-size:16px;font-weight:600;letter-spacing:0;margin-bottom:4px}
.cp-row p{font-size:14px;line-height:1.5;color:var(--muted)}
.cp-fixed{flex:none;font-size:13px;font-weight:500;color:var(--soft);padding-top:2px}
.cp-gpc{margin-top:4px;font-size:13px;color:var(--accent)}
.switch{flex:none;appearance:none;-webkit-appearance:none;width:46px;height:28px;margin:0;border-radius:999px;background:var(--night-3);position:relative;cursor:pointer;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink);transition:transform .2s}
.switch:checked{background:var(--accent)}
.switch:checked::after{transform:translateX(18px);background:var(--on-accent)}
.cp-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:8px;padding-top:20px;border-top:1px solid var(--hair)}
.cp-saved{margin-top:12px;font-size:14px;color:var(--muted);min-height:22px}
.cookie-inline{background:var(--tint);border-radius:20px;margin-top:20px}

/* Page heading for docs, about and legal pages */
.page-head{padding:72px 0 48px}
.page-head h1{font-size:clamp(38px,5vw,60px);font-weight:800;letter-spacing:-.04em}
.page-head .lede{margin-top:18px;max-width:60ch}
.updated{margin-top:14px;font-size:14px;color:var(--soft)}

/* Long-form text shared by docs, about and legal pages */
.prose{max-width:72ch;color:var(--body)}
.prose h2{font-size:clamp(26px,2.6vw,32px);color:var(--ink);margin:64px 0 16px;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{color:var(--ink);margin:32px 0 10px;scroll-margin-top:96px}
.prose p+p,.prose p+ul,.prose p+ol,.prose ul+p,.prose ol+p,.prose pre+p,.prose p+pre,.prose table+p,.prose p+table,.prose .note+p,.prose p+.note{margin-top:14px}
.prose ul,.prose ol{margin:0;padding-left:22px}
.prose li{margin:6px 0}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:600}
.prose code{font:500 .88em var(--mono);background:var(--tint);color:var(--ink);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
.prose pre{margin:0;background:var(--tint);border:1px solid var(--hair);border-radius:12px;padding:16px 18px;overflow-x:auto}
.prose li pre{margin:8px 0}
.prose pre code{background:none;padding:0;font-size:14px;line-height:1.6;overflow-wrap:normal}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--hair)}
.prose th{color:var(--ink);font-weight:600}
.prose td:first-child code{white-space:nowrap;overflow-wrap:normal}
.note{background:var(--tint);border-radius:12px;padding:16px 18px;color:var(--body)}
.note strong{color:var(--ink)}

/* Docs: sticky contents beside the text */
.docs{display:grid;grid-template-columns:230px minmax(0,1fr);gap:64px;align-items:start;padding-bottom:120px}
.toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;font-size:15px}
.toc p{font-weight:600;color:var(--ink);margin:0 0 10px 12px;font-size:14px}
.toc a{display:block;padding:6px 12px;border-radius:8px;color:var(--muted);text-decoration:none;line-height:1.4}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);background:var(--tint)}
.toc-mobile{display:none}

/* Legal pages */
.legal{padding-bottom:120px}
.summary{max-width:72ch;margin-bottom:48px}

@media (max-width:900px){
  .docs{grid-template-columns:minmax(0,1fr);gap:24px}
  .toc{display:none}
  .toc-mobile{display:block;background:var(--tint);border-radius:12px;padding:4px 16px}
  .toc-mobile summary{cursor:pointer;padding:12px 0;font-weight:600}
  .toc-mobile a{display:block;padding:8px 0;color:var(--muted);text-decoration:none;border-top:1px solid var(--hair)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:720px){
  :root{--gutter:16px}
  body{font-size:16px}
  .nav .wrap{height:60px;gap:16px}
  .wordmark img{height:24px}
  .nav-links,.nav .btn{display:none}
  .menu-btn{display:block}
  .page-head{padding:48px 0 32px}
  .prose table{display:block;overflow-x:auto}
  .site-footer{padding-top:56px}
  .foot-grid{gap:32px 20px}
  .cookie-panel{margin:auto 0 0;width:100%;max-width:100%;border-radius:20px 20px 0 0}
  .cp-inner{padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
  .cp-actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
