/* Shared styles for Dipt's pages (About, How it works, Contact, Privacy, Terms,
   Affiliate disclosure, Page not found) and the footer on every page. Colors and
   type match the main page (index.html), including dark mode. */
:root{
  --bg:#EEF1FF; --surface:#FFFFFF; --surface-2:#F5F6FF; --ink:#17143F; --muted:#5E5C8A; --line:#D6DAF4;
  --brand:#3A2EF0; --brand-ink:#FFFFFF; --brand-soft:#E1DEFF;
  --signal:#FFD43B; --signal-ink:#17143F;
  --good:#0B8350; --good-soft:#D2F4E2; --warn:#A64B06; --warn-soft:#FFE8C4;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0C2B; --surface:#1A1744; --surface-2:#221F52; --ink:#EEF0FF; --muted:#A6A6D6; --line:#332F6E;
    --brand:#8C85FF; --brand-ink:#0E0C2B; --brand-soft:#2A2670;
    --good:#4ADE9A; --good-soft:#123D30; --warn:#FFB45C; --warn-soft:#3D2A12;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E0C2B; --surface:#1A1744; --surface-2:#221F52; --ink:#EEF0FF; --muted:#A6A6D6; --line:#332F6E;
  --brand:#8C85FF; --brand-ink:#0E0C2B; --brand-soft:#2A2670;
  --good:#4ADE9A; --good-soft:#123D30; --warn:#FFB45C; --warn-soft:#3D2A12;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.5;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:25px;letter-spacing:-0.045em;color:var(--ink);text-decoration:none;line-height:1}
.logo svg{color:var(--ink)}
.btn{display:inline-block;border:0;border-radius:999px;padding:9px 18px;font-weight:650;font-size:15px;background:var(--ink);color:var(--bg);white-space:nowrap;text-decoration:none}
.btn.primary{background:var(--brand);color:var(--brand-ink)}
.btn.primary:hover{filter:brightness(1.08)}

/* header on the content pages */
.page-top{border-bottom:1px solid var(--line);background:var(--bg)}
.page-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}

/* content pages */
.doc{max-width:760px;padding-top:44px;padding-bottom:40px}
.doc h1{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-0.045em;line-height:1.02;margin:0 0 10px}
.doc .lede{font-size:19px;color:var(--muted);margin:0 0 28px;max-width:56ch}
.doc .updated{font-size:14px;color:var(--muted);margin:4px 0 28px}
.doc h2{font-size:23px;font-weight:750;letter-spacing:-0.025em;margin:36px 0 8px}
.doc h3{font-size:18px;font-weight:720;margin:22px 0 4px}
.doc p,.doc li{max-width:68ch}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 12px;padding-left:1.25em}
.doc li{margin:0 0 6px}
.doc a{color:var(--brand);font-weight:600;text-underline-offset:3px}
.callout{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin:22px 0}
.callout p:last-child{margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:18px 0 8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted);font-size:15px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:0 0 10px}
.faq summary{cursor:pointer;font-weight:700;font-size:17px}
.faq details[open] summary{margin-bottom:6px}
.faq details p:last-child{margin-bottom:0}

/* page not found */
.nf{text-align:center;padding-top:80px;padding-bottom:80px}
.nf .big{font-size:clamp(70px,14vw,140px);font-weight:800;letter-spacing:-0.06em;line-height:.9;margin:0 0 8px;color:var(--brand)}
.nf p{color:var(--muted);margin:0 auto 22px;max-width:44ch}

/* footer (on every page, including the main one) */
.foot{border-top:1px solid var(--line);margin-top:24px;padding:30px 0 34px;font-size:14px;color:var(--muted)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px}
.foot-logo{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:21px;letter-spacing:-0.045em;color:var(--ink);text-decoration:none;line-height:1}
.foot-logo svg{width:26px;height:19px;color:var(--ink)}
.foot-brand p{margin:9px 0 0;max-width:30ch}
.foot-links{display:grid;grid-template-columns:repeat(3,auto);gap:9px 30px;align-content:start}
.foot-links a{color:var(--ink);text-decoration:none;font-weight:600}
.foot-links a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.foot-legal p{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;max-width:90ch}
@media (max-width:560px){.foot-links{grid-template-columns:repeat(2,auto)}}