/*
 * Toppen av nettstedet (template-parts/layout/topp.php).
 *
 * .tp            Toppen som står fast øverst, med luft rundt raden.
 * .tp-rad        Kortet med logoen, menyen, Logg inn og Kom i gang, i samme stil
 *                som sidemenyen i appen: runde hjørner, tynn kant og myk skygge.
 *                Kortet og sløret bak ligger i ::before, fordi backdrop-filter på
 *                selve raden ville gjort den til rammen for de faste elementene.
 * .tp-panel      Panelene som åpnes under menyen på store skjermer.
 * .tp-slor       Den mørke flaten over siden mens et panel er åpent.
 * .tp-mobil      Menyen på små skjermer og nettbrett, med nivåer som glir inn.
 *
 * topp.js setter .er-rullet når siden er rullet, .er-apen når et panel er
 * åpent og .er-bytte når man går rett fra ett panel til et annet.
 */

/* Høyden på hele toppen, med luften over kortet. Toppen ligger over den
   første seksjonen på siden, så den seksjonen får like mye luft øverst. */
/* Menyen står i toppen fra 1180 px, så de seks punktene får plass (29.10.2026, før 1100) */
:root { --tp-total: 70px; }

@media (min-width: 1180px) {
	:root { --tp-total: 82px; }
}

.tp {
	--tp-h: 60px;
	--tp-luft: 10px;
	--tp-blekk: #0a0f1f;
	--tp-tekst: #2b2b38;
	--tp-gra: #6e6e7c;
	--tp-linje: #ececf2;
	--tp-flate: #f5f4f9;
	--tp-lilla: #6d28d9;
	--tp-myk: cubic-bezier(.2, .7, .2, 1);
	position: sticky;
	top: 0;
	z-index: 60;
	margin-bottom: calc(-1 * var(--tp-total));
	padding: var(--tp-luft) var(--tp-luft) 0;
	color: var(--tp-blekk);
	font-family: var(--font-sans, 'Nunito', system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
}

.tp-rad::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 1px solid #eeecf4;
	border-radius: 18px;
	background: rgba(255, 255, 255, .86);
	box-shadow: 0 1px 2px rgba(20, 16, 40, .04), 0 8px 24px rgba(20, 16, 40, .04);
	-webkit-backdrop-filter: saturate(1.6) blur(16px);
	backdrop-filter: saturate(1.6) blur(16px);
	transition: box-shadow .2s, background-color .2s;
}

.tp.er-rullet .tp-rad::before { box-shadow: 0 1px 2px rgba(20, 16, 40, .05), 0 14px 34px -10px rgba(20, 16, 40, .16); }
.tp.er-apen .tp-rad::before,
.tp.er-mobil .tp-rad::before { background: #fff; }

.tp *,
.tp *::before,
.tp *::after { box-sizing: border-box; }
.tp [hidden] { display: none !important; }
/* Nullstillingen har lav spesifisitet (:where), så klassene under vinner */
:where(.tp) ul { list-style: none; margin: 0; padding: 0; }
:where(.tp) p { margin: 0; }
:where(.tp) a { color: inherit; text-decoration: none; }

.tp a:focus-visible,
.tp button:focus-visible,
.tp summary:focus-visible {
	outline: 2px solid #7c3aed;
	outline-offset: 2px;
}

/* Raden */
.tp-rad {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1280px;
	height: var(--tp-h);
	margin-inline: auto;
	padding-inline: 14px 10px;
}

/* Logoen er bildet med masken og navnet */
.tp-logo { display: inline-flex; flex: none; align-items: center; gap: 5px; text-decoration: none; }
.tp-logo-ikon { display: block; width: auto; height: 23px; }
.tp-logo-navn { color: var(--tp-blekk); font-family: var(--font-sans); font-size: 22px; font-weight: 600; line-height: 1; }
/* Varemerket står høyt og lite bak navnet, uten å gjøre linjen høyere */
.tp-logo-tm { margin-left: .08em; font-size: .42em; font-weight: 600; line-height: 0; vertical-align: super; }
/* Den hvite logoen vises bare i mørk modus (assets/topp/mork.css) */
.tp-logo .tp-logo-hvit,
.bn-logo .bn-logo-hvit { display: none; }

.tp-nav { display: none; flex: 1; justify-content: center; }
.tp-liste { display: flex; align-items: center; gap: 2px; }

/* Lenkene i toppen ser ut som menyen til venstre i appen (meny/stil.ts i
   wonderwave): farge #4A4663, 13,5 px, vekt 600, og mørkere tekst på en
   lys flate når man holder over. */
.tp-knapp {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: #4a4663;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

.tp-knapp:hover,
.tp-knapp[aria-expanded="true"] { background: #f7f6fb; color: #1b1733; }

.tp-pil { width: 16px; height: 16px; flex: none; opacity: .55; transition: transform .25s var(--tp-myk); }
.tp-knapp[aria-expanded="true"] .tp-pil { transform: rotate(180deg); }

.tp-hoyre { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.tp-logginn {
	display: none;
	white-space: nowrap;
	align-items: center;
	height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	color: #4a4663;
	font-size: 13.5px;
	font-weight: 600;
	transition: background-color .15s, color .15s;
}

.tp-logginn:hover { background: #f7f6fb; color: #1b1733; }

.tp-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 38px;
	padding: 0 15px;
	border-radius: 999px;
	background: var(--tp-blekk);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: transform .25s var(--tp-myk), box-shadow .25s var(--tp-myk);
}

.tp-cta svg { width: 15px; height: 15px; transition: transform .25s var(--tp-myk); }
.tp-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(10, 15, 31, .5); }
.tp-cta:hover svg { transform: translateX(2px); }

.tp-burger {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--tp-flate);
	cursor: pointer;
}

.tp-burger span {
	display: block;
	width: 17px;
	height: 2px;
	border-radius: 2px;
	background: var(--tp-blekk);
	transition: transform .3s var(--tp-myk);
}

.tp-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.tp-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (min-width: 1180px) {
	.tp { --tp-h: 68px; --tp-luft: 14px; }
	.tp-rad { gap: 24px; padding-inline: 22px 14px; }
	.tp-logo-navn { font-size: 23px; }
	.tp-nav { display: flex; }
	.tp-logginn { display: inline-flex; }
	.tp-cta { height: 42px; padding: 0 19px; font-size: 15px; }
	.tp-burger,
	.tp-mobil { display: none !important; }
}

@media (max-width: 1179.98px) {
	.tp-panel,
	.tp-slor { display: none !important; }
}

/* Panelene */
.tp-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 8px 32px 0;
}

.tp-panel-inn {
	display: grid;
	gap: 28px;
	max-width: 1120px;
	margin-inline: auto;
	padding: 26px;
	border: 1px solid var(--tp-linje);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 40px 80px -32px rgba(23, 14, 61, .28), 0 10px 24px -14px rgba(23, 14, 61, .14);
	animation: tp-inn .28s var(--tp-myk);
	transform-origin: top center;
}

.tp.er-bytte .tp-panel-inn { animation: none; }

/* De små panelene til Agentene, Tjenester og Plattformen. Panelet er så
   bredt som innholdet og står under knappen sin (topp.js setter margin-left) */
.tp-panel-inn--liten { display: block; width: min-content; max-width: calc(100vw - 64px); margin-inline: auto; padding: 18px; }

/* Agentene: heltene i et rutenett, de som kommer snart, litt dempet */
.tp-heltenett { display: grid; grid-template-columns: repeat(4, 136px); gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Alfred først i Agentene: hele teamet i en figur, like høy som de to radene */
.tp-agentrad { display: grid; grid-template-columns: 168px auto; gap: 8px; }
.tp-alfred {
	display: grid;
	align-content: end;
	justify-items: center;
	gap: 2px;
	padding: 14px 12px 16px;
	border-radius: 16px;
	background: #f1ecff;
	text-align: center;
	transition: background-color .15s;
}
.tp-alfred:hover { background: #e8e0ff; }
.tp-alfred img { width: 92px; height: auto; margin-bottom: 8px; transition: transform .3s var(--tp-myk); }
.tp-alfred:hover img { transform: translateY(-4px); }
.tp-alfred b { color: var(--tp-blekk); font-size: 17px; font-weight: 800; }
.tp-alfred span { color: var(--tp-gra); font-size: 12.5px; line-height: 1.3; }
.tp-alfred em { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--tp-lilla); font-size: 13px; font-style: normal; font-weight: 700; }
.tp-alfred em svg { width: 13px; height: 13px; }

.tp-heltenett a {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 14px 8px 12px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--flate) 55%, #fff);
	text-align: center;
	transition: background-color .15s;
}

.tp-heltenett a:hover { background: var(--flate); }
.tp-heltenett .tp-avatar { width: 58px; height: 58px; margin-bottom: 6px; padding: 0; background: none; }
.tp-heltenett a:hover .tp-avatar { transform: translateY(-3px) rotate(-4deg); }
.tp-heltenett b { color: var(--tp-blekk); font-size: 15px; font-weight: 700; }
.tp-heltenett span { color: var(--tp-gra); font-size: 12.5px; line-height: 1.3; }
.tp-heltenett .er-snart a { background: #f6f6f9; }
.tp-heltenett .er-snart .tp-avatar { filter: saturate(.55); opacity: .8; }

.tp-heltenett em {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 2px 7px;
	border-radius: 999px;
	background: #fff;
	color: #6b6b80;
	font-size: 10.5px;
	font-style: normal;
	font-weight: 700;
}

/* Tjenester og appen i to kolonner */
.tp-punkter--to { display: grid; grid-template-columns: repeat(2, 288px); gap: 2px 6px; margin: 0; padding: 0; list-style: none; }

/* Linjen nederst i de små panelene, med en kort setning og lenken videre */
.tp-panel-bunn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	padding: 14px 6px 0 12px;
	border-top: 1px solid var(--tp-linje);
	color: var(--tp-gra);
	font-size: 13.5px;
}

.tp-panel-bunn .tp-alle { margin: 0 0 0 auto; white-space: nowrap; }
.tp-panel-inn--ressurser { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; }

.tp-ny {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #f3efff;
	color: #6d28d9;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .02em;
	vertical-align: 2px;
}

@keyframes tp-inn {
	from { opacity: 0; transform: translateY(-8px) scale(.985); }
	to { opacity: 1; transform: none; }
}

.tp-kol { min-width: 0; }

.tp-ledd {
	margin: 0 0 10px 12px;
	color: #8a8a9b;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Heltene */
.tp-helter a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 10px 6px 6px;
	border-radius: 14px;
	transition: background-color .15s;
}

.tp-helter a:hover { background: var(--flate, var(--tp-flate)); }

.tp-avatar {
	display: block;
	flex: none;
	width: 42px;
	height: 42px;
	padding: 4px;
	border-radius: 12px;
	background: var(--flate, var(--tp-flate));
	object-fit: contain;
	transition: transform .3s var(--tp-myk);
}

.tp-helter a:hover .tp-avatar { transform: scale(1.08) rotate(-4deg); background: #fff; }

.tp-helter span { min-width: 0; color: var(--tp-gra); font-size: 13px; line-height: 1.35; }
.tp-helter b { display: block; color: var(--tp-blekk); font-size: 15px; font-weight: 700; }

.tp-helter em {
	flex: none;
	margin-left: auto;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--tp-flate);
	color: var(--tp-gra);
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
}

.tp-helter a:hover em { background: rgba(255, 255, 255, .8); }

/* Kommer snart ved navnet, så rollen under får hele bredden */
.tp-helter b em { margin-left: 6px; padding: 2px 7px; font-size: 10.5px; vertical-align: 1px; }

/* Lenker med ikon og forklaring */
.tp-punkter a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 14px;
	transition: background-color .15s;
}

.tp-punkter a:hover { background: var(--tp-flate); }
.tp-punkter span:last-child { min-width: 0; color: var(--tp-gra); font-size: 13px; line-height: 1.4; }
.tp-punkter b { display: block; margin-bottom: 1px; color: var(--tp-blekk); font-size: 15px; font-weight: 650; }

.tp-ikon {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #f3effe;
	color: #7c3aed;
	font-size: 18px;
	transition: background-color .15s, color .15s;
}

.tp-punkter a:hover .tp-ikon { background: #7c3aed; color: #fff; }

.tp-ikon--liten { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }

.tp-kilder {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	margin: 14px 12px 0;
	padding-top: 14px;
	border-top: 1px solid var(--tp-linje);
}

.tp-kilder span { margin-right: 6px; color: #8a8a9b; font-size: 12px; font-weight: 600; white-space: nowrap; }

.tp-kilder ul { display: flex; gap: 6px; }

.tp-kilder li {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--merke) 10%, #fff);
	color: var(--merke);
	font-size: 16px;
	transition: transform .25s var(--tp-myk), background-color .2s;
}

.tp-kilder svg { fill: currentColor; }
.tp-kilder li:hover { background: color-mix(in srgb, var(--merke) 18%, #fff); transform: translateY(-2px); }

/* Enkle lenker */
.tp-enkle a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 12px;
	color: var(--tp-tekst);
	font-size: 15px;
	font-weight: 600;
	transition: background-color .15s, color .15s;
}

.tp-enkle a:hover { background: var(--tp-flate); color: var(--tp-blekk); }
.tp-enkle--to { display: grid; grid-template-columns: 1fr 1fr; }

.tp-alle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0 12px;
	color: var(--tp-lilla);
	font-size: 14px;
	font-weight: 700;
}

.tp-alle svg { width: 14px; height: 14px; transition: transform .25s var(--tp-myk); }
.tp-alle:hover svg { transform: translateX(3px); }

/* Integrasjonene: gruppene med logo og navn i tre spalter, som hos
   viktor.com. Gruppene flyter som murverk, så spaltene blir omtrent like høye */
.tp-intgrupper { width: 800px; max-width: 100%; columns: 3 230px; column-gap: 26px; }
.tp-int-gruppe { break-inside: avoid; margin-bottom: 18px; }
.tp-int { margin: 0; padding: 0; list-style: none; }
.tp-int-gruppe .tp-ledd {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--tp-linje);
}

.tp-int-gruppeikon {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: #f3effe;
	color: #7c3aed;
	font-size: 12px;
}

.tp-int a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 6px 8px;
	border-radius: 12px;
	color: var(--tp-tekst);
	font-size: 15px;
	font-weight: 600;
	transition: background-color .15s, color .15s;
}

.tp-int a:hover { background: var(--tp-flate); color: var(--tp-blekk); }
.tp-int a:hover .int-logo { transform: scale(1.08); }

/* Logoen i en rute med merkets farge (inc/integrasjoner.php). Brukes også i katalogen. */
.int-logo {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--merke) 11%, #fff);
	color: var(--merke);
	font-size: 15px;
	line-height: 1;
	transition: transform .25s var(--tp-myk, ease);
}

.int-logo svg { width: calc(1em * var(--skala, 1)); height: calc(1em * var(--skala, 1)); fill: currentColor; }
.int-logo img { width: calc(1.15em * var(--skala, 1)); height: calc(1.15em * var(--skala, 1)); object-fit: contain; }
.int-logo b { font-size: .95em; font-weight: 800; }

/* Integrasjoner som kommer snart: samme rad, men nedtonet og uten lenke */
.tp-int-kommer {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	color: var(--tp-gra);
	font-size: 15px;
	font-weight: 600;
	cursor: default;
}

.tp-int-kommer .int-logo { opacity: .7; }

.tp-int-kommer em {
	flex: none;
	margin-left: auto;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--tp-flate);
	color: var(--tp-gra);
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
}


/* Kortet til høyre i panelet */
.tp-kort {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 18px 18px;
	border-radius: 18px;
	background: linear-gradient(165deg, #f4efff 0%, #fdf0f7 100%);
	color: var(--tp-blekk);
	overflow: hidden;
}

.tp-kort img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 6px;
	transition: transform .5s var(--tp-myk);
}

.tp-kort:hover img { transform: translateY(-3px) scale(1.03); }
.tp-kort b { font-size: 17px; font-weight: 700;}
.tp-kort span { color: #55556a; font-size: 14px; line-height: 1.45; }

.tp-kort .tp-kort-lenke {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
	color: var(--tp-lilla);
	font-weight: 700;
}

.tp-kort-lenke svg { width: 14px; height: 14px; transition: transform .25s var(--tp-myk); }
.tp-kort:hover .tp-kort-lenke svg { transform: translateX(3px); }

.tp-kort--lys { padding-top: 18px; background: linear-gradient(165deg, #eefaf4 0%, #f2f6ff 100%); }

.tp-kort .tp-pakker { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }

.tp-pakker i {
	padding: 6px 12px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 14px -8px rgba(23, 14, 61, .25);
	color: var(--tp-blekk);
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	transition: transform .35s var(--tp-myk);
}

.tp-pakker i:nth-child(2) { margin-left: 18px; }
.tp-pakker i:nth-child(3) { margin-left: 36px; background: var(--tp-blekk); color: #fff; }
.tp-kort:hover .tp-pakker i { transform: translateX(4px); }
.tp-kort:hover .tp-pakker i:nth-child(2) { transition-delay: .04s; }
.tp-kort:hover .tp-pakker i:nth-child(3) { transition-delay: .08s; }

/* Sløret over siden */
.tp-slor {
	position: fixed;
	inset: 0;
	z-index: -2;
	background: rgba(12, 10, 32, .16);
	animation: tp-slor .25s ease-out;
}

@keyframes tp-slor { from { opacity: 0; } }

/* Menyen på små skjermer og nettbrett (30.10.2026)
   Et kort under toppen, med samme luft og hjørner. Inni ligger nivåene oppå
   hverandre i samme rute (.tp-mspor): hovedmenyen, og et nivå per undermeny
   som glir inn fra høyre når det er valgt (.er-valgt). Hovedmenyen glir litt
   til venstre og tones ned bak, som i en app. topp.js setter data-niva på
   kortet, og under sveipen følger nivået fingeren (--dra). */
.tp-mobil {
	position: fixed;
	inset: calc(var(--tp-luft) * 2 + var(--tp-h)) var(--tp-luft) var(--tp-luft);
	display: flex;
	flex-direction: column;
	border: 1px solid #eeecf4;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 16, 40, .05), 0 20px 50px -16px rgba(20, 16, 40, .22);
	overflow: hidden;
	animation: tp-mobil .32s var(--tp-myk);
}

@keyframes tp-mobil { from { opacity: 0; transform: translateY(-8px) scale(.985); } }

/* Siden bak dempes mens menyen er åpen, og et trykk der lukker den (topp.js) */
.tp.er-mobil::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba(12, 10, 32, .32);
	animation: tp-slor .25s ease-out;
}

/* På nettbrett står menyen som et ark til høyre, ikke over hele bredden */
@media (min-width: 640px) {
	.tp-mobil { left: auto; width: 420px; }
}

.tp-mspor { position: relative; display: grid; flex: 1; min-height: 0; }

.tp-mside {
	grid-area: 1 / 1;
	min-height: 0;
	padding: 8px 14px 20px;
	background: #fff;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transition: transform .42s var(--tp-myk), opacity .32s ease, visibility 0s;
}

.tp-mside--under { transform: translateX(calc(100% + var(--dra, 0px))); visibility: hidden; transition-delay: 0s, 0s, .42s; }
.tp-mside--under.er-valgt { transform: translateX(var(--dra, 0px)); visibility: visible; transition-delay: 0s; }
.tp-mobil:not([data-niva="hoved"]) .tp-mside--hoved { transform: translateX(calc(-24% + var(--dra, 0px) * .24)); opacity: .35; }
/* Mens fingeren drar, følger nivåene uten forsinkelse */
.tp-mobil.er-dra .tp-mside { transition: none; }

/* Hovedmenyen: store rader med ikon, navn og en linje om hva som er der */
.tp-mvalgene { padding: 4px 0 8px; }

.tp-mvalg {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 64px;
	padding: 10px 8px;
	border: 0;
	border-radius: 14px;
	background: none;
	color: var(--tp-gra);
	font: inherit;
	font-size: 13.5px;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s;
}

.tp-mvalg:active { background: var(--tp-flate); }
.tp-mvalg > span:not(.tp-ikon) { flex: 1; min-width: 0; }
.tp-mvalg b { display: block; color: var(--tp-blekk); font-size: 17px; font-weight: 700; }
.tp-mvalg .tp-ikon { width: 42px; height: 42px; border-radius: 12px; font-size: 20px; }
.tp-mvidere { flex: none; width: 20px; height: 20px; color: #b4b2c2; }

/* Heltene på en rad man sveiper i, som historiene i en app */
.tp-mhelter { margin: 8px -14px 0; padding-top: 16px; border-top: 1px solid var(--tp-linje); }
.tp-mhelter .tp-ledd { margin: 0 0 10px 22px; }

.tp-mhelter ul {
	display: flex;
	gap: 10px;
	padding: 2px 22px 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 22px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.tp-mhelter ul::-webkit-scrollbar { display: none; }
.tp-mhelter li { flex: none; scroll-snap-align: start; }

.tp-mhelter a {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 82px;
	color: var(--tp-gra);
	font-size: 11.5px;
	line-height: 1.25;
	text-align: center;
	-webkit-tap-highlight-color: transparent;
}

.tp-mhelter .tp-avatar { width: 64px; height: 64px; margin-bottom: 6px; padding: 7px; border-radius: 20px; transition: transform .2s var(--tp-myk); }
.tp-mhelter a:active .tp-avatar { transform: scale(.94); }
.tp-mhelter b { color: var(--tp-blekk); font-size: 13.5px; font-weight: 700; }
.tp-mhelter .er-snart .tp-avatar { opacity: .55; filter: grayscale(.4); }

.tp-mring {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0 0;
	padding: 14px 12px;
	border-radius: 14px;
	background: var(--tp-flate);
	color: var(--tp-gra);
	font-size: 14px;
	line-height: 1.4;
}

.tp-mring b { color: var(--tp-blekk); font-weight: 700; white-space: nowrap; }

/* Toppen på hvert nivå: tilbake, navnet og en linje */
.tp-mhode { position: sticky; top: -8px; z-index: 1; margin: -8px -14px 6px; padding: 8px 14px 12px; background: #fff; }

.tp-mtilbake {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	margin-left: -6px;
	padding: 0 12px 0 6px;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--tp-lilla);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.tp-mtilbake:active { background: var(--tp-flate); }
.tp-mtilbake svg { width: 20px; height: 20px; }
.tp-mtittel { margin: 2px 8px 0; color: var(--tp-blekk); font-size: 26px; font-weight: 800; line-height: 1.15; }
.tp-mtekst { margin: 4px 8px 0; color: var(--tp-gra); font-size: 14px; }

/* Lenkene på nivåene får like store trykkflater */
.tp-mside--under .tp-punkter a,
.tp-mside--under .tp-helter a { min-height: 56px; -webkit-tap-highlight-color: transparent; }
.tp-mside--under .tp-punkter a:active,
.tp-mside--under .tp-helter a:active,
.tp-mside--under .tp-enkle a:active,
.tp-mside--under .tp-int a:active { background: var(--tp-flate); }
.tp-mside--under .tp-helter li + li { margin-top: 2px; }
.tp-mside--under .tp-enkle a,
.tp-mside--under .tp-int a { min-height: 48px; }
.tp-mside--under .tp-ledd { margin: 18px 0 6px 12px; }
.tp-mside--under .tp-int-gruppe { margin-bottom: 6px; }
.tp-mside--under .tp-int-gruppe .tp-ledd { margin: 14px 4px 6px; }
.tp-malle { margin: 14px 0 0 12px; font-size: 15px; }

.tp-mobil-bunn {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 10px;
	padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--tp-linje);
	background: #fff;
}

.tp-mobil-bunn .tp-logginn,
.tp-mobil-bunn .tp-cta { display: inline-flex; justify-content: center; height: 50px; font-size: 16px; }
.tp-mobil-bunn .tp-logginn { border: 1px solid #e0dfe8; }

html.tp-laast,
html.tp-laast body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.tp-mobil,
	.tp-mside { animation: none; transition: none; }
}

/* Den første seksjonen går opp bak toppen, så bakgrunnen og bildet i
   toppen av siden ligger under kortet. Innholdet flyttes ned like mye.
   Artiklene har en fast lesestripe først, så der er det seksjonen etter.
   De nye toppene (.pf) får luft over brødsmulestien, så den ikke ligger tett
   under kortet. */
.tp + main > :first-child:not(.reading-progress),
.tp + main > .reading-progress + * { padding-top: var(--tp-total); }
.tp + main > .pf:first-child { padding-top: calc(var(--tp-total) + clamp(24px, 3.5vw, 48px)); }
.tp + main > .pf-hero:first-child { padding-top: calc(var(--tp-total) + clamp(32px, 4.5vw, 72px)); }
.tp + main > .ns-hero:first-child { padding-top: calc(var(--tp-total) + clamp(28px, 4vw, 64px)); }
.tp + main > .pr-hero:first-child { padding-top: calc(var(--tp-total) + clamp(28px, 4vw, 56px)); }

/* Klebrige tabellhoder står under toppen, som nå har luft over seg */
.vs-hode[data-astro-cid-swnpylyf] { top: 76px; }
@media (min-width: 1180px) { .vs-hode[data-astro-cid-swnpylyf] { top: 90px; } }

@media (max-width: 359.98px) {
	.tp-rad .tp-cta svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tp *,
	.tp *::before,
	.tp *::after { animation: none !important; transition: none !important; }
}

/*
 * Bunnen av siden (template-parts/layout/bunn.php), i samme stil som toppen:
 * lys, rolig og med god luft. Kolonnene legges sammen på mobil.
 */

.bn {
	--tp-blekk: #0a0f1f;
	--tp-tekst: #2b2b38;
	--tp-gra: #6e6e7c;
	--tp-linje: #ececf2;
	--tp-flate: #f5f4f9;
	--tp-lilla: #6d28d9;
	--tp-myk: cubic-bezier(.2, .7, .2, 1);
	border-top: 1px solid var(--tp-linje);
	background: #fff;
	color: var(--tp-tekst);
	font-family: var(--font-sans, 'Nunito', system-ui, sans-serif);
}

.bn *,
.bn *::before,
.bn *::after { box-sizing: border-box; }
:where(.bn) ul { list-style: none; margin: 0; padding: 0; }
:where(.bn) p { margin: 0; }
:where(.bn) a { color: inherit; text-decoration: none; }

.bn a:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; border-radius: 6px; }

.bn-inn { max-width: 1280px; margin-inline: auto; padding: 56px 20px 28px; }

/* Alfred øverst i bunnen, med hilsenen og lenken til heltene */
.bn-alfred { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--tp-linje); }
.bn-alfred-figur { flex: none; }
.bn-alfred-figur img { display: block; width: 64px; height: auto; transition: transform .3s var(--tp-myk); }
.bn-alfred-figur:hover img { transform: translateY(-4px) rotate(-3deg); }
.bn-alfred p { flex: 1 1 18rem; margin: 0; color: var(--tp-gra); font-size: 16px; line-height: 1.55; }
.bn-alfred b { color: var(--tp-blekk); font-weight: 800; }
/* Teksten på en linje der det er plass, og lenken helt til høyre (Nohman, 29.10.2026) */
.bn-alfred-lenke { display: inline-flex; margin-left: auto; align-items: center; gap: 6px; color: var(--tp-lilla); font-size: 15px; font-weight: 700; white-space: nowrap; }
.bn-alfred-lenke svg { width: 15px; height: 15px; transition: transform .25s var(--tp-myk); }
.bn-alfred-lenke:hover svg { transform: translateX(3px); }
@media (max-width: 599px) {
	.bn-alfred-lenke { margin-left: 0; }
}

/* Logoen og kolonnene */
.bn-rad {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
	padding: 8px 0 40px;
}

.bn-merke { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.bn-logo { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.bn-logo img { display: block; width: auto; height: 27px; }
.bn-logo-navn { color: var(--tp-blekk); font-family: var(--font-sans); font-size: 22px; font-weight: 600; line-height: 1; }
.bn-linje { max-width: 22rem; color: var(--tp-gra); font-size: 15px; line-height: 1.55; }

.bn-telefon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tp-blekk);
	font-size: 15px;
	font-weight: 600;
}

.bn-telefon svg { color: var(--tp-lilla); }
.bn-telefon:hover { color: var(--tp-lilla); }
.bn-kontakt { display: flex; flex-direction: column; gap: 8px; }
.bn-sosial { display: flex; gap: 8px; }
/* Antallet oppgaver heltene har utført, under ikonene */
.bn-oppgaver { display: flex; align-items: center; margin-top: 20px; color: var(--tp-gra); font-size: 14px; line-height: 1.5; }
.bn-oppgaver b { color: var(--tp-blekk); font-weight: 800; font-variant-numeric: tabular-nums; }

.bn-sosial a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--tp-flate);
	color: var(--tp-tekst);
	font-size: 15px;
	transition: background-color .15s, color .15s;
}

.bn-sosial a:hover { background: var(--tp-blekk); color: #fff; }

.bn-kolonner { display: grid; }
.bn-kol { border-bottom: 1px solid var(--tp-linje); }
.bn-kol:first-child { border-top: 1px solid var(--tp-linje); }

.bn-kol-tittel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	color: var(--tp-blekk);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.bn-kol-tittel::-webkit-details-marker { display: none; }
.bn-kol-tittel svg { width: 18px; height: 18px; color: var(--tp-gra); transition: transform .25s var(--tp-myk); }
.bn-kol[open] .bn-kol-tittel svg { transform: rotate(180deg); }
.bn-kol ul { display: grid; gap: 12px; padding-bottom: 20px; }
.bn-kol a { display: inline-flex; align-items: center; gap: 8px; color: var(--tp-gra); font-size: 15px; transition: color .15s; }
.bn-kol a:hover { color: var(--tp-blekk); }

.bn-ny {
	padding: 2px 7px;
	border-radius: 999px;
	background: #f1ebff;
	color: #6d28d9;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
}

/* Nederst */
.bn-bunn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: 22px;
	border-top: 1px solid var(--tp-linje);
	color: #8a8a9b;
	font-size: 12.5px;
}

/* Copyright til venstre og språkene, lenkene og mørk modus til høyre, på
   samme linje på store skjermer. Avstandene er tette nok til at det får plass */
.bn-bunn ul { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bn-bunn a:hover { color: var(--tp-blekk); }
.bn-bunn-hoyre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* Bryteren for mørk modus (inc/mork.php) */
.bn-tema {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.bn-tema:hover { color: var(--tp-blekk); }
.bn-tema:focus-visible { outline: 2px solid #7c3aed; outline-offset: 4px; border-radius: 999px; }

.bn-tema-spor {
	position: relative;
	flex: none;
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: #e4e2ee;
	transition: background-color .25s;
}

.bn-tema-knott {
	position: absolute;
	top: 3px;
	left: 3px;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(10, 15, 31, .25);
	color: #f59e0b;
	font-size: 12px;
	transition: transform .3s var(--tp-myk), color .25s;
}

.bn-tema-knott svg { grid-area: 1 / 1; transition: opacity .25s, transform .35s var(--tp-myk); }
.bn-tema-mane { opacity: 0; transform: rotate(-70deg) scale(.6); }
.bn-tema[aria-checked='true'] .bn-tema-spor { background: #7c3aed; }
.bn-tema[aria-checked='true'] .bn-tema-knott { transform: translateX(20px); color: #7c3aed; }
.bn-tema[aria-checked='true'] .bn-tema-sol { opacity: 0; transform: rotate(70deg) scale(.6); }
.bn-tema[aria-checked='true'] .bn-tema-mane { opacity: 1; transform: none; }

/* Den grønne prikken ved linjen om heltene, som pulserer */
.bn-ord-prikk { position: relative; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: #22c55e; vertical-align: 1px; }
.bn-ord-prikk::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.bn-ord-prikk::after { animation: bn-puls 2.4s ease-out infinite; }
}

@keyframes bn-puls {
	0% { opacity: .5; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(2.6); }
}

/* Bunnen på mobil (30.10.2026): Alfred liten til venstre for hilsenen,
   telefon og e-post som knapper ved siden av hverandre, og lenkene i
   kolonnene med trykkflater på minst 44 px */
@media (max-width: 719px) {
	.bn-inn { padding-top: 40px; }
	.bn-alfred { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "figur tekst" "figur lenke"; align-items: start; gap: 6px 14px; margin-bottom: 28px; padding-bottom: 24px; }
	.bn-alfred-figur { grid-area: figur; }
	.bn-alfred-figur img { width: 56px; }
	.bn-alfred p { grid-area: tekst; font-size: 15px; line-height: 1.5; }
	.bn-alfred-lenke { grid-area: lenke; min-height: 32px; }
	.bn-rad { gap: 28px; padding-bottom: 28px; }
	.bn-kontakt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; width: 100%; }
	.bn-telefon { justify-content: center; min-height: 46px; padding: 0 14px; border: 1px solid var(--tp-linje); border-radius: 12px; font-size: 14.5px; }
	.bn-sosial a { width: 44px; height: 44px; border-radius: 12px; font-size: 17px; }
	.bn-kol-tittel { min-height: 54px; padding: 0; font-size: 13.5px; }
	.bn-kol ul { gap: 0; padding-bottom: 12px; }
	.bn-kol a { min-height: 44px; font-size: 15.5px; }
	.bn-bunn { gap: 14px; }
	.bn-bunn a { display: inline-flex; align-items: center; min-height: 36px; }
}

@media (min-width: 720px) {
	.bn-rad { gap: 40px; }
	.bn-kolonner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
	.bn-kol,
	.bn-kol:first-child { border: 0; }
	.bn-kol-tittel { padding: 0 0 14px; cursor: default; pointer-events: none; }
	.bn-kol-tittel svg { display: none; }
	.bn-kol ul { padding-bottom: 0; }
}

@media (min-width: 1100px) {
	.bn-inn { padding-inline: 32px; }
	.bn-rad { grid-template-columns: minmax(0, 1.25fr) minmax(0, 4fr); gap: 48px; padding: 24px 0 52px; }
	.bn-kolonner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Kundelogoene under toppen har ingen egen farge, de står på hvitt som
   seksjonene rundt (bodyen er off-white). Logoene er helt svarte, ikke grå
   (i mørk modus hvite, assets/topp/mork.css) */
.cl-marquee-section { background: #fff; }
:root .cl-marquee-section .logo-cell img[src] { filter: brightness(0); opacity: 1; }

/* Teksten over logoene er vanlig tekst i setning, ikke små versaler, med luft
   ned til logoene og ned til seksjonen under (28.10.2026) */
.cl-marquee-section .cl-merke { margin: 0; color: #2b2b38; font-size: clamp(1rem, .94rem + .3vw, 1.2rem); font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.cl-marquee-section .text-center { margin-bottom: clamp(22px, 2.4vw, 32px) !important; }
.cl-marquee-section > div { padding-bottom: clamp(36px, 4vw, 56px) !important; }

/* Sju logoer synlige samtidig på store skjermer, fem på nettbrett og tre og en
   halv på mobil. Bredden regnes av bredden på raden (cqi), og overgangen i
   kantene er smal, så ytterste logo ikke forsvinner i den */
.cl-marquee-section .cl-marquee {
	--cl-antall: 3.5;
	--cl-luft: 28px;
	container-type: inline-size;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

.cl-marquee-section .cl-track > .logo-cell {
	width: calc(100cqi / var(--cl-antall) - var(--cl-luft)) !important;
	margin-right: var(--cl-luft) !important;
}

@media (min-width: 640px) {
	.cl-marquee-section .cl-marquee { --cl-antall: 5; --cl-luft: 36px; }
}

@media (min-width: 1024px) {
	.cl-marquee-section .cl-marquee { --cl-antall: 7; --cl-luft: 44px; }
}

/* ======================================================================
   Knappene på hele nettstedet: lilla (#6712fb), uten gradient, med hjørner
   på 10px. Filen lastes på alle sider, så reglene her legges over de gamle
   knappene fra Astro-bygget (btn-primary-glow, gradientknappene i
   mobillinjen, bestillingsknappen og cookie-banneret) og knappene i det nye
   designet (.pf-knapp, .tp-cta osv.). De gamle har !important, så disse
   må også ha det. Kundecasene som viser en kundes eget design (.btn), er
   ikke med.
   ====================================================================== */

:root {
	--knapp: #6712fb;
	--knapp-hover: #540bd6;
	--knapp-radius: 10px;
}

/* Fylte knapper */
.btn-primary-glow,
a.bg-gradient-brand,
button.bg-gradient-brand,
.pf-knapp,
.pf-knapp--lys,
.pf-adresse-knapp,
.tp-cta,
.cc-btn--primary,
.sticky-book-cta__btn,
.mobile-bottom-bar__cta,
.exit-intent-modal__primary,
.lead-submit,
.lp-submit,
.pf-pakke-knapp--lilla,
.pf-pakke-knapp--mork {
	border-radius: var(--knapp-radius) !important;
	background: var(--knapp) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	animation: none !important;
	filter: none !important;
}

.btn-primary-glow::after { display: none !important; }

/* Glinsen: med noen sekunders mellomrom glir gradienten fra logoen som et
   samlet bånd over den lilla knappen, fra venstre kant og ut på høyre side.
   Båndet ligger i ::before under teksten (isolation), med vinkelen i
   --btn-grad-angle (90deg). */
@property --btn-grad-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 90deg;
}

.btn-primary-glow,
a.bg-gradient-brand,
button.bg-gradient-brand,
.pf-knapp,
.pf-knapp--lys,
.pf-adresse-knapp,
.tp-cta,
.cc-btn--primary,
.sticky-book-cta__btn,
.mobile-bottom-bar__cta,
.exit-intent-modal__primary,
.lead-submit,
.lp-submit,
.pf-pakke-knapp--lilla,
.pf-pakke-knapp--mork,
.pr-start-kort--merke .pr-start-knapp {
	position: relative;
	isolation: isolate;
}

.btn-primary-glow::before,
a.bg-gradient-brand::before,
button.bg-gradient-brand::before,
.pf-knapp::before,
.pf-knapp--lys::before,
.pf-adresse-knapp::before,
.tp-cta::before,
.cc-btn--primary::before,
.sticky-book-cta__btn::before,
.mobile-bottom-bar__cta::before,
.exit-intent-modal__primary::before,
.lead-submit::before,
.lp-submit::before,
.pf-pakke-knapp--lilla::before,
.pf-pakke-knapp--mork::before,
.pr-start-kort--merke .pr-start-knapp::before,
.pv-merke::before,
.pr-start-merke::before {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1 !important;
	border-radius: inherit !important;
	/* Ikke background-position med !important, den må kunne animeres */
	background-color: transparent !important;
	/* Båndet er nesten dobbelt så bredt som knappen, så fargene spres godt
	   utover. Det står midt i et bilde som er fire ganger så bredt, så det
	   starter utenfor venstre kant og ender utenfor høyre (25 % til 75 % er
	   det meste som går) */
	background-image: linear-gradient(var(--btn-grad-angle), transparent 27%, #4f46ff 35%, #a020f0 44%, #ff1493 55%, #ff6a00 65%, transparent 73%) !important;
	background-size: 400% 100% !important;
	opacity: 0;
	filter: none !important;
	pointer-events: none;
	animation: knapp-glins 8s ease-in-out 3s infinite !important;
}

/* Båndet «Anbefalt» øverst på den uthevede pakken glinser i takt med
   knappen i samme kort (samme animasjon og start). Båndet står med
   position: absolute, så det får bare isolation fra reglene over */
.pv-merke,
.pr-start-merke { isolation: isolate; }

/* Knappene med bare kant (ghost) glinser ikke, bare de fylte lilla */
main a.rounded-full[class*="border-2"]::before,
.ns-pakke:not(.ns-pakke--fremhevet) .ns-pakke-knapp::before,
.pv-pakke:not(.pv-pakke--uthevet) .pv-knapp::before,
.bs-pakke:not(.bs-pakke--uthevet) .bs-pakke-knapp::before,
.pf-pakke-knapp:not(.pf-pakke-knapp--lilla):not(.pf-pakke-knapp--mork)::before,
.pf-knapp.pf-knapp--ghost::before { display: none !important; }

/* Vinkelen står fast. Båndet glir en vei, fra venstre mot høyre, og står
   utenfor knappen til det starter forfra */
@keyframes knapp-glins {
	0% { opacity: 1; background-position: 100% 50%; }
	34%, 100% { opacity: 1; background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.btn-primary-glow::before,
	a.bg-gradient-brand::before,
	button.bg-gradient-brand::before,
	.pf-knapp::before,
	.pf-knapp--lys::before,
	.pf-adresse-knapp::before,
	.tp-cta::before,
	.cc-btn--primary::before,
	.sticky-book-cta__btn::before,
	.mobile-bottom-bar__cta::before,
	.exit-intent-modal__primary::before,
	.lead-submit::before,
	.lp-submit::before,
	.pf-pakke-knapp--lilla::before,
	.pf-pakke-knapp--mork::before,
	.pr-start-kort--merke .pr-start-knapp::before,
	.pv-merke::before,
	.pr-start-merke::before { animation: none !important; }
}

.btn-primary-glow:hover,
a.bg-gradient-brand:hover,
button.bg-gradient-brand:hover,
.pf-knapp:hover,
.pf-adresse-knapp:hover,
.tp-cta:hover,
.cc-btn--primary:hover,
.sticky-book-cta__btn:hover,
.mobile-bottom-bar__cta:hover,
.exit-intent-modal__primary:hover,
.pf-pakke-knapp--lilla:hover,
.pf-pakke-knapp--mork:hover {
	background: var(--knapp-hover) !important;
	box-shadow: 0 10px 24px -12px rgba(103, 18, 251, .6) !important;
	transform: translateY(-1px);
}

/* Knapper med kant: lilla kant og tekst. Kortene som ikke er uthevet på
   /priser/ og bransjesidene har slike, så den uthevede pakken leder blikket */
main a.rounded-full[class*="border-2"],
.ns-pakke:not(.ns-pakke--fremhevet) .ns-pakke-knapp,
.pv-pakke:not(.pv-pakke--uthevet) .pv-knapp,
.bs-pakke:not(.bs-pakke--uthevet) .bs-pakke-knapp,
.pf-pakke-knapp:not(.pf-pakke-knapp--lilla):not(.pf-pakke-knapp--mork),
.cc-btn--ghost,
.exit-intent-modal__secondary {
	border-radius: var(--knapp-radius) !important;
	border-color: var(--knapp) !important;
	color: var(--knapp) !important;
}

.ns-pakke:not(.ns-pakke--fremhevet) .ns-pakke-knapp,
.pv-pakke:not(.pv-pakke--uthevet) .pv-knapp,
.bs-pakke:not(.bs-pakke--uthevet) .bs-pakke-knapp {
	background: #fff !important;
	box-shadow: inset 0 0 0 1.5px var(--knapp) !important;
}

/* Kanten er en ekte kant, siden skygger er slått av (flat.css). Knappene i
   pakkene har alle en kant på 1,5px, gjennomsiktig på de fylte, så de er
   like høye */
.ns-pakke-knapp,
.pv-knapp,
.bs-pakke-knapp { border: 1.5px solid transparent; }

main a.rounded-full[class*="border-2"]:hover,
.ns-pakke:not(.ns-pakke--fremhevet) .ns-pakke-knapp:hover,
.pv-pakke:not(.pv-pakke--uthevet) .pv-knapp:hover,
.bs-pakke:not(.bs-pakke--uthevet) .bs-pakke-knapp:hover,
.pf-pakke-knapp:not(.pf-pakke-knapp--lilla):not(.pf-pakke-knapp--mork):hover,
.cc-btn--ghost:hover {
	background: #f5f3ff !important;
	color: var(--knapp-hover) !important;
}

/* Ghost-knappen ved siden av en lilla knapp, som Se priser. Kanten tar
   plassen fra luften inni, så de to knappene blir like høye */
.pf-knapp.pf-knapp--ghost {
	padding: 15px 28px !important;
	border: 2px solid var(--knapp) !important;
	background: transparent !important;
	color: var(--knapp) !important;
}

.pf-knapp.pf-knapp--ghost:hover {
	background: #f5f3ff !important;
	color: var(--knapp-hover) !important;
	box-shadow: none !important;
}

/* Knappene i menyen og andre små knapper får de samme hjørnene */
.tp-knapp,
.tp-logginn,
.tp-burger,
.kalk-qty-btn,
.cc-btn {
	border-radius: var(--knapp-radius) !important;
}

/* Bunnlinjen på mobil glir ned og ut når den skal være borte (topp.js,
   bunnlinje). Glidningen og plassen til hjemlinjen på iPhone står i
   stilene fra Astro-bygget, så her trengs bare tilstanden */
#mobile-bottom-bar.mb-skjult { transform: translate3d(0, 110%, 0); opacity: 0; pointer-events: none; }

/* Chatknappen. Chatbase lastes først når den besøkende klikker, så ingenting
   sendes til Chatbase før det (template-parts/layout/bunn-skript.php). Etiketten
   sier at det er en KI-assistent (KI-forordningen art. 50). */
.hh-chat {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 55;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 20px 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--knapp);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: bottom .3s ease, transform .2s ease;
}
.hh-chat:hover { transform: translateY(-2px); }
.hh-chat:focus-visible { outline: 3px solid #101117; outline-offset: 3px; }
.hh-chat svg { width: 24px; height: 24px; flex: none; }
.hh-chat[hidden] { display: none; }
.hh-chat.er-lastet { cursor: progress; opacity: .85; }
@media (max-width: 1023.98px) {
	.hh-chat { width: 56px; padding: 0; justify-content: center; }
	.hh-chat-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	body:has(#mobile-bottom-bar:not(.mb-skjult)) .hh-chat { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
	.hh-chat { transition: none; }
	.hh-chat:hover { transform: none; }
}

/* Tjenester som kommer snart (Videoproduksjon): samme rad som lenkene, uten
   lenke, nedtonet og med en grå merkelapp (inc/topp.php, «snart») */
.tp-snart { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: default; }
.tp-mside--under .tp-punkter .tp-snart { min-height: 56px; }
.tp-snart .tp-ikon { background: var(--tp-flate); color: var(--tp-gra); }
.tp-punkter .tp-snart b { color: var(--tp-gra); }
.tp-ny--snart { background: var(--tp-flate); color: var(--tp-gra); white-space: nowrap; }
.bn-snart { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--tp-gra); font-size: 15px; cursor: default; }
.bn-ny--snart { background: var(--tp-flate); color: var(--tp-gra); white-space: nowrap; }