/*
 * Nettside-siden (/wordpress-nettside/) i designet fra plattformsiden.
 *
 * Seksjonene wordpress_nettside__* bruker titlene, knappene og fremvisningen
 * fra plattform.css, og kortene fra appen i heltside.css. Grunnfargen er den
 * blå fra Viktor, nettsidehelten (maskoten i assets/plattform/helter/viktor.webp).
 *
 * .ns-hero      Toppen: Viktor oppå et nettleservindu der en nettside bygger
 *               seg selv (.ns-bygg), og merker som svever rundt.
 * .ns-why       Hvorfor WordPress: Viktor som et stort kort og fire grunner.
 * .ns-includes  Det som er med, som kort på mørk bakgrunn.
 * .ns-pris      Tre pakker til fast pris, med Medium i mørkt.
 * .ns-mer       Nettsiden er bare starten: punktene og en rad fra Resultater.
 * .ns-bruk      Typer bedrifter som kort med lenke.
 * .ns-prosess   Fire steg på en tidslinje som tegnes når den synes, og Viktor
 *               går langs linjen.
 * .ns-case      Kundecaset som ett stort mørkt kort.
 * .ns-faq       Spørsmålene som trekkspill.
 */

/* Den uthevede delen av titlene i gradienten, på sidene i dette designet
   (bransjesidene, /kundecaser/, /blogg/ og /om-oss/) */
.kv-uthevet,
.bs-uthevet {
	padding-bottom: .12em;
	background: linear-gradient(90deg, var(--knapp) 0%, #c026d3 55%, #ec4899 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---------- Toppen ---------- */

.ns-hero {
	padding-block: clamp(28px, 4vw, 64px) clamp(64px, 8vw, 112px);
	background:
		radial-gradient(48% 62% at 88% 30%, #e7f1fe 0%, transparent 72%),
		radial-gradient(40% 50% at 6% 92%, #f3effe 0%, transparent 70%),
		#fff;
}

.ns-hero-rad { display: grid; gap: 48px; align-items: center; }

.ns-smuler ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
	color: var(--pf-gra);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ns-smuler a { color: inherit; text-decoration: none; }
.ns-smuler a:hover { color: var(--pf-blekk); }
.ns-smuler [aria-current] { color: var(--pf-blekk); }

.ns-h1 { font-size: clamp(2.4rem, 1.3rem + 3.1vw, 4.25rem); }
.ns-ingress { max-width: 34rem; margin: 22px 0 0; }
.ns-ingress strong { color: var(--pf-blekk); font-weight: 700; }

.ns-knapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 34px;
}

.ns-knapper .pf-lenke svg { transition: transform .25s var(--pf-myk); }
.ns-knapper .pf-lenke:hover svg { transform: translateX(3px); }

.ns-merker { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 30px; }

.ns-merker li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px 7px 8px;
	border: 1px solid rgba(10, 15, 31, .07);
	border-radius: 999px;
	background: #fff;
	color: var(--pf-tekst);
	font-size: 14px;
	font-weight: 600;
}

.ns-hake {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #0a5fe5;
	color: #fff;
	font-size: 12px;
}

.ns-pille { gap: 8px; padding: 5px 16px 5px 6px; }
.ns-pille-maskot { width: 30px; height: 30px; padding: 2px; border-radius: 50%; background: #e7f1fe; object-fit: contain; }
.ns-pille span { color: var(--pf-gra-lys); }

.ns-scene { position: relative; padding: 96px 0 40px; }

/* Under vinduet på sidene for hver annonsekanal: at tallene er eksempler */
.ns-scene-tekst { position: absolute; right: 4px; bottom: 6px; max-width: 46%; margin: 0; color: var(--pf-gra); font-size: 12.5px; line-height: 1.4; text-align: right; }

.ns-viktor {
	position: absolute;
	top: 6px;
	right: 7%;
	z-index: 3;
	width: 150px;
	animation: ns-viktor-hopp 10s var(--pf-myk) infinite;
}

.ns-viktor-bilde {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 18px rgba(10, 75, 190, .28));
	animation: pf-hs-svev 4s ease-in-out infinite;
}

/* Viktor hopper når siden er live */
@keyframes ns-viktor-hopp {
	0%, 50% { transform: none; }
	53% { transform: translateY(-18px) rotate(-6deg); }
	56% { transform: none; }
	59% { transform: translateY(-8px) rotate(4deg); }
	62%, 100% { transform: none; }
}

.ns-vindu { container-type: inline-size; }

.ns-bygg {
	position: relative;
	display: grid;
	gap: .9em;
	aspect-ratio: 16 / 10;
	padding: 1.2em 1.4em;
	overflow: hidden;
	background: #f5f9ff;
	font-size: clamp(8px, 2.1cqw, 14px);
	align-content: start;
}

.ns-b-nav { display: flex; align-items: center; gap: .6em; }
.ns-b-nav b { margin-right: auto; color: #0b3a82; font-family: var(--pf-tittel); font-size: 1em; font-weight: 600; }
.ns-b-nav i { width: 2.6em; height: .5em; border-radius: 99px; background: #d9e5f7; }

.ns-b-nav span,
.ns-b-skjema span {
	padding: .45em .9em;
	border-radius: 99px;
	background: #0a5fe5;
	color: #fff;
	font-size: .72em;
	font-weight: 700;
}

.ns-b-topp { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.1em; align-items: center; }
.ns-b-tekst { display: flex; flex-direction: column; align-items: flex-start; }

.ns-b-tekst strong {
	color: #1c1917;
	font-family: var(--pf-tittel);
	font-size: 2em;
	font-weight: 600;
	line-height: 1.05;
}

.ns-b-tekst em { display: block; width: 92%; height: .55em; margin-top: .6em; border-radius: 99px; background: #eadfca; }
.ns-b-tekst .ns-b-kort-linje { width: 62%; }

.ns-b-knapp {
	margin-top: .9em;
	padding: .55em 1.1em;
	border-radius: 99px;
	background: #1c1917;
	color: #fff;
	font-size: .75em;
	font-weight: 700;
}

.ns-b-bilde {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border-radius: .9em;
	background:
		radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55) 0 18%, transparent 19%),
		linear-gradient(135deg, #bfdbfe 0%, #3b82f6 55%, #1d4ed8 100%);
	color: rgba(255, 255, 255, .9);
	font-size: 2.4em;
}

.ns-b-tjenester { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }

.ns-b-tjenester > div {
	padding: .7em;
	border: 1px solid #f1e6d0;
	border-radius: .7em;
	background: #fff;
}

.ns-b-tjenester i { display: block; width: 1.7em; height: 1.7em; border-radius: .5em; background: #e3eefe; }
.ns-b-tjenester em { display: block; width: 85%; height: .42em; margin-top: .5em; border-radius: 99px; background: #efe5d3; }
.ns-b-tjenester em + em { width: 55%; }

.ns-b-skjema {
	display: flex;
	gap: .5em;
	padding: .6em;
	border: 1px solid #f1e6d0;
	border-radius: .8em;
	background: #fff;
}

.ns-b-skjema em { flex: 1; height: 1.7em; border-radius: .5em; background: #f7f1e6; }
.ns-b-skjema span { display: grid; place-items: center; border-radius: .5em; }

.ns-b-live {
	position: absolute;
	right: 1em;
	bottom: 1em;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .55em 1em;
	border-radius: 99px;
	background: #059669;
	box-shadow: 0 .8em 1.6em -.8em rgba(5, 150, 105, .8);
	color: #fff;
	font-size: .85em;
	font-weight: 700;
	opacity: 0;
}

.ns-b-peker { position: absolute; top: 0; left: 0; font-size: 1.9em; line-height: 0; opacity: 0; filter: drop-shadow(0 3px 6px rgba(10, 15, 31, .3)); }

/* Byggingen tar ti sekunder: delene kommer etter hverandre, pekeren trykker
   på knappen, siden blir live, og så starter det på nytt */
@keyframes ns-bygg {
	0% { opacity: 0; transform: translateY(.6em) scale(.97); }
	6% { opacity: 1; transform: none; }
	84% { opacity: 1; transform: none; }
	92%, 100% { opacity: 0; transform: none; }
}

@keyframes ns-live {
	0%, 48% { opacity: 0; transform: translateY(.8em) scale(.9); }
	52% { opacity: 1; transform: none; }
	84% { opacity: 1; transform: none; }
	92%, 100% { opacity: 0; }
}

@keyframes ns-peker {
	0%, 30% { opacity: 0; transform: translate(26em, 16em); }
	34% { opacity: 1; }
	42% { transform: translate(5.2em, 9.4em); }
	45% { transform: translate(5.2em, 9.4em) scale(.82); }
	48% { transform: translate(5.2em, 9.4em) scale(1); }
	62% { opacity: 1; transform: translate(14em, 18.4em); }
	70%, 100% { opacity: 0; transform: translate(16em, 20em); }
}

.ns-b { animation: ns-bygg 10s var(--pf-myk) calc(var(--b) * .45s) infinite both; }
.ns-b-live { animation: ns-live 10s var(--pf-myk) infinite both; }
.ns-b-peker { animation: ns-peker 10s var(--pf-myk) infinite both; }

.ns-sol {
	position: absolute;
	top: -6%;
	right: -8%;
	width: 86%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 38%, #fff 0%, #dceafe 45%, rgba(10, 95, 229, .22) 72%, transparent 74%);
	animation: pf-hs-pust 9s ease-in-out infinite;
}

.ns-vindu {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border: 1px solid rgba(10, 15, 31, .07);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 50px 100px -40px rgba(120, 72, 10, .4), 0 16px 34px -22px rgba(10, 15, 31, .25);
}

.ns-vindu-linje {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 14px;
	border-bottom: 1px solid #eceef2;
	background: #f6f6f9;
}

.ns-vindu-linje i { width: 10px; height: 10px; border-radius: 50%; background: #fca5a5; }
.ns-vindu-linje i:nth-child(2) { background: #fcd34d; }
.ns-vindu-linje i:nth-child(3) { background: #86efac; }

.ns-vindu-linje span {
	display: inline-flex;
	flex: 1;
	align-items: center;
	gap: 6px;
	max-width: 240px;
	height: 24px;
	margin-left: 12px;
	padding: 0 10px;
	border-radius: 8px;
	background: #fff;
	color: var(--pf-gra);
	font-size: 12px;
}

.ns-vindu-linje svg { color: #10b981; }

.ns-svever {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px 9px 9px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 40px -18px rgba(10, 15, 31, .35);
	color: var(--pf-blekk);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	animation: pf-hs-svev 6s ease-in-out infinite;
}

.ns-svever span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	font-size: 16px;
}

.ns-svever--0 { top: 12%; left: -10px; }
.ns-svever--0 span { background: #e0f4ff; color: #1a6fa0; }
.ns-svever--1 { top: 52%; right: -10px; animation-delay: -2s; }
.ns-svever--1 span { background: #ecf4de; color: #2f7d0a; }
.ns-svever--2 { bottom: 4px; left: 10%; animation-delay: -4s; }
.ns-svever--2 span { background: #e7f1fe; color: #0a4fc0; }

@media (max-width: 599.98px) {
	.ns-scene { padding-top: 76px; }
	.ns-viktor { width: 108px; right: 4%; }
	.ns-svever { font-size: 12px; }
	.ns-svever--0 { top: 24%; }
	.ns-svever--1 { display: none; }
}

@media (min-width: 1024px) {
	.ns-hero-rad { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; }
	.ns-svever--0 { left: -36px; }
	.ns-svever--1 { right: -28px; }
}

/* ---------- Hvorfor WordPress ---------- */

.ns-why-rom { display: grid; gap: 16px; }

.ns-why-viktor {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	min-height: 380px;
	padding: 28px;
	overflow: hidden;
	border-radius: 28px;
	background: linear-gradient(170deg, #f1f7ff 0%, #d9e8fe 100%);
	isolation: isolate;
}

.ns-why-sol {
	position: absolute;
	top: 12%;
	left: 50%;
	z-index: -1;
	width: 300px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, .5) 45%, transparent 70%);
	transform: translateX(-50%);
	animation: pf-hs-pust 7s ease-in-out infinite;
}

.ns-why-maskot {
	width: min(240px, 70%);
	height: auto;
	margin-bottom: 18px;
	filter: drop-shadow(0 22px 26px rgba(10, 75, 190, .26));
	animation: pf-hs-svev 5s ease-in-out infinite;
}

.ns-why-navn { display: flex; flex-direction: column; align-items: center; color: #0a3f9e; font-size: 15px; text-align: center; }
.ns-why-navn b { color: var(--pf-blekk); font-family: var(--pf-tittel); font-size: 26px; font-weight: 800; }

.ns-why-verktoy li {
	position: absolute;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 10px 24px -14px rgba(10, 63, 158, .4);
	color: #0a3f9e;
	font-size: 13px;
	font-weight: 700;
	animation: pf-hs-svev 6s ease-in-out infinite;
}

.ns-why-verktoy--0 { top: 9%; left: 9%; }
.ns-why-verktoy--1 { top: 16%; right: 8%; animation-delay: -1.5s; }
.ns-why-verktoy--2 { top: 42%; left: 5%; animation-delay: -3s; }
.ns-why-verktoy--3 { top: 46%; right: 6%; animation-delay: -4.5s; }
.ns-why-verktoy--4 { top: 3%; left: 42%; animation-delay: -2.2s; }

.ns-why-kort { display: grid; gap: 16px; }

.ns-why-kort li {
	padding: 26px;
	border-radius: 24px;
	background: var(--flate);
	transition: transform .35s var(--pf-myk);
}

.ns-why-kort li:hover { transform: translateY(-3px); }
.ns-why-kort h3 { margin: 18px 0 8px; color: var(--pf-blekk); }
.ns-why-kort p { color: #4b5563; font-size: 16px; line-height: 1.55; }

.ns-ikon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: #fff;
	color: var(--aksent, #7c3aed);
	font-size: 20px;
}

@media (min-width: 640px) {
	.ns-why-kort { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.ns-why-rom { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; }
}

/* ---------- Det som er med ---------- */

.ns-includes-kort { display: grid; gap: 16px; }

.ns-includes-kort li {
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 24px;
	background: rgba(255, 255, 255, .04);
	transition: background-color .3s, border-color .3s, transform .35s var(--pf-myk);
}

.ns-includes-kort li:hover {
	border-color: color-mix(in srgb, var(--lys) 45%, transparent);
	background: rgba(255, 255, 255, .07);
	transform: translateY(-3px);
}

.ns-includes .ns-ikon { background: color-mix(in srgb, var(--lys) 16%, transparent); color: var(--lys); }
.ns-includes-kort h3 { margin: 18px 0 8px; color: #fff; }
.ns-includes-kort p { color: var(--pf-gra-lys); font-size: 16px; line-height: 1.55; }

@media (min-width: 640px) {
	.ns-includes-kort { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
	.ns-includes-kort { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Pakkene ---------- */

.ns-pris-rad { display: grid; gap: 16px; align-items: stretch; }

.ns-pakke {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 28px;
	border: 1px solid var(--pf-linje);
	border-radius: 28px;
	background: #fff;
	color: var(--pf-blekk);
}

/* Den fremhevede pakken er lys med lilla kant, som på /priser/ */
.ns-pakke--fremhevet {
	border: 2px solid #6712fb;
	background: #fbf9ff;
}

.ns-pakke-viktor {
	position: absolute;
	top: -52px;
	left: 22px;
	width: 84px;
	filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .35));
	animation: pf-hs-svev 5s ease-in-out infinite;
}

.ns-pakke-viktor img { display: block; width: 100%; height: auto; }
.ns-pris-rad { padding-top: 44px; }

@media (max-width: 899.98px) {
	.ns-pakke--fremhevet { margin-top: 40px; }
}

.ns-pakke-merke {
	position: absolute;
	top: 22px;
	right: 22px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #6712fb;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ns-pakke-navn {
	margin: 0;
	color: var(--pf-gra);
	font-family: var(--pf-tittel);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ns-pakke--fremhevet .ns-pakke-navn { color: #6712fb; }

.ns-pakke-pris { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 14px; }

.ns-pakke-pris .display-num {
	color: inherit;
	font-family: var(--pf-tittel);
	font-size: clamp(2.6rem, 2rem + 1.4vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
}

.ns-pakke-pris .text-sm { color: var(--pf-gra); font-size: 14px; }

.ns-pakke-drift {
	margin: 22px 0 26px;
	padding-top: 18px;
	border-top: 1px solid var(--pf-linje);
	font-size: 14px;
}


.ns-pakke-linje {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	color: var(--pf-gra);
}


.ns-pakke-linje.ns-pakke-sum {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px dashed var(--pf-linje);
	color: var(--pf-blekk);
	font-weight: 700;
}

.ns-pakke-merknad { margin-top: 6px; color: var(--pf-gra); font-size: 12px; }

.ns-pakke-knapp { justify-content: center; margin-top: auto; padding: 15px 24px; font-size: 16px; }
.ns-pakke:not(.ns-pakke--fremhevet) .ns-pakke-knapp { background: #fff; box-shadow: inset 0 0 0 1.5px var(--pf-blekk); color: var(--pf-blekk); }

.ns-pris-fot { display: grid; gap: 6px; margin-top: 32px; color: var(--pf-gra); font-size: 15px; text-align: center; }
.ns-pris-fot a { color: var(--pf-blekk); font-weight: 600; }

@media (min-width: 900px) {
	.ns-pris-rad { grid-template-columns: repeat(3, 1fr); }
	.ns-pakke--fremhevet { transform: translateY(-10px); }
}

/* ---------- Nettsiden er bare starten ---------- */

.ns-mer { background: linear-gradient(135deg, #eef5ff 0%, #f6f1ff 58%, #fdf2f8 100%); }
.ns-mer-rad { display: grid; gap: 48px; align-items: center; }
.ns-mer-tekst .pf-ingress { margin: 20px 0 0; }
.ns-mer-punkter { display: grid; gap: 16px; margin-top: 30px; }
.ns-mer-punkter li { display: flex; align-items: flex-start; gap: 14px; }

.ns-mer-merke {
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--flate, #fff);
	box-shadow: 0 8px 20px -14px rgba(10, 15, 31, .4);
	color: #7c3aed;
	font-size: 20px;
}

.ns-mer-maskot { width: 36px; height: 36px; object-fit: contain; }
.ns-mer-punkter span:last-child { color: var(--pf-gra); font-size: 16px; line-height: 1.5; }
.ns-mer-punkter b { display: block; color: var(--pf-blekk); font-size: 17px; font-weight: 700; }

.ns-mer-punkter b em {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #fef3c7;
	color: #92400e;
	font-size: 11px;
	font-style: normal;
	vertical-align: 2px;
}
.ns-mer-kort { margin: 0; }
.ns-mer-kort .pf-hs-panel { padding-block: 24px; }

@media (min-width: 1024px) {
	.ns-mer-rad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
}

/* ---------- Typer bedrifter ---------- */

.ns-bruk-kort { display: grid; gap: 16px; }

.ns-bruk-kort a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 30px;
	border-radius: 26px;
	background: var(--flate);
	color: inherit;
	text-decoration: none;
	transition: transform .35s var(--pf-myk), box-shadow .35s var(--pf-myk);
}

.ns-bruk-kort a:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--aksent) 60%, transparent); }

.ns-bruk-merke {
	color: var(--aksent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ns-bruk-kort h3 { margin: 14px 0 10px; color: var(--pf-blekk); }
.ns-bruk-kort p { color: #4b5563; font-size: 16px; line-height: 1.55; }

.ns-bruk-lenke {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 22px;
	color: var(--aksent);
	font-weight: 700;
}

.ns-bruk-lenke svg { transition: transform .25s var(--pf-myk); }
.ns-bruk-kort a:hover .ns-bruk-lenke svg { transform: translateX(4px); }

@media (min-width: 900px) {
	.ns-bruk-kort { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Tidslinjen ---------- */

.ns-tidslinje { position: relative; display: grid; gap: 28px; }

.ns-tidslinje::before,
.ns-tidslinje::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 21px;
	width: 2px;
	border-radius: 2px;
	background: #e4e1ee;
}

.ns-tidslinje::after {
	bottom: auto;
	height: 0;
	background: linear-gradient(180deg, #7c3aed, #ec4899);
	transition: height 1.6s var(--pf-myk) .2s;
}

.ns-tidslinje.er-synlig::after { height: 100%; }

.ns-tidslinje li {
	position: relative;
	padding-left: 66px;
	transition: opacity .6s var(--pf-myk) calc(.2s + var(--i) * .18s), transform .7s var(--pf-myk) calc(.2s + var(--i) * .18s);
}

.ns-tidslinje-nr {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2px solid #e4e1ee;
	border-radius: 50%;
	background: #fff;
	color: var(--pf-blekk);
	font-family: var(--pf-tittel);
	font-size: 17px;
	font-weight: 600;
	transition: background-color .4s, color .4s, border-color .4s;
	transition-delay: calc(.3s + var(--i) * .35s);
}

.ns-tidslinje.er-synlig .ns-tidslinje-nr { border-color: var(--pf-blekk); background: var(--pf-blekk); color: #fff; }

.ns-tidslinje-tid {
	display: inline-block;
	margin: 8px 0 10px;
	padding: 4px 11px;
	border: 1px solid #ede9fe;
	border-radius: 999px;
	background: #fff;
	color: #6d28d9;
	font-size: 12px;
	font-weight: 700;
}

.ns-tidslinje h3 { margin-bottom: 8px; color: var(--pf-blekk); }
.ns-tidslinje p { color: #4b5563; font-size: 16px; line-height: 1.55; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.ns-tidslinje:not(.er-synlig) li { opacity: 0; transform: translateY(14px); }
}

@media (min-width: 960px) {
	.ns-tidslinje { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 28px; }

	.ns-tidslinje::before,
	.ns-tidslinje::after {
		top: 21px;
		right: auto;
		bottom: auto;
		left: 22px;
		width: calc(100% - 44px);
		height: 2px;
	}

	.ns-tidslinje::after { width: 0; background: linear-gradient(90deg, #7c3aed, #ec4899); transition: width 1.6s var(--pf-myk) .2s; }
	.ns-tidslinje.er-synlig::after { width: calc(100% - 44px); height: 2px; }
	.ns-tidslinje li { padding: 0; }
	.ns-tidslinje-nr { position: relative; margin-bottom: 18px; }
	.ns-tidslinje-tid { margin-top: 0; }
}

.ns-tidslinje-rom { position: relative; }
.ns-tidslinje-viktor { display: none; }

@media (min-width: 960px) {
	.ns-tidslinje-rom { padding-top: 64px; }

	.ns-tidslinje-viktor {
		position: absolute;
		top: 0;
		left: -6px;
		display: block;
		width: 58px;
		transition: left 1.8s var(--pf-myk) .2s;
	}

	.ns-tidslinje-viktor img { display: block; width: 100%; height: auto; animation: ns-gaa .45s ease-in-out infinite alternate; }
	.ns-tidslinje.er-synlig + .ns-tidslinje-viktor { left: calc((var(--n) - 1) / var(--n) * (100% + 28px) - 7px); }
	.ns-tidslinje.er-synlig + .ns-tidslinje-viktor img { animation: ns-gaa .45s ease-in-out 4 alternate, pf-hs-svev 4s ease-in-out 1.8s infinite; }
}

@keyframes ns-gaa {
	from { transform: rotate(-6deg) translateY(0); }
	to { transform: rotate(6deg) translateY(-4px); }
}

/* ---------- Kundecaset ---------- */

.ns-case-kort {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border-radius: 32px;
	background: #0b0a18;
	color: #fff;
}

.ns-case-tekst { padding: clamp(28px, 4vw, 56px); }

.ns-case-merke {
	color: #93c5fd;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ns-case-tekst h3 { margin: 14px 0 16px; color: #fff; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); }
.ns-case-tekst p { color: var(--pf-gra-lys); font-size: 17px; line-height: 1.6; }
.ns-case-tekst .pf-lenke { margin-top: 24px; color: #c4b5fd; }
.ns-case-tall { padding: clamp(28px, 4vw, 48px); background: linear-gradient(160deg, #1b1532, #110e21); }
.ns-case-tall dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }

@media (max-width: 599.98px) {
	.ns-case-tall dl { gap: 10px; }
	.ns-case-tall dl > div { padding: 14px; }
}

.ns-case-tall dl > div {
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 20px;
	background: rgba(255, 255, 255, .05);
}

.ns-case-tall dt { color: var(--pf-gra-lys); font-size: 13px; }

.ns-case-tall dd {
	margin: 6px 0 0;
	color: #fff;
	font-family: var(--pf-tittel);
	font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem);
	font-weight: 800;
	line-height: 1.05;
}

.ns-case-kort.er-synlig .ns-case-tall dl > div { animation: pf-hs-pop .6s var(--pf-myk) calc(.3s + var(--i) * .12s) both; }
.ns-case-kilde { margin-top: 14px; color: var(--pf-gra-lys); font-size: 13px; }

@media (min-width: 960px) {
	.ns-case-kort { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ---------- Spørsmålene ---------- */

.ns-faq { background: var(--pf-flate); }
.ns-faq-liste { display: grid; gap: 12px; max-width: 880px; }

.ns-faq-rad {
	overflow: hidden;
	border: 1px solid var(--pf-linje);
	border-radius: 20px;
	background: #fff;
	transition: box-shadow .3s var(--pf-myk);
}

.ns-faq-rad[open] { box-shadow: 0 24px 50px -34px rgba(23, 14, 61, .4); }

.ns-faq-rad summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	cursor: pointer;
	list-style: none;
}

.ns-faq-rad summary::-webkit-details-marker { display: none; }

.ns-faq-rad h3 {
	margin: 0;
	color: var(--pf-blekk);
	font-family: var(--pf-tittel);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.ns-faq-pluss {
	position: relative;
	flex: none;
	width: 34px;
	height: 34px;
	border: 1px solid var(--pf-linje);
	border-radius: 50%;
	transition: background-color .3s, border-color .3s, transform .35s var(--pf-myk);
}

.ns-faq-pluss::before,
.ns-faq-pluss::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--pf-blekk);
	transform: translate(-50%, -50%);
	transition: background-color .3s;
}

.ns-faq-pluss::after { transform: translate(-50%, -50%) rotate(90deg); }
.ns-faq-rad[open] .ns-faq-pluss { border-color: var(--pf-blekk); background: var(--pf-blekk); transform: rotate(45deg); }

.ns-faq-rad[open] .ns-faq-pluss::before,
.ns-faq-rad[open] .ns-faq-pluss::after { background: #fff; }

.ns-faq-svar { padding: 0 24px 22px; color: #4b5563; font-size: 16.5px; line-height: 1.65; }
.ns-faq-svar p { margin: 0 0 12px; }
.ns-faq-svar ul { margin: 0 0 12px; padding-left: 1.25em; list-style: disc; }
.ns-faq-svar li { margin-bottom: 4px; }
.ns-faq-svar strong { color: var(--pf-blekk); }
.ns-faq-svar a { color: #6d28d9; }

@media (prefers-reduced-motion: reduce) {
	.ns-sol,
	.ns-svever,
	.ns-viktor,
	.ns-viktor-bilde,
	.ns-why-sol,
	.ns-why-maskot,
	.ns-why-verktoy li,
	.ns-pakke-viktor,
	.ns-tidslinje-viktor img,
	.ns-case-tall dl > div { animation: none !important; }

	.ns-b { animation: none !important; opacity: 1; }
	.ns-b-live { animation: none !important; opacity: 1; }
	.ns-b-peker { display: none; }
}

/* ======================================================================
   Nettbutikk-siden (/nettbutikk/). Seksjonene bruker klassene
   over, og her står det som bare finnes der: butikken i vinduet,
   betalingslogoene, sammenligningen med Shopify og listene i bruksområdene.
   ====================================================================== */

/* Betalingene som er klare fra start */
.ns-betaling { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.ns-betaling > span { color: var(--pf-gra); font-size: 13px; font-weight: 600; }
.ns-betaling ul { display: flex; flex-wrap: wrap; gap: 6px; }

.ns-betaling li {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid rgba(10, 15, 31, .08);
	border-radius: 9px;
	background: var(--bak, #fff);
	color: var(--merke);
	font-size: 22px;
}

.ns-betaling svg { fill: currentColor; }

.ns-betaling .ns-vipps {
	border-color: transparent;
	background: #ff5b24;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

/* Butikken som bygger seg selv */
.ns-bygg--butikk { gap: .8em; }

.ns-b-nav .ns-b-kurv {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .4em .7em;
	border-radius: 99px;
	background: #1c1917;
	color: #fff;
	font-size: .75em;
}

.ns-b-kurv em {
	min-width: 1.5em;
	padding: 0 .3em;
	border-radius: 99px;
	background: #0a5fe5;
	color: #fff;
	font-size: .85em;
	font-style: normal;
	font-weight: 700;
	text-align: center;
	animation: ns-kurv 10s var(--pf-myk) infinite;
}

@keyframes ns-kurv {
	0%, 45% { transform: none; }
	47% { transform: scale(1.5); }
	50%, 100% { transform: none; }
}

.ns-b-banner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	min-height: 4.4em;
	padding: .9em 1em;
	border-radius: .9em;
	background: linear-gradient(120deg, #93c5fd 0%, #3b82f6 60%, #1d4ed8 100%);
	color: #fff;
}

.ns-b-banner strong { font-family: var(--pf-tittel); font-size: 1.45em; font-weight: 600;}

.ns-b-banner span {
	padding: .45em .9em;
	border-radius: 99px;
	background: #fff;
	color: #1c1917;
	font-size: .72em;
	font-weight: 700;
}

.ns-b-produkter { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }

.ns-b-produkter > div {
	display: flex;
	flex-direction: column;
	gap: .15em;
	padding: .5em;
	border: 1px solid #f1e6d0;
	border-radius: .8em;
	background: #fff;
}

.ns-b-vare { display: block; aspect-ratio: 4 / 3; margin-bottom: .3em; border-radius: .55em; }
.ns-b-vare--0 { background: linear-gradient(135deg, #fef3c7, #fcd34d); }
.ns-b-vare--1 { background: linear-gradient(135deg, #e0e7ff, #a5b4fc); }
.ns-b-vare--2 { background: linear-gradient(135deg, #fce7f3, #f9a8d4); }
.ns-b-produkter b { color: #1c1917; font-size: .78em; }
.ns-b-produkter span { color: #0a4fc0; font-size: .78em; font-weight: 700; }

.ns-b-produkter em {
	margin-top: .25em;
	padding: .35em;
	border-radius: .4em;
	background: #1c1917;
	color: #fff;
	font-size: .65em;
	font-style: normal;
	font-weight: 700;
	text-align: center;
}

.ns-b-kasse {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .55em .7em;
	border: 1px solid #f1e6d0;
	border-radius: .8em;
	background: #fff;
}

.ns-b-kasse > span { color: #78716c; font-size: .72em; }
.ns-b-kasse b { padding: .3em .7em; border-radius: .45em; font-size: .72em; font-weight: 700; }
.ns-b-kasse .ns-vipps { background: #ff5b24; color: #fff; }
.ns-b-kasse .ns-b-klarna { background: #ffa8cd; color: #17120f; }

.ns-b-kasse em {
	margin-left: auto;
	padding: .45em .9em;
	border-radius: 99px;
	background: #059669;
	color: #fff;
	font-size: .72em;
	font-style: normal;
	font-weight: 700;
}

/* Pekeren legger lampen i kurven og går videre til kassen */
@keyframes ns-peker-butikk {
	0%, 30% { opacity: 0; transform: translate(26em, 18em); }
	34% { opacity: 1; }
	42% { transform: translate(19.9em, 12.4em); }
	45% { transform: translate(19.9em, 12.4em) scale(.82); }
	48% { transform: translate(19.9em, 12.4em) scale(1); }
	62% { opacity: 1; transform: translate(22.4em, 14.4em); }
	70%, 100% { opacity: 0; transform: translate(24em, 16em); }
}

.ns-bygg--butikk .ns-b-peker { animation-name: ns-peker-butikk; }

/* Bruksområdene med lister */
.ns-bruk-kort .ns-bruk-innhold {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 30px;
	border-radius: 26px;
	background: var(--flate);
	transition: transform .35s var(--pf-myk);
}

.ns-bruk-kort .ns-bruk-innhold:hover { transform: translateY(-4px); }
.ns-bruk-punkter { display: grid; gap: 9px; margin-top: 20px; }
.ns-bruk-punkter li { display: flex; align-items: center; gap: 10px; color: var(--pf-blekk); font-size: 15px; font-weight: 600; }

.ns-bruk-hake {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	color: var(--aksent);
	font-size: 12px;
}

/* WooCommerce mot Shopify */
.ns-sml-rom {
	overflow-x: auto;
	border: 1px solid var(--pf-linje);
	border-radius: 24px;
	background: #fff;
}

.ns-sml-tabell { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 15px; }

.ns-sml-tabell th,
.ns-sml-tabell td {
	padding: 16px 22px;
	border-bottom: 1px solid var(--pf-linje);
	color: var(--pf-gra);
	text-align: left;
	vertical-align: middle;
}

.ns-sml-tabell thead th { padding-block: 20px; color: var(--pf-blekk); font-size: 16px; font-weight: 700; }
.ns-sml-tabell thead th:first-child { color: var(--pf-gra); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ns-sml-tabell tbody th { width: 34%; color: var(--pf-blekk); font-weight: 600; }

.ns-sml-tabell tr:last-child th,
.ns-sml-tabell tr:last-child td { border-bottom: 0; }

.ns-sml-tabell .ns-sml-oss { border-bottom-color: rgba(255, 255, 255, .1); background: #0a0f1f; color: #fff; font-weight: 600; }
.ns-sml-tabell thead .ns-sml-oss { color: #fff; }

.ns-sml-logo {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	border-radius: 9px;
	background: #96588a;
	color: #fff;
	font-size: 17px;
	vertical-align: middle;
}

.ns-sml-logo svg { fill: currentColor; }
.ns-sml-logo--dem { background: #eef6e8; color: #5e8e3e; }

.ns-sml-hake {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	border-radius: 50%;
	background: #34d399;
	color: #0a0f1f;
	font-size: 11px;
	vertical-align: -4px;
}

.ns-sml-tabell tbody tr { transition: opacity .5s var(--pf-myk) calc(.15s + var(--i) * .07s), transform .6s var(--pf-myk) calc(.15s + var(--i) * .07s); }
.ns-sml-fot { margin-top: 22px; text-align: center; }
.ns-sml-fot a { color: #6d28d9; font-weight: 600; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.ns-sml-rom:not(.er-synlig) tbody tr { opacity: 0; transform: translateY(8px); }
}

/* Kundecaset med et stort tall øverst */
.ns-case-tall dl:has(.ns-case-stor) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ns-case-tall .ns-case-stor { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(10, 95, 229, .3), rgba(236, 72, 153, .18)); }
.ns-case-tall .ns-case-stor dd { font-size: clamp(2.8rem, 2rem + 3vw, 4.2rem); }
.ns-case-tall dl:has(.ns-case-stor) > div:not(.ns-case-stor) dd { font-size: clamp(1.3rem, 1rem + .8vw, 1.7rem); }

@media (prefers-reduced-motion: reduce) {
	.ns-b-kurv em { animation: none !important; }
}

/* ======================================================================
   Synlighet (/seo/, Herman) og annonsering (/annonsering/, Astrid).
   Seksjonene bruker klassene over. Her står fargene til heltene, søket og
   kampanjene i vinduet i toppen, kortene for kanalene og kortet med tallene.
   ====================================================================== */

a.ns-pille { color: var(--pf-tekst); text-decoration: none; transition: box-shadow .25s; }
a.ns-pille:hover { box-shadow: 0 12px 28px -16px rgba(10, 15, 31, .45); }

/* Fargene til Herman (himmelblå) og Astrid (oransje), fra maskotene */
.ns-hero--herman {
	background:
		radial-gradient(48% 62% at 88% 30%, #e0f4ff 0%, transparent 72%),
		radial-gradient(40% 50% at 6% 92%, #eef8ff 0%, transparent 70%),
		#fff;
}

.ns-hero--herman .ns-sol { background: radial-gradient(circle at 40% 38%, #fff 0%, #d4eefc 45%, rgba(35, 140, 198, .26) 72%, transparent 74%); }
.ns-hero--herman .ns-hake { background: #238cc6; }
.ns-hero--herman .ns-pille-maskot { background: #e0f4ff; }

.ns-hero--astrid {
	background:
		radial-gradient(48% 62% at 88% 30%, #ffecdd 0%, transparent 72%),
		radial-gradient(40% 50% at 6% 92%, #fff4ea 0%, transparent 70%),
		#fff;
}

.ns-hero--astrid .ns-sol { background: radial-gradient(circle at 40% 38%, #fff 0%, #ffe2cc 45%, rgba(235, 78, 0, .24) 72%, transparent 74%); }
.ns-hero--astrid .ns-hake { background: #eb4e00; }
.ns-hero--astrid .ns-pille-maskot { background: #ffecdd; }

.ns-why-viktor.ns-tone-herman { background: linear-gradient(170deg, #f0faff 0%, #d4eefc 100%); }
.ns-tone-herman .ns-why-navn,
.ns-tone-herman .ns-why-verktoy li { color: #155e8a; }
.ns-tone-herman .ns-why-maskot { filter: drop-shadow(0 22px 26px rgba(21, 94, 138, .28)); }
.ns-why-viktor.ns-tone-astrid { background: linear-gradient(170deg, #fff5ee 0%, #ffdcc4 100%); }
.ns-tone-astrid .ns-why-navn,
.ns-tone-astrid .ns-why-verktoy li { color: #b93a00; }
.ns-tone-astrid .ns-why-maskot { filter: drop-shadow(0 22px 26px rgba(185, 58, 0, .25)); }

/* Søket i vinduet */
.ns-bygg--sok { gap: .7em; background: #fff; }

.ns-b-sokefelt {
	display: flex;
	align-items: center;
	gap: .6em;
	padding: .65em 1em;
	border: 1px solid #e5e7eb;
	border-radius: 99px;
	box-shadow: 0 .3em .8em -.4em rgba(10, 15, 31, .2);
	color: #6b7280;
	font-size: .9em;
}

.ns-b-sokefelt span { color: #1f2937; font-weight: 600; }

.ns-b-ai {
	display: flex;
	flex-direction: column;
	gap: .4em;
	padding: .8em 1em;
	border-radius: .9em;
	background: linear-gradient(135deg, #eef2ff, #f5f3ff);
}

.ns-b-ai-merke { display: inline-flex; align-items: center; gap: .35em; color: #4f46e5; font-size: .75em; font-weight: 700; }
.ns-b-ai em { display: block; width: 92%; height: .5em; border-radius: 99px; background: #d9ddf5; }
.ns-b-ai .ns-b-kort-linje { width: 64%; }

.ns-b-kilde {
	align-self: flex-start;
	padding: .3em .7em;
	border-radius: 99px;
	background: #fff;
	color: #4338ca;
	font-size: .7em;
	font-weight: 700;
}

.ns-b-treff { display: flex; flex-direction: column; gap: .2em; padding: .2em .1em; }
.ns-b-treff small { display: flex; align-items: center; gap: .4em; color: #6b7280; font-size: .7em; }
.ns-b-treff b { color: #1a0dab; font-size: .95em; font-weight: 600; }
.ns-b-treff em { display: block; width: 80%; height: .45em; border-radius: 99px; background: #eceef2; }

.ns-b-treff--din {
	margin: 0 -.5em;
	padding: .5em;
	border: 1px solid #bfe3f8;
	border-radius: .8em;
	background: #eef8ff;
}

.ns-b-treff--din i { padding: .1em .5em; border-radius: 99px; background: #238cc6; color: #fff; font-size: .9em; font-style: normal; font-weight: 700; }

@keyframes ns-peker-sok {
	0%, 30% { opacity: 0; transform: translate(22em, 15em); }
	34% { opacity: 1; }
	42% { transform: translate(4.6em, 6.9em); }
	45% { transform: translate(4.6em, 6.9em) scale(.82); }
	48% { transform: translate(4.6em, 6.9em) scale(1); }
	62% { opacity: 1; transform: translate(6em, 8em); }
	70%, 100% { opacity: 0; transform: translate(8em, 10em); }
}

.ns-bygg--sok .ns-b-peker { animation-name: ns-peker-sok; }
.ns-bygg--sok .ns-b-live { background: #4f46e5; box-shadow: 0 .8em 1.6em -.8em rgba(79, 70, 229, .8); }

/* Kampanjene i vinduet */
.ns-bygg--annonser { gap: .8em; background: #fbfbfd; }

.ns-bygg--annonser .ns-b-nav .ns-b-kanal {
	display: grid;
	place-items: center;
	width: 1.9em;
	height: 1.9em;
	padding: 0;
	border-radius: .5em;
	background: #eaf1fe;
	color: #4285f4;
	font-size: .9em;
}

.ns-b-kanal svg { fill: currentColor; }
.ns-bygg--annonser .ns-b-nav .ns-b-kanal--meta { background: #e8f0fe; color: #0467df; }
.ns-bygg--annonser .ns-b-nav b { color: #1f2937; }

.ns-b-tall { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }

.ns-b-tall > div {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .2em;
	padding: .7em .8em;
	border: 1px solid #eceef2;
	border-radius: .8em;
	background: #fff;
}

.ns-b-tall small { color: #6b7280; font-size: .68em; }
.ns-b-tall b { color: #111827; font-family: var(--pf-tittel); font-size: 1.25em; font-weight: 600; }

.ns-b-pil {
	position: absolute;
	top: .8em;
	right: .8em;
	width: 0;
	height: 0;
	border-right: .35em solid transparent;
	border-left: .35em solid transparent;
}

.ns-b-pil--opp { border-bottom: .45em solid #10b981; }
.ns-b-pil--ned { border-top: .45em solid #10b981; }

.ns-b-graf {
	display: flex;
	align-items: flex-end;
	gap: .45em;
	height: 5.5em;
	padding: .7em .8em;
	border: 1px solid #eceef2;
	border-radius: .8em;
	background: #fff;
}

.ns-b-graf i {
	flex: 1;
	height: var(--h);
	border-radius: .3em .3em .1em .1em;
	background: linear-gradient(180deg, #fdba74, #eb4e00);
	opacity: .85;
	transform-origin: bottom;
}

.ns-b-graf.ns-b i { animation: ns-stolpe 10s var(--pf-myk) calc(1.8s + var(--j) * .06s) infinite both; }

@keyframes ns-stolpe {
	0% { transform: scaleY(0); }
	6%, 84% { transform: scaleY(1); }
	92%, 100% { transform: scaleY(0); }
}

.ns-b-forslag {
	display: flex;
	align-items: center;
	gap: .7em;
	padding: .7em .8em;
	border: 1px solid #fecdd3;
	border-radius: .8em;
	background: #fff;
}

.ns-b-forslag-maskot { flex: none; width: 2.2em; height: 2.2em; padding: .2em; border-radius: 50%; background: #ffecdd; object-fit: contain; }
.ns-b-forslag > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ns-b-forslag small { color: #be123c; font-size: .65em; font-weight: 700; }
.ns-b-forslag b { overflow: hidden; color: #111827; font-size: .82em; text-overflow: ellipsis; white-space: nowrap; }
.ns-b-forslag span { color: #059669; font-size: .65em; font-weight: 700; }

.ns-b-forslag em {
	padding: .45em .8em;
	border-radius: .5em;
	font-size: .7em;
	font-style: normal;
	font-weight: 700;
	white-space: nowrap;
}

.ns-b-avsla { border: 1px solid #e5e7eb; color: #4b5563; }
.ns-b-godkjenn { background: #7c3aed; color: #fff; }

@keyframes ns-peker-annonser {
	0%, 30% { opacity: 0; transform: translate(26em, 18em); }
	34% { opacity: 1; }
	42% { transform: translate(21.6em, 9.7em); }
	45% { transform: translate(21.6em, 9.7em) scale(.82); }
	48% { transform: translate(21.6em, 9.7em) scale(1); }
	62% { opacity: 1; transform: translate(22em, 11em); }
	70%, 100% { opacity: 0; transform: translate(23em, 12em); }
}

.ns-bygg--annonser .ns-b-peker { animation-name: ns-peker-annonser; }

/* Kortene for disiplinene og kanalene */
.ns-kanal-kort { display: grid; gap: 16px; }

.ns-kanal-kort a {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 30px;
	border: 1px solid var(--pf-linje);
	border-radius: 26px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform .35s var(--pf-myk), box-shadow .35s var(--pf-myk), border-color .3s;
}

.ns-kanal-kort a:hover { border-color: transparent; box-shadow: 0 30px 60px -36px rgba(23, 14, 61, .4); transform: translateY(-4px); }

.ns-kanal-ikon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	font-size: 24px;
}

.ns-kanal-ikon svg { fill: currentColor; }

.ns-kanal-merke {
	margin-top: 22px;
	color: var(--pf-gra);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ns-kanal-kort h3 { margin: 6px 0 10px; color: var(--pf-blekk); font-size: clamp(1.6rem, 1.3rem + .8vw, 2rem); }
.ns-kanal-kort p { color: #4b5563; font-size: 16px; line-height: 1.55; }

.ns-kanal-pil {
	display: grid;
	place-items: center;
	align-self: flex-start;
	width: 40px;
	height: 40px;
	margin-top: auto;
	padding: 0;
	border-radius: 10px;
	background: #f3effe;
	color: #7c3aed;
	transition: background-color .25s, color .25s, transform .3s var(--pf-myk);
}

.ns-kanal-kort p + .ns-kanal-pil { margin-top: 24px; }
.ns-kanal-kort a:hover .ns-kanal-pil { background: #7c3aed; color: #fff; transform: translateX(4px); }

@media (min-width: 720px) {
	.ns-kanal-kort { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
	.ns-kanal-kort { grid-template-columns: repeat(min(var(--antall), 4), 1fr); }
}

/* Snittallene */
.ns-tall-kort {
	display: grid;
	gap: 14px;
	padding: clamp(18px, 2.5vw, 28px);
	border-radius: 32px;
	background: #0b0a18;
	color: #fff;
}

.ns-tall-kort > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 22px;
	background: rgba(255, 255, 255, .04);
}

.ns-tall-kort span { color: var(--pf-gra-lys); font-size: 14px; font-weight: 600; }

.ns-tall-kort b {
	color: #fff;
	font-family: var(--pf-tittel);
	font-size: clamp(2.4rem, 1.8rem + 1.8vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
}

.ns-tall-kort p { color: var(--pf-gra-lys); font-size: 15px; line-height: 1.55; }
.ns-tall-stor { background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(236, 72, 153, .2)) !important; }
.ns-tall-stor b { font-size: clamp(3.6rem, 2.6rem + 3.6vw, 6rem); }
.ns-tall-kort.er-synlig > div { animation: pf-hs-pop .6s var(--pf-myk) calc(.2s + var(--i, 0) * .12s) both; }
.ns-tall-fot { margin-top: 22px; text-align: center; }
.ns-tall-fot a { color: #6d28d9; font-weight: 600; }

@media (min-width: 960px) {
	.ns-tall-kort { grid-template-columns: 1.3fr 1fr 1fr; }
}

/* Heltene over kolonnene i sammenligningen */
.ns-sml-logo.ns-sml-helt { padding: 2px; background: var(--flate); }
.ns-sml-helt img { width: 100%; height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
	.ns-b-graf i,
	.ns-tall-kort > div { animation: none !important; }
}

/* Herman og Astrid er høyere enn Viktor, så de er litt mindre oppå vinduet */
.ns-hero--herman .ns-viktor,
.ns-hero--astrid .ns-viktor { width: 132px; }


/* ======================================================================
   Prissiden (/priser/)

   .pr-hero     Toppen: tittelen og to veier å velge mellom, vekstpakkene
                (mørkt kort med Felix og Astrid) og startpakkene (Viktor).
   .pr-alltid   Det som er med i alle vekstpakkene, som lyse kort.
   .pr-start    Startpakkene i to faner. Fanene er radioknapper, så de
                virker uten skript.
   ====================================================================== */

@keyframes pr-svev {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

.pr-hake {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: #ede9fe;
	color: #7c3aed;
	font-size: 13px;
}

/* ---------- Toppen ---------- */

.pr-hero {
	padding-block: clamp(28px, 4vw, 56px) clamp(80px, 9vw, 128px);
	background:
		radial-gradient(46% 52% at 12% 8%, #f3effe 0%, transparent 70%),
		radial-gradient(40% 46% at 92% 22%, #fff3dc 0%, transparent 72%),
		#fff;
}

.pr-hero-inn { text-align: center; }
.pr-smuler ol { justify-content: center; }
.pr-h1 { font-size: clamp(2.6rem, 1.2rem + 4.2vw, 5rem); line-height: 1.05; padding-bottom: .06em; }

.pr-veier {
	display: grid;
	gap: 20px;
	max-width: 1000px;
	margin: clamp(44px, 5vw, 64px) auto 0;
	text-align: left;
}

.pr-vei {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 30px 28px;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(10, 15, 31, .08), 0 24px 50px -40px rgba(10, 15, 31, .35);
	color: var(--pf-blekk);
	text-decoration: none;
	transition: transform .5s var(--pf-myk), box-shadow .5s ease;
}

.pr-vei:hover {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px rgba(10, 15, 31, .08), 0 34px 64px -36px rgba(10, 15, 31, .4);
}

.pr-vei--saas {
	background:
		radial-gradient(70% 60% at 100% 0%, rgba(124, 58, 237, .38) 0%, transparent 70%),
		radial-gradient(50% 50% at 0% 100%, rgba(236, 72, 153, .16) 0%, transparent 70%),
		var(--pf-blekk);
	box-shadow: 0 40px 80px -40px rgba(124, 58, 237, .6);
	color: #fff;
}

.pr-vei--saas:hover { box-shadow: 0 48px 90px -38px rgba(124, 58, 237, .7); }

.pr-vei:focus-visible { outline: 3px solid #a020f0; outline-offset: 4px; }

.pr-vei-helter { display: flex; margin-bottom: 22px; }

.pr-vei-helter > span {
	display: block;
	width: 64px;
	height: 64px;
	padding: 5px;
	border-radius: 50%;
	background: var(--flate, #f3f1fa);
	box-shadow: 0 0 0 3px #fff;
}

.pr-vei--saas .pr-vei-helter > span { box-shadow: 0 0 0 3px var(--pf-blekk); }
.pr-vei-helter > span + span { margin-left: -12px; }

.pr-vei-helter img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	animation: pr-svev 4.5s ease-in-out infinite;
}

.pr-vei-helter > span + span img { animation-delay: -2.2s; }

.pr-vei-merke {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7c3aed;
}

.pr-vei--saas .pr-vei-merke { color: #c4b5fd; }

.pr-vei-tittel {
	display: block;
	margin-top: 8px;
	font-family: var(--pf-tittel);
	font-size: clamp(1.45rem, 1.2rem + .7vw, 1.85rem);
	font-weight: 800;
	line-height: 1.15;
	text-wrap: balance;
}

.pr-vei-pris { display: block; margin-top: 18px; color: var(--pf-gra); font-size: 15px; }
.pr-vei--saas .pr-vei-pris { color: rgba(255, 255, 255, .68); }

.pr-vei-pris b {
	color: var(--pf-blekk);
	font-family: var(--pf-tittel);
	font-size: clamp(1.9rem, 1.6rem + .9vw, 2.5rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.pr-vei--saas .pr-vei-pris b { color: #fff; }

.pr-vei ul {
	display: grid;
	gap: 10px;
	margin: 20px 0 28px;
	padding-top: 20px;
	border-top: 1px solid var(--pf-linje);
}

.pr-vei--saas ul { border-top-color: rgba(255, 255, 255, .12); }
.pr-vei li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.pr-vei--saas .pr-hake { background: rgba(196, 181, 253, .16); color: #c4b5fd; }

.pr-vei-knapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	padding: 15px 22px;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1.5px var(--pf-blekk);
	font-size: 16px;
	font-weight: 700;
	transition: background-color .2s, color .2s;
}

.pr-vei:hover .pr-vei-knapp { background: var(--pf-blekk); color: #fff; }
.pr-vei--saas .pr-vei-knapp { background: var(--knapp); box-shadow: none; color: #fff; }
.pr-vei--saas:hover .pr-vei-knapp { background: var(--knapp-hover); }
.pr-vei-knapp svg { transition: transform .25s var(--pf-myk); }
.pr-vei:hover .pr-vei-knapp svg { transform: translateY(2px); }

.pr-mva { margin-top: 22px; color: #8a8a98; font-size: 13px; }

@media (min-width: 820px) {
	.pr-veier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.pr-vei { padding: 34px 36px 32px; }
}

/* ---------- Med i alle vekstpakkene ---------- */

.pr-alltid { background: #f7f4ff; }
.pr-alltid .pf-hode { margin-bottom: clamp(32px, 4vw, 52px); }
.pr-alltid-kort { display: grid; gap: 16px; }
.pr-alltid-kort > li { display: flex; }

.pr-alltid-innhold {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 28px 28px 30px;
	border: 1px solid var(--pf-linje);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 24px 50px -44px rgba(76, 29, 149, .5);
	color: var(--pf-blekk);
	text-decoration: none;
	transition: border-color .3s, box-shadow .3s, transform .5s var(--pf-myk);
}

a.pr-alltid-innhold:hover {
	border-color: #c4b5fd;
	box-shadow: 0 30px 60px -40px rgba(76, 29, 149, .55);
	transform: translateY(-3px);
}

a.pr-alltid-innhold:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }

.pr-alltid-helt,
.pr-alltid-ikon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
}

.pr-alltid-helt { padding: 4px; border-radius: 50%; background: var(--flate, #f3f1fa); }
.pr-alltid-helt img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pr-alltid-ikon { border-radius: 16px; background: #f5f3ff; color: #7c3aed; font-size: 26px; }

.pr-alltid-innhold .pf-h4 { margin: 22px 0 8px; color: var(--pf-blekk); }
.pr-alltid-innhold p { color: var(--pf-gra); font-size: 15.5px; line-height: 1.55; }

.pr-alltid-pil {
	position: absolute;
	top: 30px;
	right: 28px;
	color: var(--pf-gra-lys);
	font-size: 20px;
	transition: color .2s, transform .25s var(--pf-myk);
}

a.pr-alltid-innhold:hover .pr-alltid-pil { color: #7c3aed; transform: translateX(3px); }

@media (min-width: 640px) {
	.pr-alltid-kort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Heltene på en rad og løftene under: fire og tre kort */
@media (min-width: 980px) {
	.pr-alltid-kort { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
	.pr-alltid-kort > li { grid-column: span 4; }
	.pr-alltid-kort > li.er-helt { grid-column: span 3; }
}

.pr-alltid-snart {
	align-self: flex-start;
	margin: 16px 0 -8px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fff7ed;
	color: #c2410c;
	font-size: 12px;
	font-weight: 600;
}

/* Rutenettet med scener fra appen (bento, 27.10.2026). Hvert kort har en
   farget scene øverst og teksten under: laget og vekstplanen øverst, så tre
   og tre, og sikkerheten og eierskapet nederst. Scenene beveger seg når
   kortet kommer på skjermen (er-synlig), og står stille med redusert
   bevegelse. Flate farger, ingen skygger. */
.pa-bento > .pa-flis { display: flex; }

.pa-innhold {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 10px;
	border: 1px solid #e9e3fa;
	border-radius: 26px;
	background: #fff;
	color: var(--pf-blekk);
	text-decoration: none;
	transition: border-color .3s, transform .5s var(--pf-myk);
}

a.pa-innhold:hover { border-color: #c4b5fd; transform: translateY(-3px); }
a.pa-innhold:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }

.pa-scene {
	--scene: #f1ebff;
	display: grid;
	place-items: center;
	align-content: center;
	min-height: 230px;
	padding: 22px;
	border-radius: 18px;
	background: var(--scene);
	overflow: hidden;
}

.pa-flis--plan .pa-scene,
.pa-flis--sikkerhet .pa-scene { --scene: #e3f6ec; }
.pa-flis--resultater .pa-scene { --scene: #e3eeff; }
.pa-flis--godkjenning .pa-scene { --scene: #ffeee2; }
.pa-flis--rytme .pa-scene { --scene: #fff4cc; }

.pa-tekst { padding: 20px 64px 14px 14px; }
:root body .pa-bento h3.pa-tittel { --hh-fs: clamp(1.2rem, 1.05rem + .45vw, 1.45rem); --hh-lh: 1.2; color: var(--pf-blekk); text-wrap: balance; }
.pa-tekst p { margin-top: 8px; color: var(--pf-gra); font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }

.pa-pil {
	position: absolute;
	right: 18px;
	bottom: 20px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f1ebff;
	color: #6d28d9;
	font-size: 18px;
	transition: background-color .2s, color .2s, transform .3s var(--pf-myk);
}

a.pa-innhold:hover .pa-pil { background: #6712fb; color: #fff; transform: translateX(2px); }

/* Laget: heltene på hvert sitt kort, og teamet hos oss under */
.pa-laget { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.pa-laget li { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 14px 6px 12px; border-radius: 16px; background: #fff; text-align: center; }
.pa-laget-bilde { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--flate); }
.pa-laget-bilde img { width: 50px; height: 50px; object-fit: contain; }
.pa-laget b { font-size: 15px; font-weight: 800; }
.pa-laget small { min-height: 2.6em; color: var(--pf-gra); font-size: 12px; line-height: 1.3; }
.pa-laget em { margin-top: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 800; white-space: nowrap; }
.pa-laget .er-live { background: #d3f2e2; color: #0a7444; }
.pa-laget .er-live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #10b981; vertical-align: 1px; }
.pa-laget .er-snart { background: #fff1e6; color: #c2410c; }

.pa-laget-folk { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; color: var(--pf-blekk); font-size: 13.5px; font-weight: 700; }
.pa-laget-ansikter { display: flex; }
.pa-laget-ansikter img { width: 26px; height: 26px; margin-left: -7px; border: 2px solid #f1ebff; border-radius: 50%; object-fit: cover; }
.pa-laget-ansikter img:first-child { margin-left: 0; }

/* Vekstplanen: et lite dokument med punktene og kvartalene */
.pa-plan { width: min(100%, 330px); padding: 16px; border-radius: 16px; background: #fff; }
.pa-plan-topp { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #e8efeb; font-size: 14px; }
.pa-plan-topp svg { color: #0a7444; font-size: 18px; }
.pa-plan-topp span { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: #d3f2e2; color: #0a7444; font-size: 11px; font-weight: 800; }
.pa-plan ul { display: grid; gap: 9px; margin: 12px 0; }
.pa-plan li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
.pa-hake { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #10b981; color: #fff; font-size: 12px; }
/* Fargene til kvartalene som ikke er valgt står i variabler, så animasjonen
   under (pa-kvartal) får de mørke i mørk modus (assets/topp/mork.css) */
.pa-plan-kvartal { --kvartal: #eef4f1; --kvartal-tekst: #6b7280; display: flex; gap: 6px; }
.pa-plan-kvartal span { flex: 1; padding: 5px 0; border-radius: 8px; background: var(--kvartal); color: var(--kvartal-tekst); font-size: 11.5px; font-weight: 800; text-align: center; }
.pa-plan-kvartal span:first-child { background: #0a7444; color: #fff; }

/* Resultater: trakten fra besøk til kunder */
.pa-trakt { display: grid; gap: 8px; width: min(100%, 300px); }
.pa-trakt li { display: flex; align-items: center; justify-content: center; height: 42px; margin-inline: auto; border-radius: 12px; background: #1f55d6; color: #fff; font-size: 13.5px; font-weight: 800; }
.pa-trakt li:nth-child(1) { width: 100%; }
.pa-trakt li:nth-child(2) { width: 74%; background: #4b7be6; }
.pa-trakt li:nth-child(3) { width: 48%; background: #9dbbf5; color: #0b2a6b; }

/* Godkjenning: et forslag fra Astrid */
.pa-godkj { width: min(100%, 300px); padding: 16px; border-radius: 16px; background: #fff; }
.pa-godkj-hvem { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pa-godkj-helt { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ffecdd; }
.pa-godkj-helt img { width: 24px; height: 24px; object-fit: contain; }
.pa-godkj-hva { margin: 10px 0 14px; color: var(--pf-blekk); font-size: 15.5px; font-weight: 800; }
.pa-godkj-knapper { display: flex; gap: 8px; }
.pa-godkj-endre { flex: 1; padding: 9px 0; border: 1.5px solid #ebe7f2; border-radius: 12px; color: var(--pf-gra); font-size: 13.5px; font-weight: 800; text-align: center; }
.pa-godkj-ja { display: grid; flex: 1.4; border-radius: 12px; background: #6712fb; color: #fff; font-size: 13.5px; font-weight: 800; overflow: hidden; }
.pa-godkj-ja > span { display: flex; grid-area: 1 / 1; align-items: center; justify-content: center; gap: 5px; padding: 9px 0; }
.pa-godkj-etter { background: #10b981; opacity: 0; }

/* Rytmen: natten, morgenen og mandagen */
.pa-rytme { display: grid; gap: 8px; width: min(100%, 320px); }
.pa-rytme li { display: grid; grid-template-columns: 32px auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1.5px solid transparent; border-radius: 14px; background: #fff; font-size: 13.5px; }
.pa-rytme-ikon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff4cc; color: #8f5b00; font-size: 16px; }
.pa-rytme b { font-weight: 800; }
.pa-rytme li > span:last-child { color: var(--pf-gra); }

/* Sikkerhet og eierskap: et stort ikon og stikkordene som merker */
.pa-skjold,
.pa-eier { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.pa-skjold svg { flex: none; color: #0a7444; overflow: visible; }
.pa-eier svg { flex: none; color: #6d28d9; overflow: visible; }
.pa-skjold-ring { stroke: #a7e3c4; stroke-width: 2; transform-origin: 32px 32px; }
.pa-skjold ul,
.pa-eier ul { display: grid; gap: 8px; }
.pa-skjold li,
.pa-eier li { padding: 7px 13px; border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 800; }
.pa-skjold li { color: #0a5b37; }
.pa-eier li { color: #5b21b6; }
.pa-eier-nokkel { transform-origin: 20px 40px; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	/* Heltene vugger litt, hver i sin takt */
	.pa-flis.er-synlig .pa-laget-bilde img { animation: pa-vugg 4s ease-in-out calc(var(--j) * .5s) infinite; }

	/* Punktene i planen hakes av etter tur, og fokuset går gjennom kvartalene */
	.pa-plan .pa-hake { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(.4s + var(--j) * .35s); }
	.pa-flis.er-synlig .pa-plan .pa-hake { transform: none; }
	.pa-flis.er-synlig .pa-plan-kvartal span { animation: pa-kvartal 8s steps(1) infinite; }
	.pa-flis.er-synlig .pa-plan-kvartal span:nth-child(2) { animation-name: pa-kvartal-2; }
	.pa-flis.er-synlig .pa-plan-kvartal span:nth-child(3) { animation-name: pa-kvartal-3; }
	.pa-flis.er-synlig .pa-plan-kvartal span:nth-child(4) { animation-name: pa-kvartal-4; }

	/* Trakten fylles fra venstre */
	.pa-trakt li { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--pf-myk) calc(.3s + var(--j) * .2s); }
	.pa-flis.er-synlig .pa-trakt li { transform: none; }

	/* Forslaget blir godkjent, og så kommer et nytt */
	.pa-flis.er-synlig .pa-godkj-ja { animation: pa-trykk 6s ease-in-out infinite; }
	.pa-flis.er-synlig .pa-godkj-etter { animation: pa-godkjent 6s ease-in-out infinite; }

	/* Natten, morgenen og mandagen lyser opp etter tur */
	.pa-flis.er-synlig .pa-rytme li { animation: pa-rytme-1 6s ease-in-out infinite; }
	.pa-flis.er-synlig .pa-rytme li:nth-child(2) { animation-name: pa-rytme-2; }
	.pa-flis.er-synlig .pa-rytme li:nth-child(3) { animation-name: pa-rytme-3; }

	/* Skjoldet tegner haken og sender ut en ring, nøkkelen vris */
	.pa-skjold-hake { stroke-dasharray: 32; stroke-dashoffset: 32; transition: stroke-dashoffset .8s var(--pf-myk) .5s; }
	.pa-flis.er-synlig .pa-skjold-hake { stroke-dashoffset: 0; }
	.pa-flis.er-synlig .pa-skjold-ring { animation: pa-ring 3.2s ease-out 1s infinite; }
	.pa-flis.er-synlig .pa-eier-nokkel { animation: pa-vri 5s ease-in-out .6s infinite; }

	.pa-skjold li,
	.pa-eier li { opacity: 0; transform: translateX(-8px); transition: opacity .5s ease calc(.4s + var(--j) * .15s), transform .5s var(--pf-myk) calc(.4s + var(--j) * .15s); }
	.pa-flis.er-synlig :is(.pa-skjold, .pa-eier) li { opacity: 1; transform: none; }
}

@keyframes pa-vugg { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg) translateY(-2px); } }
@keyframes pa-kvartal { 0% { background: #0a7444; color: #fff; } 25%, 100% { background: var(--kvartal); color: var(--kvartal-tekst); } }
@keyframes pa-kvartal-2 { 0%, 100% { background: var(--kvartal); color: var(--kvartal-tekst); } 25% { background: #0a7444; color: #fff; } 50% { background: var(--kvartal); color: var(--kvartal-tekst); } }
@keyframes pa-kvartal-3 { 0%, 100% { background: var(--kvartal); color: var(--kvartal-tekst); } 50% { background: #0a7444; color: #fff; } 75% { background: var(--kvartal); color: var(--kvartal-tekst); } }
@keyframes pa-kvartal-4 { 0%, 100% { background: var(--kvartal); color: var(--kvartal-tekst); } 75% { background: #0a7444; color: #fff; } }
@keyframes pa-trykk { 0%, 38%, 48%, 100% { transform: none; } 43% { transform: scale(.94); } }
@keyframes pa-godkjent { 0%, 44% { opacity: 0; } 50%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes pa-rytme-1 { 0%, 30%, 100% { border-color: transparent; } 6%, 24% { border-color: #f5c84c; } }
@keyframes pa-rytme-2 { 0%, 33%, 63%, 100% { border-color: transparent; } 39%, 57% { border-color: #f5c84c; } }
@keyframes pa-rytme-3 { 0%, 66%, 96%, 100% { border-color: transparent; } 72%, 90% { border-color: #f5c84c; } }
@keyframes pa-ring { 0% { opacity: .9; transform: scale(.85); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes pa-vri { 0%, 60%, 100% { transform: rotate(0); } 70%, 80% { transform: rotate(-24deg); } 90% { transform: rotate(0); } }

@media (min-width: 640px) {
	.pa-bento > .pa-flis--laget { grid-column: 1 / -1; }
	.pa-laget { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
	.pa-bento > .pa-flis { grid-column: span 4; }
	.pa-bento > .pa-flis--laget { grid-column: span 7; }
	.pa-bento > .pa-flis--plan { grid-column: span 5; }
	.pa-bento > :is(.pa-flis--sikkerhet, .pa-flis--eier) { grid-column: span 6; }
}

@media (prefers-reduced-motion: reduce) {
	.pa-innhold,
	.pa-pil { transition: none; }
}

/* ---------- Startpakkene ---------- */

.pr-faner { position: relative; }

.pr-fane-valg {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.pr-fane-knapper {
	display: flex;
	gap: 4px;
	width: fit-content;
	margin: 0 auto clamp(40px, 4.5vw, 56px);
	padding: 6px;
	border: 1px solid #ebe9f2;
	border-radius: 16px;
	background: #fff;
}

.pr-fane-knapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 10px;
	color: var(--pf-gra);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
	transition: background-color .2s, color .2s;
}

.pr-fane-knapp:hover { color: var(--pf-blekk); }

.pr-fane-valg--nettside:checked ~ .pr-fane-topp .pr-fane-knapp--nettside,
.pr-fane-valg--nettbutikk:checked ~ .pr-fane-topp .pr-fane-knapp--nettbutikk {
	background: var(--knapp);
	color: #fff;
}

.pr-fane-valg--nettside:focus-visible ~ .pr-fane-topp .pr-fane-knapp--nettside,
.pr-fane-valg--nettbutikk:focus-visible ~ .pr-fane-topp .pr-fane-knapp--nettbutikk {
	outline: 3px solid #a020f0;
	outline-offset: 3px;
}

.pr-fane { display: none; }

.pr-fane-valg--nettside:checked ~ .pr-fane--nettside,
.pr-fane-valg--nettbutikk:checked ~ .pr-fane--nettbutikk {
	display: block;
	animation: pr-inn .45s var(--pf-myk);
}

/* Toppen er bredere enn i de andre seksjonene, så teksten står på to linjer */
.pr-start .pf-hode { max-width: 1080px; }
.pr-start .pf-ingress { max-width: 50rem; }

.pr-start-liste { display: grid; gap: 20px; padding-top: 14px; }

/* «Kontakt oss» i stedet for en pris i toppen av sammenligningen */
.pf-sml-pris b.pr-sml-tekst { font-size: 20px; }

@keyframes pr-inn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* Startpakkene har samme uttrykk som vekstpakkene (assets/plattform/priser.css):
   lyse og flate kort, og den anbefalte med lilla kant og et lilla bånd øverst */
.pr-start-kort {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 28px 30px;
	border: 1px solid #e9e6f2;
	border-radius: 28px;
	background: #fff;
}

.pr-start-kort--merke {
	padding-top: 76px;
	border: 2px solid #6712fb;
	background: #fbf9ff;
}

.pr-start-merke {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: 25px 25px 0 0;
	background: #6712fb;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .02em;
}

.pr-start-navn {
	color: var(--pf-blekk);
	font-family: var(--pf-tittel);
	font-size: clamp(1.35rem, 1.2rem + .4vw, 1.6rem);
	font-weight: 800;
}

/* Nettside eller Nettbutikk som merkelapp over Start, Pluss og Premium */
.pr-start-type {
	display: block;
	width: fit-content;
	margin-bottom: 10px;
	padding: 4px 11px;
	border-radius: 999px;
	background: #f1ecff;
	color: var(--knapp, #6712fb);
	font-family: var(--font-sans, 'Nunito'), system-ui, sans-serif;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.35;
}

.pr-start-pris { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; color: var(--pf-gra); font-size: 15px; }

.pr-start-pris b {
	color: var(--pf-blekk);
	font-family: var(--pf-tittel);
	font-size: clamp(2.6rem, 2.1rem + 1.3vw, 3.2rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.pr-start-pris b.pr-start-pris--tekst { font-size: clamp(1.8rem, 1.5rem + .9vw, 2.3rem); }

.pr-start-drift { margin-top: 8px; color: var(--pf-gra); font-size: 14px; }

.pr-start-kort ul {
	display: grid;
	gap: 10px;
	margin: 22px 0 28px;
	padding-top: 20px;
	border-top: 1px solid var(--pf-linje);
}

.pr-start-kort li { display: flex; align-items: flex-start; gap: 10px; color: var(--pf-tekst); font-size: 15.5px; line-height: 1.45; }

/* Hakene i små grønne sirkler, lilla i den anbefalte pakken */
.pr-start-kort .pr-hake { background: #ecfdf5; color: #059669; }
.pr-start-kort--merke .pr-hake { background: #ede5ff; color: #6712fb; }

.pr-start-knapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	padding: 15px 20px;
	border: 1.5px solid var(--knapp);
	border-radius: 10px;
	background: #fff;
	color: var(--knapp);
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.pr-start-knapp:hover { background: #f5f3ff; color: var(--knapp-hover); }
.pr-start-kort--merke .pr-start-knapp { border-color: transparent; background: var(--knapp); color: #fff; }
.pr-start-kort--merke .pr-start-knapp:hover { background: var(--knapp-hover); color: #fff; }
.pr-start-knapp:focus-visible { outline: 3px solid #a020f0; outline-offset: 3px; }

.pr-start-fot { margin-top: 36px; color: var(--pf-gra); font-size: 15px; text-align: center; text-wrap: pretty; }
.pr-start-fot a { color: #6d28d9; font-weight: 600; }

/* Kortet om å gå over til en vekstpakke, under fanene: teksten til venstre og
   et regnestykke til høyre. Fakturaene for vekstpakken er søyler, der den
   lilla delen er det kunden betaler og den grønne fradraget. Søylene vokser
   fram en og en når kortet kommer på skjermen. Under står faktaene i en rad,
   som tryggheten under vekstpakkene. */
.pr-bytte { margin-top: clamp(48px, 6vw, 72px); }

.pr-bytte-kort {
	display: grid;
	gap: clamp(24px, 3vw, 44px);
	align-items: center;
	padding: clamp(24px, 3.4vw, 48px);
	border: 1px solid #e4dcfb;
	border-radius: 28px;
	background: #f6f2ff;
}

.pr-bytte-merke {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 16px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #d3f2e2;
	color: #0a7444;
	font-size: 13.5px;
	font-weight: 800;
}

:root body .pr-bytte h3.pr-bytte-tittel { --hh-fs: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); --hh-lh: 1.12; max-width: 15em; color: var(--pf-blekk); text-wrap: balance; }
.pr-bytte-tekst > p:not(.pr-bytte-merke) { max-width: 34em; margin-top: 14px; color: var(--pf-tekst); font-size: 16.5px; line-height: 1.6; text-wrap: pretty; }

.pr-bytte-lenke { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: #6d28d9; font-weight: 800; }
.pr-bytte-lenke svg { transition: transform .25s var(--pf-myk); }
.pr-bytte-lenke:hover svg { transform: translateX(3px); }

.pr-regning { margin: 0; padding: clamp(20px, 2.4vw, 28px); border: 1px solid #e4dcfb; border-radius: 22px; background: #fff; }
.pr-regning figcaption { margin-bottom: 10px; color: var(--pf-gra); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.pr-regning-steg li {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #efecf6;
	font-size: 15.5px;
}

.pr-regning-naar { justify-self: start; padding: 4px 10px; border-radius: 999px; background: #f1ebff; color: #6d28d9; font-size: 12.5px; font-weight: 800; }
.pr-regning-steg b { color: var(--pf-blekk); font-weight: 700; }
.pr-regning-belop { color: var(--pf-blekk); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-regning-belop--fradrag { padding: 4px 10px; border-radius: 999px; background: #d3f2e2; color: #0a7444; font-size: 14px; }

/* Fakturaene: den grønne toppen er fradraget, den lilla resten er det kunden betaler */
.pr-regning-fakturaer { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.pr-regning-faktura { display: grid; gap: 6px; justify-items: center; }
.pr-regning-faktura small { color: var(--pf-gra); font-size: 12px; font-weight: 700; }

.pr-regning-faktura i {
	position: relative;
	display: block;
	width: 100%;
	height: 92px;
	border-radius: 10px;
	background: #f1ebff;
	overflow: hidden;
}

.pr-regning-faktura i::before,
.pr-regning-faktura i::after { content: ''; position: absolute; inset-inline: 0; }
.pr-regning-faktura i::before { bottom: 0; height: calc(100% - var(--trekk)); background: #6712fb; }
.pr-regning-faktura i::after { top: 0; height: var(--trekk); border-bottom: 2px solid #fff; background: #34d399; }
.pr-regning-faktura.er-full i::before { height: 100%; background: #b9a0ff; }
.pr-regning-faktura.er-full i::after { display: none; }

.pr-regning-forklaring { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; color: var(--pf-blekk); font-size: 14px; font-weight: 700; }
.pr-regning-forklaring li { display: inline-flex; align-items: center; gap: 7px; }
.pr-regning-forklaring i { width: 12px; height: 12px; border-radius: 4px; }
.pr-regning-forklaring .er-fradrag { background: #34d399; }
.pr-regning-forklaring .er-betalt { background: #6712fb; }
.pr-regning-forklaring .er-full { background: #b9a0ff; }

.pr-regning-sum { margin-top: 12px; padding-top: 12px; border-top: 1px solid #efecf6; color: var(--pf-tekst); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.pr-regning-faktura i::before,
	.pr-regning-faktura i::after { transform: scaleY(0); transition: transform .7s var(--pf-myk) calc(.3s + var(--n) * .09s); }
	.pr-regning-faktura i::before { transform-origin: bottom; }
	.pr-regning-faktura i::after { transform-origin: top; transition-delay: calc(.75s + var(--n) * .09s); }
	.pr-bytte-kort.er-synlig .pr-regning-faktura i::before,
	.pr-bytte-kort.er-synlig .pr-regning-faktura i::after { transform: none; }
}

.pr-fakta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 32px; }
.pr-fakta li { display: inline-flex; align-items: center; gap: 8px; color: var(--pf-tekst); font-size: 15px; font-weight: 500; }
.pr-fakta span { display: grid; color: var(--pf-gront, #059669); font-size: 18px; }

@media (min-width: 900px) {
	.pr-bytte-kort { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}

@media (max-width: 599px) {
	.pr-regning-steg li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.pr-regning-belop { justify-self: start; }
	.pr-regning-fakturaer { gap: 5px; }
	.pr-regning-faktura i { height: 72px; border-radius: 8px; }
	.pr-fakta { flex-direction: column; align-items: flex-start; }
}

/* Hvem pakken er for, under navnet. To linjer høyt, så prisene står på linje */
.pr-start-for { min-height: 2.9em; margin-top: 6px; color: var(--pf-gra); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.pr-start-fra { color: var(--pf-gra); font-size: 15px; font-weight: 700; }

/* Laget i pakken: ansiktene til heltene, navnene og kredittene. Brukes av
   vekstpakkene (priser/pakkevalg.php) og startpakkene (priser/startpakker.php) */
.pv-lag { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 12px 8px 8px; border-radius: 16px; background: #f7f5fc; }
.pv-pakke--uthevet .pv-lag { background: #fff; }
.pv-lag-ansikter { display: flex; flex: none; }
.pv-lag-ansikter span { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -11px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: var(--flate, #f5f3ff); }
.pv-lag-ansikter span:first-child { margin-left: 0; }
/* Mascotene er brede, så de forstørres til ansiktet fyller sirkelen */
.pv-lag-ansikter img { width: 132%; max-width: none; height: auto; transform: translateY(10%); }
.pv-lag p { display: grid; min-width: 0; color: var(--pf-gra); font-size: 13px; line-height: 1.35; }
.pv-lag b { color: var(--pf-blekk); font-size: 14px; font-weight: 700; }
.pr-start-lag { margin: 14px 0 4px; }
.pr-start-kort--merke .pv-lag { background: #fff; }

/* Det som er med i alle pakkene i fanen, mellom kortene og sammenligningen */
.pr-alle { margin-top: 40px; }

.pr-alle-boks {
	padding: clamp(26px, 3vw, 40px);
	border: 1px solid #e9e6f2;
	border-radius: 28px;
	background: #fff;
}

.pr-alle-tittel {
	margin-bottom: 22px;
	color: var(--pf-blekk);
	font-family: var(--pf-tittel);
	font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
	font-weight: 800;
	text-align: center;
}

.pr-alle-liste { display: grid; gap: 14px 28px; }
.pr-alle-liste li { display: flex; align-items: flex-start; gap: 10px; color: var(--pf-tekst); font-size: 15.5px; line-height: 1.45; }
.pr-alle .pr-hake { background: #ecfdf5; color: #059669; }

.pr-alle-notis { margin-top: 20px; color: var(--pf-gra); font-size: 15px; text-align: center; text-wrap: pretty; }
.pr-alle-notis a { color: #6d28d9; font-weight: 600; }

/* Sammenligningen bak en knapp, under vekstpakkene og startpakkene
   (hh_plattform_sml_knapp i inc/plattform.php). En liten tabell som fylles
   med haker, teksten med antall punkter, og en pil i en sirkel som snur seg.
   Sammenligningen glir åpen og lukket i plattform.js, som setter
   data-tilstand med en gang det trykkes, så teksten og pilen bytter med en
   gang, også når den lukkes. */
.pv-sml { margin-top: 30px; }

.pv-sml > summary {
	display: flex;
	align-items: center;
	gap: 16px;
	width: fit-content;
	max-width: calc(100% - 32px);
	margin-inline: auto;
	padding: 10px 12px 10px 10px;
	border: 1.5px solid #e4dcfb;
	border-radius: 24px;
	background: #fff;
	color: var(--pf-blekk);
	text-align: left;
	list-style: none;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.pv-sml > summary::-webkit-details-marker { display: none; }
.pv-sml > summary:hover { border-color: #a78bfa; background: #fbf9ff; }
.pv-sml > summary:focus-visible { outline: 3px solid #a020f0; outline-offset: 3px; }

.pv-sml-ikon { display: grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #f1ebff; color: #6d28d9; }
.pv-sml-ikon svg { width: 34px; height: 34px; }
.pv-sml-strek { opacity: .45; }
.pv-sml-hake { color: #059669; stroke: #059669; stroke-width: 2.8; }

.pv-sml-tekst { display: grid; gap: 2px; }
.pv-sml-tekst b { font-size: 16.5px; font-weight: 800; line-height: 1.3; }
.pv-sml-tekst small { color: var(--pf-gra); font-size: 13.5px; font-weight: 500; }
.pv-sml-aapen { display: none; }
.pv-sml[open]:not([data-tilstand="lukket"]) .pv-sml-lukket { display: none; }
.pv-sml[open]:not([data-tilstand="lukket"]) .pv-sml-aapen { display: inline; }

.pv-sml-pil {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-left: 6px;
	border-radius: 50%;
	background: #f1ebff;
	color: #6d28d9;
	font-size: 20px;
	transition: background-color .2s ease, color .2s ease, transform .35s var(--pf-myk);
}

.pv-sml > summary:hover .pv-sml-pil { background: #6712fb; color: #fff; }
.pv-sml[open]:not([data-tilstand="lukket"]) .pv-sml-pil { transform: rotate(180deg); }
.pv-sml > .pf-sml { margin-top: 36px; }

@media (prefers-reduced-motion: no-preference) {
	/* Hakene tegnes en og en, står litt, og begynner på nytt */
	.pv-sml-hake { stroke-dasharray: 14; stroke-dashoffset: 14; }
	.pv-sml-hake--1 { animation: pv-hake-1 5s ease-out infinite; }
	.pv-sml-hake--2 { animation: pv-hake-2 5s ease-out infinite; }
	.pv-sml-hake--3 { animation: pv-hake-3 5s ease-out infinite; }
	.pv-sml > summary:hover .pv-sml-ikon svg { animation: pv-sml-dytt .6s var(--pf-myk); }
}

@keyframes pv-hake-1 { 0%, 4% { stroke-dashoffset: 14; } 14%, 86% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pv-hake-2 { 0%, 14% { stroke-dashoffset: 14; } 24%, 86% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pv-hake-3 { 0%, 24% { stroke-dashoffset: 14; } 34%, 86% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pv-sml-dytt { 40% { transform: rotate(-8deg) scale(1.08); } 75% { transform: rotate(4deg); } }

@media (max-width: 599px) {
	.pv-sml > summary { gap: 12px; }
	.pv-sml-ikon { width: 44px; height: 44px; border-radius: 14px; }
	.pv-sml-ikon svg { width: 30px; height: 30px; }
	.pv-sml-tekst b { font-size: 15.5px; }
	.pv-sml-pil { width: 36px; height: 36px; margin-left: 0; }
}

@media (min-width: 640px) {
	.pr-alle-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.pr-start-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 44px; }
	/* Den anbefalte strekker seg opp over de andre, så prisene står på linje */
	.pr-start-kort--merke { margin-top: -44px; }
	.pr-alle-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Navnet holder seg på en linje i tre kolonner, så prisene står på linje
	   (størrelsen settes med --hh-fs, som i assets/topp/typografi.css) */
	:root body .pr-start h3.pr-start-navn { --hh-fs: clamp(1.25rem, -.68rem + 3.4vw, 2.25rem); }
}

/* Smale kort i tre kolonner: plass til tre linjer om hvem pakken er for */
@media (min-width: 900px) and (max-width: 1023.98px) {
	.pr-start-for { min-height: 4.35em; }
}

@media (max-width: 899.98px) {
	.pr-start-liste { max-width: 568px; gap: 28px; }
	.pr-start-for { min-height: 0; }
}

@media (max-width: 767px) {
	.pf-sml-pris b.pr-sml-tekst { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.pr-vei-helter img { animation: none; }
	.pr-fane-valg--nettside:checked ~ .pr-fane--nettside,
	.pr-fane-valg--nettbutikk:checked ~ .pr-fane--nettbutikk { animation: none; }
	.pr-vei,
	.pr-start-kort,
	.pr-alltid-innhold { transition: none; }
}