/* Shared styling for the legal pages (personvern, vilkar).
   index.html deliberately keeps its CSS inlined for first-paint; these
   documents are secondary, so they share one cached file instead. */
:root {
  --paper: #F7F9FC;
  --card: #FFFFFF;
  --ink: #1B2A41;
  --ink-soft: #46586F;
  --line: #D7DEE8;
  --orange: #E8600A;
  --cyano: #0C2340;
  --mono: "Space Mono", ui-monospace, monospace;
  --display: "Archivo", "Helvetica Neue", sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--orange); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--orange); color: #fff;
  padding: 10px 18px; z-index: 100; border-radius: 0 0 6px 0; font-weight: 600;
}
.skip:focus { left: 0; }

header.site { border-bottom: 1px solid var(--line); background: var(--paper); }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.logo {
  font-family: var(--display); font-weight: 900; font-size: 1.5rem;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.logo span { color: var(--orange); }
.nav a.back { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav a.back:hover, .nav a.back:focus { color: var(--orange); }

.doc-head { background: var(--cyano); color: #E7EFF9; padding: 54px 0 46px; }
.doc-head .eyebrow {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: #7FA1C7; margin-bottom: 14px;
}
.doc-head h1 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.05; letter-spacing: -0.02em;
}
.doc-head p { margin-top: 14px; color: #B8CBE4; max-width: 54ch; }

main { padding: 48px 0 72px; }
h2 {
  font-family: var(--display); font-weight: 800; font-size: 1.3rem;
  margin: 40px 0 12px; letter-spacing: -0.01em;
}
h2:first-of-type { margin-top: 0; }
h3 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 22px 0 8px; }
p, li { color: var(--ink-soft); }
p + p { margin-top: 12px; }
ul { margin: 12px 0 12px 22px; }
li { margin-bottom: 8px; }
strong { color: var(--ink); }

/* The one thing on these pages people must not skim past. */
.callout {
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--orange);
  border-radius: 8px; padding: 20px 22px; margin: 24px 0;
}
.callout p { color: var(--ink); }
.callout .label {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--orange); display: block; margin-bottom: 8px; font-weight: 700;
}

table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 0.94rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
td { color: var(--ink-soft); }
.table-scroll { overflow-x: auto; }

.updated { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); margin-top: 40px; }

footer.site { background: var(--ink); color: #AAB6C6; padding: 40px 0 34px; }
footer a { color: #AAB6C6; }
footer a:hover, footer a:focus { color: #FF8C42; }
footer .legal { display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.85rem; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }