/* The frame for the small pages (privacy, terms, 404): the same tokens, nav, buttons and footer as index.html, copied verbatim from its inline CSS.
   If those change in index.html, change them here too. Everything below the "small pages" line is new and only used by these pages. */
:root{--paper:#F5F6F8;--shade:#E9ECF2;--cobalt:#193497;--ink:#14254D;--muted:#5A6378;--money:#0F6B4A;--note:#3FCB86;--pink:#EDA398;--ochre:#E3A937;--line:#D3D8E2;
--f-hero:"Bricolage Grotesque","Arial Black",sans-serif;--f-head:"Schibsted Grotesk",system-ui,sans-serif;--f-body:"Instrument Sans",system-ui,sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,monospace;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--f-body)}
a{color:inherit}img{max-width:100%}
:root{--maxw:1360px;--gutter:clamp(16px,4vw,48px)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:10px;z-index:9}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
/* nav: the book's frame. Wordmark, the sections in Schibsted, one link to the check */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--cobalt);color:var(--paper)}
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;padding-block:10px;font:600 14px/1 var(--f-head)}
.nav .wm{height:18px;width:auto;max-width:none;display:block}.nav nav{display:flex;gap:28px}
.nav nav a{text-decoration:none;color:var(--paper)}.nav nav a:hover{color:var(--pink)}
.nav .cta{justify-self:end;font-size:14px;padding:11px 16px}
@media (max-width:980px){.nav .wrap{grid-template-columns:1fr auto}.nav nav{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--f-head);padding:15px 20px;border-radius:10px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap}
/* the call to action is cobalt: the brand, never green (green means money and only money); on a cobalt ground it turns white */
.btn.go{background:var(--cobalt);color:var(--paper);transition:background-color .15s ease,color .15s ease}
@media (hover:hover) and (pointer:fine){.btn.go:hover{background:var(--ink)}}
.nav .btn.go,.pn-cobalt .btn.go,.proofband .btn.go,.endink .btn.go{background:var(--paper);color:var(--cobalt)}
@media (hover:hover) and (pointer:fine){.nav .btn.go:hover,.pn-cobalt .btn.go:hover,.proofband .btn.go:hover,.endink .btn.go:hover{background:var(--pink);color:var(--ink)}}.btn.go.note{background:var(--note);color:var(--ink)}.btn.sm{padding:11px 16px;font-size:14px}
.kick{font:600 13px/1 var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
:root{--shadow:0 2px 8px rgba(20,37,77,.10);--inset:clamp(16px,4vw,64px)}
main>section{margin:14px var(--inset);border-radius:clamp(22px,3vw,36px)}
.pn-white{background:#fff;box-shadow:var(--shadow)}
.nav .wrap,footer.foot .wrap{max-width:calc(var(--maxw) + 2*var(--inset));padding-inline:calc(var(--inset) + var(--gutter))}
html,body{overflow-x:clip}
/* footer: the one-row version from index.html */
footer.foot{background:var(--cobalt);color:var(--paper);margin-top:0;padding-block:22px 18px}
footer.foot .wrap.frow{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap}
footer.foot .stack{display:block;width:auto;height:18px}
footer.foot .flinks{display:flex;flex-wrap:wrap;gap:8px 24px;font:600 14px/1.2 var(--f-head)}
footer.foot .flinks a{color:var(--paper);text-decoration:none}footer.foot .flinks a:hover{color:var(--pink)}
footer.foot .fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(245,246,248,.16);font-size:13px;color:#AFC0F2}
footer.foot .fbot a{text-decoration:none}footer.foot .fbot a:hover{color:var(--pink)}
@media (max-width:900px){footer.foot .flinks{gap:6px 18px;font-size:13px}footer.foot .fbot{flex-direction:column;gap:4px}}
/* the lockup keeps its proportions at every width (same rules as index.html; the menu appears from 981 px) */
@media (max-width:430px){.nav .wrap{gap:12px}.nav .wm{height:clamp(12px,3.75vw,15px)}.nav .cta{padding-inline:12px}}
@media (max-width:359px){.nav .wrap{padding-inline:16px}}
/* ---------- small pages ---------- */
.legal{padding-block:clamp(48px,7vw,96px)}
.legal h1{font:800 clamp(44px,8vw,112px)/.94 var(--f-hero);letter-spacing:-.02em;margin:0;padding-bottom:.16em;text-wrap:balance}
.legal .lede{font:600 clamp(20px,2.2vw,26px)/1.35 var(--f-head);margin:14px 0 0;max-width:36ch}
.legal .btn{margin-top:28px}
.legal-body{max-width:68ch;overflow-wrap:anywhere}
.legal-body .version{margin:16px 0 0;font:500 14px/1.4 var(--f-body);color:var(--muted)}
.legal-body h2{font:700 clamp(24px,2.6vw,32px)/1.15 var(--f-head);letter-spacing:-.02em;margin:40px 0 0}
.legal-body h3{font:700 20px/1.2 var(--f-head);margin:28px 0 0}
.legal-body p,.legal-body ul,.legal-body ol{margin:14px 0 0;color:#2A3A5E}
.legal-body ul,.legal-body ol{padding-left:20px}.legal-body li{margin-top:8px}.legal-body a{color:var(--cobalt)}
body{display:flex;flex-direction:column;min-height:100svh}main{flex:1}