/* =====================================================================
   design.css — DELAD DESIGN FÖR CITIZEN SVERIGE (Pastel Learning)
   ---------------------------------------------------------------------
   Här ligger allt som är IDENTISKT på alla fyra sidtyper (start, om provet,
   garanti, kontakt) och därmed på alla 19 sidor i alla sex språk.
   Sidspecifika regler ligger kvar i respektive sidas <style>-block, som
   laddas EFTER den här filen och därför alltid vinner vid krock.
   Reglerna står i exakt samma ordning som i originalet — kaskaden är oförändrad.
   Ändra design här, inte i sidorna.
   ===================================================================== */


/* ===================== DESIGNTOKENS — delade av alla fyra sidtyper ===================== */
:root {
  --cream:        #faf6ef;
  --cream-hi:     #fdfbf6;
  --cream-dim:    #f3ede1;

  --primary:      #005aa7;
  --primary-deep: #00468a;
  --accent:       #ffd700;

  --ink:          #1a1a1a;
  --ink-soft:     #4a4a44;
  --ink-mute:     #6d6d63;

  --pastel-blue:      #d8e7f5;
  --pastel-blue-deep: #c6dcf0;
  --pastel-yellow:    #ffe9a8;
  --pastel-sage:      #dce9d4;
  --pastel-rose:      #f6d9ce;
  --pastel-lavender:  #e6e0f4;

  --guarantee-field:  #e9eee0;
  --guarantee-deep:   #1b7a4b;

  --r-sm:  14px;
  --r-md:  22px;
  --r-lg:  30px;
  --r-xl:  40px;
  --r-pill: 999px;

  --shadow-card: 0 4px 18px rgba(26, 26, 26, .06);
  --shadow-lift: 0 16px 38px rgba(26, 26, 26, .13);
  --shadow-pop:  0 12px 32px rgba(26, 26, 26, .14);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ===================== BAS — reset, typografi, layoutbredd ===================== */
* { box-sizing: border-box; }
/* clip (inte hidden): hidden gör <body> till sin egen scroll-container och
   då fastnar aldrig position:sticky — den regressionen är skälet till `clip`. */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--cream-hi);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height:auto MÅSTE ligga kvar. Varje <img> har width/height som attribut så
   att webbläsaren kan reservera rutan innan filen laddats, men med enbart
   max-width:100% behåller elementet attributets HÖJD medan bredden krymper —
   heron renderades 2,5x utsträckt. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.15; color: var(--navy); }

/* ---- Skrift som inte är latinsk ------------------------------------------
   Arabiska, persiska och tigrinja LADDADE sina Noto-fonter men använde dem
   aldrig: `body` satte bara Inter, som saknar arabiska och etiopiska glyfer,
   så webbläsaren föll tillbaka på systemfonten. Sidorna såg därför olika ut
   på olika enheter — för just de tre språkgrupper vars läsare har svårast att
   ta sig igenom en svensk myndighetstext.

   `html[lang=…] body` (0,1,2) måste vara mer specifik än `body` (0,0,1),
   annars vinner Inter tillbaka på källordning.

   Radavståndet höjs med flit. Arabisk skrift har djupa nedhäng och etiopisk
   har hög x-höjd; 1.6 som fungerar för latinsk skrift klämmer ihop dem. */
html[lang="ar"] body, html[lang="fa-AF"] body {
  font-family: 'Noto Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.75;
}
html[lang="ti"] body {
  font-family: 'Noto Sans Ethiopic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.75;
}
/* Negativ teckenspärr är gjord för latinska versaler. På arabiska trycker den
   ihop de SAMMANBUNDNA formerna så att ligaturerna blir svårlästa, och på
   etiopisk skrift kolliderar tecknens serifer. Nollställ, och ge rubrikerna
   luft — 1.15 räcker inte när tecknen är högre. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
html[lang="ti"] h1, html[lang="ti"] h2, html[lang="ti"] h3 {
  letter-spacing: 0; line-height: 1.4;
}
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===================== KNAPPAR OCH STORE-BADGES ===================== */
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(12, 58, 104, .26); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(12, 58, 104, .3); }
.btn-ghost .arr { transition: transform .28s var(--ease); }
.btn-ghost:hover .arr { transform: translateX(4px); }
/* Store-badges — samma behandling som de live-satta sidorna (.store-badge):
   fylld navy-pill på ljus botten, vit pill på den mörka CTA-panelen. */
.store-row { display: flex; gap: 14px; flex-wrap: wrap; }
.store-badge svg { width: 26px; height: 26px; flex-shrink: 0; }
.store-badge .small { display: block; font-size: .68rem; opacity: .8; line-height: 1.2; }
.store-badge .big { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }

/* ===================== SIDHUVUD — sticky header, varumärke, navigation ===================== */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 251, 246, .86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(26, 26, 26, .06);
  transition: box-shadow .3s var(--ease);
}
.site-head.is-stuck { box-shadow: 0 6px 20px rgba(26, 26, 26, .06); }
.head-inner {
  display: flex; align-items: center; gap: 18px; min-height: 68px;
  padding-inline-start: max(28px, env(safe-area-inset-left));
  padding-inline-end: max(28px, env(safe-area-inset-right));
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-inline-end: auto; flex-shrink: 0; }
.brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: var(--shadow-card); }
.brand span { font-weight: 700; font-size: 1.02rem; color: var(--navy); letter-spacing: -.02em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  position: relative; color: var(--ink-soft); font-weight: 500; font-size: .95rem;
  padding: 6px 0; text-decoration: none; white-space: nowrap;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
[dir="rtl"] .nav-links a::after { transform-origin: right; }
.nav-links a:hover { color: var(--navy); text-decoration: none; }
.nav-links a:hover::after { transform: scaleX(1); }
.head-tools { display: flex; align-items: center; gap: 12px; }
@media (max-width: 980px) { .nav-links { display: none; } }

/* ===================== HERO — delad ram (sidspecifika mått ligger kvar inline) ===================== */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; align-items: center; }
/* Hero-grafik: foto + konfetti */
.hero-art { position: relative; }
.hero-photo-wrap { position: relative; z-index: 2; }
[dir="rtl"] .confetti { transform: scaleX(-1); }
.confetti i { position: absolute; display: block; opacity: .85; will-change: transform; }
.c-dot  { width: 12px; height: 12px; border-radius: 50%; }
.c-sq   { width: 15px; height: 15px; border-radius: 4px; }
.c-bar  { width: 26px; height: 9px;  border-radius: 5px; }
.c-tri  { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; }

/* ===================== MÖRK CTA-PANEL ===================== */
.cta-inner::after {
  content: ''; position: absolute; inset-inline-end: -70px; top: -90px;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255, 215, 0, .09); pointer-events: none; z-index: 0;
}
.cta-inner > * { position: relative; z-index: 1; }
.cta-side { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }

/* ===================== SIDFOT ===================== */
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 34px; }
.foot-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.foot-brand img { width: 32px; height: 32px; border-radius: 9px; }
.foot-brand span { font-weight: 700; color: var(--navy); }
.foot-note { color: var(--ink-mute); font-size: .87rem; max-width: 34em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.footer-links a { color: var(--ink-soft); font-size: .9rem; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
.footer-links a:hover { color: var(--primary); }
.foot-bottom {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(26, 26, 26, .07);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .82rem; color: var(--ink-mute);
}

/* ===================== SPRÅKVÄLJARE (lang-dd) — samma widget på alla språksidor ===================== */
.lang-dd { position: relative; display: inline-flex; }
.lang-dd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid rgba(26,26,26,0.12); border-radius: 999px;
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lang-dd-btn:hover { background: var(--cream); }
.lang-dd-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lang-dd-current { line-height: 1; }
.lang-dd.open .lang-dd-chevron { transform: rotate(180deg); }
.lang-dd-panel {
  display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 200px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid rgba(26,26,26,0.08);
  border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.14);
  padding: 6px; z-index: 60; list-style: none; margin: 0;
}
.lang-dd.open .lang-dd-panel { display: block; }
.lang-dd-panel li { list-style: none; margin: 0; }
.lang-dd-panel a,
.lang-dd-panel span {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 500;
}
.lang-dd-panel a:hover { background: var(--cream); text-decoration: none; }
.lang-dd-panel a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--cream); }
.lang-dd-panel [aria-current="true"] { color: var(--primary); font-weight: 700; }
.lang-dd-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary); }
.lang-dd-panel a .lang-dd-check-slot { width: 16px; height: 16px; flex-shrink: 0; display: block; padding: 0; min-height: 0; }
/* BIDI: alternativraderna följer panelens basriktning; etiketten formas
   fortfarande efter sitt eget skriftsystem så att RTL-tecken renderas rätt
   och raden inte vänds. */
.lang-dd-panel a, .lang-dd-panel span { direction: inherit; unicode-bidi: plaintext; }
.lang-dd-foot { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.lang-dd-foot-label { color: var(--ink-soft); font-size: 0.85rem; font-weight: 500; }

/* ===================== HAMBURGERMENY (mobil) ===================== */
.burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 12px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; }
.mobile-menu.open {
  display: flex; flex-direction: column;
  padding: 6px 28px 14px;
  border-top: 1px solid rgba(26,26,26,0.06);
  background: rgba(253, 251, 246, .98);
}
.mobile-menu a {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1rem;
  min-height: 48px; display: flex; align-items: center;
  border-bottom: 1px solid rgba(26,26,26,0.05);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.mm-cta { color: var(--primary); font-weight: 700; }
@media (min-width: 981px) { .mobile-menu.open { display: none; } }
@media (max-width: 980px) { .burger { display: inline-flex; } }

/* ===================== RÖRELSE — allt som DÖLJER innehåll ligger bakom .js ===================== */
.js .reveal {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
/* (0,3,0). Slår med flit ut sidornas `.js .reveal` (0,2,0) — det är så
   slutläget vinner över utgångsläget. Följden är att den också slår ut varje
   `.kort:hover` (0,2,0); de hover-reglerna får därför en egen, tyngre väljare
   i sidornas CSS (`.kort.reveal.in:hover`, 0,4,0) i stället för att den här
   regeln viktas ned. Att vikta ned den provades och mättes: sidornas
   `.js .reveal` vann då på källordning och korten fastnade 20 px förskjutna. */
.js .reveal.in { opacity: 1; transform: none; }
.js .hero-rise { opacity: 0; transform: translateY(22px); animation: rise .85s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.js .hero-photo-wrap { opacity: 0; transform: translateY(26px) scale(.985); animation: photoIn 1.05s var(--ease) .18s forwards; }
@keyframes photoIn { to { opacity: 1; transform: none; } }
/* Vilovaggning på hero-fotot. Medvetet pytteliten och långsam: 1,1° totalt
   över 11 s på en lång symmetrisk ease. Det ska läsas som andning, inte som
   ett glapp — och den bor på en inre wrapper så den aldrig slåss med photoIn. */
@keyframes heroSway {
  0%   { transform: rotate(-.55deg) translate3d(0, 0, 0); }
  50%  { transform: rotate(.55deg) translate3d(0, -4px, 0); }
  100% { transform: rotate(-.55deg) translate3d(0, 0, 0); }
}
.js .hero-photo-idle {
  transform-origin: 50% 88%;
  animation: heroSway 11s cubic-bezier(.45, .05, .55, .95) 1.25s infinite;
  will-change: transform;
}
.js .confetti i { opacity: 0; animation: confIn .8s var(--ease) forwards, drift var(--dur, 7s) ease-in-out infinite; animation-delay: var(--d, 0ms), calc(var(--d, 0ms) + .8s); }
@keyframes confIn { to { opacity: .85; } }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -11px, 0) rotate(7deg); }
}
/* Parallaxen rider på en yttre wrapper så att drift-keyframen aldrig skrivs över */
.conf-shift { position: absolute; inset: 0; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
  animation: none !important;
  animation-delay: 0ms !important;
  transition: none !important;
  }
  .js .hero-photo-idle { transform: none !important; }
  .js .confetti i { opacity: .85 !important; transform: none !important; }
  .conf-shift { transform: none !important; }
  [dir="rtl"] .confetti { transform: scaleX(-1) !important; }
}

/* ===================== IKONER — Lucide inline-SVG ===================== */
/* De dekorativa emojierna (✓, 🌐, 📅, ✅, ✨) är utbytta mot Lucide 1.33.0 som
   inline-SVG. Ikonerna levereras UTAN width/height-attribut — annars låser de
   sig vid 24 px och struntar i behållarens teckenstorlek. Måtten sätts därför
   här. Utan en regel faller en SVG utan mått tillbaka på webbläsarens
   standard 300×150 px och spränger layouten.
   Färgen kommer från fill="none" + stroke="currentColor", så ikonen ärver den
   färg behållaren redan hade och färgsättningen behöver inte röras. */

/* Bocken i .tick (21–22 px cirkel) och .g-check (22 px) ersätter en ✓-glyf
   satt i font-weight 800 på .72rem. 13 px ikon + stroke 2.5 ger samma optiska
   tyngd; Lucides standardstreck (2) blir hårfint i den här storleken. */
.tick > svg,
.g-check > svg { width: 13px; height: 13px; stroke-width: 2.5; }

/* Klarmarkerat steg i resan — 46 px cirkel där syskonen är siffror i 1.02rem
   font-weight 800. 22 px + stroke 2.5 väger lika mycket som siffrorna. */
.jnum > svg { width: 22px; height: 22px; stroke-width: 2.5; }

/* Nyhetsbrevets funktionskort: 54 px platta, emojin var satt i 1.45rem (≈23 px).
   26 px fyller plattan lika bra utan att tränga mot kanterna. */
.ic > svg { width: 26px; height: 26px; }

/* Ordlistans termemblem — 46 px pastellrundel (40 px under 620 px) där det
   tidigare stod ett sifferchip i .88rem/800. 22 px ikon väger optiskt lika
   mycket som siffran gjorde och lämnar ~12 px luft till rundelns kant.
   Regeln bor här och inte i sidorna av samma skäl som syskonen ovan: en
   Lucide-SVG levereras utan width/height och faller annars tillbaka på
   webbläsarens 300×150 px. Måtten måste alltså sättas någonstans, och
   ikonmåtten för hela sajten är samlade i det här blocket. */
.term-ic > svg { width: 22px; height: 22px; }
@media (max-width: 620px) { .term-ic > svg { width: 20px; height: 20px; } }

/* Nyhetslistans korttecken — 54 px pastellplatta i kortrutnätet, där det
   tidigare inte fanns någon ikon alls. 26 px fyller plattan lika bra som
   nyhetsbrevets .ic gör sin.
   Det översta (utvalda) inlägget ritar samma platta som en genomgående
   pastellyta bredvid texten; där väger 64 px upp ytan. Under 900 px faller
   kortet tillbaka till ett vanligt kort, och ikonen med det.
   Regeln bor här och inte i sidorna av samma skäl som syskonen ovan: en
   Lucide-SVG levereras utan width/height och faller annars tillbaka på
   webbläsarens 300×150 px. */
.post-ic > svg { width: 26px; height: 26px; }
.post-list > li:first-child .post-ic > svg { width: 64px; height: 64px; }
@media (max-width: 900px) {
  .post-list > li:first-child .post-ic > svg { width: 26px; height: 26px; }
}

/* Kontoraderingens komponenter (/kontoradering). Ikonerna ersätter ingenting
   som fanns förut — sidan hade noll ikoner — så måtten är satta efter
   plattornas storlek: 54 px stegplatta → 26 px, 44 px notisrundel → 22 px,
   58 px rundel i hjälpbandet → 27 px. De två sista står mitt i löptext
   (låset i stegkortets fotnot, kuvertet före e-postadressen) och följer
   därför radens optiska tyngd i stället för en platta.
   Reglerna bor här och inte i sidan av samma skäl som syskonen ovan: en
   Lucide-SVG levereras utan width/height och faller annars tillbaka på
   webbläsarens 300×150 px. */
.step-ic > svg { width: 26px; height: 26px; }
.note-ico > svg { width: 22px; height: 22px; }
.help-ic > svg { width: 27px; height: 27px; }
.note-mark > svg, .mail-ic > svg { width: 18px; height: 18px; }
@media (max-width: 620px) {
  .step-ic > svg { width: 22px; height: 22px; }
  .note-ico > svg { width: 19px; height: 19px; }
  .help-ic > svg { width: 23px; height: 23px; }
}

/* Jordgloben i språkraden står mitt i löptext. 1em följer radens teckenstorlek
   automatiskt, och den lilla negativa vertical-align lägger ikonen på
   baslinjen så den beter sig som glyfen den ersätter.
   Selektorn kräver span[aria-hidden] som förälder just för att INTE träffa
   .lang-dd-globe, knappens egen ikon, som har egna mått i sidans <style>. */
.lang-foot-inline span[aria-hidden="true"] > svg {
  width: 1em; height: 1em; vertical-align: -0.15em;
}

/* ===================== RESPONSIVT — brytpunkter ===================== */
@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .site-head .head-cta { display: none; }
}
@media (max-width: 620px) {
  .wrap { padding: 0 20px; }
  .head-inner { padding-inline-start: max(20px, env(safe-area-inset-left)); padding-inline-end: max(20px, env(safe-area-inset-right)); }
  .store-row { gap: 10px; width: 100%; }
  .brand span { display: none; }
  .lang-dd-btn { padding: 9px 12px; font-size: 0.85rem; }
  .lang-dd-current { max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  .lang-dd-btn { padding: 8px 10px; gap: 6px; }
  .lang-dd-current { max-width: 6em; }
}

/* =====================================================================
   JURIDISKA SIDORNA (/integritetspolicy, /villkor) — 2026-08-24
   ---------------------------------------------------------------------
   Eget block sist i filen: sidorna byggdes om mot mockup 09/10 samtidigt
   som en annan agent arbetade i garanti.html, och en krock i mitten av
   filen hade varit svår att se. Rör inget ovanför.

   Här ligger BARA måtten på de nya Lucide-ikonerna, av samma skäl som
   syskonblocken ovan: en Lucide-SVG levereras utan width/height och faller
   annars tillbaka på webbläsarens 300×150 px. Löven i avslutsbandet ritades
   först 748×900 px av just den anledningen.
   Måtten är satta efter plattan ikonen sitter i: 42 px paragrafplatta → 21 px,
   40 px rundel i sidopanelen → 20 px. Kuvertet före e-postadressen står i
   löptext och följer radens optiska tyngd i stället för en platta.
   ===================================================================== */
.sec-ic > svg { width: 21px; height: 21px; }
.ask-ic > svg { width: 20px; height: 20px; }
.ask-mail .mail-ic > svg { width: 17px; height: 17px; }
.sec-final-art > svg { width: 84px; height: 84px; }
@media (max-width: 620px) {
  .sec-ic > svg { width: 18px; height: 18px; }
  .sec-final-art > svg { width: 68px; height: 68px; }
}

/* Maskinöversättningsnotisen. Sidan är juridiskt bindande, så läsaren måste se
   VILKEN text som gäller innan hen läser vidare — inte upptäcka det efteråt.
   Gul pastell som garantiblocket: en upplysning, inte en varning. */
.mt-notice {
  background: var(--pastel-yellow, #FFF6D6);
  border: 1px solid rgba(26, 26, 26, .10);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
}
.mt-notice a { color: inherit; text-decoration: underline; }
