/* Gist compliance pages
   Shared styles for the overview, terms, and privacy pages.
   Kelly: the six values in :root are the only things worth changing. */

:root{
  --ink:#14263d;
  --body:#26384d;
  --muted:#5f6f82;
  --line:#dbe3eb;
  --surface:#f6f9fc;
  --accent:#2f6696;
  --max:780px;
}

*{box-sizing:border-box;}
html{background:#eef3f7;}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.62;
}

.wrap{width:min(calc(100% - 36px),var(--max));margin:0 auto;}

/* ---------- header ---------- */
header{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#f9fbfd 0%,#ffffff 100%);
}
header .wrap{padding:38px 0 30px;}

.logo{display:block;width:150px;height:auto;}
.logo img{width:100%;height:auto;display:block;}

.product{
  margin:22px 0 0;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

h1{
  margin:8px 0 8px;
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.08;
  letter-spacing:-.035em;
}

.meta{color:var(--muted);font-size:.94rem;margin:0;}

/* ---------- nav ---------- */
nav{
  margin-top:20px;
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  font-size:.94rem;
}
nav a{color:var(--accent);text-decoration:none;padding-bottom:2px;}
nav a:hover{text-decoration:underline;text-underline-offset:3px;}
nav a[aria-current="page"]{
  color:var(--ink);
  font-weight:600;
  border-bottom:2px solid var(--ink);
  text-decoration:none;
}

/* ---------- body ---------- */
main.wrap{padding:34px 0 72px;}
h2{margin:34px 0 10px;font-size:1.2rem;line-height:1.3;}
h3{margin:26px 0 8px;font-size:1rem;}
p,li{color:var(--body);}
ul{padding-left:1.25rem;}
li{margin-bottom:.4rem;}
a{color:var(--accent);text-underline-offset:3px;}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.notice{
  margin:24px 0;
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
}
.notice p{margin:0;}

.quote{
  margin:16px 0 20px;
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  font-size:.98rem;
}
.quote p{margin:0;}

.samples{list-style:none;padding:0;margin:16px 0 20px;}
.samples li{
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:10px;
  font-size:.94rem;
  line-height:1.55;
}

code{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 5px;
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:26px 0 44px;
  color:var(--muted);
  font-size:.9rem;
}
footer p{margin:0 0 6px;color:var(--muted);}
footer .flinks{margin-bottom:14px;display:flex;gap:20px;flex-wrap:wrap;}

@media (max-width:540px){
  header .wrap{padding-top:28px;}
  main.wrap{padding-top:24px;}
  .logo{width:128px;}
}