/* ══════════════════════════════════════════════════════════════════════
   Xertified — hela formspråket i en fil.

   Färger och typografi följer v3.xertified.com. Skillnaden mot
   WordPress-temat är att det inte finns något att slåss mot: inga
   !important, inga specificitetsstrider, ingen full-bredd-hack med vw
   och överflödesklippning. Ett band är en <section> som fyller fönstret
   och en .wrap inuti som centrerar innehållet. Det är hela tricket.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/dm-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/dm-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

:root {
  --teal:         #2bb39c;
  --teal-hover:   #34c9b0;
  --teal-dark:    #1b4d4a;
  --teal-deep:    #123734;
  --teal-deeper:  #0c2826;
  --teal-soft:    rgba(43, 179, 156, .12);

  --gold:         #c9a227;  /* fyllningar */
  --gold-text:    #d6ae2e;  /* text på mörk botten, 4.5:1 */
  --gold-ink:     #8a6f14;  /* text på ljus botten            */

  --paper:        #f7f8f6;
  --white:        #fff;
  --ink:          #16211f;
  --ink-soft:     #4e5d5a;
  --ink-mute:     #7e8b88;
  --rule:         rgba(27, 77, 74, .14);
  --rule-dark:    rgba(255, 255, 255, .12);
  --on-dark:      rgba(255, 255, 255, .82);
  --on-dark-soft: rgba(255, 255, 255, .65);

  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --content: 1216px;
  --measure: 68ch;
  --gutter:  clamp(20px, 4vw, 32px);
  --band:    clamp(40px, 5vw, 68px);
  --nav-h:   64px;
  --radius:  12px;
  --tap:     44px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Typografi ─────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; margin-top: 2rem; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-top: 1.5rem; }
h4 { font-family: var(--mono); font-size: 12px; font-weight: 500;
     letter-spacing: .12em; text-transform: uppercase; color: var(--teal-dark); }
h1 em { font-style: normal; color: var(--teal); }

:is(h2, h3) + p, :is(h2, h3) + ul, :is(h2, h3) + ol { margin-top: 0; }
.wrap > :first-child, .band .wrap > :first-child > :first-child { margin-top: 0; }

p { margin: 0 0 1rem; max-width: var(--measure); text-wrap: pretty; }
h1 + p { font-size: 19px; color: var(--ink-soft); max-width: 60ch; margin-bottom: 1.4rem; }
h2 + p { color: var(--ink-soft); }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--teal-dark);
  margin: 0 0 2px;
}
/* Produktnamnet XoT behåller sin stavning även i versalrader. */
.keep-case { text-transform: none; }
.eyebrow + :is(h1, h2, h3) { margin-top: 0; }

a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }

ul, ol { margin: 0 0 1rem; padding-left: 1.3em; max-width: var(--measure); }
li { margin-bottom: .45em; }
ul { list-style: none; padding-left: 1.5em; }
ul > li { position: relative; }
ul > li::before {
  content: ''; position: absolute; left: -1.15em; top: .62em;
  width: 6px; height: 6px; background: var(--teal); transform: rotate(45deg);
}
ol > li::marker { color: var(--teal); font-weight: 700; }

code { font-family: var(--mono); font-size: .88em; background: var(--teal-soft);
       color: var(--teal-dark); padding: .12em .4em; border-radius: 4px; }
blockquote { margin: 1.5rem 0; padding-left: 20px; border-left: 3px solid var(--teal);
             color: var(--ink-soft); font-size: 19px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
strong { font-weight: 700; }

/* ── Band ──────────────────────────────────────────────────────────── */

.wrap { max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); }

.band { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * .6); }
.band--paper { background: var(--paper); }
.band--white { background: var(--white); border-block: 1px solid var(--rule); }
.band + .band--white { border-top: 0; }
.band--dark  { background: var(--teal-deeper); color: var(--on-dark); }
.band--hero  { background: radial-gradient(ellipse at 70% 20%,
                 #1b4d4a 0%, var(--teal-deep) 45%, var(--teal-deeper) 100%);
               color: var(--on-dark); position: relative; overflow: hidden; }
.band--cta   { background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal-deeper) 100%);
               color: var(--on-dark); text-align: center; }
.band--cta p { margin-inline: auto; }
.band--cta .btns { justify-content: center; }

:is(.band--dark, .band--hero, .band--cta) :is(h1, h2, h3, strong) { color: #fff; }
:is(.band--dark, .band--hero, .band--cta) :is(h4, .eyebrow) { color: var(--gold-text); }
:is(.band--dark, .band--hero, .band--cta) :is(p, li) { color: var(--on-dark); }
:is(.band--dark, .band--hero, .band--cta) h1 + p { color: rgba(255,255,255,.82); }
:is(.band--dark, .band--hero, .band--cta) a:not(.btn) { color: var(--teal); }
:is(.band--dark, .band--hero, .band--cta) ul > li::before { background: var(--teal); }
:is(.band--dark, .band--hero, .band--cta) hr { border-top-color: var(--rule-dark); }

/* XoT-symbolen som svagt märke i hjältebandet */
/* Märket som vattenstämpel. Hela symbolen ska synas — den brutna
   armen uppe till höger är poängen med den, och en beskuren version
   läser bara som diagonala streck. Hjältebandet är bredare än det är
   högt, så märket skalas efter höjden och centreras lodrätt. */
.band--hero::after {
  content: ''; position: absolute; z-index: 0;
  top: 50%; right: clamp(16px, 5vw, 80px); transform: translateY(-50%);
  width: clamp(200px, 26vw, 330px); aspect-ratio: 1;
  opacity: .1; pointer-events: none;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M9.9 90L-0.1 80L9.9 70L19.9 60L23.25 63.35L26.6 66.7L34.95 58.35L43.3 50L35 41.7L26.7 33.4L23.35 36.75L20 40.1L10 30.1L0 20.1L10 10.1L20 0.1L30 10.1L40 20.1L36.7 23.4L33.4 26.7L53.35 46.65L73.3 66.6L76.6 63.3L79.9 60L89.9 70L99.9 80L89.9 90L79.9 100L69.9 90L59.9 80L63.25 76.65L66.6 73.3L58.3 65L50 56.7L41.65 65.05L33.3 73.4L36.65 76.75L40 80.1L30.05 90.05L20.1 100L20 100L19.9 100L9.9 90ZM23.4 83.3L26.7 80L23.35 76.65L20 73.3L16.65 76.65L13.3 80L16.6 83.3L19.9 86.6L20 86.6L20.1 86.6L23.4 83.3ZM83.4 83.3L86.7 80L83.35 76.65L80 73.3L76.65 76.65L73.3 80L76.6 83.3L79.9 86.6L80 86.6L80.1 86.6L83.4 83.3ZM58.8 41.1L55.5 37.8L60.25 33.05L65 28.3L68.35 31.65L71.7 35L67 39.7L62.3 44.4L62.2 44.4L62.1 44.4L58.8 41.1ZM73.95 26.05L70.6 22.7L75.3 18L80 13.3L76.65 9.95L73.3 6.6L76.65 3.25L80 -0.1L90.05 9.95L100.1 20L96.75 23.35L93.4 26.7L90.05 23.35L86.7 20L82 24.7L77.3 29.4L73.95 26.05ZM23.4 23.3L26.7 20L23.35 16.65L20 13.3L16.65 16.65L13.3 20L16.6 23.3L19.9 26.6L20 26.6L20.1 26.6L23.4 23.3Z'/%3E%3C/svg%3E");
}
.band--hero > .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .band--hero::after { display: none; } }

/* ── Knappar ───────────────────────────────────────────────────────── */

.btns { display: flex; flex-wrap: wrap; gap: 12px; max-width: none; margin: 1.4rem 0 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 12px 26px;
  font: 700 15px/1.3 var(--sans); text-decoration: none;
  border: 1px solid transparent; border-radius: 7px;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn--primary { background: var(--teal); color: var(--teal-deeper); border-color: var(--teal); }
.btn--primary:hover { background: var(--teal-hover); border-color: var(--teal-hover); color: var(--teal-deeper); }
.btn--gold { background: var(--gold); color: var(--teal-deeper); border-color: var(--gold); }
.btn--gold:hover { background: #d8b23c; border-color: #d8b23c; color: var(--teal-deeper); }
.btn--ghost { color: var(--teal-dark); border-color: var(--rule); }
.btn--ghost:hover { color: var(--teal); border-color: var(--teal); }
:is(.band--dark, .band--hero, .band--cta) .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.35);
}
:is(.band--dark, .band--hero, .band--cta) .btn--ghost:hover {
  color: var(--teal); border-color: var(--teal);
}

/* ── Rutnät ────────────────────────────────────────────────────────── */

.grid {
  display: grid; gap: 20px; margin: 1.5rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.grid > div > :last-child { margin-bottom: 0; }
.grid + p, .grid + .tablewrap { margin-top: 1.6rem; }
.grid p { font-size: 14.5px; color: var(--ink-soft); max-width: none; }
.grid h3 { margin-top: 0; }

.grid--cards > div {
  background: var(--white); border: 1px solid var(--rule);
  border-top: 3px solid var(--teal); border-radius: var(--radius);
  padding: 22px 24px;
  transition: border-color .2s, box-shadow .2s;
}
.grid--cards > div:hover { border-color: var(--teal); box-shadow: 0 8px 28px rgba(27,77,74,.09); }
:is(.band--dark, .band--hero) .grid--cards > div {
  background: rgba(255,255,255,.05); border-color: var(--rule-dark); border-top-color: var(--teal);
}
:is(.band--dark, .band--hero) .grid p { color: var(--on-dark-soft); }

.grid--ruled > div { border-top: 2px solid var(--rule); padding-top: 16px; }
.grid--ruled h3 { font-size: 16.5px; color: var(--teal-dark); }
:is(.band--dark, .band--hero) .grid--ruled > div { border-top-color: var(--rule-dark); }
:is(.band--dark, .band--hero) .grid--ruled h3 { color: #fff; }

.grid--stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.grid--stats > .stat { border-top: 2px solid var(--rule); padding-top: 14px; }
.stat__fig {
  font-size: clamp(32px, 3.8vw, 42px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.05; color: var(--teal-dark); margin: 0 0 6px; max-width: none;
}
.stat p:not(.stat__fig) { font-size: 13.5px; line-height: 1.5; }
:is(.band--dark, .band--hero) .grid--stats > .stat { border-top-color: var(--rule-dark); }
:is(.band--dark, .band--hero) .stat__fig { color: var(--teal); }

/* En länk ensam i en cell är en vidareläsning, inte en knapp. */
.grid .btns { margin-top: 14px; gap: 18px; }
.grid .btns .btn {
  min-height: 24px; padding: 0; border: 0; background: none;
  font-size: 14px; color: var(--teal-dark);
  text-decoration: underline; text-decoration-color: rgba(27, 77, 74, .3);
  text-underline-offset: 3px;
}
.grid .btns .btn::after { content: '\00a0→'; text-decoration: none; }
.grid .btns .btn:hover { color: var(--teal); text-decoration-color: currentColor; }
:is(.band--dark, .band--hero) .grid .btns .btn {
  color: var(--teal); text-decoration-color: rgba(43, 179, 156, .4);
}

.grid[style*="--cols"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
@media (max-width: 760px) { .grid[style*="--cols"] { grid-template-columns: 1fr; } }

.mono { font-family: var(--mono); font-size: 12px; font-weight: 500;
        letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }

/* ── Tabeller ──────────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; margin: 1.5rem 0; max-width: 960px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px;
        background: var(--white); border: 1px solid var(--rule);
        border-radius: var(--radius); overflow: hidden; }
th { background: var(--teal-dark); color: #fff; text-align: left;
     font: 600 13px/1.4 var(--sans); letter-spacing: .01em;
     padding: 13px 16px; }
td { padding: 13px 16px; border-bottom: 1px solid var(--rule);
     vertical-align: top; color: var(--ink-soft); }
tr:last-child td { border-bottom: 0; }
td strong { color: var(--ink); }
:is(.band--dark, .band--hero) table { background: rgba(255,255,255,.04); border-color: var(--rule-dark); }
:is(.band--dark, .band--hero) td { color: var(--on-dark-soft); border-bottom-color: var(--rule-dark); }
:is(.band--dark, .band--hero) th { background: rgba(255,255,255,.08); }
:is(.band--dark, .band--hero) td strong { color: #fff; }

/* Statustabell: sista kolumnen heter XoT. Rader där XoT hjälper till
   markeras med grön kant och ljusgrön botten. Rader med Nej får ingen markering. */
.table--status .rad--ja td { background: rgba(43, 179, 156, .14); color: var(--ink); }
.table--status .rad--delvis td { background: rgba(43, 179, 156, .06); color: var(--ink); }
.table--status :is(.rad--ja, .rad--delvis) td:first-child { box-shadow: inset 4px 0 0 var(--teal); }
.table--status .rad--delvis td:first-child { box-shadow: inset 4px 0 0 rgba(43, 179, 156, .5); }
.table--status .rad--nej td { color: var(--ink-soft); }
.status { display: inline-block; padding: 2px 10px; border-radius: 999px;
          font-size: 13px; font-weight: 700; white-space: nowrap; }
.status--ja { background: var(--teal-dark); color: #fff; }
.status--delvis { background: var(--white); color: var(--teal-dark); border: 1.5px solid var(--teal); }
.status--nej { color: var(--ink-soft); font-weight: 500; padding-inline: 0; }

/* ── Vanliga frågor ────────────────────────────────────────────────── */

.faq { max-width: 820px; margin-top: 1.5rem; }
.eyebrow + .faq { margin-top: 4px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 18px 40px 18px 0; font-size: 16px; font-weight: 700;
  letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--teal);
}
.faq details[open] summary::after { content: '\2212'; }
.faq details > :not(summary) { padding-bottom: 18px; font-size: 14.5px; color: var(--ink-soft); }
:is(.band--dark, .band--hero) .faq details { border-bottom-color: var(--rule-dark); }
:is(.band--dark, .band--hero) .faq summary { color: #fff; }

/* ── Huvud ─────────────────────────────────────────────────────────── */

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gutter); top: 8px; z-index: 200; padding: 10px 16px;
  background: var(--gold); color: var(--teal-deeper); font-weight: 700; border-radius: 6px;
}

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12, 40, 38, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-dark);
  padding-top: env(safe-area-inset-top, 0px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head { background: var(--teal-deeper); }
}
.head-inner { display: flex; align-items: center; gap: 16px; min-height: var(--nav-h); }

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto;
         color: #fff; text-decoration: none; }
.brand__mark { width: 22px; height: 22px; flex: 0 0 auto; }
.brand__name { font-weight: 800; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; }

.nav ul { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; max-width: none; }
.nav li { margin: 0; position: relative; }
.nav li::before { display: none; }
.nav a {
  display: flex; align-items: center; min-height: var(--tap); height: var(--nav-h);
  padding: 0 12px; color: rgba(255,255,255,.78); font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.nav a:hover, .nav li:hover > a { color: #fff; }
.nav a.is-current { color: #fff; box-shadow: inset 0 -2px 0 var(--teal); }

/* Åtta menyrubriker och knappen får inte plats med full luft under
   ungefär 1360 px. Då minskar luften mellan rubrikerna lite. */
@media (max-width: 1360px) {
  .nav a { padding: 0 9px; font-size: 13.5px; }
  .head-inner { gap: 12px; }
}

.caret { width: 7px; height: 7px; margin-left: 7px; border-right: 1.5px solid currentColor;
         border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg);
         opacity: .7; }

.nav li ul {
  position: absolute; top: 100%; left: 0; display: block; min-width: 250px;
  padding: 12px 8px 8px; margin: 0;
  background: radial-gradient(ellipse at 30% 0%, #1b4d4a 0%, var(--teal-deep) 55%, var(--teal-deeper) 100%);
  border: 1px solid rgba(43,179,156,.3); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav li ul::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(201,162,39,0), var(--gold), rgba(201,162,39,0));
}
.nav li:hover > ul, .nav li:focus-within > ul {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav li ul a {
  height: auto; min-height: 40px; padding: 8px 14px; gap: 10px;
  font-size: 13.5px; border-radius: 8px; color: rgba(255,255,255,.8);
}
.nav li ul a::before {
  content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(43,179,156,.45); transition: background-color .15s, box-shadow .15s;
}
.nav li ul a:hover { background: rgba(43,179,156,.1); color: #fff; }
.nav li ul a:hover::before { background: var(--teal); box-shadow: 0 0 8px rgba(43,179,156,.7); }

.nav .nav-cta a {
  height: auto; min-height: 38px; margin-left: 8px; padding: 9px 18px;
  background: var(--teal); color: var(--teal-deeper); font-weight: 700; border-radius: 7px;
}
.nav .nav-cta a:hover { background: var(--teal-hover); color: var(--teal-deeper); }

.langs { display: flex; gap: 2px; border: 1px solid var(--rule-dark); border-radius: 6px; padding: 3px; }
.lang { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
        font: 700 12px/1 var(--sans); letter-spacing: .06em;
        color: rgba(255,255,255,.55); text-decoration: none; border-radius: 4px; }
.lang.is-current { background: rgba(255,255,255,.12); color: #fff; }
.lang:hover { color: #fff; }

.navtoggle, .burger { display: none; }

@media (max-width: 1200px) {
  .burger {
    display: flex; align-items: center; gap: 8px; order: 3;
    min-height: var(--tap); padding: 0 12px; cursor: pointer;
    color: #fff; font-size: 15px; font-weight: 500;
  }
  .nav { order: 4; flex-basis: 100%; display: none; padding-bottom: 12px; }
  .navtoggle:checked ~ .nav { display: block; }
  .head-inner { flex-wrap: wrap; }
  .nav ul { display: block; }
  .nav a { height: auto; padding: 11px 12px; border-bottom: 1px solid var(--rule-dark); }
  .nav li ul {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none; padding: 0 0 0 14px; min-width: 0;
  }
  .nav li ul::before { display: none; }
  .caret { display: none; }
  .nav .nav-cta a { margin: 10px 12px; justify-content: center; border-bottom: 0; }
}

/* ── Brödsmulor ────────────────────────────────────────────────────── */

.crumbs {
  max-width: var(--content); margin-inline: auto;
  padding: 14px var(--gutter) 0;
  font-size: 13px; color: var(--ink-mute);
}
.crumbs a { display: inline-block; min-height: 24px; line-height: 24px;
            color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--teal-dark); text-decoration: underline; }
.crumbs span { margin: 0 7px; }
.crumbs > span:last-child { margin-right: 0; line-height: 24px; color: var(--ink-soft); }
.crumbs + .band--hero { margin-top: 14px; }

/* ── Fot ───────────────────────────────────────────────────────────── */

.site-foot {
  background: var(--teal-deeper); color: var(--on-dark-soft);
  padding-block: 56px 32px; font-size: 14px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
.foot-cols {
  display: grid; gap: 28px 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding-bottom: 32px; border-bottom: 1px solid var(--rule-dark);
}
.foot-cols h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; margin: 0 0 12px;
}
.foot-cols ul { list-style: none; padding: 0; margin: 0; }
.foot-cols li { margin-bottom: 7px; }
.foot-cols li::before { display: none; }
.foot-cols a { color: var(--on-dark-soft); text-decoration: none;
               display: inline-block; min-height: 24px; }
.foot-cols a:hover { color: var(--teal); }
.foot-note { margin: 28px 0 0; max-width: 60ch; color: var(--on-dark-soft); }
.foot-note a { color: var(--teal); }
.foot-legal { margin: 14px 0 0; font-size: 12.5px; color: rgba(255,255,255,.55); }
.foot-legal span { margin: 0 8px; opacity: .5; }
.foot-legal a { display: inline-block; min-height: 24px; line-height: 24px;
                color: rgba(255,255,255,.75); text-decoration: none; }
.foot-legal a:hover { color: var(--teal); text-decoration: underline; }

/* ── Fokus ─────────────────────────────────────────────────────────── */

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ── Utskrift ──────────────────────────────────────────────────────── */

@media print {
  .site-head, .site-foot, .btns, .crumbs { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { padding-block: 0; background: none !important; color: #000 !important; }
  .band :is(h1, h2, h3, p, li) { color: #000 !important; }
  .band--hero::after { display: none; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .85em; color: #555; }
  .faq details { break-inside: avoid; }
  .faq details > :not(summary) { display: block !important; }
}

/* ── Bilder ────────────────────────────────────────────────────────── */
/* En bild på egen rad i Markdown blir en figur. Måtten står i HTML, så
   sidan hoppar inte när bilden laddas. */

.media { margin: 1.75rem 0 1.75rem; max-width: 760px; }
.media img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--rule);
}
.media figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); }
:is(.band--dark, .band--hero) .media img { border-color: var(--rule-dark); }
:is(.band--dark, .band--hero) .media figcaption { color: var(--on-dark-soft); }
.grid .media { margin-top: 0; }
.media + p { margin-top: 0; }
/* Diagram (SVG) får full bredd och vit botten, så att texten i dem
   inte blir för liten. */
.media--diagram { max-width: 960px; }
.media--diagram img { background: #fff; }
/* På smala skärmar blir texten i diagrammen för liten. Då får diagrammet
   sin läsbara bredd och går att svepa i sidled. */
@media (max-width: 700px) {
  .media--diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .media--diagram img { width: 680px; max-width: none; }
}
/* Stående foton blir annars mycket höga. */
.media--portrait { max-width: 440px; }