/* Quipr – stilmall. Nordisk palett: Is, Natt, Hjortron, Mossa, Fjord.
   Ett typsnitt (Archivo, variabelt, ligger lokalt). Inga externa resurser. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --is: #EEF2F5;
  --natt: #0F1B2D;
  --hjortron: #F4A72C;
  --hjortron-djup: #E0931A;
  --hjortron-ljus: #FDEBCB;
  --mossa: #CFE6B8;
  --mossa-djup: #2F6B2A;
  --fjord: #3355E0;
  --fjord-djup: #2540B8;
  --fjord-ljus: #DFE6FB;
  --vit: #FFFFFF;
  --text-2: rgba(15, 27, 45, .68);
  --text-3: rgba(15, 27, 45, .55);
  --linje: rgba(15, 27, 45, .13);
  --linje-svag: rgba(15, 27, 45, .08);
  --yta: rgba(15, 27, 45, .045);

  --pad: 52px;
  --r-lg: 22px;
  --r-md: 15px;
  --r-sm: 11px;
  --r-xs: 8px;
  --luft: 89px;
  --ut: cubic-bezier(.22, .61, .36, 1);
  --bred: "Archivo", "Arial Black", Arial, sans-serif;
  --nav-h: 79px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--vit);
  color: var(--natt);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--fjord); outline-offset: 3px; border-radius: 6px; }
.mork :focus-visible, .cta :focus-visible { outline-color: var(--hjortron); }
.cta :focus-visible { outline-color: var(--natt); }
::selection { background: var(--hjortron); color: var(--natt); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--natt); color: #fff; padding: 12px 16px; border-radius: var(--r-sm); transition: top .2s; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1441px; margin-inline: auto; padding-inline: var(--pad); }
.sektion { padding-block: var(--luft); }
.is { background: var(--is); }
.mork { background: var(--natt); color: #fff; }
.mossa { background: var(--mossa); }

/* ---------- Typografi ---------- */
.display {
  font-family: var(--bred);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(44px, 7.7vw, 111px);
  line-height: .8;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.h1 {
  font-family: var(--bred); font-stretch: 122%; font-weight: 600;
  font-size: clamp(38px, 5.2vw, 76px); line-height: 1; letter-spacing: -.018em; text-wrap: balance;
}
.h2 {
  font-family: var(--bred); font-stretch: 122%; font-weight: 550;
  font-size: clamp(31px, 3.6vw, 52px); line-height: 1; letter-spacing: -.016em; text-wrap: balance;
}
.h3 { font-size: 22px; line-height: 1.25; font-weight: 450; letter-spacing: .005em; text-wrap: balance; }
.h4 { font-size: 17px; line-height: 1.3; font-weight: 600; }
.lead { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.26; text-wrap: balance; }
.ingress { font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.t2 { color: var(--text-2); }
.mork .t2 { color: rgba(255, 255, 255, .72); }
.liten { font-size: 14px; line-height: 1.45; }
.versal { font-size: 13px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.mitt { text-align: center; }
p a:not(.btn), .lank { color: var(--fjord); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p a:not(.btn):hover, .lank:hover { color: var(--fjord-djup); }
.mork p a:not(.btn) { color: #fff; }

/* ---------- Knappar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 20px; border-radius: var(--r-sm);
  border: 1px solid var(--natt); background: var(--natt); color: #fff;
  font-size: 16px; line-height: 1; font-weight: 450; letter-spacing: .01em; white-space: nowrap;
  transition: color .2s, background-color .2s, border-color .2s, transform .2s;
}
.btn:hover { background: #24344d; border-color: #24344d; }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 40px; padding: 11px 16px; font-size: 14px; }
.btn--key { background: var(--hjortron); border-color: var(--hjortron); color: var(--natt); font-weight: 550; }
.btn--key:hover { background: var(--hjortron-djup); border-color: var(--hjortron-djup); }
.btn--vit { background: #fff; border-color: #fff; color: var(--natt); }
.btn--vit:hover { background: var(--is); border-color: var(--is); }
.btn--kant { background: transparent; border-color: var(--linje); color: var(--natt); }
.btn--kant:hover { background: var(--yta); border-color: rgba(15, 27, 45, .3); }
.mork .btn--kant { border-color: rgba(255, 255, 255, .3); color: #fff; }
.mork .btn--kant:hover { background: rgba(255, 255, 255, .08); }
.btn svg, .pil svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ut); }
.pil { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 450; padding-block: 8px; }
.pil:hover svg, .btn:hover svg.gar { transform: translateX(4px); }
.knappar { display: flex; flex-wrap: wrap; gap: 10px; }
.mitt .knappar, .knappar.mitt { justify-content: center; }

.tagg {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 99px;
  background: var(--mossa); color: var(--natt); font-family: var(--bred); font-stretch: 115%;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.tagg--hjortron { background: var(--hjortron); }
.tagg--fjord { background: var(--fjord-ljus); color: var(--fjord-djup); }
.tagg--kant { background: transparent; border: 1px solid var(--linje); }

/* ---------- Meny ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 7px; pointer-events: none; }
.nav > * { pointer-events: auto; }
.strip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 32px; margin-bottom: 8px; padding: 0 16px; border-radius: 99px; overflow: hidden;
  background: var(--hjortron); color: var(--natt); font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: height .3s var(--ut), margin .3s var(--ut), opacity .25s;
}
.strip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ut); }
.strip:hover svg { transform: translateX(4px); }
.nav.is-rullad .strip { height: 0; margin-bottom: 0; opacity: 0; }
.nav__rad { display: flex; align-items: stretch; height: 64px; position: relative; }
.bricka { background: #fff; border: 1px solid var(--linje); border-radius: var(--r-lg); }
.nav__logo { display: flex; align-items: center; padding: 0 22px; flex: none; }
.nav__logo svg { height: 34px; width: auto; }
.nav__main { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; min-width: 0; }
.nav__lankar { display: flex; align-items: center; gap: 4px; }
.nav__lank {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 9px; border-radius: 9px;
  font-size: 14px; font-weight: 450; letter-spacing: .01em; white-space: nowrap; transition: background-color .2s, color .2s;
}
.nav__lank:hover, .nav__lank[aria-expanded="true"] { background: var(--is); }
.nav__lank[aria-current="page"] { background: var(--is); }
.nav__lank svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ut); }
.nav__lank[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__cta { display: flex; align-items: center; padding: 11px; flex: none; }
.nav__mobil, .nav__vaxel { display: none; }

.nav__fall {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 12px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .25s var(--ut), visibility .2s;
  box-shadow: 0 30px 70px rgba(15, 27, 45, .14);
}
.nav__fall.is-open { opacity: 1; visibility: visible; transform: none; }
.fall__kort { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 16px; border-radius: var(--r-md); transition: background-color .2s; }
.fall__kort:hover { background: var(--is); }
.fall__kort .ikon { grid-row: span 2; }
.fall__kort strong { font-size: 15px; font-weight: 600; align-self: end; }
.fall__kort span { font-size: 13px; line-height: 1.4; color: var(--text-2); }

.ikon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--mossa); color: var(--natt); flex: none; }
.ikon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ikon--hjortron { background: var(--hjortron-ljus); }
.ikon--fjord { background: var(--fjord-ljus); color: var(--fjord-djup); }
.ikon--natt { background: var(--natt); color: #fff; }

/* ---------- Hero ---------- */
.hero { background: var(--is); padding-top: 149px; overflow: hidden; }
.hero__text { text-align: center; padding-inline: var(--pad); }
.marke {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 8px; border-radius: 99px;
  border: 1px solid var(--linje); font-size: 14px; font-weight: 450; letter-spacing: .01em;
}
.marke i { width: 24px; height: 24px; border-radius: 50%; background: var(--natt); color: #fff; display: grid; place-items: center; }
.marke i svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.marke b { color: var(--mossa-djup); font-weight: 600; }
.hero__pre { margin-top: 44px; font-size: clamp(26px, 2.6vw, 37px); font-weight: 600; line-height: 1.1; letter-spacing: -.005em; }
.hero .display { margin-top: 22px; }
.hero .lead { margin: 42px auto 0; max-width: 640px; }
.hero .knappar { margin-top: 40px; }
.hero__not { margin-top: 16px; font-size: 13px; color: var(--text-3); }

.scen { position: relative; margin-top: 88px; padding: 0 clamp(16px, 8vw, 115px) 88px; }
.scen::before { content: ""; position: absolute; inset: -130px 0 0 0; background: linear-gradient(to bottom, transparent, rgba(15, 27, 45, .05) 60%); pointer-events: none; }
.scen__konst { position: absolute; inset: -130px 0 0 0; clip-path: inset(calc((1 - var(--rev, 0)) * 130px) calc((1 - var(--rev, 0)) * 8vw) calc((1 - var(--rev, 0)) * 88px) round calc((1 - var(--rev, 0)) * 22px)); opacity: min(1, calc(var(--rev, 0) * 3)); }
.scen--fast .scen__konst { clip-path: none; opacity: 1; inset: 0; }
.scen--fast::before { display: none; }
.konst { width: 100%; height: 100%; display: block; background: #16284a; }
.konst[data-flow="mossa"] { background: #24452a; }
.konst[data-flow="hjortron"] { background: #6b3f06; }

/* ---------- Produktbilder (exempeldata) ---------- */
.skala { position: relative; width: 100%; }
.skala > * { transform-origin: 0 0; }
.dash {
  position: relative; width: 1210px; display: grid; grid-template-columns: 54px 1fr; padding: 6px 6px 6px 0;
  background: rgba(255, 255, 255, .82); border-radius: 22px; border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 30px 70px rgba(15, 27, 45, .12); font-size: 12px; line-height: 1.35; text-align: left;
}
.dash__sida { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 5px; }
.dash__sida svg.sym { width: 34px; height: 34px; border-radius: 9px; }
.dash__sida i { width: 18px; height: 18px; border-radius: 5px; background: rgba(15, 27, 45, .12); }
.dash__sida i:nth-child(2) { margin-top: 8px; background: var(--natt); }
.dash__main { background: #fbfcfd; border-radius: 17px; padding: 44px 84px 30px; min-height: 660px; }
.dash__titel { font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: 22px; text-align: center; letter-spacing: -.01em; }
.fraga {
  margin: 20px auto 0; width: 616px; height: 48px; border-radius: 99px; background: #fff; border: 1px solid var(--linje);
  box-shadow: 0 3px 17px rgba(51, 85, 224, .14); display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 14px; position: relative; overflow: hidden;
}
.fraga::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--hjortron), transparent); animation: glid 3.2s ease-in-out infinite alternate; }
@keyframes glid { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.fraga i { width: 32px; height: 32px; border-radius: 50%; background: var(--hjortron); display: grid; place-items: center; color: var(--natt); flex: none; }
.fraga i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fraga span { flex: 1; }
.fraga b { font-weight: 550; }
.fraga em { font-style: normal; height: 30px; padding: 0 14px; border-radius: 99px; background: var(--natt); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 500; position: relative; transition: background-color .3s, color .3s; }
.fraga em.ghost { background: transparent; color: var(--text-2); border: 1px solid var(--linje); }
.is-done .fraga em:not(.ghost) { background: var(--mossa); color: var(--natt); }
.forslag { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.forslag span { height: 25px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--linje); background: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 500; }
.etik { display: flex; align-items: center; gap: 6px; font-size: 8.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); }
.etik::before { content: ""; width: 7px; height: 7px; border-radius: 2px; border: 1.5px solid currentColor; }
.dash__rutor { margin-top: 10px; display: grid; grid-template-columns: 2fr 2fr 1fr 1fr; border: 1px solid var(--linje-svag); background: var(--linje-svag); gap: 1px; border-radius: 4px; overflow: hidden; }
.ruta { background: #fff; padding: 12px 11px 11px; display: flex; flex-direction: column; min-height: 97px; position: relative; }
.ruta--hog { grid-row: span 2; }
.ruta .tal { font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: 19px; margin-top: 12px; letter-spacing: -.01em; }
.ruta--hog .tal { font-size: 30px; margin-top: 16px; }
.ruta .tal small { font-family: "Archivo"; font-stretch: 100%; font-weight: 500; font-size: 10px; letter-spacing: 0; margin-left: 4px; }
.ruta .under { font-size: 12.5px; margin-top: 6px; }
.ruta .under.gron { color: var(--mossa-djup); font-weight: 500; }
.ruta .fot { margin-top: auto; font-size: 9px; color: var(--text-2); padding-top: 8px; }
.staplar { position: absolute; right: 22px; top: 34px; height: 100px; display: flex; align-items: flex-end; gap: 4px; }
.staplar i { width: 9px; background: var(--fjord); border-radius: 1px; transform-origin: bottom; }
.staplar i:last-child { background: var(--fjord-ljus); }
.js .rv .staplar i { transform: scaleY(0); transition: transform .7s var(--ut); transition-delay: calc(var(--n) * 45ms + .3s); }
.js .rv.is-in .staplar i { transform: none; }
.ring { position: absolute; right: 22px; top: 18px; width: 130px; height: 130px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring .bas { stroke: var(--is); }
.ring .del { stroke: var(--fjord); stroke-linecap: round; stroke-dasharray: 330; stroke-dashoffset: 46; transition: stroke-dashoffset 1.2s var(--ut) .3s; }
.js .rv:not(.is-in) .ring .del { stroke-dashoffset: 330; }
.ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: 17px; }
.ring span small { font-family: "Archivo"; font-stretch: 100%; font-weight: 400; font-size: 8px; color: var(--text-2); }
.matare { height: 6px; border-radius: 3px; background: var(--is); margin-top: 8px; overflow: hidden; display: flex; gap: 2px; }
.matare i { background: var(--fjord); border-radius: 3px; }
.matare i.m { background: var(--mossa-djup); }
.matare i.h { background: var(--hjortron); }
.matare i.l { background: var(--fjord-ljus); }
.dash__kol { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
.lista li { display: flex; align-items: center; gap: 10px; height: 28px; font-size: 11.5px; font-weight: 500; }
.lista li::before { content: ""; width: 11px; height: 12px; border-radius: 2px; border: 1.3px solid var(--text-2); flex: none; }
.lista li span { margin-left: auto; min-width: 20px; height: 17px; padding: 0 5px; border-radius: 3px; background: var(--fjord-ljus); color: var(--fjord-djup); font-weight: 650; font-size: 10px; display: grid; place-items: center; transition: background-color .3s; }
.lista li span.noll { background: none; color: var(--text-3); }
.lista li span.is-bump { animation: bump .5s var(--ut); }
@keyframes bump { 40% { transform: scale(1.35); background: var(--hjortron); color: var(--natt); } }
.lista { margin-top: 10px; }
.dash .stor { font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: 18px; display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.dash .stor small { font-family: "Archivo"; font-stretch: 100%; font-weight: 400; font-size: 12px; }
.bock li { display: flex; align-items: center; gap: 9px; height: 31px; font-size: 11.5px; font-weight: 500; }
.bock li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.3px solid var(--text-2); flex: none; }
.bock li.klar::before { background: var(--mossa-djup); border-color: var(--mossa-djup); box-shadow: inset 0 0 0 2px #fff; }
.bock { margin-top: 12px; }
.chip { margin-left: auto; height: 21px; padding: 0 9px; border-radius: 3px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; white-space: nowrap; background: var(--is); color: var(--natt); }
.chip--ok { background: var(--mossa); }
.chip--vanta { background: var(--hjortron-ljus); color: #7a4a05; }
.chip--info { background: var(--fjord-ljus); color: var(--fjord-djup); }
.rapp { margin-top: 10px; border: 1px solid var(--linje-svag); border-radius: 3px; background: #fff; }
.rapp li { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; font-size: 11.5px; font-weight: 500; border-bottom: 1px solid var(--linje-svag); }
.rapp li:last-child { border: 0; }
.rapp li time { margin-left: auto; color: var(--text-3); font-weight: 400; font-size: 10.5px; }
.rapp li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mossa-djup); flex: none; }
.rapp li.v::before { background: var(--hjortron); }
.exempel { position: absolute; right: 22px; top: 18px; font-size: 10px; font-weight: 500; color: var(--text-3); border: 1px dashed var(--linje); border-radius: 99px; padding: 3px 10px; background: #fff; }
.markor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 3; opacity: 0; pointer-events: none; transition: transform 1.1s var(--ut), opacity .3s; }
.markor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(15, 27, 45, .35)); }
.markor.is-on { opacity: 1; }
.markor.is-klick svg { animation: klick .35s; }
@keyframes klick { 50% { transform: scale(.8); } }

/* Små produktbilder */
.m { background: #fff; border: 1px solid var(--linje); border-radius: var(--r-sm); font-size: 12px; line-height: 1.35; overflow: hidden; text-align: left; color: var(--natt); }
.m__huvud { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linje-svag); font-weight: 600; font-size: 12.5px; }
.m__huvud small { font-weight: 400; color: var(--text-3); font-size: 10.5px; white-space: nowrap; }
.m__rad { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linje-svag); white-space: nowrap; }
.m__rad:last-child { border-bottom: 0; }
.m__rad .p { width: 22px; height: 22px; border-radius: 5px; background: var(--fjord-ljus); color: var(--fjord-djup); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.m__rad .p.m2 { background: var(--mossa); color: var(--natt); }
.m__rad .p.h2 { background: var(--hjortron-ljus); color: #7a4a05; }
.m__rad div { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m__rad div small { display: block; color: var(--text-3); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.m__rad b { font-weight: 600; }
.m__rad .bel { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; }
.m__rad .bel + .chip { margin-left: 0; min-width: 82px; }
.m__svar { margin: 12px 14px 14px; padding: 12px; border-radius: 9px; background: var(--is); }
.m__svar p { font-size: 12px; line-height: 1.5; white-space: normal; min-height: 3em; }
.m__svar .till { font-size: 10px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; display: flex; justify-content: space-between; }
.m__knappar { display: flex; gap: 6px; margin-top: 10px; justify-content: flex-end; }
.m__knappar span { height: 26px; padding: 0 11px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 550; background: var(--natt); color: #fff; }
.m__knappar span.sek { background: #fff; color: var(--natt); border: 1px solid var(--linje); }
.stj { color: var(--hjortron); letter-spacing: 1px; font-size: 12px; }
.stj i { color: rgba(15, 27, 45, .18); font-style: normal; }
.m__rec { padding: 12px 14px; border-bottom: 1px solid var(--linje-svag); white-space: normal; }
.m__rec:last-child { border: 0; }
.m__rec .namn { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.m__rec q { display: block; margin-top: 4px; quotes: none; }
.m__rec .svar { margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--mossa-djup); background: var(--is); border-radius: 0 7px 7px 0; font-size: 11.5px; }
.m__rec .svar small { display: block; font-size: 9.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.m--bubbla { border-radius: 99px; padding: 6px 12px; font-size: 10.5px; font-weight: 550; background: var(--fjord-ljus); border: 0; color: var(--fjord-djup); display: inline-block; white-space: nowrap; }
.m__regel { padding: 12px 14px; border-bottom: 1px solid var(--linje-svag); white-space: normal; }
.m__regel:last-child { border: 0; }
.m__regel small { display: block; font-size: 9.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.skriv::after { content: ""; display: inline-block; width: 1.5px; height: 1em; background: var(--fjord); margin-left: 1px; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
.skriv.is-klar::after { display: none; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Löftesband ---------- */
.band { display: grid; grid-template-columns: 402px 1fr; align-items: center; padding-block: 34px; }
.band__text { position: relative; height: 26px; border-right: 1px solid var(--linje); }
.band__text span { position: absolute; left: 0; top: 0; font-size: 16px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ut); white-space: nowrap; }
.band__text span.is-on { opacity: 1; transform: none; }
.rull { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rull__spar { display: flex; width: max-content; animation: rull 34s linear infinite; }
.rull:hover .rull__spar { animation-play-state: paused; }
.rull__spar li { padding: 0 38px; font-family: var(--bred); font-stretch: 112%; font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: rgba(15, 27, 45, .5); white-space: nowrap; height: 48px; display: flex; align-items: center; }
@keyframes rull { to { transform: translateX(-50%); } }

/* ---------- Rubrikblock ---------- */
.huvud { max-width: 1010px; margin-inline: auto; text-align: center; }
.huvud .lead, .huvud .ingress { margin: 22px auto 0; max-width: 660px; }
.huvud--v { margin: 0; text-align: left; max-width: 820px; }
.huvud--v .lead, .huvud--v .ingress { margin-inline: 0; }
.huvud .tagg { margin-bottom: 20px; }
.huvud + * { margin-top: 52px; }

/* ---------- Funktionskort 2×2 ---------- */
.rutnat2 { display: grid; grid-template-columns: 1fr 1fr; gap: 37px; }
.fkort { display: grid; grid-template-columns: 336px 1fr; border: 1px solid var(--linje); border-radius: var(--r-lg); overflow: hidden; min-height: 252px; background: #fff; position: relative; transition: border-color .2s, box-shadow .3s; }
.fkort:hover { border-color: rgba(15, 27, 45, .3); box-shadow: 0 18px 40px rgba(15, 27, 45, .07); }
.fkort__text { padding: 22px; display: flex; flex-direction: column; }
.fkort__text p { margin-top: 26px; color: var(--text-2); }
.fkort__text .pil { margin-top: auto; padding-top: 22px; }
.fkort__text .pil::after { content: ""; position: absolute; inset: 0; }
.fkort__bild { background: var(--is); position: relative; overflow: hidden; min-height: 220px; }
.fkort__bild > * { position: absolute; left: 30px; top: 30px; width: 340px; }
.fkort__bild .m--bubbla { width: auto; left: auto; right: 22px; top: 16px; }
.fkort__bild .m--bubbla + .m { top: 56px; }
.js .fkort.rv .fkort__bild > .m { transform: translateY(26px); opacity: 0; transition: transform .7s var(--ut) .15s, opacity .5s .15s; }
.js .fkort.rv.is-in .fkort__bild > .m { transform: none; opacity: 1; }

/* ---------- Mörk sektion med flikar ---------- */
.flikar { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.flik { border-top: 1px solid rgba(255, 255, 255, .28); padding: 21px 0 22px; position: relative; }
.flik::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--hjortron); transform: scaleX(0); transform-origin: left; }
.flik.is-on::before { transform: scaleX(1); transition: transform var(--tid, 7s) linear; }
.flikar.is-paus .flik.is-on::before, .lugn .flik.is-on::before { transition: none; }
.flik__knapp { display: block; width: 100%; text-align: left; opacity: .5; transition: opacity .3s; }
.flik__knapp:hover { opacity: .8; }
.flik.is-on .flik__knapp { opacity: 1; }
.flik__knapp .tagg { margin-bottom: 14px; }
.flik__knapp .h3 { display: block; }
.flik__mer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ut); }
.flik.is-on .flik__mer { grid-template-rows: 1fr; }
.flik__mer > div { overflow: hidden; }
.flik__mer p { padding-top: 12px; max-width: 620px; }
.flik__mer .pil { margin-top: 6px; }
.flikar__scen { position: sticky; top: 100px; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--is); overflow: hidden; color: var(--natt); }
.flikar__bild { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; opacity: 0; transform: scale(.97); transition: opacity .45s, transform .6s var(--ut); }
.flikar__bild.is-on { opacity: 1; transform: none; }
.flikar__bild .m { width: min(100%, 400px); box-shadow: 0 30px 70px rgba(15, 27, 45, .12); font-size: 13px; }
.flikar__bild .m .m__huvud { font-size: 13.5px; }

/* ---------- Kopplingar ---------- */
.kopplingar { overflow: hidden; }
.kopp { position: relative; height: 188px; margin-top: 52px; display: flex; align-items: center; }
.kopp .rull { width: 100%; -webkit-mask-image: none; mask-image: none; }
.kopp .rull__spar { animation-duration: 60s; }
.kopp .rull__spar li { padding: 0 19px; height: auto; }
.kopp__ruta { width: 72px; height: 72px; border-radius: 16px; background: #fff; border: 1px solid var(--linje); display: grid; place-items: center; text-align: center; font-family: var(--bred); font-stretch: 100%; font-weight: 700; font-size: 11.5px; line-height: 1.1; color: var(--natt); letter-spacing: 0; white-space: normal; padding: 4px; }
.kopp__ruta.a { background: var(--mossa); border-color: transparent; }
.kopp__ruta.b { background: var(--fjord-ljus); border-color: transparent; }
.kopp__ruta.c { background: var(--hjortron-ljus); border-color: transparent; }
.kopp__ruta.d { background: var(--natt); color: #fff; border-color: transparent; }
.kopp__mitt { position: absolute; left: 50%; top: 50%; width: 188px; height: 188px; margin: -94px 0 0 -94px; border-radius: 42px; background: var(--natt); display: grid; place-items: center; box-shadow: 0 0 0 26px #fff, 0 30px 70px rgba(15, 27, 45, .3); z-index: 2; }
.kopp__mitt svg { width: 96px; height: 96px; }
.kopp__mitt::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--hjortron); opacity: 0; animation: puls 3.4s var(--ut) infinite; }
@keyframes puls { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.22); } }

/* ---------- Sifferband ---------- */
.siffror li { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 30px 0; border-bottom: 1px solid rgba(15, 27, 45, .16); }
.siffror li:first-child { padding-top: 0; }
.siffror li:last-child { border: 0; padding-bottom: 0; }
.siffror .display { line-height: .8; white-space: nowrap; }
.siffror .display small { font-size: .42em; margin-left: .12em; letter-spacing: 0; }
.siffror p { font-size: clamp(18px, 2.05vw, 29.5px); font-weight: 550; line-height: 1.2; text-align: right; max-width: 620px; padding-bottom: .1em; text-wrap: balance; }

/* ---------- Karuseller ---------- */
.kar__topp { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.kar__pilar { display: flex; gap: 7px; flex: none; }
.kar__pilar button { width: 48px; height: 48px; border-radius: var(--r-sm); border: 1px solid var(--linje); display: grid; place-items: center; transition: background-color .2s, border-color .2s, opacity .2s; }
.kar__pilar button:hover { background: var(--is); border-color: rgba(15, 27, 45, .3); }
.kar__pilar button[disabled] { opacity: .35; cursor: default; }
.kar__pilar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kar__spar { display: flex; gap: 40px; margin: 52px calc(var(--pad) * -1) 0; padding-inline: var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; }
.kar__spar::-webkit-scrollbar { display: none; }
.kar__spar > * { flex: none; scroll-snap-align: start; }

.lofte { width: min(1337px, calc(100vw - var(--pad) * 2)); min-height: 600px; border-radius: var(--r-lg); background: var(--is); display: grid; grid-template-columns: 1.12fr 1fr; overflow: hidden; }
.lofte__text { padding: 37px; display: flex; flex-direction: column; }
.lofte__text .ikon { margin-bottom: 26px; }
.lofte__text .stort { font-size: clamp(22px, 2.05vw, 29.5px); font-weight: 550; line-height: 1.25; max-width: 600px; text-wrap: balance; }
.lofte__text .stort::before { content: ""; display: block; width: 30px; height: 22px; margin-bottom: 26px; background: var(--fjord); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M0 22V12C0 5 4 1 12 0v5c-3 1-5 3-5 6h5v11zm17 0V12c0-7 4-11 12-12v5c-3 1-5 3-5 6h5v11z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M0 22V12C0 5 4 1 12 0v5c-3 1-5 3-5 6h5v11zm17 0V12c0-7 4-11 12-12v5c-3 1-5 3-5 6h5v11z'/%3E%3C/svg%3E") no-repeat center / contain; }
.lofte__text .fot { margin-top: auto; padding-top: 30px; font-size: 18px; }
.lofte__text .fot b { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }
.lofte__bild { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 300px; display: grid; place-items: center; padding: 30px; }
.lofte__bild .konst { position: absolute; inset: 0; }
.lofte__bild .m { position: relative; width: min(100%, 380px); box-shadow: 0 30px 70px rgba(0, 0, 0, .3); font-size: 13px; }
.stortal { position: relative; color: #fff; text-align: center; }
.stortal b { display: block; font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: clamp(90px, 13vw, 190px); line-height: .8; letter-spacing: -.02em; }
.stortal span { display: block; margin-top: 18px; font-size: 20px; font-weight: 500; }

.pkort { width: 353px; height: 376px; border-radius: var(--r-lg); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 22px; background: var(--natt); transition: transform .3s var(--ut); }
.pkort .konst { position: absolute; inset: 0; transition: transform .8s var(--ut); }
.pkort:hover .konst { transform: scale(1.06); }
.pkort__in { position: relative; background: #fff; border-radius: var(--r-sm); padding: 22px; width: 100%; min-height: 222px; display: flex; flex-direction: column; }
.pkort__in .nr { font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: 30px; line-height: 1; color: var(--fjord); display: flex; align-items: baseline; justify-content: space-between; }
.pkort__in .nr small { font-family: "Archivo"; font-stretch: 100%; font-size: 12px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.pkort__in .h3 { margin-top: 18px; }
.pkort__in p { margin-top: auto; padding-top: 16px; font-size: 15.5px; padding-right: 30px; }
.pkort__in > svg { position: absolute; right: 22px; bottom: 24px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ut); }
.pkort:hover .pkort__in > svg { transform: translateX(4px); }

/* ---------- Priser ---------- */
.planer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan { border: 1px solid var(--linje); border-radius: var(--r-lg); background: #fff; padding: 30px; display: flex; flex-direction: column; position: relative; }
.plan--val { background: var(--natt); color: #fff; border-color: var(--natt); }
.plan__namn { display: flex; align-items: center; justify-content: space-between; font-family: var(--bred); font-stretch: 122%; font-weight: 650; font-size: 24px; }
.plan__vad { margin-top: 12px; min-height: 4.5em; color: var(--text-2); }
.plan--val .plan__vad { color: rgba(255, 255, 255, .75); }
.plan__pris { margin-top: 20px; font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.plan__pris small { font-family: "Archivo"; font-stretch: 100%; font-size: 15px; font-weight: 450; letter-spacing: 0; }
.plan__start { margin-top: 10px; font-size: 15px; font-weight: 500; }
.plan .btn { margin-top: 26px; width: 100%; }
.plan ul { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linje); display: grid; gap: 12px; }
.plan--val ul { border-color: rgba(255, 255, 255, .2); }
.bockar li, .plan li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.bockar li::before, .plan li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--mossa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F1B2D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.4l2.7 2.6L14 7.5'/%3E%3C/svg%3E") center / 20px no-repeat; }
.bockar { display: grid; gap: 12px; }
.finstilt { margin-top: 26px; font-size: 14px; color: var(--text-2); max-width: 760px; }
.mitt .finstilt, .finstilt.mitt { margin-inline: auto; }

.tabell-yta { overflow-x: auto; border: 1px solid var(--linje); border-radius: var(--r-lg); background: #fff; }
.tabell { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.tabell th, .tabell td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--linje-svag); vertical-align: middle; }
.tabell tr:last-child > * { border-bottom: 0; }
.tabell thead th { font-family: var(--bred); font-stretch: 122%; font-weight: 650; font-size: 18px; background: var(--is); border-bottom: 1px solid var(--linje); }
.tabell thead th:first-child { font-family: "Archivo"; font-stretch: 100%; }
.tabell tbody th { font-weight: 500; width: 31%; }
.tabell td:nth-child(3), .tabell thead th:nth-child(3) { background: rgba(207, 230, 184, .28); }
.tabell thead th:nth-child(3) { background: var(--mossa); }
.tabell .ja { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--mossa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F1B2D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.4l2.7 2.6L14 7.5'/%3E%3C/svg%3E") center / 20px no-repeat; vertical-align: middle; }
.tabell .nej { display: inline-block; width: 12px; height: 2px; background: rgba(15, 27, 45, .3); vertical-align: middle; }

/* ---------- Kort i rutnät ---------- */
.rutnat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rutnat4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.kort { border: 1px solid var(--linje); border-radius: var(--r-lg); background: #fff; padding: 26px; display: flex; flex-direction: column; position: relative; transition: border-color .2s, box-shadow .3s, transform .3s var(--ut); }
a.kort:hover { border-color: rgba(15, 27, 45, .3); box-shadow: 0 18px 40px rgba(15, 27, 45, .07); transform: translateY(-3px); }
.kort .ikon { margin-bottom: 22px; }
.kort p { margin-top: 10px; color: var(--text-2); }
.kort .pil { margin-top: auto; padding-top: 18px; }
.mork .kort { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.mork .kort p { color: rgba(255, 255, 255, .74); }
.is .kort { border-color: transparent; }

/* ---------- Kalkyl ---------- */
.kalkyl { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--linje); background: #fff; }
.kalkyl__reglage { padding: 37px; display: grid; gap: 34px; align-content: center; }
.kalkyl__rad label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 16px; font-weight: 500; margin-bottom: 14px; }
.kalkyl__rad output { font-family: var(--bred); font-stretch: 122%; font-weight: 700; font-size: 20px; white-space: nowrap; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; --p: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--fjord) var(--p), var(--is) var(--p)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--fjord) var(--p), var(--is) var(--p)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 2px solid var(--natt); box-shadow: 0 2px 6px rgba(15, 27, 45, .2); transition: transform .15s; }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--natt); box-shadow: 0 2px 6px rgba(15, 27, 45, .2); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.kalkyl__svar { background: var(--natt); color: #fff; padding: 37px; display: flex; flex-direction: column; justify-content: center; }
.kalkyl__svar .versal { color: rgba(255, 255, 255, .6); }
.kalkyl__tal { margin-top: 14px; font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: .9; letter-spacing: -.02em; white-space: nowrap; }
.kalkyl__tal small { font-family: "Archivo"; font-stretch: 100%; font-size: 16px; font-weight: 450; letter-spacing: 0; margin-left: 6px; }
.kalkyl__svar p { margin-top: 22px; color: rgba(255, 255, 255, .78); max-width: 440px; }
.kalkyl__svar p strong { color: var(--hjortron); font-weight: 600; white-space: nowrap; }

/* ---------- Frågor ---------- */
.fragor { display: grid; grid-template-columns: 1fr 1.35fr; gap: 54px; align-items: start; }
.fragor__lista { border-top: 1px solid var(--linje); }
details { border-bottom: 1px solid var(--linje); }
summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 20px; font-weight: 450; line-height: 1.3; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--linje); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230F1B2D' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s var(--ut), background-color .2s; }
summary:hover::after { background-color: var(--is); }
details[open] summary::after { transform: rotate(180deg); }
details > p { padding: 0 60px 24px 0; color: var(--text-2); max-width: 680px; }
details[open] > p { animation: in .4s var(--ut); }
@keyframes in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: 1fr 1.2fr; gap: 54px; align-items: start; }
.kontakt__fakta { margin-top: 36px; display: grid; gap: 18px; }
.kontakt__fakta li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; }
.kontakt__fakta small { display: block; font-size: 13px; color: var(--text-3); }
.form { background: #fff; border: 1px solid var(--linje); border-radius: var(--r-lg); padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.falt { display: grid; gap: 7px; }
.falt--hel, .form fieldset, .form > button, .form > p, .form-status { grid-column: 1 / -1; }
.form label, .form legend { font-size: 14px; font-weight: 550; padding: 0; }
.form label small { font-weight: 400; color: var(--text-3); font-size: 13px; }
.form input:not([type="checkbox"]), .form textarea {
  width: 100%; font: inherit; color: inherit; background: var(--is); border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 13px 14px; min-height: 48px; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.form textarea { resize: vertical; min-height: 110px; }
.form input:hover, .form textarea:hover { border-color: var(--linje); }
.form input:focus, .form textarea:focus { outline: none; background: #fff; border-color: var(--fjord); box-shadow: 0 0 0 3px rgba(51, 85, 224, .18); }
.form [aria-invalid="true"] { border-color: #B3261E !important; background: #fff; box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.form ::placeholder { color: var(--text-3); }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.val { position: relative; display: inline-flex; }
.val input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.val span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--linje); font-size: 14px; font-weight: 450; transition: background-color .2s, border-color .2s, color .2s; }
.val:hover span { border-color: rgba(15, 27, 45, .35); }
.val input:checked + span { background: var(--natt); border-color: var(--natt); color: #fff; }
.val input:checked + span::before { content: ""; width: 14px; height: 14px; margin-right: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23F4A72C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.3l2.6 2.5L11 4.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.val input:focus-visible + span { outline: 2px solid var(--fjord); outline-offset: 3px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; font-size: 15px; font-weight: 500; color: #B3261E; }
.form-status:empty { display: none; }
.form-status a { text-decoration: underline; }
.form .liten { color: var(--text-2); }
.form-thanks { background: var(--mossa); border-radius: var(--r-lg); padding: 37px; font-size: 22px; line-height: 1.3; font-weight: 500; }

/* ---------- Avslutning ---------- */
.final { position: relative; padding-top: 30px; overflow: hidden; }
.jatte { display: flex; justify-content: center; font-family: var(--bred); font-stretch: 125%; font-weight: 900; font-size: 27.5vw; line-height: .74; letter-spacing: -.03em; text-transform: uppercase; color: var(--mossa); white-space: nowrap; user-select: none; padding-top: .04em; }
.jatte span { display: inline-block; transform: translateY(calc((1 - var(--in, 1)) * (30% + var(--n) * 14%))); }
.cta { position: relative; margin-top: -7.5vw; background: var(--hjortron); color: var(--natt); border-radius: var(--r-lg); padding: 26px 22px 22px; min-height: 371px; display: flex; flex-direction: column; }
.cta .display { max-width: 1250px; }
.cta p { margin-top: auto; padding-top: 44px; font-size: 22px; line-height: 1.25; max-width: 620px; }
.cta .knappar { margin-top: 26px; }
.cta .btn--kant { border-color: rgba(15, 27, 45, .35); }
.cta .btn--kant:hover { background: rgba(15, 27, 45, .08); }

/* ---------- Sidfot ---------- */
.fot { padding-top: 52px; }
.fot__topp { border-top: 1px solid var(--linje); padding-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.fot__topp h2 { font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 26px; }
.fot__topp li a { display: inline-block; padding: 7px 0; font-size: 14px; letter-spacing: .01em; transition: color .2s; }
.fot__topp li a:hover { color: var(--fjord); }
.fot__topp li.fet a { font-weight: 600; }
.fot__botten { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-block: 89px 52px; }
.fot__botten svg { width: min(300px, 56vw); height: auto; }
.fot__botten p { font-size: 13px; color: var(--text-2); text-align: right; line-height: 1.6; }

/* ---------- Undersidor ---------- */
.subhero { background: var(--is); padding: 190px 0 var(--luft); text-align: center; overflow: hidden; }
.subhero .tagg { margin-bottom: 26px; }
.subhero .h1 { max-width: 1050px; margin-inline: auto; }
.subhero .lead { margin: 30px auto 0; max-width: 660px; }
.subhero .knappar { margin-top: 36px; justify-content: center; }
.subhero + .scen-yta { background: var(--is); }
.subhero--scen { padding-bottom: 0; }
.subhero--scen .scen { margin-top: 70px; }

.tjanst { display: grid; grid-template-columns: 1fr 1.08fr; gap: 64px; align-items: center; }
.tjanst--v { grid-template-columns: 1.08fr 1fr; }
.tjanst--v .tjanst__text { order: 2; }
.tjanst__text .tagg { margin-bottom: 20px; }
.tjanst__text .ingress { margin-top: 20px; color: var(--text-2); }
.tjanst__text .bockar { margin-top: 26px; }
.tjanst__text .system { margin-top: 26px; font-size: 14px; color: var(--text-3); }
.tjanst__text .system b { color: var(--natt); font-weight: 550; }
.tjanst__text .knappar { margin-top: 30px; }
.ram { position: relative; border-radius: var(--r-lg); overflow: hidden; padding: clamp(22px, 4.6vw, 64px); min-height: 480px; display: grid; place-items: center; }
.ram .konst { position: absolute; inset: 0; }
.ram .m { position: relative; width: min(100%, 440px); font-size: 13px; box-shadow: 0 30px 70px rgba(0, 0, 0, .3); }
.ram .m .m__huvud { font-size: 14px; padding: 14px 16px; }
.ram .m .m__rad { padding: 12px 16px; }
.ram--is { background: var(--is); }
.ram--is .m { box-shadow: 0 30px 70px rgba(15, 27, 45, .12); }
.tre { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 22px; }
.steg { border-top: 1px solid var(--linje); padding-top: 18px; }
.steg b { font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: 15px; color: var(--fjord); }
.steg h4 { margin-top: 10px; }
.steg p { margin-top: 6px; color: var(--text-2); font-size: 15px; }
.godk { border-radius: var(--r-md); background: var(--mossa); padding: 20px 22px; }
.godk h4 { display: flex; align-items: center; gap: 8px; }
.godk ul { margin-top: 10px; display: grid; gap: 6px; font-size: 15px; }
.godk li { padding-left: 16px; position: relative; }
.godk li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--natt); }
.is .steg { border-color: rgba(15, 27, 45, .18); }

.tidslinje { position: relative; display: grid; gap: 22px; max-width: 1010px; margin-inline: auto; }
.tidslinje::before, .tidslinje__fyll { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--linje); }
.tidslinje__fyll { background: var(--fjord); transform-origin: top; transform: scaleY(var(--fyll, 0)); }
.tsteg { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 26px; align-items: start; }
.tsteg__nr { width: 56px; height: 56px; border-radius: 16px; background: #fff; border: 1px solid var(--linje); display: grid; place-items: center; font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: 20px; position: relative; z-index: 1; transition: background-color .4s, color .4s, border-color .4s; }
.tsteg.is-in .tsteg__nr { background: var(--natt); color: #fff; border-color: var(--natt); }
.tsteg__kort { border: 1px solid var(--linje); border-radius: var(--r-lg); background: #fff; display: grid; grid-template-columns: 1fr 300px; overflow: hidden; }
.tsteg__text { padding: 26px; }
.tsteg__text .versal { color: var(--fjord); }
.tsteg__text .h3 { margin-top: 8px; font-size: 26px; font-weight: 550; }
.tsteg__text p { margin-top: 12px; color: var(--text-2); max-width: 520px; }
.tsteg__text .bockar { margin-top: 18px; font-size: 15px; }
.tsteg__bild { background: var(--is); padding: 22px; display: grid; place-items: center; }
.tsteg__bild .m { width: 100%; }

.doc { max-width: 760px; margin-inline: auto; }
.doc h2 { font-size: 24px; font-weight: 600; line-height: 1.25; margin-top: 48px; }
.doc p, .doc ul { margin-top: 14px; font-size: 17px; line-height: 1.6; color: rgba(15, 27, 45, .82); }
.doc ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.om { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.om__text p + p { margin-top: 18px; }
.om__kort { border-radius: var(--r-lg); background: var(--is); padding: 30px; }
.om__kort dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 26px; margin-top: 18px; font-size: 16px; }
.om__kort dt { color: var(--text-3); }

/* ---------- Rörelse ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ut), transform .8s var(--ut); transition-delay: calc(var(--d, 0) * 90ms); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .upp > * { opacity: 0; transform: translateY(22px); animation: upp .9s var(--ut) forwards; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
@keyframes upp { to { opacity: 1; transform: none; } }
.js .display .rad { display: block; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
.js .upp .display { opacity: 1; transform: none; animation: none; }
.js .upp .display .rad > span { display: block; transform: translateY(105%); animation: upp 1s var(--ut) forwards; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .rull__spar { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
  .rull__spar [aria-hidden="true"] { display: none; }
  .js .rv, .js .upp > * { opacity: 1; transform: none; }
  .scen__konst { clip-path: none; opacity: 1; }
  .jatte span { transform: none; }
}

/* ---------- Mindre skärmar ---------- */
@media (max-width: 1180px) {
  .rutnat2 { grid-template-columns: 1fr; }
  .fkort { grid-template-columns: 1fr 1fr; }
  .rutnat4 { grid-template-columns: 1fr 1fr; }
  .tre { grid-template-columns: repeat(3, 1fr); }
  .tre .godk { grid-column: 1 / -1; }
  .nav__fall { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1020px) {
  :root { --pad: 28px; --luft: 72px; }
  .nav__main { display: none; }
  .nav__rad { justify-content: space-between; }
  .nav__cta { margin-left: auto; margin-right: 8px; }
  .nav__vaxel { display: grid; place-items: center; width: 64px; flex: none; }
  .nav__vaxel svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .nav__vaxel svg path { transition: transform .3s var(--ut), opacity .2s; transform-origin: 15px 15px; }
  .nav.is-open .nav__vaxel .l1 { transform: translateY(6px) rotate(45deg); }
  .nav.is-open .nav__vaxel .l2 { opacity: 0; }
  .nav.is-open .nav__vaxel .l3 { transform: translateY(-6px) rotate(-45deg); }
  .nav__main {
    display: block; position: fixed; inset: 0; z-index: -1; background: #fff; border: 0; border-radius: 0;
    padding: 96px 16px 40px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s, transform .3s var(--ut), visibility .25s;
  }
  .nav:not(.is-rullad) .nav__main { padding-top: 136px; }
  .nav.is-open .nav__main { opacity: 1; visibility: visible; transform: none; }
  .nav__mobil { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
  .nav__lankar { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lank { height: 56px; width: 100%; justify-content: space-between; font-size: 20px; padding: 0 2px; border-radius: 0; }
  .nav__lank:hover, .nav__lank[aria-expanded="true"], .nav__lank[aria-current="page"] { background: none; }
  .nav__lank[aria-current="page"] { color: var(--fjord); }
  .nav__lank svg { width: 20px; height: 20px; }
  .nav__aux { display: none; }
  .nav__fall { position: static; display: none; grid-template-columns: 1fr; box-shadow: none; border: 0; padding: 0 0 10px; opacity: 1; visibility: visible; transform: none; }
  .nav__fall.is-open { display: grid; }
  .fall__kort { padding: 10px 2px; }
  .flikar { grid-template-columns: 1fr; gap: 36px; }
  .flikar__scen { position: relative; top: 0; aspect-ratio: 4 / 3; order: -1; }
  .fragor, .kontakt, .om { grid-template-columns: 1fr; gap: 36px; }
  .tjanst, .tjanst--v { grid-template-columns: 1fr; gap: 36px; }
  .tjanst--v .tjanst__text { order: 0; }
  .planer { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .plan__vad { min-height: 0; }
  .rutnat3 { grid-template-columns: 1fr; }
  .lofte { grid-template-columns: 1fr; min-height: 0; }
  .lofte__bild { min-height: 320px; }
  .band { grid-template-columns: 1fr; gap: 18px; }
  .band__text { border: 0; }
  .band__text span { left: 50%; translate: -50% 0; }
  .kalkyl { grid-template-columns: 1fr; }
  .fot__topp { grid-template-columns: 1fr 1fr; }
  .tsteg__kort { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --pad: 16px; --luft: 60px; }
  html { scroll-padding-top: 84px; }
  .nav { padding: 8px 16px; }
  .nav__rad { height: 44px; }
  .bricka { border-radius: 16px; }
  .nav__logo { padding: 0 16px; }
  .nav__logo svg { height: 27px; }
  .nav__vaxel { width: 64px; }
  .nav__cta { display: none; }
  .strip { font-size: 13px; }
  .hero { padding-top: 160px; }
  .hero__pre { margin-top: 26px; }
  .hero .display { font-size: clamp(40px, 12.6vw, 60px); line-height: .9; margin-top: 14px; }
  .hero .lead { font-size: 19px; margin-top: 30px; }
  .hero .knappar { margin-top: 34px; }
  .scen { margin-top: 70px; padding: 0 8px 40px; }
  .subhero { padding-top: 150px; }
  .display { line-height: .86; }
  .fkort { grid-template-columns: 1fr; }
  .fkort__bild { min-height: 230px; }
  .fkort__bild > * { left: 22px; width: calc(100% - 44px); max-width: 340px; }
  .fkort__text p { margin-top: 14px; }
  .siffror li { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 0; }
  .siffror .display { font-size: 21vw; }
  .siffror p { text-align: left; }
  .kar__topp { flex-direction: column; align-items: flex-start; gap: 22px; }
  .kar__spar { gap: 16px; margin-top: 30px; }
  .pkort { width: min(320px, 82vw); }
  .lofte__text { padding: 22px; }
  .lofte__text .fot { padding-top: 40px; }
  .kopp { height: 150px; }
  .kopp__mitt { width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 30px; box-shadow: 0 0 0 16px #fff, 0 20px 50px rgba(15, 27, 45, .3); }
  .kopp__mitt svg { width: 68px; height: 68px; }
  .kopp__ruta { width: 60px; height: 60px; font-size: 10px; border-radius: 14px; }
  .kopp .rull__spar li { padding: 0 9px; }
  .form { grid-template-columns: 1fr; padding: 20px; }
  .form > * { grid-column: 1 / -1; }
  .kalkyl__reglage, .kalkyl__svar { padding: 22px; }
  .jatte { font-size: 28vw; }
  .cta { margin-top: -6vw; min-height: 300px; }
  .cta .display { font-size: 13.4vw; }
  .cta p { font-size: 19px; }
  .fot__botten { flex-direction: column; align-items: flex-start; padding-block: 60px 36px; }
  .fot__botten p { text-align: left; }
  .rutnat4 { grid-template-columns: 1fr; }
  .tre { grid-template-columns: 1fr; margin-top: 44px; }
  .ram { min-height: 0; padding: 22px 14px; }
  .tidslinje::before, .tidslinje__fyll { left: 19px; }
  .tsteg { grid-template-columns: 40px 1fr; gap: 12px; }
  .tsteg__nr { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
  .tsteg__text { padding: 20px; }
  summary { font-size: 18px; padding: 18px 0; }
  details > p { padding-right: 0; }
  .huvud + * { margin-top: 36px; }
  .flikar__bild { padding: 16px; }
  .rull__spar li { padding: 0 22px; font-size: 17px; }
  .om__kort dl { grid-template-columns: 1fr; gap: 2px; }
  .om__kort dd { margin-bottom: 12px; }
}
@media (max-width: 400px) {
  .btn { padding-inline: 16px; }
  .hero .knappar .btn, .subhero .knappar .btn { width: 100%; }
  .strip span.lang { display: none; }
}

/* ================= Tillägg: säljande delar, illustrationer, team ================= */
.band__text { position: static; height: auto; font-size: 16px; font-weight: 400; line-height: 26px; }
.band__under { text-align: center; font-size: 14px; color: var(--text-3); padding-bottom: 8px; margin-top: -14px; }
.hero h1 { margin: 0; font-weight: inherit; }
.hero__pre--efter { margin-top: 22px; }
.hero .lead { max-width: 760px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; margin-top: 34px; }
.hero__kort { margin-top: 16px; font-weight: 600; font-size: 17px; }
.hero .knappar { margin-top: 32px; }
.efterrad { margin-top: 40px; text-align: center; font-size: clamp(19px, 1.7vw, 24px); font-weight: 550; text-wrap: balance; }

.boka { margin-top: 36px; }
.boka--mitt { text-align: center; margin-top: 52px; }
.boka--mitt .knappar { justify-content: center; }
.risk { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 18px; font-size: 14px; color: var(--text-2); }
.boka--mitt .risk { justify-content: center; }
.risk li { display: inline-flex; align-items: center; gap: 7px; }
.risk li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--mossa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F1B2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.4l2.7 2.6L14 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; flex: none; }
.mork .risk { color: rgba(255, 255, 255, .75); }
.mikro { display: block; margin-top: 14px; font-size: 14px; color: rgba(15, 27, 45, .8); }
.mellan { padding-block: 0 var(--luft); }
.mellan.is { padding-block: var(--luft); }
.mellan__in { border-radius: var(--r-lg); background: var(--natt); color: #fff; padding: clamp(26px, 4vw, 52px); display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.mellan__rubrik { font-family: var(--bred); font-stretch: 122%; font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.08; max-width: 560px; text-wrap: balance; }
.mellan .boka { margin-top: 0; }
.mellan .risk { color: rgba(255, 255, 255, .75); max-width: 520px; }
.mellan .btn--kant { border-color: rgba(255, 255, 255, .3); color: #fff; }
.mellan .btn--kant:hover { background: rgba(255, 255, 255, .08); }

.klibb { display: none; }
@media (max-width: 720px) {
  .klibb { display: inline-flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90; box-shadow: 0 12px 30px rgba(15, 27, 45, .28); transform: translateY(140%); transition: transform .35s var(--ut); }
  .klibb.is-on { transform: none; }
}

.kalkyl__tal small { font-size: 18px; }
.kalkyl__mot { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kalkyl__mot b { font-family: var(--bred); font-stretch: 122%; font-weight: 700; font-size: clamp(20px, 2vw, 26px); color: var(--mossa); white-space: nowrap; }

.brytare { margin-left: auto; width: 30px; height: 18px; border-radius: 9px; background: rgba(15, 27, 45, .18); position: relative; flex: none; }
.brytare::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.brytare.pa { background: var(--mossa-djup); }
.brytare.pa::after { left: 14px; }

/* Före och efter */
.fore { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1100px; margin-inline: auto; }
.fore__kol { border-radius: var(--r-lg); padding: 30px; background: rgba(15, 27, 45, .05); }
.fore__kol h3 { margin-bottom: 22px; }
.fore__kol ul { display: grid; gap: 0; }
.fore__kol li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--linje); font-size: clamp(17px, 1.5vw, 21px); font-weight: 450; line-height: 1.3; color: var(--text-2); }
.fore__kol li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: rgba(15, 27, 45, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1B2D' stroke-opacity='.55' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E") center / 24px no-repeat; }
.fore__kol--med { background: var(--natt); color: #fff; }
.fore__kol--med h3 { color: var(--hjortron); }
.fore__kol--med li { color: #fff; border-color: rgba(255, 255, 255, .18); }
.fore__kol--med li::before { background: var(--mossa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1B2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.500 12.400l3 3 6-6.400'/%3E%3C/svg%3E") center / 24px no-repeat; }

/* Illustrationer i korten */
.kort--ill { padding: 14px 14px 24px; }
.kort--ill h3, .kort--ill p { padding-inline: 12px; }
.kort--ill h3 { margin-top: 22px; }
.ill { position: relative; height: 180px; border-radius: var(--r-md); background: var(--is); overflow: hidden; font-size: 11px; line-height: 1.3; }
.is .ill { background: var(--is); }
.ill--natt { background: var(--natt); color: #fff; }
.ill--natt .mane { position: absolute; right: 26px; top: 22px; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset -8px -3px 0 0 var(--hjortron); }
.ill--natt .st { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: tindra 2.4s ease-in-out infinite; }
.ill--natt .s1 { left: 22%; top: 20%; } .ill--natt .s2 { left: 52%; top: 12%; animation-delay: .8s; } .ill--natt .s3 { left: 70%; top: 34%; animation-delay: 1.5s; }
@keyframes tindra { 50% { opacity: .15; transform: scale(.6); } }
.skarm { position: absolute; left: 22px; right: 22px; bottom: -6px; height: 112px; border-radius: 10px 10px 0 0; background: #fff; color: var(--natt); padding: 10px 12px; display: grid; gap: 7px; align-content: start; }
.skarm__topp { display: flex; justify-content: space-between; font-weight: 650; font-size: 10px; margin-bottom: 2px; }
.skarm__topp em { font-style: normal; font-variant-numeric: tabular-nums; }
.skarm__topp span { color: var(--mossa-djup); display: inline-flex; align-items: center; gap: 5px; }
.skarm__topp span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mossa-djup); animation: tindra 1.4s infinite; }
.skarm b { height: 9px; border-radius: 3px; background: var(--is); position: relative; overflow: hidden; }
.skarm b::after { content: ""; position: absolute; inset: 0; background: var(--fjord); transform-origin: left; transform: scaleX(0); animation: jobba 6s var(--ut) infinite; }
.skarm b:nth-child(3)::after { animation-delay: 1.2s; background: var(--mossa-djup); } .skarm b:nth-child(4)::after { animation-delay: 2.4s; } .skarm b:nth-child(5)::after { animation-delay: 3.6s; background: var(--hjortron); }
@keyframes jobba { 0% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.ill--login { display: grid; place-content: center; gap: 14px; }
.appar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 210px; }
.app { height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--linje); display: grid; place-items: center; font-weight: 600; animation: app 8s infinite; }
.app.a2 { animation-delay: 2s; } .app.a3 { animation-delay: 4s; } .app.a4 { animation-delay: 6s; }
@keyframes app { 0%, 24% { background: var(--natt); color: #fff; border-color: var(--natt); } 25%, 100% { background: var(--mossa); border-color: transparent; color: var(--natt); } }
.inlogg { width: 210px; height: 34px; border-radius: 8px; background: #fff; border: 1px solid var(--linje); display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 12px; letter-spacing: 2px; }
.inlogg span { overflow: hidden; white-space: nowrap; width: 0; animation: prickar 2s steps(8) infinite; }
@keyframes prickar { 70%, 100% { width: 72px; } }
.inlogg i { width: 22px; height: 22px; border-radius: 6px; background: var(--mossa-djup); color: #fff; display: grid; place-items: center; animation: bock 2s infinite; }
.inlogg i svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bock { 0%, 68% { opacity: 0; transform: scale(.5); } 78%, 100% { opacity: 1; transform: none; } }
.ill--lar { padding: 16px 18px; }
.ill--lar .rec { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.ill--lar .rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #D43B2A; animation: tindra 1.2s infinite; }
.ill--lar ol { margin-top: 10px; display: grid; gap: 5px; counter-reset: s; }
.ill--lar li { counter-increment: s; height: 28px; border-radius: 7px; background: #fff; border: 1px solid var(--linje); display: flex; align-items: center; gap: 9px; padding: 0 9px; font-weight: 550; opacity: 0; animation: steg 7s var(--ut) infinite; }
.ill--lar li::before { content: counter(s); width: 16px; height: 16px; border-radius: 4px; background: var(--fjord-ljus); color: var(--fjord-djup); display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.ill--lar li:nth-child(2) { animation-delay: .9s; } .ill--lar li:nth-child(3) { animation-delay: 1.8s; }
@keyframes steg { 0% { opacity: 0; transform: translateX(-10px); } 8%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ill--lar .sparad { position: absolute; right: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px; background: var(--mossa); font-weight: 650; opacity: 0; animation: sparad 7s var(--ut) infinite; }
.ill--lar .sparad svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sparad { 0%, 40% { opacity: 0; transform: translateY(8px); } 48%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ill--ping ul { position: absolute; left: 18px; right: 18px; top: 26px; display: flex; justify-content: space-between; align-items: center; }
.ill--ping ul::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--linje); }
.ill--ping li { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--mossa-djup); box-shadow: 0 0 0 3px var(--is); animation: tyst 6s infinite; }
.ill--ping li:nth-child(2) { animation-delay: .5s; } .ill--ping li:nth-child(3) { animation-delay: 1s; } .ill--ping li:nth-child(4) { animation-delay: 1.5s; } .ill--ping li:nth-child(5) { animation-delay: 2s; }
.ill--ping li:last-child { background: var(--hjortron); animation: plingprick 6s infinite; }
@keyframes tyst { 0% { transform: scale(0); } 6%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes plingprick { 0%, 42% { transform: scale(0); } 48% { transform: scale(1.5); } 54%, 92% { transform: scale(1); box-shadow: 0 0 0 3px var(--is), 0 0 0 8px rgba(244, 167, 44, .3); } 100% { transform: scale(0); } }
.pling { position: absolute; right: 14px; left: 34px; bottom: 16px; border-radius: 12px 12px 3px 12px; background: var(--natt); color: #fff; padding: 12px 14px; transform-origin: 100% 0; animation: pling 6s var(--ut) infinite; box-shadow: 0 12px 30px rgba(15, 27, 45, .25); }
.pling b { display: block; font-size: 12.5px; color: var(--hjortron); }
.pling span { opacity: .8; }
@keyframes pling { 0%, 46% { opacity: 0; transform: scale(.7) translateY(-8px); } 54%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Team */
.team { display: grid; grid-template-columns: minmax(200px, 250px) 1fr minmax(210px, 260px) 1fr minmax(260px, 330px); align-items: center; max-width: 1180px; margin-inline: auto; border-radius: var(--r-lg); background: var(--is); padding: clamp(22px, 4vw, 52px); }
.is .team { background: #fff; }
.nod { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--linje); border-radius: var(--r-md); padding: 14px; min-width: 0; }
.is .team .nod { background: var(--is); border-color: transparent; }
.nod b { display: block; font-size: 15px; font-weight: 650; }
.nod small { display: block; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nod > div { min-width: 0; }
.nod--natt, .is .team .nod--natt { background: var(--natt); color: #fff; border-color: var(--natt); padding: 18px 16px; box-shadow: 0 18px 40px rgba(15, 27, 45, .22); }
.nod--natt small { color: rgba(255, 255, 255, .7); }
.nod .sym { width: 40px; height: 40px; flex: none; border-radius: 11px; }
.nod--natt .sym rect { fill: var(--hjortron); }
.nod--natt .sym path { fill: var(--natt); }
.team__spec { display: grid; gap: 10px; }
.led { position: relative; height: 2px; background: var(--linje); }
.led i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--hjortron); animation: fard 2.6s linear infinite; }
.led:not(.led--gren) i { animation-direction: reverse; background: var(--mossa-djup); }
@keyframes fard { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.led--gren { height: 100%; background: none; display: grid; gap: 10px; align-self: stretch; }
.led--gren::before { content: ""; position: absolute; left: 50%; top: 12.500%; bottom: 12.500%; width: 2px; background: var(--linje); }
.led--gren::after { content: ""; position: absolute; left: 0; width: 50%; top: 50%; height: 2px; background: var(--linje); }
.led--gren i { position: relative; top: auto; left: auto; width: auto; height: 2px; border-radius: 0; background: var(--linje); align-self: center; margin-left: 50%; animation: none; opacity: 1; }
.led--gren i::after { content: ""; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--hjortron); animation: fard 2.4s linear infinite; animation-delay: calc(var(--k, 0) * .6s); }
.led--gren i:nth-child(2) { --k: 1; } .led--gren i:nth-child(3) { --k: 2; } .led--gren i:nth-child(4) { --k: 3; }

/* Erbjudande, trygghet, om */
.erbj { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; border-radius: var(--r-lg); background: var(--hjortron); padding: clamp(26px, 4vw, 52px); }
.erbj .tagg { background: var(--natt); color: #fff; margin-bottom: 20px; }
.erbj .ingress { margin-top: 20px; max-width: 560px; }
.erbj .knappar { margin-top: 28px; }
.erbj__tal { display: grid; gap: 10px; }
.erbj__tal li { background: #fff; border-radius: var(--r-md); padding: 16px 20px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px; }
.erbj__tal span { grid-row: 1 / span 2; align-self: center; font-family: var(--bred); font-stretch: 122%; font-weight: 650; font-size: 18px; }
.erbj__tal s { grid-column: 2; text-align: right; font-size: 14px; color: var(--text-3); }
.erbj__tal b { grid-column: 2; text-align: right; font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: 22px; white-space: nowrap; }
.radstapel { display: grid; gap: var(--luft); }
.radstapel .ram { min-height: 420px; }
.om__foto { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; }
.om__foto .konst { position: absolute; inset: 0; }
.om__foto span { position: relative; background: #fff; border-radius: 99px; padding: 6px 14px; font-size: 13px; font-weight: 550; }
.om__kort dl { margin-top: 26px; }
.subhero--form { text-align: left; padding-bottom: var(--luft); }
.subhero--form .h1 { margin-inline: 0; }
.subhero--form .form { text-align: left; }

@media (max-width: 1180px) {
  .team { grid-template-columns: 1fr; gap: 0; justify-items: stretch; max-width: 520px; }
  .led { width: 2px; height: 34px; justify-self: center; }
  .led i { left: -4px; top: 0; animation-name: fard-ned; }
  @keyframes fard-ned { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }
  .led--gren { display: block; width: 2px; height: 34px; background: var(--linje); }
  .led--gren::before, .led--gren::after { display: none; }
  .led--gren i { display: none; }
  .led--gren i:first-child { display: block; position: absolute; margin: 0; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--hjortron); animation: fard-ned 2.4s linear infinite; }
  .led--gren i::after { display: none; }
  .team__spec { grid-template-columns: 1fr 1fr; }
  .erbj { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .fore { grid-template-columns: 1fr; }
  .fore__kol { padding: 22px; }
  .team__spec { grid-template-columns: 1fr; }
  .mellan__in { flex-direction: column; align-items: flex-start; }
  .band__text { text-align: center; }
  .hero .lead { font-size: 17px; }
  .fot { padding-bottom: 76px; }
  .kort--ill { padding: 12px 12px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .skarm b::after { transform: scaleX(1); }
  .ill--lar li, .ill--lar .sparad, .pling, .inlogg i { opacity: 1; transform: none; }
  .inlogg span { width: 72px; }
  .ill--ping li { transform: none; }
  .led i, .led--gren i::after { display: none; }
}

/* ---------- Justeringar efter granskning ---------- */
.ruta--hog .tal { font-size: 24px; max-width: 46%; line-height: 1.05; }
.ruta--hog .under { max-width: 44%; }
.ruta--hog .fot { max-width: 60%; }
.staplar { top: 30px; height: 112px; }
.ring { top: 16px; }
.fkort__bild > .m { left: 30px; right: 22px; width: auto; }
.ill.ill--natt { background: var(--natt); }
.flikar__bild .m { width: min(100%, 460px); font-size: 14px; }
.flikar__bild .m .m__svar p { font-size: 13.5px; }
.flikar__bild .m .m__knappar span { height: 30px; font-size: 12.5px; padding: 0 13px; }
.stortal span { display: inline-block; background: var(--natt); padding: 9px 18px; border-radius: 99px; font-size: 16px; }
.jatte { font-size: 21vw; }
.cta { margin-top: -5.500vw; }
@media (max-width: 720px) {
  .jatte { font-size: 21.500vw; }
  .cta { margin-top: -5vw; }
  .hero { padding-top: 132px; }
  .marke { font-size: 13px; height: 36px; padding-right: 14px; white-space: nowrap; }
  .marke b { display: none; }
  .hero .lead { font-size: 16.500px; line-height: 1.45; }
  .hero__kort { font-size: 16px; }
  .klibb { min-height: 46px; font-size: 15px; left: 16px; right: 16px; }
  .fkort__bild > .m { left: 22px; right: 22px; max-width: none; }
}
.tabell-yta { position: relative; }
@media (max-width: 1020px) { .nav__aux { display: inline-flex; } }

/* ---------- Quipr: vad den kan göra ---------- */
.fall__alla { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: var(--r-md); background: var(--is); font-size: 13px; color: var(--text-2); transition: background-color .2s; }
.fall__alla strong { display: block; font-size: 15px; font-weight: 600; color: var(--natt); margin-bottom: 2px; }
.fall__alla:hover { background: var(--fjord-ljus); }
.fall__alla svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ut); }
.fall__alla:hover svg { transform: translateX(4px); }

.nova__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.nkort { background: #fff; border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; border: 1px solid transparent; transition: border-color .2s, box-shadow .3s, transform .3s var(--ut); }
.nkort:hover { border-color: var(--linje); box-shadow: 0 18px 40px rgba(15, 27, 45, .07); transform: translateY(-3px); }
.nkort__topp { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.nkort > p { margin-top: 8px; color: var(--text-2); }
.nkort__lista { margin-top: 20px; font-size: 15px; line-height: 1.4; gap: 10px; }
.nkort__sag { margin-top: auto; padding-top: 24px; }
.nkort__sag small { font-size: 12px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.nkort__sag p { margin-top: 8px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--fjord-ljus); color: var(--fjord-djup); font-size: 14.5px; line-height: 1.4; font-weight: 450; }

.drom {
  margin-top: 22px; padding: 56px; border-radius: var(--r-lg); color: #fff; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
  background: radial-gradient(120% 90% at 100% 0%, rgba(244, 167, 44, .2), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(51, 85, 224, .28), transparent 60%), var(--natt);
}
.drom .tagg { margin-bottom: 22px; }
.drom .ingress { margin-top: 22px; color: rgba(255, 255, 255, .76); max-width: 520px; }
.drom .knappar { margin-top: 32px; }
.drom :focus-visible { outline-color: var(--hjortron); }
.drom__kort { padding: 32px; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); }
.drom__pre { font-size: 15px; color: rgba(255, 255, 255, .6); }
.drom__vaxla { display: grid; margin-top: 10px; font-family: var(--bred); font-stretch: 115%; font-weight: 550; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.01em; }
.drom__vaxla span { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--ut); }
.drom__vaxla span.is-on { opacity: 1; transform: none; }
.drom__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); }
.drom__chips li { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .22); font-size: 13.5px; color: rgba(255, 255, 255, .86); }

@media (max-width: 1180px) {
  .nova__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1020px) {
  .drom { grid-template-columns: 1fr; gap: 36px; padding: 36px; }
  .fall__alla { padding: 12px 2px; background: none; }
}
@media (max-width: 720px) {
  .nova__grid { grid-template-columns: 1fr; }
  .drom { padding: 26px 20px; }
  .drom__kort { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nkort, .drom__vaxla span { transition: none; }
  .nkort:hover { transform: none; }
}

/* ================= Quipr: figuren, "Möt Quipr" och appen i mobilen ================= */
.nova { display: block; flex: none; border-radius: 50%; overflow: visible; }
.nova__kropp { transform-origin: 48px 48px; transform-box: view-box; }
.nova__ogon { transform-origin: 48px 47px; transform-box: view-box; animation: nova-blink 5.2s infinite; }
.nova__gnista { transform-origin: 74px 21.5px; transform-box: view-box; animation: nova-glimt 3.6s ease-in-out infinite; }
.nova__prick { transform-origin: 21.5px 72.5px; transform-box: view-box; animation: nova-glimt 3.6s ease-in-out -1.8s infinite; }
.nova__mun-o { opacity: 0; }
.nova.is-tanker .nova__kropp { animation: nova-gung 1.6s ease-in-out infinite; }
.nova.is-tanker .nova__ogon { animation: nova-titta 2.4s ease-in-out infinite; }
.nova.is-tanker .nova__gnista { animation: nova-snurr 1.4s var(--ut) infinite; }
.nova.is-tanker .nova__mun { opacity: 0; }
.nova.is-tanker .nova__mun-o { opacity: 1; }
.nova.is-glad .nova__kropp { animation: nova-hopp .7s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes nova-blink { 0%, 46%, 50%, 92%, 96%, 100% { transform: scaleY(1); } 48%, 94% { transform: scaleY(.1); } }
@keyframes nova-glimt { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.62); opacity: .55; } }
@keyframes nova-titta { 0%, 100% { transform: translate(-2.5px, -2.5px); } 50% { transform: translate(2.5px, -2.5px); } }
@keyframes nova-gung { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes nova-snurr { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(1.25); } 100% { transform: rotate(180deg) scale(1); } }
@keyframes nova-hopp { 0% { transform: none; } 40% { transform: translateY(-5px) scale(1.04); } 100% { transform: none; } }

/* Quipr i hjälten, översikten och teamet */
.hero__pre--nova .nova { display: inline-block; width: 1.32em; height: 1.32em; vertical-align: -.36em; margin-right: .34em; }
.dash__nova { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; font-size: 13px; }
.dash__nova .nova { width: 28px; height: 28px; }
.dash__nova b { font-family: var(--bred); font-stretch: 118%; font-weight: 650; font-size: 14px; }
.dash__nova span { height: 20px; padding: 0 8px; border-radius: 99px; background: var(--fjord-ljus); color: var(--fjord-djup); font-size: 10.5px; font-weight: 600; display: inline-flex; align-items: center; }
.nod .nova { width: 44px; height: 44px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .16); }

/* Sektionen */
.mot { display: grid; grid-template-columns: 1fr 1.02fr; gap: 64px; align-items: center; }
.mot__vem { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.mot__vem .nova { width: 64px; height: 64px; }
.mot__vem b { display: block; font-family: var(--bred); font-stretch: 122%; font-weight: 650; font-size: 24px; line-height: 1.1; letter-spacing: -.01em; }
.mot__vem span { display: inline-flex; align-items: center; height: 24px; margin-top: 6px; padding: 0 10px; border-radius: 99px; background: var(--fjord-ljus); color: var(--fjord-djup); font-size: 12.5px; font-weight: 600; }
.mot__text .tagg { margin-bottom: 24px; }
.mot__text .ingress { margin-top: 20px; color: var(--text-2); max-width: 560px; }
.mot__punkter { margin-top: 32px; display: grid; gap: 20px; max-width: 540px; }
.mot__punkter li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.mot__punkter b { display: block; font-size: 17px; font-weight: 650; line-height: 1.3; }
.mot__punkter p { margin-top: 3px; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.mot__text .knappar { margin-top: 36px; }
.mot__scen { position: relative; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; padding: 52px 20px 64px; min-height: 760px; }
.mot__scen .konst { position: absolute; inset: 0; }
.mot__not { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 6px 14px; border-radius: 99px; background: rgba(15, 27, 45, .72); text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .9); }

/* Telefonen: samma gränssnitt som i appen (app/css/app.css), i mindre skala */
.tel { position: relative; width: 322px; max-width: 100%; padding: 9px; border-radius: 46px; background: var(--natt); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px rgba(0, 0, 0, .38); }
.tel__skarm { height: 624px; border-radius: 37px; background: var(--is); overflow: hidden; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.4; color: var(--natt); text-align: left; }
.tel__status { flex: none; height: 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 22px 0; font-size: 12px; font-weight: 650; }
.tel__status i { width: 74px; height: 21px; border-radius: 99px; background: var(--natt); }
.tel__status em { justify-self: end; width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid var(--natt); position: relative; opacity: .8; }
.tel__status em::after { content: ""; position: absolute; inset: 1.5px; right: 5px; border-radius: 1px; background: var(--natt); }
.tel__topp { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid var(--linje-svag); }
.tel__topp .nova { width: 38px; height: 38px; }
.tel__namn { display: flex; align-items: center; gap: 7px; }
.tel__namn b { font-family: var(--bred); font-stretch: 122%; font-weight: 650; font-size: 16.5px; line-height: 1.1; }
.tel__namn span { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 99px; background: var(--fjord-ljus); color: var(--fjord-djup); font-family: var(--bred); font-stretch: 115%; font-size: 10px; font-weight: 600; }
.tel__lage { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: var(--text-2); }
.tel__lage::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3C9A34; box-shadow: 0 0 0 2.5px rgba(60, 154, 52, .18); }
.tel__lage.jobbar::before { background: var(--fjord); box-shadow: 0 0 0 2.5px rgba(51, 85, 224, .18); }
.tel__flode { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 11px 4px; -webkit-mask-image: linear-gradient(transparent 0, #000 22px); mask-image: linear-gradient(transparent 0, #000 22px); }
.tel__intro { flex: none; display: grid; justify-items: center; text-align: center; padding: 10px 14px 4px; }
.tel__intro .nova { width: 44px; height: 44px; }
.tel__intro p { margin-top: 8px; font-size: 12.5px; color: var(--text-2); max-width: 30ch; text-wrap: pretty; }
.tel__intro b { color: var(--natt); font-weight: 650; }
.tel__dag { flex: none; align-self: center; margin: 12px 0 4px; padding: 3px 11px; border-radius: 99px; background: rgba(15, 27, 45, .06); font-size: 10.5px; font-weight: 600; color: var(--text-2); }
.tmsg { flex: none; display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; }
.tmsg--du { justify-content: flex-end; }
.tmsg .nova { width: 24px; height: 24px; }
.tbub { max-width: 82%; padding: 8px 12px; border-radius: 17px; background: #fff; border: 1px solid var(--linje-svag); box-shadow: 0 1px 1px rgba(15, 27, 45, .03); }
.tmsg--nova .tbub { border-bottom-left-radius: 6px; }
.tmsg--du .tbub { background: var(--natt); border-color: var(--natt); color: #fff; border-bottom-right-radius: 6px; }
.tmsg--skriver, .tmsg--sen { display: none; }
.tmsg--skriver .tbub { display: flex; align-items: center; gap: 4px; height: 35px; padding-inline: 13px; }
.tmsg--skriver .tbub i { width: 6px; height: 6px; border-radius: 50%; background: var(--natt); opacity: .3; animation: tel-prick 1.2s ease-in-out infinite; }
.tmsg--skriver .tbub i:nth-child(2) { animation-delay: .15s; }
.tmsg--skriver .tbub i:nth-child(3) { animation-delay: .3s; }
@keyframes tel-prick { 0%, 60%, 100% { transform: none; opacity: .3; } 30% { transform: translateY(-4px); opacity: .9; } }
.tgk { position: relative; flex: 1; min-width: 0; padding: 13px; border-radius: 18px; background: #fff; border: 1px solid var(--linje-svag); box-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 8px 24px -12px rgba(15, 27, 45, .14); overflow: hidden; }
.tgk__topp { display: flex; align-items: center; justify-content: space-between; }
.tgk__topp small { font-size: 11px; color: var(--text-3); }
.tgk__tagg { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; background: var(--hjortron-ljus); color: #7a4a05; font-family: var(--bred); font-stretch: 115%; font-size: 10.5px; font-weight: 600; }
.tgk__tagg svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tgk__titel { margin-top: 9px; font-weight: 650; font-size: 14.5px; line-height: 1.25; }
.tgk__meta { margin-top: 4px; font-size: 12px; color: var(--text-2); }
.tgk__meta b { color: var(--natt); font-weight: 600; }
.tgk__text { margin-top: 9px; padding: 9px 11px; border-radius: 10px; background: var(--is); font-size: 12.5px; line-height: 1.45; }
.tgk__knappar { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-top: 10px; }
.tgk__knappar span { position: relative; height: 38px; padding: 0 11px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; border: 1px solid transparent; transition: transform .18s var(--ut), background-color .18s; }
.tgk__knappar span:first-child { background: var(--hjortron); }
.tgk__knappar span:nth-child(2) { border-color: var(--linje); }
.tgk__knappar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tgk__knappar span:first-child::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(15, 27, 45, .22); opacity: 0; transform: scale(.4); }
.tgk.is-tryck .tgk__knappar span:first-child { transform: scale(.95); background: var(--hjortron-djup); }
.tgk.is-tryck .tgk__knappar span:first-child::after { animation: tel-tryck .5s var(--ut) both; }
@keyframes tel-tryck { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.tgk__beslut { display: none; align-items: center; gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--linje-svag); font-size: 13px; font-weight: 600; }
.tgk__beslut i { width: 22px; height: 22px; border-radius: 50%; background: var(--mossa); display: grid; place-items: center; }
.tgk__beslut svg { width: 12px; height: 12px; fill: none; stroke: var(--natt); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tgk__beslut small { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--text-3); }
.tgk.is-beslutad .tgk__knappar { display: none; }
.tgk.is-beslutad .tgk__beslut { display: flex; }
.tgk__klar { position: absolute; inset: 0; background: var(--mossa); display: grid; place-content: center; justify-items: center; gap: 8px; opacity: 0; pointer-events: none; font-family: var(--bred); font-stretch: 118%; font-weight: 600; font-size: 15px; transition: opacity .22s var(--ut); }
.tgk__klar svg { width: 46px; height: 46px; }
.tgk__klar circle { fill: var(--natt); transform-origin: center; transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1) .05s; }
.tgk__klar path { fill: none; stroke: var(--mossa); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .3s var(--ut) .3s; }
.tgk.is-klar .tgk__klar { opacity: 1; }
.tgk.is-klar .tgk__klar circle { transform: scale(1); }
.tgk.is-klar .tgk__klar path { stroke-dashoffset: 0; }
.tel__fot { flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 10px 8px; }
.tel__ruta { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 20px; background: #fff; border: 1px solid var(--linje); display: flex; align-items: center; color: var(--text-3); white-space: nowrap; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.tel__ruta.har-text { color: var(--natt); border-color: var(--fjord); box-shadow: 0 0 0 3px rgba(51, 85, 224, .16); justify-content: flex-end; }
.tel__ruta.har-text span { flex: none; min-width: 100%; }
.tel__ruta.har-text span::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -.18em; background: var(--fjord); animation: nova-markor 1s steps(1) infinite; }
@keyframes nova-markor { 50% { opacity: 0; } }
.tel__skicka { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(15, 27, 45, .1); color: var(--text-3); display: grid; place-items: center; transition: background-color .2s, color .2s, transform .2s var(--ut); }
.tel__skicka svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tel__skicka.is-pa { background: var(--hjortron); color: var(--natt); }
.tel__skicka.is-tryck { transform: scale(.88); }
.tel__flikar { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px 6px 12px; background: rgba(255, 255, 255, .92); border-top: 1px solid var(--linje-svag); }
.tel__flikar > span { display: grid; justify-items: center; gap: 2px; font-size: 10.5px; font-weight: 500; color: var(--text-2); }
.tel__flikar > span.pa { color: var(--natt); font-weight: 650; }
.tel__flikar i { position: relative; width: 48px; height: 27px; border-radius: 14px; display: grid; place-items: center; }
.tel__flikar .pa i { background: var(--hjortron); }
.tel__flikar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tel__flikar span:last-child svg { fill: currentColor; stroke: none; }
.tel__flikar em { position: absolute; top: -3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--fjord); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); }
.tel__flikar em.is-ny { transform: scale(1.3); }

/* Demon: stegen visas ett i taget */
.tel--demo [data-s] { display: none; }
.tel--demo [data-s].is-pa { display: flex; animation: tel-in .36s cubic-bezier(.34, 1.4, .64, 1) both; transform-origin: 0 100%; }
.tel--demo .tmsg--du.is-pa { transform-origin: 100% 100%; }
.tel--demo .tel__flode { transition: opacity .4s; }
.tel--demo.is-ut .tel__flode { opacity: 0; }
@keyframes tel-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }

/* Quipr med en rad text bredvid */
.novarad { display: flex; align-items: center; gap: 18px; max-width: 860px; margin: 40px auto 0; padding: 18px 24px 18px 18px; border-radius: var(--r-lg); background: var(--is); }
.novarad .nova { width: 56px; height: 56px; }
.novarad p { font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.novarad b { color: var(--natt); font-weight: 650; }
.novarad--mork { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); }
.novarad--mork .nova { box-shadow: 0 0 0 2px rgba(255, 255, 255, .16); }
.novarad--mork p { color: rgba(255, 255, 255, .76); }
.novarad--mork b { color: #fff; }

@media (max-width: 1020px) {
  .mot { grid-template-columns: 1fr; gap: 40px; }
  .mot__scen { min-height: 0; }
}
@media (max-width: 720px) {
  .mot__vem .nova { width: 56px; height: 56px; }
  .mot__vem b { font-size: 22px; }
  .mot__scen { padding: 30px 12px 58px; margin-inline: -6px; }
  .mot__not { bottom: 14px; font-size: 12px; }
  .novarad { align-items: flex-start; padding: 16px; gap: 14px; }
  .novarad .nova { width: 44px; height: 44px; }
  .novarad p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .nova *, .tmsg--skriver .tbub i, .tel__ruta span::after { animation: none !important; }
}

/* ---------- Autopilot: en vanlig dag, Godkänn + sköt själv, färre frågor, appen ---------- */
.dagen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dkort { position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: var(--r-lg); background: var(--is); }
.dkort__tid { display: flex; align-items: baseline; gap: 12px; }
.dkort__tid time { font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: clamp(44px, 4.4vw, 64px); line-height: .9; letter-spacing: -.01em; }
.dkort__tid span { font-size: 13px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dkort .h3 { margin-top: 20px; font-weight: 550; }
.dkort > p:not(.dkort__tid) { margin-top: 8px; color: var(--text-2); text-wrap: pretty; }
.dkort__bild { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }
.dkort__bild .m { box-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 14px 30px -18px rgba(15, 27, 45, .25); }
.notis { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--linje-svag); box-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 14px 30px -18px rgba(15, 27, 45, .25); text-align: left; }
.notis__rad { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.notis__rad .nova { width: 26px; height: 26px; }
.notis__rad b { font-weight: 650; }
.notis__rad small { margin-left: auto; color: var(--text-3); font-size: 11px; }
.notis p { font-size: 14.5px; font-weight: 550; line-height: 1.35; }
.m__summa { display: flex; gap: 26px; padding: 14px; border-bottom: 1px solid var(--linje-svag); }
.m__summa span { display: grid; gap: 4px; font-size: 11px; color: var(--text-2); }
.m__summa b { font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: 26px; line-height: 1; color: var(--natt); }

.auto { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.auto__text .tagg { margin-bottom: 24px; }
.auto__text .ingress { margin-top: 20px; max-width: 580px; }
.auto__steg { margin-top: 32px; display: grid; gap: 20px; max-width: 560px; counter-reset: as; }
.auto__steg li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; counter-increment: as; }
.auto__steg li::before { content: counter(as); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); font-weight: 650; font-size: 15px; }
.auto__steg li:nth-child(2)::before { background: var(--hjortron); border-color: var(--hjortron); color: var(--natt); }
.auto__steg b { display: block; font-size: 17px; font-weight: 650; line-height: 1.3; }
.auto__steg p { margin-top: 3px; color: rgba(255, 255, 255, .72); font-size: 15.5px; line-height: 1.5; }
.auto__scen { display: grid; justify-items: center; padding: 44px 28px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.gk { position: relative; width: 100%; max-width: 450px; padding: 18px; border-radius: 20px; background: #fff; color: var(--natt); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); text-align: left; }
.gk .exempel { top: 16px; right: 16px; }
.gk__topp { display: flex; align-items: center; gap: 10px; }
.gk__topp .nova { width: 34px; height: 34px; }
.gk__topp .ikon { width: 34px; height: 34px; border-radius: 10px; }
.gk__topp b { display: block; font-weight: 650; font-size: 15px; line-height: 1.2; }
.gk__topp small { display: block; font-size: 12.5px; color: var(--text-3); }
.gk__titel { margin-top: 14px; font-size: 16px; font-weight: 550; line-height: 1.4; text-wrap: pretty; }
.gk__text { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--is); font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.gk__knappar { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.gk__knappar span { min-height: 42px; padding: 6px 10px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14.5px; font-weight: 550; line-height: 1.2; text-align: center; border: 1px solid var(--linje); }
.gk__knappar svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gk__knappar .gk__ja { background: var(--hjortron); border-color: var(--hjortron); }
.gk__knappar .gk__auto { grid-column: 1 / -1; background: var(--natt); border-color: var(--natt); color: #fff; box-shadow: 0 0 0 4px rgba(244, 167, 44, .5); }
.gk__knappar--tva { grid-template-columns: 1fr 1fr; }
.gk__pil { display: grid; place-items: center; height: 50px; color: var(--hjortron); }
.gk__pil svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gk__regel { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--mossa); font-size: 15.5px; font-weight: 550; line-height: 1.45; text-wrap: pretty; }
.auto__mellan { margin-top: var(--luft); }
.auto__mellan + * { margin-top: 44px; }

.trappa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.trappa li { display: flex; flex-direction: column; padding: 26px; border-radius: var(--r-lg); background: var(--is); }
.mork .trappa li { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.mork .trappa .versal { color: var(--hjortron); }
.trappa__prickar { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.trappa__prickar i { width: 18px; height: 18px; border-radius: 50%; background: var(--hjortron); }
.trappa__prickar i.s { background: var(--mossa); }
.trappa .h4 { margin-top: 18px; }
.trappa p { margin-top: 6px; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.mork .trappa p { color: rgba(255, 255, 255, .72); }
.trappa__forklaring { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 18px; font-size: 13.5px; color: var(--text-2); }
.mork .trappa__forklaring { color: rgba(255, 255, 255, .72); }
.trappa__forklaring span { display: inline-flex; align-items: center; gap: 8px; }
.trappa__forklaring span::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--hjortron); }
.trappa__forklaring span.s::before { background: var(--mossa); }

.alltid { display: grid; grid-template-columns: auto 1fr; gap: 18px 30px; align-items: center; margin-top: 40px; padding: 28px; border-radius: var(--r-lg); background: var(--is); }
.mork .alltid { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.is .alltid { background: #fff; }
.alltid__topp { display: flex; align-items: center; gap: 14px; }
.alltid__topp .h3 { font-weight: 550; white-space: nowrap; }
.alltid__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.alltid__lista li { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--linje); font-size: 15px; font-weight: 500; }
.is .alltid__lista li { background: var(--is); }
.mork .alltid__lista li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.alltid__lista small { color: var(--text-3); font-size: 13px; }
.mork .alltid__lista small { color: rgba(255, 255, 255, .62); }
.alltid > p { grid-column: 1 / -1; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.alltid > p b { color: var(--natt); font-weight: 600; }
.mork .alltid > p { color: rgba(255, 255, 255, .72); }
.mork .alltid > p b { color: #fff; }

/* Appen: hemskärmen i mobilen */
.mot__liten { margin-top: 14px; font-size: 14px; color: var(--text-3); }
.tel__hem { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px 11px 6px; transition: opacity .4s; -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
.tidag { flex: none; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 10px; padding: 12px 14px; border-radius: 16px; background: var(--natt); color: #fff; }
.tidag small { grid-column: 1 / -1; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.tidag p { font-size: 13.5px; }
.tidag p b { font-family: var(--bred); font-stretch: 125%; font-weight: 800; font-size: 26px; line-height: 1; margin-right: 4px; color: var(--hjortron); }
.tidag span { font-size: 12px; color: var(--mossa); font-weight: 600; padding-bottom: 2px; }
.tel__rubrik { flex: none; margin: 14px 2px 7px; font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.tel__hem .tgk { flex: none; }
.tel__hem .tgk__knappar { grid-template-columns: 1.25fr 1fr 1fr; }
.tel__hem .tgk__knappar--tva { grid-template-columns: 1fr 1fr; }
.tel__hem .tgk__knappar span.is-tryck { transform: scale(.95); background: var(--hjortron-djup); }
.tgk__auto { display: flex; align-items: center; justify-content: center; height: 36px; margin-top: 6px; border-radius: 11px; background: var(--natt); color: #fff; font-size: 12.5px; font-weight: 600; transition: transform .18s var(--ut), box-shadow .18s; }
.tgk__auto.is-tryck { transform: scale(.96); box-shadow: 0 0 0 4px rgba(244, 167, 44, .55); }
.tgk__tagg--mossa { background: var(--mossa); color: var(--natt); }
.tregel { display: none; flex: none; padding: 13px; border-radius: 18px; background: #fff; border: 1px solid var(--linje-svag); box-shadow: 0 8px 24px -12px rgba(15, 27, 45, .14); }
.tregel__text { margin-top: 9px; padding: 9px 11px; border-radius: 10px; background: var(--mossa); font-size: 13px; font-weight: 550; line-height: 1.4; }
.tklar { display: none; flex: none; justify-items: center; gap: 5px; padding: 20px 14px; border-radius: 18px; background: var(--mossa); text-align: center; }
.tklar svg { width: 42px; height: 42px; }
.tklar circle { fill: var(--natt); }
.tklar path { fill: none; stroke: var(--mossa); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tklar b { font-family: var(--bred); font-stretch: 118%; font-weight: 650; font-size: 17px; }
.tklar small { font-size: 12px; color: var(--text-2); }
.tgjort { flex: none; display: grid; background: #fff; border-radius: 14px; border: 1px solid var(--linje-svag); }
.tgjort li { display: flex; align-items: center; gap: 8px; padding: 8px 11px; font-size: 12px; border-bottom: 1px solid var(--linje-svag); white-space: nowrap; }
.tgjort li:last-child { border: 0; }
.tgjort i { width: 18px; height: 18px; border-radius: 50%; background: var(--mossa); display: grid; place-items: center; flex: none; }
.tgjort i svg { width: 10px; height: 10px; fill: none; stroke: var(--natt); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tgjort span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tgjort time { margin-left: auto; font-size: 11px; color: var(--text-3); }
.tel[data-lage="regel"] .tgk, .tel[data-lage="klar"] .tgk, .tel[data-lage="klar"] .tel__rubrik--vanta { display: none; }
.tel[data-lage="regel"] .tregel { display: block; animation: tel-in .36s cubic-bezier(.34, 1.4, .64, 1) both; }
.tel[data-lage="klar"] .tklar { display: grid; animation: tel-in .36s cubic-bezier(.34, 1.4, .64, 1) both; }
.tel[data-lage="klar"] [data-tel-antal] { transform: scale(0); }
.tel--demo.is-ut .tel__hem { opacity: 0; }

@media (max-width: 1020px) {
  .dagen, .trappa { grid-template-columns: 1fr; }
  .dkort__bild { max-width: 460px; }
  .auto { grid-template-columns: 1fr; gap: 40px; }
  .alltid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dkort { padding: 22px 18px 18px; }
  .auto__scen { padding: 24px 12px; margin-inline: -6px; }
  .gk { padding: 14px; }
  .gk__knappar span { font-size: 13.5px; padding-inline: 6px; }
  .alltid { padding: 20px; }
  .alltid__topp .h3 { white-space: normal; }
}