/* ─────────────────────────────────────────────────────────────────────────────
   FormCheck — the legal pages.

   Shared by /privacy, /terms and /support. These are documents, not landing
   pages, so this is a document stylesheet: the site's palette and its display
   type, at a reading measure, with a sticky contents rail on desktop.

   The landing page's CSS was copied wholesale into the old privacy page and
   carried ~600 lines of hero, canvas and bento rules that page never used.
   One shared file, sized for prose, is the honest version of that.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --paper:#F4F1E8; --paper2:#EDEADF; --white:#FAF8F1; --ink:#16160F;
  --ink2:#57574A; --ink3:#8D8D7D; --line:#D9D5C6;
  --lime:#C6F000; --lime2:#6F8B00; --orange:#B8431F;
  --sans:"Helvetica Neue",Helvetica,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16160F; --paper2:#1C1C14; --white:#20201A; --ink:#F4F1E8;
    --ink2:#B7B7A8; --ink3:#8D8D7D; --line:#2E2E24;
    --lime2:#A8CC1A; --orange:#E0592E;
  }
}
:root[data-theme="dark"]{
  --paper:#16160F; --paper2:#1C1C14; --white:#20201A; --ink:#F4F1E8;
  --ink2:#B7B7A8; --ink3:#8D8D7D; --line:#2E2E24;
  --lime2:#A8CC1A; --orange:#E0592E;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink2);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media(max-width:620px){ body{font-size:16px; line-height:1.62} }

.w{max-width:1160px;margin:0 auto;padding:0 28px}
@media(max-width:620px){.w{padding:0 20px}}

.mono{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink3);
}
a{color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:var(--line);
  transition:text-decoration-color .18s var(--ease-out), color .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  a:hover{text-decoration-color:var(--lime2); color:var(--lime2)}
}
:focus-visible{outline:2.5px solid var(--lime2); outline-offset:3px}

/* ── masthead ─────────────────────────────────────────────────────────────── */
header{
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.nav{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:14px 0}
.logo{font-weight:800; letter-spacing:-.035em; font-size:20px; text-transform:uppercase;
      color:var(--ink); text-decoration:none}
.navlinks{display:flex; gap:20px; align-items:center}
.navlinks a{font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink3); text-decoration:none}
.navlinks a[aria-current="page"]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .navlinks a:hover{color:var(--ink)} }
@media(max-width:620px){ .navlinks a:not([aria-current="page"]):not(.always){display:none} }

/* ── title block ──────────────────────────────────────────────────────────── */
.title{padding:66px 0 34px; border-bottom:1px solid var(--line)}
@media(max-width:620px){.title{padding:42px 0 26px}}
h1{
  font-size:clamp(44px,9vw,104px); line-height:.86; letter-spacing:-.05em;
  margin:14px 0 0; font-weight:800; text-transform:uppercase; color:var(--ink);
  max-width:14ch;
}
.lede{
  font-size:clamp(18px,2.2vw,23px); line-height:1.45; color:var(--ink);
  max-width:46ch; margin:24px 0 0; font-weight:500;
}
.stamp{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:26px}
.stamp span{font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3)}

/* ── layout: contents rail + body ─────────────────────────────────────────── */
.doc{display:grid; grid-template-columns:212px minmax(0,1fr); gap:64px;
     padding:52px 0 90px; align-items:start}
@media(max-width:960px){ .doc{grid-template-columns:1fr; gap:0; padding-top:34px} }

.toc{position:sticky; top:88px}
@media(max-width:960px){ .toc{position:static; margin-bottom:38px;
  border:1px solid var(--line); background:var(--white); padding:20px 22px} }
.toc .mono{margin-bottom:14px; display:block}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:t}
.toc li{counter-increment:t; margin-bottom:9px}
.toc a{
  display:block; font-size:13.5px; line-height:1.4; color:var(--ink3);
  text-decoration:none; padding-left:26px; position:relative;
  transition:color .18s var(--ease-out), transform .18s var(--ease-out);
}
.toc a::before{
  content:counter(t,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--line);
  transition:color .18s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .toc a:hover{color:var(--ink); transform:translateX(2px)}
  .toc a:hover::before{color:var(--lime2)}
}
.toc a.on{color:var(--ink)}
.toc a.on::before{color:var(--lime2)}

/* ── prose ────────────────────────────────────────────────────────────────── */
section.s{padding:0 0 46px; scroll-margin-top:96px}
section.s:last-of-type{padding-bottom:8px}
h2{
  font-size:clamp(26px,3.4vw,38px); line-height:1.02; letter-spacing:-.035em;
  margin:0 0 8px; font-weight:800; color:var(--ink); max-width:22ch;
}
h2 .n{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--lime2);
  display:block; margin-bottom:13px; font-weight:400; text-transform:uppercase}
h3{font-size:18.5px; margin:32px 0 8px; letter-spacing:-.015em; font-weight:700; color:var(--ink)}
p{margin:0 0 15px; max-width:68ch}
strong{color:var(--ink); font-weight:700}
ul,ol{margin:0 0 15px; padding-left:22px; max-width:66ch}
li{margin-bottom:9px}
li::marker{color:var(--ink3)}
hr{border:0; border-top:1px solid var(--line); margin:38px 0}

/* A claim that has a file behind it. The point of the whole exercise. */
code, .src{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0;
  color:var(--ink3); background:var(--paper2); padding:1px 5px; border-radius:2px;
  overflow-wrap:anywhere;
}
:root[data-theme="dark"] code, :root[data-theme="dark"] .src{background:var(--white)}

/* ── callouts ─────────────────────────────────────────────────────────────── */
.card{
  border:1px solid var(--line); background:var(--white);
  padding:26px 28px; margin:22px 0; border-radius:3px;
}
.card > :last-child{margin-bottom:0}
.card h3{margin-top:0}
.card.key{border-left:4px solid var(--lime)}
.card.warn{border-left:4px solid var(--orange)}
.card.warn h3{color:var(--orange)}
.tag{
  display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; padding:4px 9px; border-radius:2px;
  margin-bottom:13px;
}
.tag.off{background:var(--paper2); color:var(--ink3); border:1px solid var(--line)}
.tag.on{background:var(--lime); color:#16160F}

/* ── the two-column ledger: what stays / what leaves ──────────────────────── */
.ledger{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
        border:1px solid var(--line); margin:26px 0}
@media(max-width:720px){ .ledger{grid-template-columns:1fr} }
.ledger > div{background:var(--white); padding:26px 26px 22px}
.ledger h3{margin:0 0 4px; font-size:17px}
.ledger .mono{display:block; margin-bottom:14px}
.ledger ul{margin:0; padding-left:19px; max-width:none}
.ledger li{font-size:15px; margin-bottom:8px; line-height:1.5}

/* ── definition rows (what is sent, what is not) ──────────────────────────── */
.rows{border-top:1px solid var(--line); margin:22px 0 8px}
.rows > div{display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px;
  padding:17px 0; border-bottom:1px solid var(--line)}
@media(max-width:680px){ .rows > div{grid-template-columns:1fr; gap:4px} }
.rows dt, .rows .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3); padding-top:4px}
.rows dd, .rows .v{margin:0; font-size:15.5px; line-height:1.55; color:var(--ink2)}
.rows .v strong{color:var(--ink)}

/* ── contact block ────────────────────────────────────────────────────────── */
.contact{
  border:1.5px solid var(--ink); background:var(--white); padding:30px 32px; margin:26px 0;
}
.contact .addr{
  display:inline-block; font-size:clamp(20px,3.4vw,30px); font-weight:800;
  letter-spacing:-.03em; color:var(--ink); text-decoration:none; margin:6px 0 10px;
  border-bottom:2px solid var(--lime); padding-bottom:2px;
  transition:transform .16s var(--ease-out);
}
.contact .addr:active{transform:scale(0.97)}
@media (hover:hover) and (pointer:fine){ .contact .addr:hover{color:var(--ink)} }

/* ── faq ──────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line); margin-top:22px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:19px 0; font-weight:700; font-size:17.5px; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; gap:20px;
  letter-spacing:-.015em; transition:color .18s var(--ease-out);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:active{transform:scale(0.995)}
@media (hover:hover) and (pointer:fine){ .faq summary:hover{color:var(--lime2)} }
.faq summary .pm{font-family:var(--mono); font-size:13px; color:var(--ink3); font-weight:400;
  transition:transform .2s var(--ease-out), color .2s var(--ease-out); flex:none}
.faq details[open] summary .pm{transform:rotate(45deg); color:var(--lime2)}
.faq .a{padding:0 0 20px; max-width:66ch; font-size:15.5px}
.faq .a > :last-child{margin-bottom:0}

/* ── footer ───────────────────────────────────────────────────────────────── */
footer{padding:52px 0 66px; background:var(--ink); color:#B7B7A8; font-size:14px;
       line-height:1.6; margin-top:20px}
:root[data-theme="dark"] footer, :root:not([data-theme="light"]) footer{border-top:1px solid var(--line)}
footer strong{color:#F4F1E8}
footer p{max-width:72ch; margin:0 0 13px}
footer a{color:inherit; text-decoration-color:rgba(255,255,255,.3)}
@media (hover:hover) and (pointer:fine){ footer a:hover{color:#F4F1E8} }

/* ── theme toggle ─────────────────────────────────────────────────────────── */
button.th{
  position:fixed; right:14px; bottom:14px; background:var(--paper); border:1px solid var(--line);
  color:var(--ink2); font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  padding:8px 12px; border-radius:2px; cursor:pointer; text-transform:uppercase; z-index:50;
  transition:transform .14s var(--ease-out), color .18s var(--ease-out),
             border-color .18s var(--ease-out);
}
button.th:active{transform:scale(0.97)}
@media (hover:hover) and (pointer:fine){ button.th:hover{color:var(--ink); border-color:var(--ink3)} }

/* ── entrance: opacity + a short lift, never from scale(0) ────────────────── */
.rv{opacity:0; transform:translateY(14px);
    transition:opacity .5s var(--ease-out), transform .5s var(--ease-out)}
.rv.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none}
}