/* Shared shell for the text pages (integritetspolicy, support).
   Tokens lifted from index.html so the pages match the landing page without
   pulling in its 65KB of layout. No build step, same as the rest of landing/. */
:root {
  --blue:      #2368E8;
  --gold:      #FCC207;
  --ink:       #0E1C36;
  --muted:     #59698A;
  --faint:     #8494B0;
  --paper:     #F2F5FA;
  --surface:   #FFFFFF;
  --rule:      #D9E2F0;
  --shell:     46rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 5rem;
  background: var(--paper);
  color: var(--ink);
  font-family: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 1.25rem; }

/* Same sticky masthead as the landing page, so a reader can get back without
   scrolling to the footer or reaching for the browser's back button. */
header.top {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0 1.25rem;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
header.top .row {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
}
header.top .brand {
  font-family: Nunito, ui-rounded, system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--blue);
  text-decoration: none;
  letter-spacing: -.01em;
}
header.top nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: .92rem;
  font-weight: 600;
}
header.top nav a { color: var(--muted); text-decoration: none; }
header.top nav a:hover { color: var(--ink); }
header.top nav a[aria-current] { color: var(--ink); }
/* The section links point back into the landing page, so they are the first
   thing worth dropping when the row gets tight. */
@media (max-width: 640px) { header.top nav .is-optional { display: none; } }

h1 {
  font-family: Nunito, ui-rounded, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: .5rem 0 .35rem;
}

h2 {
  font-family: Nunito, ui-rounded, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  margin: 2.4rem 0 .6rem;
  letter-spacing: -.01em;
}

.updated {
  color: var(--faint);
  font-size: .9rem;
  margin: 0 0 2rem;
}

.lede {
  font-size: 1.08rem;
  color: var(--muted);
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  margin: 1.5rem 0 2.5rem;
}

p, li { color: var(--muted); }
strong { color: var(--ink); font-weight: 700; }
a { color: var(--blue); }
ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .95rem;
  /* Narrow screens: let a wide table scroll rather than the page. */
  display: block;
  overflow-x: auto;
}
th, td {
  text-align: left;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
th { color: var(--ink); font-weight: 700; }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
}

footer.foot {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .88rem;
  color: var(--faint);
}
footer.foot a { color: var(--muted); margin-right: 1rem; }