/* Shared styling for terms.html, privacy.html and refund.html.
   Same tokens and fonts as index.html so the legal pages do not look like
   they were bolted on from somewhere else. One file, so a change to the
   look only has to be made once. */

:root{
  --navy:#2d2b7f;
  --navy-deep:#221f6b;
  --teal:#00c2a8;
  --ink:#17182b;
  --body:#4a4d63;
  --muted:#6f7387;
  --border:#e1e4ed;
  --soft:#f6f7fb;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy)}

.wrap{max-width:820px;margin:0 auto;padding:0 40px}
@media(max-width:720px){.wrap{padding:0 20px}}

/* Header, deliberately simpler than the marketing header: someone reading
   the terms is not being sold to. */
header{border-bottom:1px solid var(--border);background:#fff}
.hbar{max-width:820px;margin:0 auto;padding:0 40px;height:76px;display:flex;align-items:center;justify-content:space-between}
@media(max-width:720px){.hbar{padding:0 20px;height:62px}}
.brand img{height:26px}
@media(max-width:560px){.brand img{height:22px}}
.back{font-size:14px;font-weight:600;text-decoration:none;color:var(--ink)}
.back:hover{color:var(--navy)}

main{padding:56px 0 80px}
@media(max-width:720px){main{padding:40px 0 60px}}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--teal)}

h1{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 14px;letter-spacing:-.01em}
.updated{font-size:13px;color:var(--muted);margin:0 0 10px}
.lead{font-size:17px;color:var(--body);margin:0 0 40px;padding-bottom:32px;border-bottom:1px solid var(--border)}

h2{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:21px;line-height:1.3;margin:40px 0 12px;letter-spacing:-.01em}
h3{font-family:var(--sans);font-weight:700;color:var(--ink);font-size:15px;margin:24px 0 8px}
p{margin:0 0 14px;color:var(--body);font-size:15.5px}
ul{margin:0 0 16px;padding-left:22px}
li{color:var(--body);font-size:15.5px;margin-bottom:7px}
strong,b{color:var(--ink)}

/* Callout for things the reader should not skim past. */
.note{background:var(--soft);border-left:3px solid var(--teal);border-radius:0 12px 12px 0;padding:18px 22px;margin:22px 0}
.note p:last-child{margin-bottom:0}

/* Anything still to be decided or filled in is marked, loudly, so it
   cannot be published by accident. Search the files for "TE BESLISSEN"
   and "IN TE VULLEN" before going live. */
.todo{background:#fff4cc;border:1px solid #e8c65a;border-radius:6px;padding:2px 7px;font-size:14px;font-weight:600;color:#7a5c00}

.toc{background:var(--soft);border-radius:14px;padding:22px 26px;margin-bottom:40px}
.toc h2{margin:0 0 12px;font-size:15px;font-family:var(--sans);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin-bottom:5px;font-size:14.5px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

footer{background:#0d0c26;color:rgba(255,255,255,.5);padding:40px 0 32px;font-size:13px;margin-top:60px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer a{color:rgba(255,255,255,.62);text-decoration:none;margin-right:18px}
footer a:hover{color:#fff}