/* ==========================================================================
   Inter — variabel font, egen server. Inget anrop till Google Fonts, alltså
   får ingen tredje part besökarnas IP-adresser. Filerna täcker vikt 100–900,
   så samma fil används till all text.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../typsnitt/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../typsnitt/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Medidikt AB — stilmall
   Färgerna nedan är hämtade ur logotypen (#64B1DB blå, #99C45B grön) och ur
   appens gränssnitt (#0077B6). Loggans toner är ljusa och används till ytor
   och dekor; de mörkare varianterna bär text och knappar där kontrasten måste
   hålla.
   ========================================================================== */

:root {
  /* Blått */
  --bla-logga:    #64B1DB;   /* logotypens blå */
  --bla:          #0077B6;   /* appens accent — knappar, länkar */
  --bla-mork:     #005A8A;   /* hover */
  --bla-djup:     #0F2E47;   /* mörka sektioner */
  --bla-yta:      #EEF5FA;   /* ljus blå platta */

  /* Grönt */
  --gron-logga:   #99C45B;   /* logotypens grön */
  --gron:         #5E8C2A;   /* text och ikoner på ljus botten */
  --gron-mork:    #47691F;
  --gron-yta:     #F3F8EA;   /* ljus grön platta */

  /* Neutralt */
  --text:         #1A2B3C;
  --text-dampad:  #5A7A94;
  --vit:          #FFFFFF;
  --ram:          #E0EAF0;

  --bredd:        1120px;
  --radie:        16px;
  --radie-liten:  10px;

  --skugga:       0 1px 2px rgba(15, 46, 71, .04), 0 8px 24px rgba(15, 46, 71, .06);
  --skugga-hog:   0 2px 4px rgba(15, 46, 71, .06), 0 18px 48px rgba(15, 46, 71, .12);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--vit);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--bla); text-decoration: none; }
a:hover { color: var(--bla-mork); text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
h1 { font-size: clamp(34px, 5vw, 54px); }
h2 { font-size: clamp(27px, 3.4vw, 38px); }
h3 { font-size: 19px; line-height: 1.3; }
p  { margin: 0; }

.behallare { max-width: var(--bredd); margin: 0 auto; padding: 0 24px; }

section { padding: 88px 0; }
@media (max-width: 640px) { section { padding: 60px 0; } }

/* Sektionsytor — blått och grönt varvas jämnt genom sidan */
.yta-bla  { background: var(--bla-yta); }
.yta-gron { background: var(--gron-yta); }

.sektionshuvud { max-width: 660px; margin: 0 auto 52px; text-align: center; }
.sektionshuvud p { margin-top: 16px; font-size: 18px; color: var(--text-dampad); }

.ogonbryn {
  display: inline-block;
  font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--bla);
}
.ogonbryn-gron { color: var(--gron); }

/* --- Knappar ------------------------------------------------------------ */

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.knapp:hover { text-decoration: none; transform: translateY(-1px); }

.knapp-primar { background: var(--bla); color: var(--vit); }
.knapp-primar:hover { background: var(--bla-mork); color: var(--vit); }

.knapp-gron { background: var(--gron); color: var(--vit); }
.knapp-gron:hover { background: var(--gron-mork); color: var(--vit); }

.knapp-lugn { background: var(--vit); color: var(--bla); border-color: var(--ram); }
.knapp-lugn:hover { border-color: var(--bla-logga); color: var(--bla-mork); }

.knapp-ljus { background: var(--vit); color: var(--bla-djup); }
.knapp-ljus:hover { background: #EAF3F9; color: var(--bla-djup); }

/* --- Sidhuvud ----------------------------------------------------------- */

.sidhuvud {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ram);
}
.sidhuvud .behallare {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}

.marke { display: flex; align-items: center; gap: 11px; color: var(--text); }
.marke:hover { text-decoration: none; }
.marke img { width: 34px; height: auto; }
.marke-namn { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }

.meny { display: flex; align-items: center; gap: 30px; }
.meny a { color: var(--text-dampad); font-size: 15.5px; font-weight: 500; }
.meny a:hover { color: var(--bla); text-decoration: none; }
.meny .knapp-primar { color: var(--vit); }

.menyknapp {
  display: none;
  width: 42px; height: 42px;
  padding: 0; background: none;
  border: 1px solid var(--ram); border-radius: var(--radie-liten);
  cursor: pointer; color: var(--text);
}

@media (max-width: 860px) {
  .menyknapp { display: grid; place-items: center; }
  .meny {
    position: absolute; top: 72px; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 16px 24px 22px;
    background: var(--vit);
    border-bottom: 1px solid var(--ram);
    box-shadow: var(--skugga);
  }
  .meny.oppen { display: flex; }
  .meny a { padding: 10px 0; font-size: 17px; }
  .meny .knapp { margin-top: 10px; }
}

/* --- Genomskinligt sidhuvud över filmen -----------------------------------
   På sidor med filmhjälte (body.har-filmhjalte) ligger sidhuvudet fast ovanpå
   filmen i stället för ovanför den. Skriptet sätter .over-film så länge sidan
   står högst upp; då är sidhuvudet genomskinligt med vit text. Så fort man
   rullar försvinner klassen och sidhuvudet blir vitt igen. Utan skript blir
   det aldrig genomskinligt — hellre ett vitt sidhuvud än oläslig meny.      */

.har-filmhjalte .sidhuvud {
  position: fixed; left: 0; right: 0;
  transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.har-filmhjalte .hjalte-film { padding-top: 168px; }

/* Filmen är ljus uppe till höger, där menyn står. En mörk rand längs
   överkanten håller de vita menylänkarna läsbara. */
.har-filmhjalte .hjalte-slöja::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px;
  background: linear-gradient(to bottom, rgba(11, 34, 53, .72), rgba(11, 34, 53, 0));
}

.sidhuvud.over-film {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.sidhuvud.over-film .marke-namn,
.sidhuvud.over-film .meny a:not(.knapp) { color: rgba(255, 255, 255, .88); }
.sidhuvud.over-film .meny a:not(.knapp):hover { color: var(--vit); }
.sidhuvud.over-film .menyknapp { color: var(--vit); border-color: rgba(255, 255, 255, .35); }

@media (max-width: 860px) {
  .har-filmhjalte .hjalte-film { padding-top: 144px; }
  /* Den utfällda mobilmenyn har vit botten, så länkarna måste vara mörka där. */
  .sidhuvud.over-film .meny a:not(.knapp) { color: var(--text-dampad); }
}

/* --- Hjältesektion ------------------------------------------------------ */

.hjalte {
  position: relative;
  padding: 76px 0 88px;
  background:
    radial-gradient(900px 460px at 12% -8%,  rgba(100,177,219,.30), transparent 62%),
    radial-gradient(760px 420px at 92% 12%,  rgba(153,196,91,.26),  transparent 62%),
    var(--vit);
  overflow: hidden;
}
.hjalte-rutnat {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: start;
}
.hjalte h1 { margin-bottom: 20px; }
.hjalte-ingress { font-size: 19px; color: var(--text-dampad); max-width: 33em; }
.hjalte-knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hjalte-punkter {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 32px 0 0; padding: 0; list-style: none;
}
.hjalte-punkter li {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--text);
}
.hjalte-punkter svg { flex: none; color: var(--gron); }

/* Bildspalten skjuts ner så att animationens överkant hamnar i linje med
   rubriken, inte med ögonbrynet ovanför den. Måttet är uppmätt i webbläsaren. */
.hjalte-bild { padding-top: 40px; }

@media (max-width: 900px) {
  .hjalte-rutnat { grid-template-columns: 1fr; gap: 44px; align-items: stretch; }
  .hjalte-bild { order: -1; padding-top: 0; }
}

/* --- Hjältesektion med film i bakgrunden ---------------------------------
   Filmen ligger i helskärm bakom innehållet. Eftersom klippet är ljust — vita
   journalskärmar, ljusa väggar — krävs en kraftig slöja för att vit text ska
   gå att läsa. Slöjan är mörkast till vänster där texten står och släpper fram
   bilden till höger, så att filmen syns där den inte är i vägen.             */

.hjalte-film {
  position: relative;
  padding: 96px 0 104px;
  background: var(--bla-djup);
  color: var(--vit);
  overflow: hidden;
}
.hjalte-film .hjalte-rutnat { display: block; }

.hjalte-bakgrund { position: absolute; inset: 0; }
.hjalte-bakgrund-video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  /* Hjälterutan är bredare än filmens 16:9, så bredden är redan helt utnyttjad
     och object-position saknar verkan i sidled. Vill man flytta motivet åt
     höger måste man därför zooma in något först — 8 % ger 4 % marginal på var
     sida, varav 3 % används till förskjutningen. Mer zoom kostar skärpa och
     beskär mer på höjden. */
  transform: scale(1.08) translateX(3%);
  transform-origin: center center;
}
.hjalte-slöja {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(11, 34, 53, .80)  0%,
      rgba(11, 34, 53, .76) 38%,
      rgba(11, 34, 53, .56) 58%,
      rgba(11, 34, 53, .26) 80%,
      rgba(11, 34, 53, .16) 100%),
    linear-gradient(to top, rgba(11, 34, 53, .48), rgba(11, 34, 53, 0) 45%);
}

.hjalte-innehall { position: relative; z-index: 2; max-width: var(--bredd); }
.hjalte-innehall > div { max-width: 620px; }

.hjalte-film .ogonbryn { color: var(--gron-logga); font-size: 16px; margin-bottom: 18px; }
@media (max-width: 640px) { .hjalte-film .ogonbryn { font-size: 14px; } }
.hjalte-film h1 { color: var(--vit); }
.hjalte-film .hjalte-ingress { color: rgba(255, 255, 255, .86); }
.hjalte-film .hjalte-punkter li { color: var(--vit); }
.hjalte-film .hjalte-punkter svg { color: var(--gron-logga); }

.hjalte-pausknapp {
  right: 16px; bottom: 16px; left: auto;
  z-index: 3;
  opacity: 0;
}
.hjalte-film:hover .hjalte-pausknapp,
.hjalte-pausknapp:focus-visible,
.hjalte-film.pausad .hjalte-pausknapp { opacity: 1; }

@media (max-width: 900px) {
  .hjalte-film { padding: 72px 0 84px; }
  .hjalte-bakgrund-video { transform: none; object-position: center 42%; }
  .hjalte-slöja {
    background:
      linear-gradient(180deg, rgba(11,34,53,.86) 0%, rgba(11,34,53,.80) 55%, rgba(11,34,53,.66) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hjalte-pausknapp { opacity: 1; }
}

/* --- Telefonram --------------------------------------------------------- */

.telefon {
  width: 100%; max-width: 290px; margin: 0 auto;
  padding: 9px;
  background: var(--bla-djup);
  border-radius: 34px;
  box-shadow: var(--skugga-hog);
}
.telefon img { border-radius: 26px; width: 100%; }
.telefon-liten { max-width: 218px; }

/* Telefonen hänger ut över animationens nedre högerhörn. Den visar appens
   gränssnitt; animationen visar flödet. Tillsammans säger de mer än var för
   sig. Satt i hjältesektionen till en början, nu i "Så fungerar det" ovanpå
   .flode-block — .flode ger redan position: relative, så selektorn gäller
   var .telefon-mini än läggs in i en .flode-ruta.                          */
.flode .telefon-mini {
  position: absolute;
  right: -16px; bottom: -42px;
  width: 108px;
  padding: 5px;
  border-radius: 18px;
  z-index: 3;
  transform: rotate(6deg);
  transform-origin: bottom right;
  box-shadow: 0 10px 28px rgba(15, 46, 71, .28);
}
.flode .telefon-mini img { border-radius: 14px; }

@media (max-width: 900px) {
  .flode .telefon-mini { right: 6px; bottom: -24px; width: 100px; }
}
@media (max-width: 420px) {
  .flode .telefon-mini { width: 84px; bottom: -18px; }
}

/* --- Flödesanimation -----------------------------------------------------
   Kort tecknad loop som visar de tre stegen innan de beskrivs i ord. Ljudlös
   och utan tal, alltså rätt sorts klipp att låta rulla av sig själv — till
   skillnad från demovideon. Pausknappen är inget pynt: rörligt innehåll som
   loopar längre än fem sekunder måste gå att stoppa (WCAG 2.2.2).           */

.flode {
  position: relative;
  width: 100%;
  margin: 0;
}

/* Samma komponent, men fristående i ett avsnitt i stället för i hjältespalten */
.flode-block {
  width: min(100%, 620px, calc(48vh * 16 / 9));
  margin: 0 auto 48px;
}
.flode-video {
  width: 100%; height: auto;
  display: block;
  border-radius: var(--radie);
  box-shadow: var(--skugga-hog);
  background: var(--bla-yta);
}

.flode-knapp {
  position: absolute; left: 12px; bottom: 12px;
  z-index: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: none; border-radius: 50%;
  background: rgba(15, 46, 71, .55);
  color: var(--vit);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.flode:hover .flode-knapp,
.flode-knapp:focus-visible,
.flode.pausad .flode-knapp { opacity: 1; }
.flode-knapp:hover { background: rgba(15, 46, 71, .78); }

/* Knappen visar pausikonen medan filmen rullar, spelikonen när den står still */
.flode-knapp .ikon-spela { display: none; }
.flode.pausad .flode-knapp .ikon-paus  { display: none; }
.flode.pausad .flode-knapp .ikon-spela { display: block; }

/* Rör sig inget av sig självt för den som bett om det — knappen syns då alltid */
@media (prefers-reduced-motion: reduce) {
  .flode-knapp { opacity: 1; }
}

/* --- Steg --------------------------------------------------------------- */

.steg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 820px) { .steg { grid-template-columns: 1fr; } }

.steg-kort {
  position: relative;
  padding: 32px 28px;
  background: var(--vit);
  border: 1px solid var(--ram); border-radius: var(--radie);
  box-shadow: var(--skugga);
}
.steg-nummer {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 18px;
  border-radius: 12px;
  font-size: 16px; font-weight: 700;
  background: var(--bla); color: var(--vit);
}
.steg-kort:nth-child(2) .steg-nummer { background: var(--bla-logga); }
.steg-kort:nth-child(3) .steg-nummer { background: var(--gron); }
.steg-kort h3 { margin-bottom: 10px; }
.steg-kort p  { color: var(--text-dampad); font-size: 16px; }

/* --- Donglelicensen: den mörka mittsektionen ---------------------------- */

.licens {
  color: var(--vit);
  background:
    radial-gradient(700px 340px at 88% 6%, rgba(153,196,91,.30), transparent 66%),
    linear-gradient(140deg, #0F2E47 0%, #10486B 52%, #2C6B52 100%);
}
.licens .ogonbryn { color: var(--gron-logga); }
.licens h2 { margin-bottom: 18px; }
.licens-ingress { font-size: 19px; color: rgba(255,255,255,.82); max-width: 40em; }

.licens-rutnat { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .licens-rutnat { grid-template-columns: 1fr; gap: 40px; } }

.raknerutan {
  padding: 30px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radie);
  backdrop-filter: blur(6px);
}
.raknerutan-rubrik {
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gron-logga); margin-bottom: 20px;
}
.raknerad {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.raknerad:last-of-type { border-bottom: 0; }
.raknerad span { color: rgba(255,255,255,.75); font-size: 15.5px; }
.raknerad strong { font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.raknerad-gron strong { color: var(--gron-logga); }
.raknerutan-fot {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 15px; color: rgba(255,255,255,.72);
}

/* Kalkylatorn i räknerutan. Reglagen styrs av skript.js; utan skript står
   exemplet 15 / 4 / 4 kvar som vanlig text. */
.raknereglage { padding: 12px 0 14px; border-bottom: 1px solid rgba(255,255,255,.14); }
.raknereglage label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 10px;
}
.raknereglage label span { color: rgba(255,255,255,.75); font-size: 15.5px; }
.raknereglage output { font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }

.raknereglage input[type="range"] {
  --fyllt: 25%;
  width: 100%; height: 22px; margin: 0;
  background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.raknereglage input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--bla-logga) var(--fyllt), rgba(255,255,255,.18) var(--fyllt));
}
.raknereglage input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px; background: rgba(255,255,255,.18);
}
.raknereglage input[type="range"]::-moz-range-progress {
  height: 6px; border-radius: 3px; background: var(--bla-logga);
}
.raknereglage input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 50%; border: 0;
  background: var(--vit);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: transform .15s ease;
}
.raknereglage input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%; border: 0;
  background: var(--vit);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.raknereglage input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.raknereglage input[type="range"]:focus-visible { outline: none; }
.raknereglage input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(100,177,219,.55); }
.raknereglage input[type="range"]:focus-visible::-moz-range-thumb   { box-shadow: 0 0 0 4px rgba(100,177,219,.55); }

/* En prick per anställd. De gröna är de som dikterar samtidigt — lika många
   som donglarna. Visar att många delar på få. */
.raknare-prickar {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px; padding: 14px 0 2px;
}
.raknare-prickar:empty { display: none; }
.raknare-prick {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  transition: background-color .2s ease;
}
.raknare-prick.aktiv { background: var(--gron-logga); }
.raknare-forklaring {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  width: 100%; margin-top: 8px;
  font-size: 13px; color: rgba(255,255,255,.62);
}
.raknare-forklaring span { display: inline-flex; align-items: center; gap: 7px; }
.raknare-forklaring i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.raknare-forklaring i.aktiv { background: var(--gron-logga); }

/* Prisraden under ingressen i licensavsnittet. */
.pris {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 36px;
  margin-top: 26px; padding: 18px 22px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radie-liten);
}
.pris-post { display: flex; align-items: baseline; gap: 9px; }
.pris-post strong { font-size: 26px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.pris-post:first-child strong { color: var(--gron-logga); }
.pris-post span { color: rgba(255,255,255,.75); font-size: 15px; }
.pris-villkor {
  flex-basis: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px;
  margin: 6px 0 0; padding: 14px 0 0; list-style: none;
  border-top: 1px solid rgba(255,255,255,.14);
}
.pris-villkor li {
  position: relative; padding-left: 16px;
  font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.8);
}
.pris-villkor li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gron-logga);
}
@media (max-width: 520px) { .pris-villkor { grid-template-columns: 1fr; } }
.pris-fot { flex-basis: 100%; margin: 0; font-size: 13px; color: rgba(255,255,255,.55); }

/* Kostnaden i kalkylatorn. */
.raknare-kostnad { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.14); }
.raknare-kostnad .raknerad strong { font-size: 22px; white-space: nowrap; }
.raknare-kostnad .raknerad-gron strong { font-size: 27px; }
.raknare-moms { margin: 2px 0 0; font-size: 13px; color: rgba(255,255,255,.55); }

.licens-punkter { margin: 28px 0 0; padding: 0; list-style: none; }
.licens-punkter li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0;
  color: rgba(255,255,255,.88); font-size: 16.5px;
}
.licens-punkter svg { flex: none; margin-top: 4px; color: var(--gron-logga); }

/* --- Fördelskort -------------------------------------------------------- */

/* Tre USP-kort på första raden, två bredare kort på andra. Sexdelat rutnät
   så att båda raderna går jämnt ut. */
.kort-rutnat { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.kort-rutnat > .kort { grid-column: span 2; }
.kort-rutnat > .kort:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 940px) {
  .kort-rutnat > .kort,
  .kort-rutnat > .kort:nth-child(n+4) { grid-column: span 3; }
  .kort-rutnat > .kort:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .kort-rutnat { grid-template-columns: 1fr; }
  .kort-rutnat > .kort,
  .kort-rutnat > .kort:nth-child(n+4) { grid-column: auto; }
}

.kort {
  padding: 28px 26px;
  background: var(--vit);
  border: 1px solid var(--ram); border-radius: var(--radie);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kort:hover { border-color: var(--bla-logga); box-shadow: var(--skugga); transform: translateY(-2px); }
.kort h3 { margin-bottom: 9px; }
.kort p  { color: var(--text-dampad); font-size: 16px; }

.kort-ikon {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 18px;
  border-radius: 12px;
  background: var(--bla-yta); color: var(--bla);
}
.kort:nth-child(even) .kort-ikon { background: var(--gron-yta); color: var(--gron); }

/* --- Demovideo -----------------------------------------------------------
   Skärminspelning med tal, inte en ljudlös loop. Egen stor spelknapp ovanpå
   affischbilden tills den klickas, sedan tar webbläsarens egna kontroller
   över — samma mönster oavsett webbläsare.                                  */

/* Demoavsnittet ligger direkt efter hjältesektionen. Tajt topputrymme så att
   det läser som en fortsättning på öppningen, inte som ett nytt kapitel. */
.demo { padding: 8px 0 80px; }
@media (max-width: 640px) { .demo { padding: 0 0 56px; } }

/* Bredden styrs av tre gränser samtidigt: aldrig bredare än spalten, aldrig
   bredare än 560 px, och aldrig så hög att den äter upp skärmen. Den sista
   räknas ut från höjden, så videon krymper av sig själv på en lågt fönster
   eller en liggande telefon. */
.demo-video {
  position: relative;
  width: min(100%, 840px, calc(69vh * 16 / 9));
  margin: 0 auto;
  border-radius: var(--radie);
  overflow: hidden;
  background: var(--bla-djup);
  box-shadow: var(--skugga-hog);
  aspect-ratio: 16 / 9;
}
.demo-video video {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
}
.demo-video-knapp {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: clamp(52px, 13%, 72px); aspect-ratio: 1;
  padding: 0; padding-left: 4px; /* optisk centrering av triangeln */
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--bla);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 46, 71, .35);
  transition: transform .15s ease, background .15s ease;
}
.demo-video-knapp:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--vit); }
.demo-video.spelas .demo-video-knapp { display: none; }

/* --- Säkerhet ----------------------------------------------------------- */

.sakerhet-rutnat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .sakerhet-rutnat { grid-template-columns: 1fr; } }

.sakerhet-kort {
  display: flex; gap: 16px;
  padding: 26px;
  background: var(--vit);
  border: 1px solid var(--ram); border-radius: var(--radie);
}
.sakerhet-kort svg { flex: none; margin-top: 2px; color: var(--gron); }
.sakerhet-kort h3 { margin-bottom: 7px; }
.sakerhet-kort p  { color: var(--text-dampad); font-size: 16px; }

.notis {
  max-width: 760px; margin: 34px auto 0;
  padding: 20px 24px;
  background: var(--vit);
  border: 1px solid var(--ram);
  border-left: 4px solid var(--gron-logga);
  border-radius: var(--radie-liten);
  font-size: 15.5px; color: var(--text-dampad);
}

/* --- Kontakt ------------------------------------------------------------ */

/* --- Beställning ---------------------------------------------------------- */

.raknare-bestall { width: 100%; justify-content: center; margin-top: 20px; }

.bestall-rutnat {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px; align-items: start;
  max-width: 980px; margin: 0 auto;
}
@media (max-width: 860px) {
  .bestall-rutnat { grid-template-columns: 1fr; }
  .bestall-summa { order: -1; }
}

.bestall-formular {
  padding: 32px;
  background: var(--vit);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  box-shadow: var(--skugga);
}
@media (max-width: 520px) { .bestall-formular { padding: 22px 18px; } }

.falt { margin-bottom: 18px; }
.falt-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .falt-rad { grid-template-columns: 1fr; } }

.falt label {
  display: block; margin-bottom: 6px;
  font-size: 14.5px; font-weight: 600; color: var(--text);
}
.frivilligt { font-weight: 400; color: var(--text-dampad); }

.falt input, .falt textarea {
  width: 100%; padding: 11px 13px;
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--vit);
  border: 1px solid #C9D8E3; border-radius: var(--radie-liten);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.falt textarea { resize: vertical; min-height: 84px; }
.falt input::placeholder, .falt textarea::placeholder { color: #9AB0C2; }
.falt input:focus, .falt textarea:focus {
  outline: none; border-color: var(--bla);
  box-shadow: 0 0 0 3px rgba(0, 119, 182, .16);
}
/* Rött först när besökaren har lämnat fältet, inte medan det är tomt från början. */
.falt input.rord:invalid, .falt textarea.rord:invalid { border-color: #C0392B; }

.antal-valjare { display: inline-flex; align-items: stretch; }
.antal-valjare input {
  width: 84px; text-align: center; border-radius: 0;
  font-size: 20px; font-weight: 700;
  -moz-appearance: textfield; appearance: textfield;
}
.antal-valjare input::-webkit-outer-spin-button,
.antal-valjare input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.antal-knapp {
  width: 46px;
  font: inherit; font-size: 22px; line-height: 1; color: var(--bla);
  background: var(--bla-yta);
  border: 1px solid #C9D8E3; cursor: pointer;
}
.antal-knapp:first-child { border-radius: var(--radie-liten) 0 0 var(--radie-liten); border-right: 0; }
.antal-knapp:last-child  { border-radius: 0 var(--radie-liten) var(--radie-liten) 0; border-left: 0; }
.antal-knapp:hover { background: #DDEBF5; }

.dold-falla { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bestall-skicka { width: 100%; justify-content: center; margin-top: 6px; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.bestall-skicka[disabled] { opacity: .6; cursor: default; transform: none; }
.bestall-fot { margin: 14px 0 0; font-size: 13.5px; color: var(--text-dampad); }

.bestall-summa {
  position: sticky; top: 96px;
  padding: 28px;
  color: var(--vit);
  background: linear-gradient(150deg, #0F2E47 0%, #10486B 60%, #2C6B52 100%);
  border-radius: var(--radie);
}
@media (max-width: 860px) { .bestall-summa { position: static; } }
.bestall-summa-rubrik {
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gron-logga); margin-bottom: 10px;
}
.summarad {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.summarad span { color: rgba(255,255,255,.75); font-size: 15px; }
.summarad strong { font-size: 21px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.summarad-stor { border-bottom: 0; }
.summarad-stor strong { font-size: 28px; color: var(--gron-logga); }
.summa-moms { margin: 4px 0 0; font-size: 13px; color: rgba(255,255,255,.6); }

.bestall-steg {
  margin: 22px 0 0; padding: 18px 0 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
  list-style: none; counter-reset: steg;
}
.bestall-steg li {
  position: relative; counter-increment: steg;
  padding: 0 0 12px 34px;
  font-size: 14.5px; color: rgba(255,255,255,.85);
}
.bestall-steg li::before {
  content: counter(steg);
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.14); color: var(--vit);
}

/* Appsidan dit QR-koden på dongellådan leder. */
.hamta-app {
  max-width: 540px; margin: 0 auto; padding: 56px 24px 80px;
  min-height: calc(100vh - 72px - 100px);
  text-align: center;
}
.hamta-app-ikon { width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 20px; box-shadow: var(--skugga); }
.hamta-app h1 { font-size: clamp(28px, 6vw, 38px); margin-bottom: 10px; }
.hamta-app-ingress { color: var(--text-dampad); font-size: 18px; margin: 0 0 32px; }
.hamta-app-steg {
  margin: 0; padding: 0; list-style: none; counter-reset: steg;
  text-align: left;
}
.hamta-app-steg > li {
  position: relative; counter-increment: steg;
  padding: 22px 22px 22px 70px; margin-bottom: 14px;
  background: var(--vit); border: 1px solid var(--ram); border-radius: var(--radie);
}
.hamta-app-steg > li::before {
  content: counter(steg);
  position: absolute; left: 22px; top: 20px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; color: var(--vit); background: var(--bla);
}
.hamta-app-steg > li:nth-child(2)::before { background: var(--gron); }
.hamta-app-steg strong { display: block; font-size: 18px; margin: 3px 0 6px; }
.hamta-app-steg span { color: var(--text-dampad); font-size: 16px; }
.hamta-app-butik { margin-top: 12px; }
.hamta-app-butik[hidden] { display: none; }
.hamta-app-butik + .hamta-app-butik { margin-top: 14px; }
.hamta-app-notis {
  margin: 0; padding: 12px 14px;
  font-size: 15px; color: var(--text-dampad);
  background: var(--bla-yta); border-radius: var(--radie-liten);
}
.hamta-app-fot { margin-top: 26px; font-size: 14px; color: var(--text-dampad); }

/* Tacksidan */
.tack { text-align: center; max-width: 620px; margin: 0 auto; padding: 96px 24px 120px; }
.tack-ikon {
  width: 64px; height: 64px; margin: 0 auto 24px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--gron-yta); color: var(--gron);
}
.tack h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 16px; }
.tack { min-height: calc(100vh - 72px - 100px); }
.tack p { color: var(--text-dampad); font-size: 18px; }
.tack p + p { margin-top: 12px; }
.tack .knapp { margin-top: 28px; }

.kontakt { text-align: center; }
.kontakt-mejl {
  display: inline-flex; align-items: center; gap: 11px;
  margin: 26px 0 14px;
  font-size: clamp(20px, 3vw, 28px); font-weight: 700;
  letter-spacing: -.02em; color: var(--bla);
}
.kontakt-mejl:hover { color: var(--bla-mork); text-decoration: none; }
.kontakt-mejl svg { flex: none; }

/* --- Sidfot ------------------------------------------------------------- */

.sidfot {
  padding: 44px 0 32px;
  background: var(--bla-djup); color: rgba(255,255,255,.72);
  font-size: 15px;
}
.sidfot-rutnat {
  display: grid; grid-template-columns: 1fr auto; gap: 32px 72px;
  align-items: start;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
@media (max-width: 760px) { .sidfot-rutnat { grid-template-columns: 1fr; gap: 30px; } }

.sidfot h4 {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--vit);
}
.sidfot a { color: rgba(255,255,255,.72); }
.sidfot a:hover { color: var(--vit); }
.sidfot ul { margin: 0; padding: 0; list-style: none; }
.sidfot li { padding: 5px 0; }
/* Loggan och bolagsuppgifterna sida vid sida, båda toppjusterade, så att
   sidfoten inte blir onödigt hög. */
.sidfot-bolag {
  display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap;
}
.sidfot-bolag ul { padding-top: 2px; }
.sidfot-bolag strong { color: var(--vit); font-weight: 600; }

.sidfot-loggplatta {
  flex: none;
  padding: 12px 16px;
  background: var(--vit);
  border-radius: var(--radie-liten);
}
.sidfot-loggplatta img { width: 110px; }
.sidfot-botten {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  padding-top: 20px;
  font-size: 14px; color: rgba(255,255,255,.55);
}

/* --- Textsidor (integritetspolicy) -------------------------------------- */

.textsida { max-width: 760px; padding: 64px 24px 88px; margin: 0 auto; }
.textsida h1 { margin-bottom: 10px; }
.textsida .datum { color: var(--text-dampad); font-size: 15px; margin-bottom: 40px; }
.textsida h2 { font-size: 23px; margin: 40px 0 14px; }
.textsida p, .textsida li { color: var(--text-dampad); margin-bottom: 14px; }
.textsida ul { padding-left: 22px; }
.textsida table {
  width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 15.5px;
}
.textsida th, .textsida td {
  padding: 11px 14px; text-align: left; border: 1px solid var(--ram); vertical-align: top;
}
.textsida th { background: var(--bla-yta); color: var(--text); font-weight: 600; }
.textsida td { color: var(--text-dampad); }
.tabellsvep { overflow-x: auto; }

/* --- Rörelse ------------------------------------------------------------ */

.tona-in { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.tona-in.synlig { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tona-in { opacity: 1; transform: none; transition: none; }
  .knapp:hover, .kort:hover { transform: none; }
}