/* Shared shell for the small pages: privacy, terms, 404.
   Same tokens as the landing page and the tool. */
:root{
  --paper:#FFFFFF; --s1:#F5F7FA; --s2:#F3F4F6; --s3:#E4E7EC; --s4:#D3D8E0;
  --ink:#111827; --ink1:#1F2937; --ink2:#4B5563; --ink3:#6B7280;
  --blue:#3A5AF6; --red:#DC2626;
  --t-xs:12px; --lh-xs:16px;
  --t-sm:14px; --lh-sm:20px;
  --t-base:16px; --lh-base:24px;
  --t-lg:18px; --lh-lg:28px;
  --t-xl:20px; --lh-xl:28px;
  --t-2xl:24px; --lh-2xl:32px;
  --t-3xl:30px; --lh-3xl:36px;
  --t-4xl:36px; --lh-4xl:40px;
  --t-6xl:60px; --t-7xl:72px;
  --sans:"Geist",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --fluid:cubic-bezier(0.32,0.72,0,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink1);font-family:var(--sans);
  font-size:var(--t-base);line-height:var(--lh-base);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
p{margin:0} svg{display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
::selection{background:var(--blue);color:#FFFFFF}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--blue);color:#FFFFFF;
  padding:8px 12px;border-radius:8px;font-size:var(--t-sm);font-weight:600}
.skip:focus{left:24px}
.wrap{max-width:680px;margin:0 auto;padding-left:24px;padding-right:24px}
.lbl{font-family:var(--mono);font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:0.01em;color:var(--ink3)}
.lbl.on{color:var(--blue)}
/* the site's channel motif: a rule with one break in it */
.lbl::before{content:"";display:inline-block;width:2px;height:12px;margin-right:12px;
  vertical-align:-2px;border-radius:1px;
  background:linear-gradient(var(--blue) 0 5px, transparent 5px 7px, var(--blue) 7px 12px)}

.top{border-bottom:1px solid var(--s2)}
.top .wrap{max-width:1120px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* the lockup is the way home, which is where a reader already looks for it.
   Width and height are set on the element so the header does not reflow when
   the file lands. */
.back{display:flex;align-items:center;flex:none;transition:opacity 300ms var(--fluid)}
.back img{display:block;width:146px;height:35px}
.back:hover{opacity:0.72}
.back:active{transform:scale(0.98)}
@media(max-width:520px){ .back img{width:32px;object-fit:cover;object-position:left center} }
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;
  font-size:var(--t-sm);line-height:var(--lh-sm);font-weight:600;cursor:pointer;border:0;
  transition:all 300ms var(--fluid)}
.btn-a{background:var(--blue);color:#FFFFFF}
.btn-a:hover{background:#5D78F8;text-decoration:none}
.btn-a:active{transform:scale(0.98)}
.btn-b{border:1px solid var(--s4);color:var(--ink1);background:none}
.btn-b:hover{background:var(--s1);text-decoration:none}

.doc{padding:64px 0 96px}
.doc h1{font-size:var(--t-4xl);line-height:var(--lh-4xl);letter-spacing:-0.03em;margin-top:16px}
.doc .stamp{margin-top:16px;font-family:var(--mono);font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--ink3)}
.doc h2{font-size:var(--t-xl);line-height:var(--lh-xl);letter-spacing:-0.01em;margin:48px 0 12px}
.doc p{margin-top:12px;color:var(--ink2)}
.doc ul{margin:12px 0 0;padding-left:24px;color:var(--ink2)}
.doc li{margin-top:8px}
.doc .card{margin-top:24px;border:1px solid var(--s3);border-radius:16px;background:var(--s1);padding:24px}
.doc .card p{margin-top:0;color:var(--ink1)}
.foot{border-top:1px solid var(--s2);padding:48px 0}
.foot .wrap{max-width:1120px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.foot nav{display:flex;flex-wrap:wrap;gap:24px}
.foot a{font-size:var(--t-sm);color:var(--ink3)}
.foot a:hover{color:var(--ink1)}
.foot .fine{font-family:var(--mono);font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--ink3);max-width:400px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0.01ms!important}}

/* research use is free, said where the prices are rather than in a footnote */
.research{margin-top:16px;padding:16px;border:1px solid var(--s3);border-radius:12px;
  background:var(--s1);font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--ink2)}
.research a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

/* a tier priced in words rather than a number should not shout like a number */
.price.words b{font-size:var(--t-xl);line-height:var(--lh-xl);letter-spacing:-0.01em}