/* Shared by about.html and privacy.html. Link tokens.css first. */
body { margin: 0; padding: 28px 18px 40px; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.5; }
main { max-width: 640px; margin: 0 auto; }
h1 { font-weight: 600; font-size: clamp(26px, 5vw, 38px); margin: 0 0 6px; text-align: center; }
.lede { margin: 0 auto 24px; max-width: 46ch; text-align: center; color: var(--soft); }
section { background: var(--card); border: var(--line-w) solid var(--ink); border-radius: var(--r-card); box-shadow: 0 4px 0 rgba(61, 51, 64, .18); padding: 14px 20px 16px; margin: 0 0 16px; }
h2 { font-weight: 600; font-size: 20px; margin: 0 0 6px; }
p, li { margin: 0 0 8px; }
ul, ol { margin: 0; padding-left: 22px; }
section > :last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: 3px; }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 22px 0 18px; }
.btn { padding: 9px 20px; background: var(--butter); border: var(--line-w) solid var(--ink); border-radius: var(--r-pill); box-shadow: 0 4px 0 var(--ink); text-decoration: none; font-weight: 500; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.made { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--soft); font-size: 13.5px; text-align: center; }
.made img { width: 22px; height: auto; display: block; }
/* the business's line wraps on a phone: kept narrow, so the logo stays beside it */
@media (max-width: 520px) { .made span { max-width: 34ch; text-align: left; } }
.made a { color: var(--soft); }