/* Buzzmax legal pages. Shares the tokens and type of the landing page. */
:root{
  --blue:oklch(0.359 0.051 266); --blue-deep:oklch(0.288 0.050 266);
  --blue-mid:oklch(0.470 0.058 266); --blue-wash:oklch(0.944 0.014 265);
  --blue-line:oklch(0.862 0.024 265);
  --red:oklch(0.389 0.120 28); --red-lit:oklch(0.545 0.130 31);
  --red-hatch:oklch(0.748 0.063 31); --red-wash:oklch(0.944 0.020 34);
  --red-line:oklch(0.868 0.040 33);
  --ink:oklch(0.245 0.030 267); --ink-soft:oklch(0.450 0.026 267);
  --ink-faint:oklch(0.600 0.020 267);
  --paper:oklch(0.9485 0.0067 97); --paper-lit:oklch(0.974 0.005 97);
  --rule:oklch(0.876 0.008 97);
  --display:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --body:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --e-quart:cubic-bezier(.25,1,.5,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:1rem;line-height:1.68;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--blue)}
a:hover{color:var(--red)}

.wrap{width:min(820px,100% - clamp(1.25rem,6vw,3rem));margin-inline:auto}

/* nav */
nav.site{position:sticky;top:0;z-index:20;background:color-mix(in oklch,var(--paper) 88%,transparent);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--rule)}
.nav-in{width:min(1560px,100% - clamp(1.25rem,4vw,4.5rem));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.brandlock{display:flex;align-items:center;gap:.5rem;text-decoration:none;line-height:0}
.wm,.bee{display:block;background-repeat:no-repeat;background-position:center;background-size:contain}
.wm{background-image:url("/wordmark.png");aspect-ratio:1770 / 410;height:1.3rem;width:calc(1.3rem * (1770 / 410))}
.bee{background-image:url("/bee.png");aspect-ratio:525 / 492;height:1.7rem;width:calc(1.7rem * (525 / 492))}
.nav-back{font-family:var(--display);font-size:.85rem;font-weight:600;color:var(--ink-soft);text-decoration:none}
.nav-back:hover{color:var(--blue)}

/* header */
header.page{padding:clamp(3rem,8vh,5rem) 0 clamp(1.5rem,4vh,2.5rem);border-bottom:1px solid var(--rule)}
header.page .kicker{font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--red);margin:0 0 .9rem}
h1{font-family:var(--display);font-weight:900;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(2.1rem,1.4rem + 2.6vw,3.2rem);margin:0;text-wrap:balance}
header.page .meta{margin:1.1rem 0 0;font-size:.88rem;color:var(--ink-faint)}
header.page .lede{margin:1.2rem 0 0;font-size:1.06rem;color:var(--ink-soft);max-width:62ch}

/* body */
main{padding:clamp(2rem,5vh,3rem) 0 clamp(4rem,10vh,7rem)}
h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.12;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);margin:2.6rem 0 .75rem;scroll-margin-top:5rem}
h2 .n{color:var(--red);font-size:.78em;margin-right:.5rem;letter-spacing:-.02em}
h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:1.02rem;margin:1.6rem 0 .4rem}
p{margin:0 0 1rem;max-width:72ch}
ul,ol{margin:0 0 1rem;padding-left:1.3rem;max-width:72ch}
li{margin-bottom:.45rem}
strong{font-weight:600;color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
small{font-size:.86rem;color:var(--ink-faint)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--blue-wash);padding:.1em .35em;border-radius:5px}

/* callouts */
.box{border:1px solid var(--rule);border-radius:14px;padding:1.1rem 1.25rem;margin:1.4rem 0;
  background:var(--paper-lit)}
.box p:last-child{margin-bottom:0}
.box.warn{border-color:var(--red-line);background:color-mix(in oklch,var(--red-wash) 55%,var(--paper-lit))}
.box.cool{border-color:var(--blue-line);background:color-mix(in oklch,var(--blue-wash) 55%,var(--paper-lit))}
.box .h{display:block;font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:.5rem}
.box.cool .h{color:var(--blue)}

/* the bits Javin still has to fill in before this goes live */
.todo{display:inline;background:oklch(0.90 0.11 95);color:oklch(0.28 0.06 80);
  border-radius:4px;padding:.05em .35em;font-weight:600;font-size:.94em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* table of contents */
.toc{border:1px solid var(--rule);border-radius:14px;padding:1.1rem 1.25rem;margin:2rem 0;
  background:var(--paper-lit)}
.toc .h{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.6rem}
.toc ol{columns:2;column-gap:2rem;margin:0;padding-left:1.1rem;font-size:.92rem}
@media(max-width:640px){.toc ol{columns:1}}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* tables */
.tw{overflow-x:auto;margin:1.2rem 0}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:34rem}
th,td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);background:var(--blue-wash)}

/* footer */
footer.site{border-top:1px solid var(--rule);padding:2.5rem 0 3.5rem;font-size:.86rem;color:var(--ink-faint)}
.foot-in{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;justify-content:space-between;align-items:center}
footer.site a{color:var(--ink-faint);text-decoration:none}
footer.site a:hover{color:var(--blue)}
.foot-links{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}