/* The privacy notice, terms of use and accessibility statement.
   The same type, colours, header and footer as index.html, in one reading
   column. Both fonts are served from this site, as on the home page. */
@font-face { font-family: 'Schibsted Grotesk'; src: url('schibsted-grotesk.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
:root {
  --paper: #F8F7FB;
  --white: #FFFFFF;
  --ink: #0D0F24;
  --muted: #4F5168;
  --line: #E3E1EE;
  --field: #8A88A3;   /* a border that has to be seen: 3:1 or more on paper */
  --primary: #262A5C;
  --primary-2: #343A7A;
  --lilac: #C7B9F2;
  --wash: #EFEAFF;
  --pop: #FFE07A;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.65 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Schibsted Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(34px, 5vw, 50px); line-height: 1.06; margin: 10px 0 0; }
h2 { font-size: clamp(23px, 2.6vw, 28px); line-height: 1.2; margin: 52px 0 12px; scroll-margin-top: 90px; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 28px 0 8px; }
p, li { max-width: 68ch; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 0 0 6px; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-2); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 3px; }
strong { font-weight: 600; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.muted { color: var(--muted); }

.skip { position: absolute; left: 16px; top: -60px; background: var(--primary); color: var(--white); padding: 10px 16px; border-radius: 6px; z-index: 30; }
.skip:focus { top: 12px; }

header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 18px; padding: 16px 24px; }
.mark { display: flex; align-items: center; text-decoration: none; }
.mark img { display: block; height: 26px; width: auto; }
nav.top { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
nav.top a { text-decoration: none; color: var(--ink); }
nav.top a:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 760px) { nav.top { display: none; } }
.btn { display: inline-block; background: var(--primary); color: var(--white); text-decoration: none; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 6px; }
.btn:hover { background: var(--primary-2); color: var(--white); }
header .btn { margin-left: 6px; }
@media (max-width: 760px) { header .btn { margin-left: auto; } }

/* The menu on a phone. Below 760px the header's links are hidden, so a menu
   button opens them in a sheet under the header, with the page behind dimmed
   and held still. A <details>, so it opens with no script at all; menu.js
   closes it on Escape, a tap outside or a wider screen, and holds the page. */
.menu { display: none; }
@media (max-width: 760px) {
  .bar { gap: 10px; }
  header .btn { padding: 10px 14px; font-size: 14px; }
  .menu { display: block; }
  .menu summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .menu summary::-webkit-details-marker, .menu summary::marker { display: none; content: ''; }
  .menu summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
  .menu summary svg { display: block; }
  .menu .shut { display: none; }
  .menu[open] .open { display: none; }
  .menu[open] .shut { display: block; }
  .menu[open] summary { border-color: var(--ink); }
  .menu[open]::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; top: var(--head, 77px); z-index: -1; background: rgba(13, 15, 36, .4); animation: dim .18s ease-out; }
  .menu .sheet { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--head, 77px)); overflow-y: auto; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px rgba(13, 15, 36, .18); padding: 8px 24px 24px; animation: sheet .18s ease-out; }
  .menu nav { display: flex; flex-direction: column; margin: 0; gap: 0; font-size: 19px; font-weight: 600; }
  .menu nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  .menu nav a::after { content: ''; width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); margin-right: 4px; }
  .menu nav a[aria-current='page'] { color: var(--primary); text-decoration: none; box-shadow: inset 3px 0 0 var(--primary); padding-left: 14px; margin-left: -14px; }
  .menu .sheet-actions { display: grid; gap: 10px; margin-top: 20px; }
  .menu .sheet-actions .btn { margin: 0; text-align: center; padding: 15px 22px; font-size: 16px; }
  .menu .sheet-actions .btn.ghost { display: block; background: transparent; color: var(--ink); border: 1px solid var(--ink); }
  html.menu-open { overflow: hidden; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .menu .sheet, .menu[open]::after { animation: none; } }
@keyframes dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 400px) { header .btn .long { display: none; } }

.doc { max-width: 780px; padding: clamp(40px, 6vw, 72px) 24px 80px; margin: 0 auto; }
.lede { font-size: clamp(18px, 2vw, 20px); color: var(--muted); margin-top: 18px; }
.updated { font-size: 14px; color: var(--muted); margin-top: 18px; }


.toc { margin: 32px 0 0; padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.toc h2 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-family: 'Instrument Sans', system-ui, sans-serif; font-weight: 600; }
.toc ol { margin: 0; padding-left: 20px; columns: 2 260px; column-gap: 32px; font-size: 15.5px; }
.toc li { margin: 0 0 4px; break-inside: avoid; }

.card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 0 0 16px; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.table-scroll { overflow-x: auto; margin: 0 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
caption { text-align: left; font-weight: 600; padding: 0 0 8px; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-top: 1px solid var(--line); }
thead th { border-top: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--wash); }
/* A table of facts, one per row, its label on the left (the data processing agreement). */
table.facts tbody tr:first-child th, table.facts tbody tr:first-child td { border-top: 0; }
table.facts th { width: 26%; font-weight: 600; }
@media (max-width: 600px) {
  table.stack thead { position: absolute; left: -9999px; }
  table.stack tr { display: block; border-top: 1px solid var(--line); padding: 8px 0; }
  table.stack th, table.stack td { display: block; border: 0; padding: 4px 14px; }
  table.facts th, table.facts td { display: block; width: auto; }
  table.facts td { border-top: 0; padding-top: 0; }
  table.stack td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
}

/* The footer, the same on every page: Baton and what it is, the pages, the
   website's own notices, then the company that runs it (company law asks for
   its name, number and registered office on its website). Two columns of
   links beside the brand on a wide screen; stacked on a phone. */
footer { border-top: 1px solid #3A3F78; background: var(--primary); color: #C9CBE6; padding: 56px 0 28px; font-size: 14px; line-height: 1.6; }
footer .foot-top { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
footer .foot-brand { grid-column: 1 / -1; }
footer .foot-brand p { margin: 14px 0 0; max-width: 36ch; font-size: 15px; color: #DADCF0; }
footer .foot-cta { display: inline-block; margin-top: 20px; background: var(--pop); color: #0D0F24; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 6px; text-decoration: none; }
footer .foot-cta:hover { background: #FFEBA6; }
footer h2 { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: #A9ADDB; margin: 0 0 12px; }
footer nav.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; font-size: 15px; font-weight: 400; }
footer nav.foot-col a { color: #FFFFFF; text-decoration: none; padding: 2px 0; }
footer nav.foot-col a:hover, footer nav.foot-col a[aria-current='page'] { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
footer .foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; margin-top: 44px; padding-top: 22px; border-top: 1px solid #3A3F78; font-size: 13px; color: #A9ADDB; }
footer .foot-base p { margin: 0; max-width: none; }
footer a:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; border-radius: 3px; }
@media (min-width: 760px) {
  footer .foot-top { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  footer .foot-brand { grid-column: auto; }
}

@media print {
  header, footer, .skip, .toc { display: none; }
  body { background: #FFFFFF; font-size: 11pt; }
  .doc { padding: 0; max-width: none; }
}