/*
 * Plattformsiden (/plattform/): seksjonene plattform__*.
 *
 * Hvitt, rolig og stort, med bevegelse der den forklarer noe. Fargene er
 * merkevarens (blekk, gradienten) og appens (lilla #7C3AED og heltenes egne
 * farger). Alt er avgrenset til .pf, så resten av siden ikke påvirkes.
 *
 * Bevegelsen styres av plattform.js:
 *   [data-pf-vis]        får .er-synlig når elementet kommer på skjermen
 *   [data-pf-dato]       dagens dato i appen i toppen
 *   [data-pf-ord]        ordene får .er-lys etter hvert som man scroller
 *   [data-pf-steg-rot]   data-aktiv og --glod for helten midt på skjermen
 *   [data-pf-mo]         .er-spiller på filmen som vises, mens den er på skjermen
 *   [data-pf-sml]        sammenligningen: grupper, kun forskjeller og månedlig eller årlig pris
 *   [data-pf-utstilling] heltene: fanen som vises, og .er-paa mens utstillingen er på skjermen
 *   [data-pf-godkjenning] data-fase og er-* for godkjenningen, i loop
 *   [data-pf-horisontal] .er-horisontal og --p for raden som glir sidelengs
 */

@property --glod {
	syntax: '<color>';
	inherits: true;
	initial-value: #7c3aed;
}

.pf {
	--pf-blekk: #0a0f1f;
	--pf-tekst: #1d1d26;
	--pf-gra: #6e6e7c;
	--pf-gra-lys: #a1a1b3;
	--pf-flate: #f5f5f7;
	--pf-linje: #e8e8ee;
	--pf-natt: #05060c;
	--pf-lilla: #7c3aed;
	--pf-gront: #059669;
	--pf-grad: linear-gradient(90deg, #4f46ff 0%, #a020f0 34%, #ff1493 68%, #ff6a00 100%);
	--pf-myk: cubic-bezier(.2, .7, .2, 1);
	/* Titlene bruker Nunito som resten av nettstedet, med vekt 700 */
	--pf-tittel: var(--font-sans, 'Nunito'), system-ui, sans-serif;
	position: relative;
	padding-block: clamp(96px, 11vw, 168px);
	background: #fff;
	color: var(--pf-blekk);
	font-family: var(--font-sans, 'Nunito', system-ui, sans-serif);
	overflow-x: clip;
}

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

/* Nullstillingen har lav spesifisitet (:where), så klassene under vinner */
.pf :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.pf :where(p, h1, h2, h3, h4) { margin: 0; }

.pf-bredde {
	width: 100%;
	max-width: 1228px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* ---------- Typografi ---------- */

.pf-merke {
	display: block;
	margin-bottom: 18px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--pf-gra);
}

.pf-h1 {
	font-family: var(--pf-tittel);
	font-size: clamp(2.75rem, 1.15rem + 6vw, 6.75rem);
	line-height: 1.02;
	font-weight: 800;
	color: var(--pf-blekk);
	text-wrap: balance;
}

.pf-h2 {
	font-family: var(--pf-tittel);
	font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.5rem);
	line-height: 1.06;
	font-weight: 800;
	text-wrap: balance;
}

.pf-h2--stor { font-size: clamp(2.9rem, 1.3rem + 5.4vw, 6.5rem); }

.pf-h3 {
	font-family: var(--pf-tittel);
	font-size: clamp(2rem, 1.25rem + 2.3vw, 3.1rem);
	line-height: 1.08;
	font-weight: 800;
	text-wrap: balance;
}

.pf-h4 {
	font-family: var(--pf-tittel);
	font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
	line-height: 1.2;
	font-weight: 800;
	text-wrap: balance;
}

.pf-linje { display: block; }

/* Den uthevede delen av titlene står i samme farge som resten. Klassen er
   beholdt, så det er lett å gi den et eget uttrykk igjen. */
.pf-aksent { font: inherit; color: inherit; }

/* De delte seksjonene på siden (kundelogoene og FAQ-en) får samme titler som
   resten av siden. Filen lastes bare på sider med plattform-seksjoner, så andre
   sider beholder Instrument Serif. */
main .h-section { font-family: var(--font-sans, 'Nunito'), system-ui, sans-serif; font-weight: 700;}
main .serif-italic { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; }
main .h-section .text-gradient { background: none; color: inherit; -webkit-text-fill-color: currentColor; }

.pf-ingress {
	max-width: 40rem;
	margin: 24px auto 0;
	font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem);
	line-height: 1.5;
	color: var(--pf-gra);
	text-wrap: pretty;
}

.pf-hode {
	max-width: 900px;
	margin: 0 auto clamp(56px, 7vw, 96px);
	text-align: center;
}

.pf-bildetekst {
	margin-top: 28px;
	text-align: center;
	font-size: 13px;
	color: #8a8a98;
}

/* ---------- Knapper ---------- */

.pf-knapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 32px;
	margin-top: 40px;
}

.pf-knapp {
	display: inline-flex;
	align-items: center;
	padding: 17px 30px;
	border-radius: 999px;
	background: var(--pf-blekk);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .25s var(--pf-myk), box-shadow .25s var(--pf-myk), background-color .2s;
}

.pf-knapp:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 30px -10px rgba(10, 15, 31, .45);
}

.pf-knapp--lys { background: #fff; color: var(--pf-blekk); }
.pf-knapp--lys:hover { box-shadow: 0 12px 40px -8px rgba(160, 32, 240, .55); }

.pf-lenke {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 17px;
	font-weight: 600;
	color: #6d28d9;
	text-decoration: none;
}

.pf-lenke svg { transition: transform .25s var(--pf-myk); }
.pf-lenke:hover svg { transform: translateY(2px); }
.pf-natt .pf-lenke { color: #c4b5fd; }
.pf-natt .pf-lenke:hover svg,
.pf-avslutt .pf-lenke:hover svg { transform: translateX(3px); }

.pf-knapp:focus-visible,
.pf-lenke:focus-visible {
	outline: 3px solid #a020f0;
	outline-offset: 4px;
}

/* ---------- Nederst i venstre del av toppene ---------- */

/* Book en samtale, lenken ved siden av og linjen med ansiktene til teamet
   (template-parts/topp-handling.php) */
.pf-topp-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.pf-topp-knapper .pf-knapp { gap: 10px; }
.pf-topp-knapper .pf-knapp svg,
.pf-topp-knapper .pf-lenke svg { transition: transform .25s var(--pf-myk); }
.pf-topp-knapper .pf-knapp:hover svg,
.pf-topp-knapper .pf-lenke:hover svg { transform: translateX(3px); }

/* Linjen er inline-flex, så den følger tekstjusteringen i toppen: midt på i
   toppene som står midt på, til venstre ellers */
.pf-topp-trygg { display: inline-flex; vertical-align: top; align-items: center; gap: 12px; margin-top: 22px; color: var(--pf-gra); font-size: 14px; line-height: 1.4; }
.pf-topp-ansikter { display: inline-flex; flex: none; }

.pf-topp-ansikter img {
	width: 30px;
	height: 30px;
	margin-left: -9px;
	border: 2px solid #fff;
	border-radius: 50%;
	object-fit: cover;
}

.pf-topp-ansikter img:first-child { margin-left: 0; }

/* Stripen om teamet under pakkene (hh_plattform_team_stripe()) */
.pf-team-stripe { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 32px; color: var(--pf-gra); font-size: 15px; line-height: 1.45; }
.pf-team-stripe b { color: var(--pf-blekk); font-weight: 700; }
.pf-team-ansikter { display: flex; flex: none; }

.pf-team-ansikter img {
	width: 40px;
	height: 40px;
	margin-left: -10px;
	border: 3px solid #fff;
	border-radius: 50%;
	object-fit: cover;
}

.pf-team-ansikter img:first-child { margin-left: 0; }

@media (max-width: 639.98px) {
	.pf-team-stripe { flex-direction: column; gap: 12px; text-align: center; }
}

/* ---------- Fremvisning når elementer kommer på skjermen ---------- */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	[data-pf-vis]:not(.er-synlig) {
		opacity: 0;
		transform: translateY(28px);
	}
}

[data-pf-vis] {
	transition:
		opacity .9s var(--pf-myk) var(--d, 0s),
		transform 1s var(--pf-myk) var(--d, 0s);
}

/* ---------- Felles i app-illustrasjonene ---------- */

.pf-avatar {
	flex: none;
	width: 2em;
	height: 2em;
	padding: .18em;
	border-radius: 50%;
	background: #f3f1fa;
	object-fit: contain;
}

.pf-skriver {
	display: inline-flex;
	align-items: center;
	gap: .22em;
}

.pf-skriver i {
	width: .38em;
	height: .38em;
	border-radius: 50%;
	background: #a3a3b5;
	animation: pf-prikk 1.2s infinite ease-in-out;
}

.pf-skriver i:nth-child(2) { animation-delay: .15s; }
.pf-skriver i:nth-child(3) { animation-delay: .3s; }

@keyframes pf-prikk {
	0%, 60%, 100% { transform: translateY(0); opacity: .45; }
	30% { transform: translateY(-.25em); opacity: 1; }
}

@keyframes pf-opp {
	from { opacity: 0; transform: translateY(.8em); }
	to { opacity: 1; transform: none; }
}

/* ======================================================================
   Hero
   ====================================================================== */

/* Teksten til venstre og videoen av heltene til høyre. Bakgrunnen i videoen
   er jevn og vises som #fafcf9 i nettleseren, så heroen har samme farge og
   videoen får ingen kant. */
.pf-hero {
	padding-top: clamp(32px, 4.5vw, 72px);
	padding-bottom: clamp(56px, 7vw, 104px);
	background: #fafcf9;
	overflow: clip;
}

.pf-hero-rad {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
}

.pf-hero-tekst { position: relative; z-index: 2; text-align: left; }

.pf-hero .pf-h1 { font-size: clamp(2.3rem, .8rem + 3vw, 3.75rem); line-height: 1.06; }

.pf-hero .pf-ingress { max-width: 34rem; margin: 18px 0 0; color: #4a4a62; }

/* Videoen er 16:9, men heltene står i midten, så sidene skjæres bort og de
   blir større. De holder seg innenfor 25 til 74 % av bredden. Kantene tones
   ut, så videoen glir inn i bakgrunnen også om fargen avviker litt. */
.pf-hero-video { position: relative; }

.pf-hero-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	-webkit-mask-image:
		linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
		linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
		linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-composite: intersect;
}

/* Heltene på film: videoen fra den gamle toppen av forsiden, i en egen
   seksjon. Samme bakgrunn som videoen og uttonede kanter, så den glir inn.
   Heltene står midt i bildet, så sidene skjæres litt bort og de blir større. */
.pf-video { background: #fafcf9; }
.pf-video .pf-hode { margin-bottom: clamp(8px, 2vw, 24px); }

.pf-video-ramme { max-width: 640px; margin-inline: auto; }

.pf-video-ramme video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	-webkit-mask-image:
		linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%),
		linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%),
		linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
	mask-composite: intersect;
}

.pf-video .pf-knapper { margin-top: clamp(8px, 2vw, 24px); }

/* Kompakt, nederst på forsiden: filmen og teksten side om side */
.pf-video--kompakt { padding-block: clamp(40px, 5vw, 72px); }

.pf-video-rad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	max-width: 1200px;
}

.pf-video--kompakt .pf-video-ramme { max-width: 580px; margin: 0 0 0 auto; }
/* Tittelen i vanlig h2-størrelse på to linjer: overskriften og den uthevede delen */
.pf-video-linje { display: block; }
.pf-video--kompakt .pf-ingress { margin-top: 14px; }
.pf-video--kompakt .pf-knapper { justify-content: flex-start; gap: 12px; margin-top: 22px; }
.pf-video--kompakt .pf-knapp { gap: 8px; }
.pf-video--kompakt .pf-avslutt-folk { justify-content: flex-start; margin-top: 22px; }

@media (max-width: 759px) {
	.pf-video-rad { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
	.pf-video--kompakt .pf-video-ramme { max-width: 340px; margin: 0 auto; }
	.pf-video--kompakt .pf-knapper { justify-content: center; }
	.pf-video--kompakt .pf-avslutt-folk { justify-content: center; }
}

.pf-skjult {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@property --pf-vinkel {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.pf-adresse-skjema { max-width: 620px; margin: 36px auto 0; }

.pf-adresse-felt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 22px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 22px 50px -22px rgba(76, 29, 149, .35), 0 2px 6px rgba(10, 15, 31, .05);
	transition: box-shadow .3s ease, transform .3s var(--pf-myk);
}

/* Rammen i merkevarens gradient, som går rundt */
.pf-adresse-felt::before {
	content: '';
	position: absolute;
	inset: 0;
	padding: 1.5px;
	border-radius: inherit;
	background: conic-gradient(from var(--pf-vinkel), #4f46ff, #a020f0, #ff1493, #ff6a00, #4f46ff);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: pf-vinkel 6s linear infinite;
	pointer-events: none;
}

@keyframes pf-vinkel { to { --pf-vinkel: 360deg; } }

.pf-adresse-felt:focus-within {
	transform: translateY(-1px);
	box-shadow: 0 0 0 6px rgba(160, 32, 240, .12), 0 26px 60px -22px rgba(76, 29, 149, .45);
}

.pf-adresse-ikon { display: grid; flex: none; font-size: 20px; color: #a1a1b3; }

.pf-adresse-felt input {
	flex: 1;
	min-width: 0;
	padding: 12px 2px;
	border: 0;
	outline: 0;
	background: transparent;
	font: 500 18px/1.2 var(--font-sans, 'Nunito'), system-ui, sans-serif;
	color: var(--pf-blekk);
}

.pf-adresse-felt input::placeholder { color: #a1a1b3; }

.pf-adresse-knapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 15px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--pf-blekk);
	font: 700 16px/1 var(--font-sans, 'Nunito'), system-ui, sans-serif;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
}

.pf-adresse-knapp svg { transition: transform .25s var(--pf-myk); }
.pf-adresse-knapp:hover { background: #262640; }
.pf-adresse-knapp:hover svg { transform: translateX(3px); }

.pf-adresse-knapp:focus-visible {
	outline: 3px solid #a020f0;
	outline-offset: 3px;
}

.pf-adresse-melding {
	min-height: 1.5em;
	margin-top: 12px;
	font-size: 14.5px;
	color: var(--pf-gra);
}

.pf-adresse-melding.er-feil { color: #dc2626; }
.pf-adresse-melding.er-ok { color: var(--pf-gront); font-weight: 600; }

.pf-tillit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 18px;
	margin-top: 6px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--pf-gra);
}

.pf-tillit-helter { display: flex; padding-left: 8px; }

.pf-tillit-helter .pf-avatar {
	width: 32px;
	height: 32px;
	margin-left: -8px;
	padding: 3px;
	background: #fff;
	box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(10, 15, 31, .25);
}

.pf-tillit-punkt { display: inline-flex; align-items: center; gap: 18px; }
.pf-tillit-punkt + .pf-tillit-punkt::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #c9c9d6; }

.pf-hero-lenker {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	margin-top: 22px;
}

.pf-hero-lenker .pf-lenke { font-size: 16px; }
.pf-lenke--gra { color: var(--pf-gra); }
.pf-hero-lenker .pf-lenke:first-child:hover svg { transform: translateX(3px); }

.pf-pille {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
	padding: 8px 16px 8px 12px;
	border-radius: 999px;
	background: var(--pf-flate);
	font-size: 14px;
	font-weight: 600;
	color: var(--pf-tekst);
}

.pf-puls {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10b981;
}

.pf-puls::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid #10b981;
	animation: pf-puls 2s infinite var(--pf-myk);
}

@keyframes pf-puls {
	from { transform: scale(.6); opacity: .9; }
	to { transform: scale(1.8); opacity: 0; }
}

.pf-hero .pf-adresse-skjema { margin: 30px 0 0; }
.pf-hero .pf-tillit,
.pf-hero .pf-hero-lenker { justify-content: flex-start; }

.pf-hero .pf-adresse-knapp { background: var(--knapp); }
.pf-hero .pf-adresse-knapp:hover { background: var(--knapp-hover); }

.pf-spillknapp {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px 12px 22px;
	border: 1px solid rgba(124, 58, 237, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 16px;
	font-weight: 700;
	color: #3b1d78;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}

.pf-spillknapp:hover { border-color: rgba(124, 58, 237, .45); background: #fff; }
.pf-spillknapp-ikon { display: grid; font-size: 22px; color: #7c3aed; }

.pf-spillknapp:focus-visible {
	outline: 3px solid #a020f0;
	outline-offset: 3px;
}

.pf-hero .pf-hero-lenker { margin-top: 4px; }

/* Appen under teksten og videoen */
.pf-scene {
	/* flow-root: ellers slår marginen til appen seg sammen med denne */
	display: flow-root;
	position: relative;
	margin-top: clamp(40px, 6vw, 88px);
}

.pf-scene-inn {
	position: relative;
	/* Like bredt som innholdet i heroen (.pf-bredde) */
	max-width: 1228px;
	margin: 0 auto;
	padding-inline: 24px;
	container: pf-scene / inline-size;
}

.pf-vindu {
	font-size: clamp(5px, 1.52cqw, 16px);
	overflow: hidden;
	border-radius: 1.4em;
	background: #f5f5f5;
	color: #111827;
	box-shadow:
		0 3em 6em -2.5em rgba(76, 29, 149, .35),
		0 .6em 1.6em -.8em rgba(10, 15, 31, .12),
		0 0 0 1px rgba(124, 58, 237, .1);
	text-align: left;
	line-height: 1.35;
}

.pf-dash {
	display: grid;
	grid-template-columns: 15em minmax(0, 1fr);
	background: #f5f5f5;
	color: #111827;
	font-family: var(--font-sans, 'Nunito', system-ui, sans-serif);
	font-size: .78em;
	line-height: 1.35;
}

/* Menyen: et hvitt panel som flyter på det grå, som i appen (components/meny) */
.pf-dash-meny { padding: .625em 0 .625em .625em; }

.pf-dash-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid #eeecf4;
	border-radius: 1.125em;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 16, 40, .04), 0 .5em 1.5em rgba(20, 16, 40, .04);
}

.pf-dash-logo { display: flex; align-items: center; justify-content: space-between; padding: 1em .75em .5em 1em; }
.pf-dash-logo img { width: auto; height: 1.375em; }
.pf-dash-fold { display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: .5em; color: #8a86a0; }
.pf-dash-fold svg { width: 1em; height: 1em; }

.pf-dash-arbeid {
	display: flex;
	align-items: center;
	gap: .625em;
	margin: .375em .75em 0;
	padding: .5em .625em;
	border: 1px solid #eae5fb;
	border-radius: .75em;
	background: #f5f3ff;
}

.pf-dash-initialer {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.72em;
	height: 2.72em;
	border-radius: .72em;
	background: #7c3aed;
	color: #fff;
	font-size: .78125em;
	font-weight: 700;
}

.pf-dash-arbeid > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; font-size: .71875em; font-weight: 500; color: #8a86a0; }
.pf-dash-arbeid b { overflow: hidden; font-size: 1.174em; font-weight: 700; color: #1b1733; text-overflow: ellipsis; white-space: nowrap; }
.pf-dash-arbeid > svg { flex: none; width: .875em; height: .875em; margin-left: auto; color: #8a86a0; }

.pf-dash-ny {
	display: flex;
	align-items: center;
	gap: .57em;
	height: 3em;
	margin: .857em .857em .286em;
	padding: 0 .714em 0 1em;
	border-radius: .786em;
	background: #7c3aed;
	box-shadow: 0 .286em .857em rgba(124, 58, 237, .25);
	color: #fff;
	font-size: .875em;
	font-weight: 700;
}

.pf-dash-ny svg { width: 1.143em; height: 1.143em; }
.pf-dash-nav { display: flex; flex-direction: column; gap: .125em; padding: .5em .625em; }

/* Kontoen nederst i menyen (bare i presentasjonen) */
.pf-dash-konto { display: flex; align-items: center; gap: .65em; margin-top: auto; padding: .875em .875em 1em; border-top: 1px solid #f1eff6; }
.pf-dash-konto-bilde { display: grid; flex: none; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: linear-gradient(135deg, #ede9fe, #fce7f3); color: #6d28d9; font-size: .8em; font-weight: 700; }
.pf-dash-konto-navn { display: flex; flex-direction: column; min-width: 0; }
.pf-dash-konto-navn b { overflow: hidden; font-size: .875em; font-weight: 600; color: #111827; white-space: nowrap; text-overflow: ellipsis; }
.pf-dash-konto-navn span { font-size: .75em; color: #8a86a0; }
.pf-dash-konto-mer { display: flex; gap: .15em; margin-left: auto; padding: .3em; }
.pf-dash-konto-mer i { width: .25em; height: .25em; border-radius: 50%; background: #9ca3af; }

.pf-dash-gruppe {
	padding: 1.333em 1.143em .571em;
	font-size: .65625em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #a5a1ba;
}

.pf-dash-rad {
	position: relative;
	display: flex;
	align-items: center;
	gap: .815em;
	height: 2.815em;
	padding: 0 .74em 0 .889em;
	border-radius: .74em;
	font-size: .84375em;
	font-weight: 600;
	color: #4a4663;
}

.pf-dash-rad > svg { flex: none; width: 1.333em; height: 1.333em; }
.pf-dash-rad.er-aktiv { background: #f5f3ff; color: #7c3aed; font-weight: 700; }

.pf-dash-rad.er-aktiv::before {
	content: '';
	position: absolute;
	top: .593em;
	bottom: .593em;
	left: -.74em;
	width: .222em;
	border-radius: 0 .222em .222em 0;
	background: #7c3aed;
}

.pf-dash-rad.er-snart { color: #b4b0c6; }
.pf-dash-snart { margin-left: auto; padding: .19em .76em; border-radius: 999px; background: #f1f0f6; color: #8a86a0; font-size: .778em; font-style: normal; font-weight: 700; }

.pf-dash-merke {
	display: grid;
	place-items: center;
	min-width: 1.818em;
	height: 1.818em;
	margin-left: auto;
	padding: 0 .545em;
	border-radius: 999px;
	background: #7c3aed;
	color: #fff;
	font-size: .815em;
	font-style: normal;
	font-weight: 700;
}

.pf-dash-ansikter { display: flex; margin-left: auto; }
.pf-dash-ansikter .pf-avatar { width: 1.63em; height: 1.63em; margin-left: -.52em; background: #f5f3ff; box-shadow: 0 0 0 2px #fff; }
.pf-dash-ansikter .pf-avatar:first-child { margin-left: 0; }

/* Forsiden: hilsenen, teamet og verktøyene, så nøkkeltallene og radene */
.pf-dash-flate { min-width: 0; padding: 1.5em 2em 1.25em; }
.pf-dash-topp { display: flex; align-items: center; gap: 1.5em; margin-bottom: 1.25em; }
.pf-dash-hilsen { min-width: 0; }

.pf-dash-hilsen b {
	display: block;
	font-family: var(--pf-tittel);
	font-size: 2.125em;
	font-weight: 800;
	line-height: 1.15;
	color: #111827;
}

.pf-dash-hilsen span { display: block; margin-top: .444em; font-size: 1.125em; line-height: 1.4; color: #4b5563; }

.pf-dash-verktoy { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: .75em; margin-left: auto; }
.pf-dash-verktoy > div { display: flex; gap: .75em; }

.pf-dash-kreditter,
.pf-dash-bjelle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3em;
	border: 1px solid #eceaf2;
	border-radius: .75em;
	background: #fff;
}

.pf-dash-kreditter { gap: .5em; padding: 0 1.125em; color: #7c3aed; font-weight: 700; white-space: nowrap; }
.pf-dash-kreditter svg,
.pf-dash-bjelle svg { width: 1.25em; height: 1.25em; }
.pf-dash-bjelle { position: relative; width: 3em; color: #374151; }
.pf-dash-bjelle i { position: absolute; top: .5625em; right: .625em; width: .5625em; height: .5625em; border-radius: 50%; background: #7c3aed; box-shadow: 0 0 0 2px #fff; }

.pf-dash-maaned {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	min-width: 15.73em;
	height: 3.067em;
	padding: 0 1.067em;
	border: 1px solid #e5e7eb;
	border-radius: .8em;
	background: #fff;
	font-size: .9375em;
	font-weight: 500;
	color: #111827;
}

.pf-dash-maaned svg { flex: none; width: 1.133em; height: 1.133em; color: #6b7280; }
.pf-dash-maaned svg:last-child { width: .9em; height: .9em; margin-left: auto; }

/* Kortene */
.pf-dash-kort { min-width: 0; border: 1px solid #eceaf2; border-radius: 1em; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, .03); }
.pf-dash-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; margin-bottom: 1em; }
.pf-dash-tall { display: flex; align-items: flex-start; gap: 1em; padding: 1.25em 1.125em 1.125em; }
.pf-dash-ikon { display: grid; flex: none; place-items: center; width: 2.75em; height: 2.75em; border-radius: .8125em; background: #f3eeff; color: #7c3aed; }
.pf-dash-ikon svg { width: 1.3em; height: 1.3em; }
.pf-dash-tall > div { display: flex; flex-direction: column; min-width: 0; }
.pf-dash-etikett { font-size: .9375em; font-weight: 500; line-height: 1.25; color: #374151; }
.pf-dash-verdi { margin-top: .2em; font-size: 1.875em; font-weight: 700; line-height: 1.2;color: #111827; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-dash-verdi small { font-size: .5em; font-weight: 600; color: #6b7280; }
.pf-dash-endring { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .5em; margin-top: .5em; font-size: .875em; }
.pf-dash-endring b { display: inline-flex; align-items: center; gap: .3em; font-weight: 700; color: #059669; }
.pf-dash-endring b svg { width: .95em; height: .95em; }
.pf-dash-endring > span { color: #9ca3af; }

.pf-dash-rader { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); align-items: stretch; gap: 1em; }
.pf-dash-seksjon { padding: 1.25em 1.375em 1.375em; }
.pf-dash-seksjon-hode { display: flex; align-items: center; justify-content: space-between; gap: .75em; min-height: 2.25em; margin-bottom: .5em; }
.pf-dash-seksjon-hode > span:first-child { display: flex; align-items: center; gap: .6em; }
.pf-dash-seksjon-hode b { font-family: var(--pf-tittel); font-size: 1.25em; font-weight: 600;color: #111827; }

.pf-dash-pille {
	display: inline-flex;
	align-items: center;
	height: 2em;
	padding: 0 .77em;
	border-radius: .615em;
	background: #efe9ff;
	color: #6d28d9;
	font-size: .8125em;
	font-style: normal;
	font-weight: 600;
}

.pf-dash-alle { display: inline-flex; align-items: center; gap: .25em; font-size: .875em; font-weight: 600; color: #7c3aed; }
.pf-dash-alle svg { width: 1em; height: 1em; }

/* Trenger din godkjenning */
.pf-dash-forslag {
	display: grid;
	grid-template-columns: 4.5em minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1em;
	padding: .9em 0;
	border-top: 1px solid #f1eff6;
}

.pf-dash-seksjon-hode + .pf-dash-forslag { border-top: 0; }
.pf-dash-flis { display: grid; place-items: center; width: 4.5em; height: 4.5em; border-radius: 1em; background: var(--flate, #f3eeff); }
.pf-dash-flis img { width: 80%; height: auto; }
.pf-dash-forslag-tekst { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.pf-dash-meta { font-size: .8125em; color: #6b7280; }
.pf-dash-meta b { font-weight: 600; color: #374151; }
.pf-dash-forslag-tekst > b { font-size: 1em; font-weight: 700; line-height: 1.3; color: #111827; }
.pf-dash-forslag-tekst > span:last-child { display: -webkit-box; overflow: hidden; font-size: .875em; color: #6b7280; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.pf-dash-effekt {
	display: flex;
	flex-direction: column;
	gap: .15em;
	min-width: 7.25em;
	padding: .5em .875em;
	border: 1px solid #eceaf2;
	border-radius: .625em;
	background: #fcfcfe;
}

.pf-dash-effekt > span { font-size: .75em; color: #6b7280; }
.pf-dash-effekt b { display: inline-flex; align-items: center; gap: .3em; font-size: .875em; font-weight: 700; color: #059669; white-space: nowrap; }
.pf-dash-effekt b svg { width: .95em; height: .95em; }

.pf-dash-knapp {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	height: 3.03em;
	padding: 0 1.24em;
	border-radius: .69em;
	background: var(--knapp);
	color: #fff;
	font-size: .90625em;
	font-weight: 600;
	white-space: nowrap;
}

.pf-dash-knapp svg { width: 1.1em; height: 1.1em; }
.pf-dash-kontroll { display: flex; align-items: center; gap: .5em; padding-top: .9em; border-top: 1px solid #f1eff6; font-size: .8125em; color: #6b7280; }
.pf-dash-kontroll svg { flex: none; width: 1.2em; height: 1.2em; color: #7c3aed; }

/* Målkort */
.pf-dash-velg { display: inline-flex; align-items: center; gap: .4em; height: 2.6em; padding: 0 .85em; border: 1px solid #e5e7eb; border-radius: .7em; font-size: .8125em; font-weight: 500; color: #374151; }
.pf-dash-velg svg { width: 1em; height: 1em; color: #6b7280; }
.pf-dash-maal { padding: 1.125em 1.125em .375em; border: 1px solid #eceaf2; border-radius: .875em; }
.pf-dash-maal-navn { display: flex; align-items: center; gap: .6em; font-size: .9375em; font-weight: 600; color: #111827; }
.pf-dash-maal-navn svg { width: 1.87em; height: 1.87em; }
.pf-dash-maal-tall { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; margin-top: .8em; font-size: 1.05em; color: #374151; white-space: nowrap; }
.pf-dash-maal-tall b { font-size: 1.25em; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }
.pf-dash-maal-tall em { font-size: .7em; font-style: normal; color: #6b7280; }
.pf-dash-maal-spor { display: block; height: .5625em; margin: .75em 0 .9em; overflow: hidden; border-radius: 99px; background: #eeeaf8; }
.pf-dash-maal-spor b { display: block; width: 64%; height: 100%; border-radius: inherit; background: #7c3aed; transform-origin: left; }
.pf-dash-maal-rad { display: flex; justify-content: space-between; gap: .5em; padding: .65em 0; border-top: 1px solid #f1eff6; font-size: .90625em; color: #6b7280; }
.pf-dash-maal-rad b { font-weight: 700; color: #059669; }

.pf-dash-callout {
	display: flex;
	gap: .6em;
	margin-top: .875em;
	padding: .875em 1em;
	border: 1px solid #e9e2ff;
	border-radius: .75em;
	background: #f7f4ff;
	font-size: .875em;
	line-height: 1.4;
	color: #6b7280;
}

.pf-dash-callout svg { flex: none; width: 1.15em; height: 1.15em; margin-top: .1em; color: #7c3aed; }
.pf-dash-callout b { display: block; font-size: 1.036em; color: #111827; }

/* Teamet ditt jobber med og Siste aktivitet, som på oversikten i appen
   (Teamarbeid.tsx og Aktivitet.tsx). Står bare i presentasjonen */
.pf-dash-rader--team { margin-top: 1em; }
.pf-dash-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.pf-dash-tk { display: flex; flex-direction: column; gap: .875em; min-width: 0; padding: 1.125em; border: 1px solid #eceaf2; border-radius: 1em; background: #fff; }
.pf-dash-tk-topp { display: flex; align-items: center; gap: .75em; min-width: 0; }
.pf-dash-flis--liten { width: 2.75em; height: 2.75em; border-radius: .75em; }
.pf-dash-flis--mini { width: 2.375em; height: 2.375em; border-radius: .625em; }
.pf-dash-tk-hvem { display: grid; flex: 1; gap: .05em; min-width: 0; }
.pf-dash-tk-hvem b { font-size: .9375em; color: #111827; }
.pf-dash-tk-hvem span { overflow: hidden; font-size: .78em; color: #6b7280; white-space: nowrap; text-overflow: ellipsis; }
.pf-dash-tk-status { display: inline-flex; flex: none; align-items: center; gap: .4em; height: 1.65em; padding: 0 .65em; border-radius: 99em; font-size: .75em; font-weight: 700; white-space: nowrap; }
.pf-dash-tk-status i { width: .45em; height: .45em; border-radius: 50%; background: currentColor; }
.pf-dash-tk-status--ledig { background: #e8f7ef; color: #047857; }
.pf-dash-tk-status--venter { background: #fef3c7; color: #b45309; }
.pf-dash-tk-status--jobber { background: #f3eeff; color: #6d28d9; }
.pf-dash-tk-status--jobber i { animation: pf-dash-puls 1.6s ease-in-out infinite; }
@keyframes pf-dash-puls { 50% { opacity: .35; } }
.pf-dash-tk-innhold { display: grid; gap: .25em; min-width: 0; }
.pf-dash-tk-innhold b,
.pf-dash-tk-innhold span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pf-dash-tk-innhold b { font-size: 1em; font-weight: 700; line-height: 1.35; color: #111827; }
.pf-dash-tk-innhold span { font-size: .84em; line-height: 1.5; color: #6b7280; }
.pf-dash-tk-innhold .pf-dash-tk-fremdrift { display: flex; align-items: center; gap: .75em; margin-top: .45em; font-size: .78em; color: #6b7280; font-variant-numeric: tabular-nums; }
.pf-dash-tk-fremdrift i { flex: 1; height: .5em; overflow: hidden; border-radius: 99em; background: #efedf5; }
.pf-dash-tk-fremdrift b { display: block; width: var(--p); height: 100%; border-radius: 99em; background: #7c3aed; }
.pf-dash-tk-bunn { display: flex; align-items: center; justify-content: space-between; gap: .75em; margin-top: auto; padding-top: .75em; border-top: 1px solid #f1eff6; }
.pf-dash-tk-meta { display: inline-flex; align-items: center; gap: .4em; font-size: .8125em; color: #6b7280; white-space: nowrap; }
.pf-dash-tk-handling { display: inline-flex; align-items: center; gap: .25em; margin-left: auto; font-size: .84em; font-weight: 700; color: #7c3aed; white-space: nowrap; }
.pf-dash-tk svg { width: 1em; height: 1em; }

.pf-dash-aktivitet { margin: 0; padding: 0; list-style: none; }
.pf-dash-akt { position: relative; display: grid; grid-template-columns: .625em 2.375em minmax(0, 1fr) auto; align-items: start; gap: .75em; padding: .44em 0; }
.pf-dash-akt > i { position: relative; width: .625em; height: .625em; margin-top: .875em; border-radius: 50%; background: #7c3aed; }
.pf-dash-akt--forslag > i { background: #f59e0b; }
/* Linjen mellom prikkene */
.pf-dash-akt:not(:last-child)::before { content: ''; position: absolute; top: 2.1em; bottom: -.6em; left: .25em; width: 2px; background: #eceaf2; }
.pf-dash-akt-tekst { display: flex; flex-direction: column; min-width: 0; }
.pf-dash-akt-tekst b { font-size: .875em; font-weight: 600; line-height: 1.35; color: #111827; }
.pf-dash-akt-tekst span { overflow: hidden; font-size: .8125em; color: #6b7280; white-space: nowrap; text-overflow: ellipsis; }
.pf-dash-akt em { margin-top: .15em; font-size: .8125em; font-style: normal; color: #9ca3af; white-space: nowrap; }

/* Bevegelsen: forslagene kommer inn, målet fylles, og bjellen har et nytt varsel */
@media (prefers-reduced-motion: no-preference) {
	.er-synlig .pf-dash-forslag { animation: pf-opp .5s var(--pf-myk) var(--d, .7s) both; }
	.er-synlig .pf-dash-maal-spor b { animation: pf-dash-fyll 1.4s var(--pf-myk) .9s both; }
	.er-synlig .pf-dash-bjelle i { animation: pf-dash-prikk 2.4s ease-in-out 1.6s infinite; }
}

@keyframes pf-dash-fyll { from { transform: scaleX(0); } }

@keyframes pf-dash-prikk {
	0%, 70%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(124, 58, 237, 0); }
	80% { box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(124, 58, 237, .25); }
}

/* Fordelene under appen */
.pf-fordeler {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 1100px;
	margin: clamp(28px, 3.5vw, 44px) auto 0;
}

.pf-fordeler li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 0 0 1px rgba(124, 58, 237, .08), 0 18px 40px -28px rgba(76, 29, 149, .35);
}

.pf-fordel-ikon {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: #f3eefe;
	font-size: 24px;
	color: #7c3aed;
}

.pf-fordeler li > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--pf-gra);
}

.pf-fordeler b {
	font-family: var(--pf-tittel);
	font-size: 19px;
	font-weight: 800;
	color: var(--pf-blekk);
}

/* Smalt vindu: menyen skjules, og innholdet tegnes større */
@container pf-scene (max-width: 760px) {
	.pf-vindu { font-size: 2.15cqw; }
	.pf-dash { grid-template-columns: minmax(0, 1fr); font-size: .86em; }
	.pf-dash-meny,
	.pf-dash-verktoy,
	.pf-dash-effekt { display: none; }
	.pf-dash-flate { padding: 1.4em 1.4em 1.2em; }
	.pf-dash-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pf-dash-rader { grid-template-columns: minmax(0, 1fr); }
	.pf-dash-forslag { grid-template-columns: 4em minmax(0, 1fr) auto; }
}

@media (max-width: 899px) {
	/* Smal skjerm: teksten først, så videoen under */
	.pf-hero-rad { grid-template-columns: minmax(0, 1fr); }
	.pf-hero-video { max-width: 520px; width: 100%; margin-inline: auto; }
	.pf-fordeler { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-inline: 16px; }
	.pf-fordeler li { padding: 16px 18px; }
}

/* ======================================================================
   Kjenner du deg igjen
   ====================================================================== */

.pf-problem { padding-top: 0; }
.pf-problem--hode { padding-top: clamp(40px, 5vw, 80px); }

.pf-utsagn-rom { position: relative; height: 230vh; }

.pf-utsagn-klebe {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding-block: 80px;
}

.pf-smal { max-width: 1060px; }

.pf-utsagn {
	font-family: var(--pf-tittel);
	font-size: clamp(1.9rem, 1rem + 3.4vw, 4rem);
	line-height: 1.14;
	font-weight: 800;
	text-wrap: pretty;
}

.pf-ord {
	color: rgba(10, 15, 31, .13);
	transition: color .4s ease;
}

.pf-ord.er-lys { color: var(--pf-blekk); }

/* De tre siste ordene som har lyst opp, har fargene fra logoen, som en liten
   hale etter lesingen: rosa ytterst, så lilla. Resten er mørke. */
.pf-ord.er-lys[data-hale="1"] { color: #ff1493; }
.pf-ord.er-lys[data-hale="2"] { color: #a020f0; }
.pf-ord.er-lys[data-hale="3"] { color: #6712fb; }

@media (scripting: none), (prefers-reduced-motion: reduce) {
	.pf-ord { color: var(--pf-blekk); }
	.pf-utsagn-rom { height: auto; }
	.pf-utsagn-klebe { position: static; min-height: 0; }
}

.pf-pk-liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

/* Ett kort per helt, på heltens pastellfarge */
.pf-pk {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: clamp(26px, 3vw, 38px);
	overflow: hidden;
	border-radius: 30px;
	background: var(--flate, var(--pf-flate));
	transition: transform .5s var(--pf-myk), box-shadow .5s ease;
}

.pf-pk:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px color-mix(in oklab, var(--aksent, #7c3aed) 55%, transparent); }
.pf-pk.er-bred { grid-column: span 2; }

.pf-pk-topp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-right: 96px; }
.pf-pk-hvem { display: flex; flex-direction: column; gap: 1px; font-size: 14px; font-weight: 600; color: color-mix(in oklab, var(--aksent, #7c3aed) 70%, #1f2937); }
.pf-pk-hvem b { font-family: var(--pf-tittel); font-size: 20px; font-weight: 800;color: var(--pf-blekk); }

.pf-pk-snart {
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .75);
	font-size: 12px;
	font-weight: 700;
	color: color-mix(in oklab, var(--aksent, #7c3aed) 80%, #111827);
}

.pf-pk-maskot {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 96px;
	height: auto;
	filter: drop-shadow(0 12px 14px color-mix(in oklab, var(--aksent, #7c3aed) 30%, transparent));
	transition: transform .5s var(--pf-myk);
}

.pf-pk:hover .pf-pk-maskot { transform: rotate(-6deg) scale(1.06); }

.pf-pk-problem {
	font-family: var(--pf-tittel);
	font-size: clamp(1.3rem, 1rem + .9vw, 1.75rem);
	line-height: 1.2;
	font-weight: 800;
	color: var(--pf-tekst);
	text-wrap: balance;
}

.pf-pk.er-bred .pf-pk-problem { max-width: 22em; font-size: clamp(1.5rem, 1rem + 1.3vw, 2.1rem); }

.pf-pk-svar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid color-mix(in oklab, var(--aksent, #0a0f1f) 18%, transparent);
}

.pf-pk-sporsmal {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .8);
	font-size: 13px;
	font-weight: 700;
	color: color-mix(in oklab, var(--aksent, #7c3aed) 80%, #111827);
}

.pf-pk-svar p { font-size: 16px; line-height: 1.55; color: #3f3f4b; }
.pf-pk.er-bred .pf-pk-svar p { max-width: 40rem; }

/* Brede kort: maskoten stor til høyre, teksten til venstre for den */
.pf-pk.er-bred { padding-right: clamp(200px, 22vw, 300px); }
.pf-pk.er-bred .pf-pk-topp { padding-right: 0; }

.pf-pk.er-bred .pf-pk-maskot {
	top: 50%;
	right: clamp(28px, 3.5vw, 52px);
	width: clamp(150px, 15vw, 220px);
	transform: translateY(-50%);
}

.pf-pk.er-bred:hover .pf-pk-maskot { transform: translateY(-50%) rotate(-6deg) scale(1.06); }

@media (max-width: 1099px) {
	.pf-pk-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pf-avslutning {
	max-width: 46rem;
	margin: clamp(64px, 8vw, 104px) auto 0;
	text-align: center;
	font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
	line-height: 1.3;
	font-weight: 600;
	text-wrap: balance;
}

/* ======================================================================
   Spørsmålene vi svarer på
   ====================================================================== */

.pf-spm { --aksent: #7c3aed; background: linear-gradient(180deg, #fff 0%, #f6f4ff 18%, #f6f4ff 82%, #fff 100%); }

.pf-spm-rom {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	grid-template-areas: 'scene steg';
	column-gap: clamp(32px, 5vw, 80px);
}

.pf-spm-scene {
	grid-area: scene;
	position: sticky;
	top: max(80px, calc(50vh - min(300px, 50vh - 96px) + 20px));
	align-self: start;
}

/* Filmene ligger i samme rute, og den for spørsmålet til høyre vises */
.pf-mo-scene {
	display: grid;
	width: min(100%, calc((100vh - 190px) * 10 / 9));
	margin-inline: auto;
}

.pf-mo-vert { container: pf-mo / inline-size; }

.pf-mo-scene > .pf-mo-vert {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	transform: translateY(28px) scale(.97);
	transition: opacity .5s var(--pf-myk), transform .7s var(--pf-myk), visibility 0s linear .5s;
}

.pf-mo-scene > .pf-mo-vert.er-aktiv {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--pf-myk) .12s, transform .8s var(--pf-myk) .12s, visibility 0s;
}

.pf-mo-vert--inline,
.pf-spm-bildetekst-liten { display: none; }

/* Kortet rundt hver film */
.pf-mo {
	--t: 8s;
	--pf-mo-fart: cubic-bezier(.45, .05, .35, 1);
	display: flex;
	flex-direction: column;
	gap: 1.2em;
	aspect-ratio: 10 / 9;
	padding: 1.9em 2.1em 2.1em;
	border-radius: 1.8em;
	background: #fff;
	color: #111827;
	font-size: clamp(9px, 2.35cqw, 16px);
	line-height: 1.3;
	box-shadow: 0 3em 6em -3.2em rgba(76, 29, 149, .4), 0 0 0 1px rgba(124, 58, 237, .1);
	overflow: hidden;
}

.pf-mo--tiltak { --t: 9s; }

.pf-mo-topp { display: flex; align-items: center; gap: .75em; }

.pf-mo-ikon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5em;
	height: 2.5em;
	border-radius: .85em;
	background: #f3f0ff;
	color: #7c3aed;
}

.pf-mo-ikon svg { width: 1.2em; height: 1.2em; }
.pf-mo-kat { font-size: .82em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; }
.pf-mo-topp .pf-chip { margin-left: auto; font-size: .86em; }

.pf-mo-flate {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 1.3em;
	min-height: 0;
}

.pf-mo-flate > svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf-mo svg * { transform-box: fill-box; transform-origin: center; }
.pf-mo-rutenett line { stroke: #eef0f5; stroke-width: 1.5; }
.pf-mo-grunn { stroke: #e2e5ec; stroke-width: 2; }
.pf-mo-akse text { font-size: 15px; font-weight: 600; fill: #9ca3af; }

.pf-mo-tall { display: flex; gap: 2.6em; }
.pf-mo-tall > div { display: flex; flex-direction: column; gap: .3em; }
.pf-mo-tall b { font-family: var(--pf-tittel); font-size: 3.1em; font-weight: 800; line-height: 1;font-variant-numeric: tabular-nums; }
.pf-mo-tall > div > span { font-size: .92em; color: #6b7280; }
.pf-mo-merknad { font-size: .86em; line-height: 1.45; color: #6b7280; }
.pf-mo-ledd { font-size: .72em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9ca3af; }

/* Tall som teller opp. @property gjør at tallet kan animeres */
@property --pf-n {
	syntax: '<integer>';
	inherits: false;
	initial-value: 0;
}

.pf-mo-teller { --pf-n: var(--mal); counter-reset: pfn var(--pf-n); }
.pf-mo-teller::before { content: counter(pfn); }

.pf-chip {
	flex: none;
	padding: .38em .75em;
	border-radius: .6em;
	font-size: .74em;
	font-weight: 700;
	white-space: nowrap;
}

.pf-chip--gul { background: #fef3c7; color: #a16207; }
.pf-chip--groenn { background: #dcfce7; color: #15803d; }
.pf-chip--blaa { background: #dbeafe; color: #1d4ed8; }
.pf-chip--lilla { background: #ede9fe; color: #6d28d9; }
.pf-chip--graa { background: #f3f4f6; color: #4b5563; }

/* Vekst: salget mot årsmålet */
.pf-v-vindu { fill: rgba(124, 58, 237, .08); }
.pf-v-vindu-tekst { font-size: 15px; font-weight: 700; fill: #7c3aed; }
.pf-v-plan { stroke: #c4b5fd; stroke-width: 2.5; stroke-dasharray: 7 7; }
.pf-v-maal { fill: #fff; stroke: #7c3aed; stroke-width: 3; }
.pf-v-maal-tekst { font-size: 15px; font-weight: 700; fill: #7c3aed; }
.pf-v-linje { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.pf-v-gap { stroke: #d97706; stroke-width: 3; stroke-linecap: round; }
.pf-v-gap-tekst { font-size: 16px; font-weight: 700; fill: #b45309; }
.pf-v-prikk { fill: #db2777; stroke: #fff; stroke-width: 3; }
.pf-v-ring { fill: none; stroke: #db2777; stroke-width: 2; opacity: 0; }
.pf-v-tall-2 b { color: #7c3aed; }

/* Salgstrakten: en trakt på siden med bred munning, buede sider og en tut.
   Kulene renner inn, de fleste faller fra og blir grå, noen drypper ut av
   lekkasjen i halsen (gule), og salgene blir grønne dråper fra tuten.
   Tallene for hvert ledd står under, med andelen som gikk videre mellom. */
.pf-t-linje { font-size: 1.15em; color: #4b5563; }
.pf-t-linje b { font-weight: 700; color: #111827; }
.pf-t2 { display: flex; flex-direction: column; gap: .4em; }
.pf-t2-tegning { display: block; width: 100%; height: auto; overflow: visible; }

.pf-t2-s1 { stop-color: #f5f3ff; }
.pf-t2-s2 { stop-color: #ede9fe; }
.pf-t2-s3 { stop-color: #fce7f3; }
.pf-t2-k1 { stop-color: #a78bfa; }
.pf-t2-k2 { stop-color: #db2777; }
.pf-t2-kropp { stroke-width: 2.5; stroke-linejoin: round; }
.pf-t2-tut { fill: #db2777; }
.pf-t2-skiller line { stroke: #fff; stroke-width: 3; }
.pf-t2-sprekk { fill: none; stroke: #f59e0b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.pf-t2-kule { fill: var(--f); stroke: #fff; stroke-width: 2; }
.pf-t2-kule--lilla { --f: #8b5cf6; }
.pf-t2-kule--fiolett { --f: #a78bfa; }
.pf-t2-kule--rosa { --f: #ec4899; }
.pf-t2-kule--indigo { --f: #6366f1; }
.pf-t2-draape { fill: #22c55e; }

/* Leddene under trakten, midt under hver femdel av tegningen */
.pf-t2-ledd { position: relative; height: 3.3em; }

.pf-t2-steg {
	position: absolute;
	top: 0;
	left: calc(10% + var(--i) * 20%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .25em;
	transform: translateX(-50%);
	white-space: nowrap;
}

.pf-t2-tall { font-family: var(--pf-tittel); font-size: 1.45em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #111827; }
.pf-t2-navn { font-size: .78em; font-weight: 600; color: #6b7280; }
.er-salg .pf-t2-tall { color: #16a34a; }

/* Andelen som gikk videre står på skillet mellom to ledd */
.pf-t2-konv {
	position: absolute;
	top: .2em;
	left: calc(var(--i) * 20%);
	padding: .2em .5em;
	border-radius: 999px;
	background: #f3f0ff;
	font-size: .74em;
	font-weight: 700;
	color: #6d28d9;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	transform: translateX(-50%);
}

.pf-t2-konv.er-lekk { background: #fef3c7; outline: 1px solid #fcd34d; outline-offset: -1px; color: #b45309; }

.pf-t-funn {
	padding: .9em 1.1em;
	border: 1px solid #fde68a;
	border-radius: 1em;
	background: #fffbeb;
	font-size: .95em;
	color: #78350f;
}

.pf-t-funn b { color: #92400e; }

/* Lønnsomhet: kanalene mot tersklene */
.pf-ka { display: flex; flex-direction: column; gap: .7em; }
.pf-ka-hode { display: flex; flex-direction: column; gap: .25em; margin-bottom: .3em; }
.pf-ka-hode b { font-family: var(--pf-tittel); font-size: 1.45em; font-weight: 800; }
.pf-ka-hode span { font-size: .9em; color: #6b7280; }

.pf-ka-rad {
	display: grid;
	grid-template-columns: 9.4em minmax(0, 1fr) 6.6em;
	align-items: center;
	gap: 1em;
	min-height: 3.5em;
}

.pf-ka-rad > .pf-chip { justify-self: start; font-size: .84em; }
.pf-ka-skala { min-height: 0; }
.pf-ka-soner { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; font-size: .7em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pf-ka-soner em { font-style: normal; text-align: center; }
.pf-ka-soner em:nth-child(1) { color: #e11d48; }
.pf-ka-soner em:nth-child(2) { color: #d97706; }
.pf-ka-soner em:nth-child(3) { color: #2563eb; }
.pf-ka-soner em:nth-child(4) { color: #16a34a; }
.pf-ka-navn { display: flex; align-items: center; gap: .6em; font-size: .95em; font-weight: 600; }
.pf-ka-navn i { flex: none; width: .7em; height: .7em; border-radius: 50%; background: var(--farge); }
.pf-ka-navn > span { display: flex; flex-direction: column; }
.pf-ka-navn small { font-size: .8em; font-weight: 600; color: #9ca3af; }
.pf-ka-navn small.er-skaping { color: #a855f7; }

.pf-ka-spor {
	position: relative;
	height: 2.3em;
	border-radius: .7em;
	background: linear-gradient(90deg, #fff1f2 0 33.33%, #fffbeb 0 50%, #eff6ff 0 66.67%, #f0fdf4 0);
}

.pf-ka-stolpe {
	position: absolute;
	top: .45em;
	bottom: .45em;
	left: .45em;
	width: calc(var(--v) / 6 * 100% - .45em);
	border-radius: .45em;
	transform-origin: left center;
}

.pf-ka-stolpe--groenn { background: linear-gradient(90deg, #4ade80, #16a34a); }
.pf-ka-stolpe--blaa { background: linear-gradient(90deg, #60a5fa, #2563eb); }
.pf-ka-stolpe--gul { background: linear-gradient(90deg, #fcd34d, #d97706); }

.pf-ka-spor em {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--v) / 6 * 100% + .5em);
	display: flex;
	align-items: center;
	font-size: .95em;
	font-style: normal;
	font-weight: 700;
}

.pf-ka-trend {
	display: flex;
	align-items: center;
	gap: .7em;
	height: 2.3em;
	padding-inline: .7em;
	border-radius: .7em;
	background: #faf5ff;
	box-shadow: inset 0 0 0 1.5px #e9d5ff;
}

.pf-ka-trend svg { flex: none; width: 5em; height: 1em; overflow: visible; }
.pf-ka-trend path { fill: none; stroke: #a855f7; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.pf-ka-trend em { overflow: hidden; font-size: .8em; font-style: normal; font-weight: 700; color: #7e22ce; text-overflow: ellipsis; white-space: nowrap; }

/* Smalt kort: merkelappen på hver kanal sier det sonene sier */
@container pf-mo (max-width: 480px) {
	.pf-ka-rad { grid-template-columns: 7.6em minmax(0, 1fr) 5.8em; gap: .7em; }
	.pf-ka-skala,
	.pf-ka-trend em { display: none; }
	.pf-ka-trend svg { width: 100%; }
}

/* Etterspørsel: skapingen kommer igjen i merkesøket */
.pf-e-etikett { font-size: 15px; font-weight: 700; fill: #6b7280; }
.pf-e-stolpe { fill: #a78bfa; transform-origin: center bottom; }
.pf-e-pil { fill: none; stroke: #7c3aed; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; }
.pf-e-pilspiss { fill: none; stroke: #7c3aed; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pf-e-pil-tekst { font-size: 15px; font-weight: 700; fill: #7c3aed; }
.pf-e-linje { fill: none; stroke: #10b981; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.pf-e-prikk { fill: #10b981; stroke: #fff; stroke-width: 3; }
.pf-e-endring { font-size: 20px; font-weight: 700; fill: #059669; }
.pf-e-tall b { color: #059669; }

/* Målkortet: ukene får farge en etter en */
.pf-m {
	position: relative;
	display: grid;
	grid-template-columns: 9.6em repeat(6, minmax(0, 1fr));
	align-items: center;
	gap: .45em;
	margin-top: 1.6em;
}

.pf-m-uke { display: flex; align-items: center; justify-content: center; gap: .35em; font-size: .78em; font-weight: 700; color: #9ca3af; }
.pf-m-uke.er-pagar { color: #6b7280; }
.pf-m-uke.er-pagar i { width: .55em; height: .55em; border-radius: 50%; background: #9ca3af; }
.pf-m-navn { font-size: .84em; font-weight: 600; line-height: 1.2; color: #374151; }

.pf-m-celle {
	display: grid;
	place-items: center;
	height: 2.7em;
	border-radius: .65em;
	background: #f8fafc;
	color: #94a3b8;
	font-size: .95em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pf-m-celle.er-ok { background: #dcfce7; color: #15803d; }
.pf-m-celle.er-av { background: #ffe4e6; color: #be123c; }
.pf-m-celle.er-pagar { background: #fff; color: #6b7280; outline: 1.5px dashed #cbd5e1; outline-offset: -1.5px; }

.pf-m-nytt {
	position: absolute;
	top: -.4em;
	bottom: -.4em;
	left: calc(9.6em + .45em + 3 * ((100% - 12.3em) / 6 + .45em) - .225em);
	border-left: 2.5px solid #7c3aed;
}

.pf-m-nytt em {
	position: absolute;
	bottom: 100%;
	left: 0;
	translate: -50% -.3em;
	padding: .3em .7em;
	border-radius: .6em;
	background: #7c3aed;
	color: #fff;
	font-size: .74em;
	font-style: normal;
	font-weight: 700;
	white-space: nowrap;
}

/* Tiltak og datakilder: fra avvik til tiltak og test */
.pf-ti { display: flex; flex-direction: column; gap: 1em; }
.pf-ti-flyt { display: grid; grid-template-columns: minmax(0, 1fr) 3.4em minmax(0, 1.3fr); align-items: stretch; }

.pf-ti-kort {
	display: flex;
	flex-direction: column;
	gap: .35em;
	padding: 1em 1.15em;
	border-radius: 1.1em;
	background: #f8f7fc;
	box-shadow: inset 0 0 0 1px #ede9fe;
}

.pf-ti-avvik b { font-family: var(--pf-tittel); font-size: 2.4em; font-weight: 800; line-height: 1; color: #e11d48; }
.pf-ti-avvik > span:last-child { font-size: .84em; color: #6b7280; }
.pf-ti-tiltak > b,
.pf-ti-test > b { font-size: 1.05em; font-weight: 700; }
.pf-ti-tiltak .pf-chip { align-self: flex-start; margin-top: auto; }

.pf-ti-kobling { position: relative; align-self: center; height: 2px; margin-inline: .5em; background: #ddd6fe; transform-origin: left center; }

.pf-ti-kobling::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: .6em;
	height: .6em;
	border-top: 2px solid #a78bfa;
	border-right: 2px solid #a78bfa;
	translate: 0 -50%;
	rotate: 45deg;
}

.pf-ti-kobling i {
	position: absolute;
	top: 50%;
	left: 0;
	width: .7em;
	height: .7em;
	margin-top: -.35em;
	border-radius: 50%;
	background: #7c3aed;
	box-shadow: 0 0 0 .3em rgba(124, 58, 237, .18);
	opacity: 0;
}

.pf-ti-test { gap: .55em; }

.pf-ti-variant {
	display: grid;
	grid-template-columns: 1.4em minmax(0, 1fr) 3.2em 4.6em;
	align-items: center;
	gap: .7em;
	font-weight: 700;
}

.pf-ti-variant > i { height: 1.3em; border-radius: .5em; background: #eef0f5; overflow: hidden; }
.pf-ti-variant > i b { display: block; width: var(--v); height: 100%; border-radius: .5em; background: #a5b4fc; transform-origin: left center; }
.pf-ti-variant.er-vinner > i b { background: linear-gradient(90deg, #4ade80, #16a34a); }
.pf-ti-variant em { font-style: normal; font-variant-numeric: tabular-nums; }
.pf-ti-variant .pf-chip { justify-self: start; }

.pf-ti-kilder { display: flex; flex-direction: column; gap: .5em; }
.pf-ti-kilder > div { display: flex; flex-wrap: wrap; gap: .45em; }

.pf-ti-kilder > div > span {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .45em .8em;
	border-radius: 999px;
	font-size: .84em;
	font-weight: 700;
}

.pf-ti-kilder i { width: .5em; height: .5em; border-radius: 50%; }
.pf-ti-kilder .er-ok { background: #dcfce7; color: #15803d; }
.pf-ti-kilder .er-ok i { background: #16a34a; }
.pf-ti-kilder .er-mangler { background: #fffbeb; color: #b45309; outline: 1.5px dashed #f59e0b; outline-offset: -1.5px; }
.pf-ti-kilder .er-mangler i { background: #f59e0b; }

/* Bevegelsen. Bare filmen som vises spiller (.er-spiller fra plattform.js),
   og alt går i loop over --t. Uten bevegelse står sluttbildet. */
@media (prefers-reduced-motion: no-preference) {
	/* Vekst */
	.er-spiller .pf-v-linje { animation: pf-tegn-6-46 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-v-flate { animation: pf-inn-38 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-v-ende { animation: pf-pop-46 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-v-ring { animation: pf-mo-ring 1.6s ease-out infinite; }
	.er-spiller :is(.pf-v-vindu, .pf-v-vindu-tekst) { animation: pf-inn-52 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller :is(.pf-v-gap, .pf-v-gap-tekst) { animation: pf-inn-62 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-v-tall-1 .pf-mo-teller { animation: pf-tell-6-46 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-v-tall-2 { animation: pf-inn-52 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-v-tall-2 .pf-mo-teller { animation: pf-tell-52-68 var(--t) var(--pf-mo-fart) infinite; }

	/* Salgstrakten */
	.er-spiller .pf-t2-kule.er-borte { animation: pf-t2-borte 4.2s linear var(--d) infinite; }
	.er-spiller .pf-t2-kule.er-lekk { animation: pf-t2-lekk 4.6s linear var(--d) infinite; }
	.er-spiller .pf-t2-kule.er-salg { animation: pf-t2-salg 4.6s linear var(--d) infinite; }
	.er-spiller .pf-t2-kule.er-svev { animation: pf-t2-svev 4.4s ease-in-out var(--d) infinite; }
	.er-spiller .pf-t2-draape { animation: pf-t2-dryp 4.6s linear var(--d) infinite; }
	.er-spiller .pf-t2-sprekk { animation: pf-t2-blink 1.6s ease-in-out infinite; }
	.er-spiller .pf-t2-konv.er-lekk { animation: pf-t2-puls 1.6s ease-in-out infinite; }

	/* Lønnsomhet */
	.er-spiller .pf-ka-rad--0 .pf-ka-stolpe { animation: pf-x-8-28 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ka-rad--1 .pf-ka-stolpe { animation: pf-x-14-34 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ka-rad--2 .pf-ka-stolpe { animation: pf-x-20-40 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ka-rad--0 .pf-ka-spor em { animation: pf-inn-26 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ka-rad--1 .pf-ka-spor em { animation: pf-inn-32 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ka-rad--2 .pf-ka-spor em { animation: pf-inn-38 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ka-rad--0 > .pf-chip { animation: pf-pop-30 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ka-rad--1 > .pf-chip { animation: pf-pop-36 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ka-rad--2 > .pf-chip { animation: pf-pop-42 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ka-trend path { animation: pf-tegn-48-70 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ka-trend em { animation: pf-inn-50 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ka-rad--skaping > .pf-chip { animation: pf-pop-70 var(--t) var(--pf-mo-fart) infinite; }

	/* Etterspørsel */
	.er-spiller .pf-e-stolpe:nth-of-type(1) { animation: pf-y-4-12 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-stolpe:nth-of-type(2) { animation: pf-y-7-15 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-stolpe:nth-of-type(3) { animation: pf-y-10-18 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-stolpe:nth-of-type(4) { animation: pf-y-13-21 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-stolpe:nth-of-type(5) { animation: pf-y-16-24 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-stolpe:nth-of-type(6) { animation: pf-y-19-27 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-stolpe:nth-of-type(7) { animation: pf-y-22-30 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-stolpe:nth-of-type(8) { animation: pf-y-25-33 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-pil { animation: pf-tegn-34-48 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-pilspiss { animation: pf-pop-46 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-pil-tekst { animation: pf-inn-38 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-linje { animation: pf-tegn-48-76 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-flate { animation: pf-inn-62 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-prikk { animation: pf-pop-76 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-endring { animation: pf-pop-78 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-tall { animation: pf-inn-44 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-e-tall .pf-mo-teller { animation: pf-tell-48-76 var(--t) var(--pf-mo-fart) infinite; }

	/* Målkortet */
	.er-spiller .pf-m-celle.er-ok.pf-m-k0 { animation: pf-m-ok-0 var(--t) var(--pf-myk) infinite; }
	.er-spiller .pf-m-celle.er-av.pf-m-k0 { animation: pf-m-av-0 var(--t) var(--pf-myk) infinite; }
	.er-spiller .pf-m-celle.er-ok.pf-m-k1 { animation: pf-m-ok-1 var(--t) var(--pf-myk) infinite; }
	.er-spiller .pf-m-celle.er-av.pf-m-k1 { animation: pf-m-av-1 var(--t) var(--pf-myk) infinite; }
	.er-spiller .pf-m-celle.er-ok.pf-m-k2 { animation: pf-m-ok-2 var(--t) var(--pf-myk) infinite; }
	.er-spiller .pf-m-celle.er-av.pf-m-k2 { animation: pf-m-av-2 var(--t) var(--pf-myk) infinite; }
	.er-spiller .pf-m-celle.er-ok.pf-m-k3 { animation: pf-m-ok-3 var(--t) var(--pf-myk) infinite; }
	.er-spiller .pf-m-celle.er-av.pf-m-k3 { animation: pf-m-av-3 var(--t) var(--pf-myk) infinite; }
	.er-spiller .pf-m-celle.er-ok.pf-m-k4 { animation: pf-m-ok-4 var(--t) var(--pf-myk) infinite; }
	.er-spiller .pf-m-celle.er-av.pf-m-k4 { animation: pf-m-av-4 var(--t) var(--pf-myk) infinite; }
	.er-spiller .pf-m-celle.er-pagar { animation: pf-pagar 1.8s ease-in-out infinite; }
	.er-spiller .pf-m-uke.er-pagar i { animation: pf-blink 1.2s ease-in-out infinite; }
	.er-spiller .pf-m-nytt { animation: pf-inn-56 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-m-merknad { animation: pf-inn-60 var(--t) var(--pf-mo-fart) infinite; }

	/* Tiltak og datakilder */
	.er-spiller .pf-ti-avvik { animation: pf-pop-2 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ti-kobling { animation: pf-x-10-22 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ti-kobling i { animation: pf-ti-reis var(--t) ease-in-out infinite; }
	.er-spiller .pf-ti-tiltak { animation: pf-pop-24 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ti-test { animation: pf-inn-34 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ti-variant:not(.er-vinner) > i b { animation: pf-x-40-56 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ti-variant.er-vinner > i b { animation: pf-x-40-62 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ti-variant:not(.er-vinner) em { animation: pf-inn-56 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ti-variant.er-vinner em { animation: pf-inn-62 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ti-variant .pf-chip { animation: pf-pop-66 var(--t) var(--pf-mo-fart) infinite; }
	.er-spiller .pf-ti-kilder .er-ok i { animation: pf-blink 1.6s ease-in-out infinite; }
	.er-spiller .pf-ti-kilder .er-ok:nth-child(2) i { animation-delay: .4s; }
	.er-spiller .pf-ti-kilder .er-ok:nth-child(3) i { animation-delay: .8s; }
	.er-spiller .pf-ti-kilder .er-ok:nth-child(4) i { animation-delay: 1.2s; }
	.er-spiller .pf-ti-kilder .er-mangler { animation: pf-mangler 1.4s ease-in-out infinite; }
}

@keyframes pf-mo-ring {
	0% { opacity: .7; transform: scale(1); }
	100% { opacity: 0; transform: scale(2.6); }
}

/* Kulene i trakten går gjennom fire punkter (--x0 --y0 til --x3 --y3) */
@keyframes pf-t2-borte {
	0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(.4); fill: var(--f); animation-timing-function: ease-out; }
	12% { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(1); animation-timing-function: ease-in-out; }
	45% { transform: translate(var(--x1), var(--y1)) scale(1); animation-timing-function: ease-in-out; }
	72% { opacity: 1; transform: translate(var(--x2), var(--y2)) scale(1); fill: var(--f); animation-timing-function: ease-in; }
	100% { opacity: 0; transform: translate(var(--x3), var(--y3)) scale(.7); fill: #a1a1aa; }
}

@keyframes pf-t2-lekk {
	0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(.4); fill: var(--f); animation-timing-function: ease-out; }
	10% { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(1); animation-timing-function: ease-in-out; }
	40% { transform: translate(var(--x1), var(--y1)) scale(1); animation-timing-function: ease-in-out; }
	66% { opacity: 1; transform: translate(var(--x2), var(--y2)) scale(1); fill: var(--f); animation-timing-function: ease-in; }
	74% { fill: #f59e0b; }
	100% { opacity: 0; transform: translate(var(--x3), var(--y3)) scale(.8); fill: #f59e0b; }
}

@keyframes pf-t2-salg {
	0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(.4); fill: var(--f); animation-timing-function: ease-out; }
	10% { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(1); animation-timing-function: ease-in-out; }
	40% { transform: translate(var(--x1), var(--y1)) scale(1); animation-timing-function: ease-in-out; }
	70% { opacity: 1; transform: translate(var(--x2), var(--y2)) scale(1); fill: var(--f); animation-timing-function: ease-in; }
	80% { opacity: 1; transform: translate(var(--x3), var(--y3)) scale(.8); fill: #22c55e; }
	84%, 100% { opacity: 0; transform: translate(var(--x3), var(--y3)) scale(.6); fill: #22c55e; }
}

@keyframes pf-t2-svev {
	0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(.5); }
	25% { opacity: 1; transform: translate(var(--x1), var(--y1)) scale(1); }
	75% { opacity: 1; transform: translate(var(--x2), var(--y2)) scale(1); }
	100% { opacity: 0; transform: translate(var(--x3), var(--y3)) scale(.6); }
}

/* Dråpen vokser fram under tuten idet salget kommer dit, og faller */
@keyframes pf-t2-dryp {
	0%, 78% { opacity: 0; transform: translateY(-6px) scale(.2); animation-timing-function: ease-out; }
	85% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; }
	100% { opacity: 0; transform: translateY(40px) scale(.85, 1.1); }
}

@keyframes pf-t2-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

/* Uten skygger pulserer lekkasjen med størrelsen */
@keyframes pf-t2-puls {
	0%, 100% { transform: translateX(-50%) scale(1); }
	50% { transform: translateX(-50%) scale(1.12); }
}

@keyframes pf-pagar {
	0%, 100% { outline-color: #cbd5e1; }
	50% { outline-color: #8b5cf6; }
}

@keyframes pf-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .25; }
}

@keyframes pf-mangler {
	0%, 100% { outline-color: #f59e0b; }
	50% { outline-color: rgba(245, 158, 11, .2); }
}

@keyframes pf-ti-reis {
	0%, 10% { left: 0; opacity: 0; }
	12% { opacity: 1; }
	22% { left: calc(100% - .7em); opacity: 1; }
	25%, 100% { left: calc(100% - .7em); opacity: 0; }
}

@keyframes pf-inn-26 {
	0%, 26% { opacity: 0; transform: translateY(12px); }
	34%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: none; }
}

@keyframes pf-inn-32 {
	0%, 32% { opacity: 0; transform: translateY(12px); }
	40%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: none; }
}

@keyframes pf-inn-34 {
	0%, 34% { opacity: 0; transform: translateY(12px); }
	42%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: none; }
}

@keyframes pf-inn-38 {
	0%, 38% { opacity: 0; transform: translateY(12px); }
	46%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: none; }
}

@keyframes pf-inn-44 {
	0%, 44% { opacity: 0; transform: translateY(12px); }
	52%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: none; }
}

@keyframes pf-inn-50 {
	0%, 50% { opacity: 0; transform: translateY(12px); }
	58%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: none; }
}

@keyframes pf-inn-52 {
	0%, 52% { opacity: 0; transform: translateY(12px); }
	60%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: none; }
}

@keyframes pf-inn-56 {
	0%, 56% { opacity: 0; transform: translateY(12px); }
	64%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: none; }
}

@keyframes pf-inn-60 {
	0%, 60% { opacity: 0; transform: translateY(12px); }
	68%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: none; }
}

@keyframes pf-inn-62 {
	0%, 62% { opacity: 0; transform: translateY(12px); }
	70%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: none; }
}

@keyframes pf-pop-2 {
	0%, 2% { opacity: 0; transform: scale(0); }
	7% { opacity: 1; transform: scale(1.18); }
	11%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-pop-24 {
	0%, 24% { opacity: 0; transform: scale(0); }
	29% { opacity: 1; transform: scale(1.18); }
	33%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-pop-30 {
	0%, 30% { opacity: 0; transform: scale(0); }
	35% { opacity: 1; transform: scale(1.18); }
	39%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-pop-36 {
	0%, 36% { opacity: 0; transform: scale(0); }
	41% { opacity: 1; transform: scale(1.18); }
	45%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-pop-42 {
	0%, 42% { opacity: 0; transform: scale(0); }
	47% { opacity: 1; transform: scale(1.18); }
	51%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-pop-46 {
	0%, 46% { opacity: 0; transform: scale(0); }
	51% { opacity: 1; transform: scale(1.18); }
	55%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-pop-66 {
	0%, 66% { opacity: 0; transform: scale(0); }
	71% { opacity: 1; transform: scale(1.18); }
	75%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-pop-70 {
	0%, 70% { opacity: 0; transform: scale(0); }
	75% { opacity: 1; transform: scale(1.18); }
	79%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-pop-76 {
	0%, 76% { opacity: 0; transform: scale(0); }
	81% { opacity: 1; transform: scale(1.18); }
	85%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-pop-78 {
	0%, 78% { opacity: 0; transform: scale(0); }
	83% { opacity: 1; transform: scale(1.18); }
	87%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-tegn-6-46 {
	0%, 6% { stroke-dashoffset: 1; opacity: 1; }
	46%, 92% { stroke-dashoffset: 0; opacity: 1; }
	97% { stroke-dashoffset: 0; opacity: 0; }
	100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes pf-tegn-34-48 {
	0%, 34% { stroke-dashoffset: 1; opacity: 1; }
	48%, 92% { stroke-dashoffset: 0; opacity: 1; }
	97% { stroke-dashoffset: 0; opacity: 0; }
	100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes pf-tegn-48-76 {
	0%, 48% { stroke-dashoffset: 1; opacity: 1; }
	76%, 92% { stroke-dashoffset: 0; opacity: 1; }
	97% { stroke-dashoffset: 0; opacity: 0; }
	100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes pf-tegn-48-70 {
	0%, 48% { stroke-dashoffset: 1; opacity: 1; }
	70%, 92% { stroke-dashoffset: 0; opacity: 1; }
	97% { stroke-dashoffset: 0; opacity: 0; }
	100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes pf-tell-6-46 {
	0%, 6% { --pf-n: 0; }
	46%, 100% { --pf-n: var(--mal); }
}

@keyframes pf-tell-48-76 {
	0%, 48% { --pf-n: 0; }
	76%, 100% { --pf-n: var(--mal); }
}

@keyframes pf-tell-52-68 {
	0%, 52% { --pf-n: 0; }
	68%, 100% { --pf-n: var(--mal); }
}

@keyframes pf-x-8-28 {
	0%, 8% { opacity: 1; transform: scaleX(0); }
	28%, 92% { opacity: 1; transform: scaleX(1); }
	97%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes pf-x-10-22 {
	0%, 10% { opacity: 1; transform: scaleX(0); }
	22%, 92% { opacity: 1; transform: scaleX(1); }
	97%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes pf-x-14-34 {
	0%, 14% { opacity: 1; transform: scaleX(0); }
	34%, 92% { opacity: 1; transform: scaleX(1); }
	97%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes pf-x-20-40 {
	0%, 20% { opacity: 1; transform: scaleX(0); }
	40%, 92% { opacity: 1; transform: scaleX(1); }
	97%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes pf-x-40-62 {
	0%, 40% { opacity: 1; transform: scaleX(0); }
	62%, 92% { opacity: 1; transform: scaleX(1); }
	97%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes pf-x-40-56 {
	0%, 40% { opacity: 1; transform: scaleX(0); }
	56%, 92% { opacity: 1; transform: scaleX(1); }
	97%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes pf-y-4-12 {
	0%, 4% { opacity: 1; transform: scaleY(0); }
	12%, 92% { opacity: 1; transform: scaleY(1); }
	97%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes pf-y-7-15 {
	0%, 7% { opacity: 1; transform: scaleY(0); }
	15%, 92% { opacity: 1; transform: scaleY(1); }
	97%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes pf-y-10-18 {
	0%, 10% { opacity: 1; transform: scaleY(0); }
	18%, 92% { opacity: 1; transform: scaleY(1); }
	97%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes pf-y-13-21 {
	0%, 13% { opacity: 1; transform: scaleY(0); }
	21%, 92% { opacity: 1; transform: scaleY(1); }
	97%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes pf-y-16-24 {
	0%, 16% { opacity: 1; transform: scaleY(0); }
	24%, 92% { opacity: 1; transform: scaleY(1); }
	97%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes pf-y-19-27 {
	0%, 19% { opacity: 1; transform: scaleY(0); }
	27%, 92% { opacity: 1; transform: scaleY(1); }
	97%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes pf-y-22-30 {
	0%, 22% { opacity: 1; transform: scaleY(0); }
	30%, 92% { opacity: 1; transform: scaleY(1); }
	97%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes pf-y-25-33 {
	0%, 25% { opacity: 1; transform: scaleY(0); }
	33%, 92% { opacity: 1; transform: scaleY(1); }
	97%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes pf-m-ok-0 {
	0%, 8% { background: #f8fafc; color: #cbd5e1; transform: scale(.9); }
	13%, 92% { background: #dcfce7; color: #15803d; transform: scale(1); }
	97%, 100% { background: #f8fafc; color: #cbd5e1; transform: scale(1); }
}

@keyframes pf-m-av-0 {
	0%, 8% { background: #f8fafc; color: #cbd5e1; transform: scale(.9); }
	13%, 92% { background: #ffe4e6; color: #be123c; transform: scale(1); }
	97%, 100% { background: #f8fafc; color: #cbd5e1; transform: scale(1); }
}

@keyframes pf-m-ok-1 {
	0%, 16% { background: #f8fafc; color: #cbd5e1; transform: scale(.9); }
	21%, 92% { background: #dcfce7; color: #15803d; transform: scale(1); }
	97%, 100% { background: #f8fafc; color: #cbd5e1; transform: scale(1); }
}

@keyframes pf-m-av-1 {
	0%, 16% { background: #f8fafc; color: #cbd5e1; transform: scale(.9); }
	21%, 92% { background: #ffe4e6; color: #be123c; transform: scale(1); }
	97%, 100% { background: #f8fafc; color: #cbd5e1; transform: scale(1); }
}

@keyframes pf-m-ok-2 {
	0%, 24% { background: #f8fafc; color: #cbd5e1; transform: scale(.9); }
	29%, 92% { background: #dcfce7; color: #15803d; transform: scale(1); }
	97%, 100% { background: #f8fafc; color: #cbd5e1; transform: scale(1); }
}

@keyframes pf-m-av-2 {
	0%, 24% { background: #f8fafc; color: #cbd5e1; transform: scale(.9); }
	29%, 92% { background: #ffe4e6; color: #be123c; transform: scale(1); }
	97%, 100% { background: #f8fafc; color: #cbd5e1; transform: scale(1); }
}

@keyframes pf-m-ok-3 {
	0%, 32% { background: #f8fafc; color: #cbd5e1; transform: scale(.9); }
	37%, 92% { background: #dcfce7; color: #15803d; transform: scale(1); }
	97%, 100% { background: #f8fafc; color: #cbd5e1; transform: scale(1); }
}

@keyframes pf-m-av-3 {
	0%, 32% { background: #f8fafc; color: #cbd5e1; transform: scale(.9); }
	37%, 92% { background: #ffe4e6; color: #be123c; transform: scale(1); }
	97%, 100% { background: #f8fafc; color: #cbd5e1; transform: scale(1); }
}

@keyframes pf-m-ok-4 {
	0%, 40% { background: #f8fafc; color: #cbd5e1; transform: scale(.9); }
	45%, 92% { background: #dcfce7; color: #15803d; transform: scale(1); }
	97%, 100% { background: #f8fafc; color: #cbd5e1; transform: scale(1); }
}

@keyframes pf-m-av-4 {
	0%, 40% { background: #f8fafc; color: #cbd5e1; transform: scale(.9); }
	45%, 92% { background: #ffe4e6; color: #be123c; transform: scale(1); }
	97%, 100% { background: #f8fafc; color: #cbd5e1; transform: scale(1); }
}

/* Tekstene ved siden av */
.pf-spm-steg { grid-area: steg; }
.pf-spm-tekst { min-height: 88vh; }
.pf-spm-tekst-kat { margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7c3aed; }
.pf-spm-tekst .pf-h3 { margin-bottom: 16px; color: var(--pf-blekk); }
.pf-spm-tekst > p:not(.pf-spm-tekst-kat) { max-width: 32rem; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.55; color: #4a4a5c; }
.pf-spm-tekst .pf-sjekk li { color: #1f2937; }

/* Teksten til hvert spørsmål: ikonet og kategorien med merkelappen, den
   første setningen i fet skrift, kursiv på ordene som bærer poenget,
   punktene som rader med hake i fargen til spørsmålet, og svaret på en
   linje som en stripe med tall fra appen. Fargen følger merkelappen. */
.pf-spm-tekst { --spm-tone: #6d28d9; --spm-flate: #f1ecff; }
.pf-spm-tekst--gul { --spm-tone: #b45309; --spm-flate: #fef3c7; }
.pf-spm-tekst--groenn { --spm-tone: #047857; --spm-flate: #dcfce7; }
.pf-spm-tekst--blaa { --spm-tone: #1d4ed8; --spm-flate: #dbeafe; }
.pf-spm-tekst--graa { --spm-tone: #4b5563; --spm-flate: #f3f4f6; }

.pf-spm .pf-spm-tekst-kat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--spm-tone);
}

.pf-spm-ikon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--spm-flate);
	color: var(--spm-tone);
}

.pf-spm-ikon svg { width: 18px; height: 18px; }
.pf-spm-tekst-kat .pf-chip { margin-left: 4px; font-size: 12px; letter-spacing: 0; text-transform: none; }

.pf-spm .pf-spm-tekst > .pf-spm-brod { max-width: 34rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: #55556a; }
.pf-spm-brod strong { font-weight: 800; color: var(--pf-blekk); }
.pf-spm-brod .pf-spm-inngang { display: block; margin-bottom: 6px; font-size: 1.08em; line-height: 1.45; }
.pf-spm-brod em { font-style: italic; font-weight: 700; color: var(--spm-tone); }

.pf-spm-punkter {
	display: grid;
	max-width: 34rem;
	margin: 26px 0 0;
	padding: 0;
	border-top: 1px solid #ebeaf1;
	list-style: none;
}

.pf-spm-punkter li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid #ebeaf1;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--pf-blekk);
}

.pf-spm-hake {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--spm-flate);
	color: var(--spm-tone);
	font-size: 14px;
}

.pf-spm-hake svg { stroke-width: 3; }
.pf-spm-punkter em { font-style: italic; color: var(--spm-tone); }

/* Svaret på en linje, som tallene står i appen */
.pf-spm-linje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	max-width: 34rem;
	margin: 22px 0 0;
	padding: 12px 16px;
	border-radius: 14px;
	background: #f6f5fa;
}

.pf-spm-linje-merke { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a8a9c; }
.pf-spm-linje-tall { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pf-spm-linje-tall b { font-size: 15px; font-weight: 800; color: var(--pf-blekk); font-variant-numeric: tabular-nums; }
.pf-spm-linje-tall i { width: 5px; height: 5px; border-radius: 50%; background: var(--spm-tone); opacity: .5; }

/* Prinsippene */
.pf-prinsipper { margin-top: clamp(72px, 8vw, 120px); }
.pf-prinsipper-tittel { margin-bottom: clamp(32px, 4vw, 52px); text-align: center; }

.pf-prinsipp-liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.pf-prinsipp-liste li {
	position: relative;
	padding: 30px 28px 32px;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(124, 58, 237, .08);
	overflow: hidden;
}

.pf-prinsipp-liste li::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--pf-grad);
	opacity: .85;
}

.pf-prinsipp-liste .pf-h4 { margin-bottom: 10px; }
.pf-prinsipp-liste p { font-size: 16px; line-height: 1.55; color: var(--pf-gra); }

@media (max-width: 959px) {
	.pf-spm-rom {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'steg';
	}

	/* Filmen står over teksten sin i stedet for fast ved siden av */
	.pf-spm-scene { display: none; }
	.pf-mo-vert--inline { display: block; width: 100%; max-width: 620px; margin: 0 auto 28px; }
	.pf-mo-vert--inline .pf-mo { aspect-ratio: auto; padding: 1.6em 1.5em 1.8em; font-size: clamp(9px, 3.45cqw, 15px); }
	.pf-spm .pf-spm-tekst { min-height: 0; justify-content: flex-start; padding-block: 0 80px; opacity: 1; }
	.pf-spm-bildetekst-liten { display: block; margin-top: 0; }
	.pf-prinsipp-liste { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   Møt heltene (mørk)
   ====================================================================== */

.pf-natt {
	background: var(--pf-natt);
	color: #f5f5f7;
}

.pf-natt .pf-merke,
.pf-natt .pf-ingress { color: var(--pf-gra-lys); }

.pf-natt .pf-h2,
.pf-natt .pf-h3 { color: #fff; }

.pf-helter-rom {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	grid-template-areas: 'steg scene';
	column-gap: clamp(32px, 6vw, 96px);
}

.pf-helter-scene {
	grid-area: scene;
	position: sticky;
	top: calc(50vh - min(330px, 40vh) + 32px);
	height: min(660px, 80vh);
}

.pf-glod {
	position: absolute;
	inset: -6% -10%;
	background: radial-gradient(closest-side, color-mix(in oklab, var(--glod) 70%, transparent), transparent 75%);
	filter: blur(40px);
	opacity: .75;
	transition: --glod .9s ease;
	pointer-events: none;
}

.pf-paneler { position: relative; height: 100%; }

.pf-panel {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(28px) scale(.96);
	transition: opacity .3s ease, transform .5s ease;
	pointer-events: none;
	container: pf-panel / inline-size;
}

.pf-panel.er-aktiv {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease .28s, transform .9s var(--pf-myk) .28s;
}

.pf-panel-vindu {
	position: relative;
	width: 100%;
	max-width: 34em;
	padding: 1.3em;
	border-radius: 1.4em;
	background: #fff;
	color: #111827;
	font-size: clamp(10px, 2.7cqw, 16px);
	line-height: 1.4;
	box-shadow: 0 3em 6em -2.5em rgba(76, 29, 149, .35), 0 .6em 1.6em -.8em rgba(10, 15, 31, .12), 0 0 0 1px rgba(124, 58, 237, .1);
}

.pf-panel-maskot {
	position: absolute;
	z-index: 3;
	top: 2%;
	right: -3%;
	width: 30%;
	max-width: 190px;
	height: auto;
	opacity: 0;
	transform: translateY(30px) rotate(8deg) scale(.85);
	transition: opacity .6s ease .15s, transform 1s var(--pf-myk) .15s;
	filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .45));
}

.pf-panel.er-aktiv .pf-panel-maskot { opacity: 1; transform: none; }

.pf-panel-hode {
	display: flex;
	align-items: center;
	gap: .6em;
	margin-bottom: 1em;
	padding-bottom: .9em;
	border-bottom: 1px solid #f0eef5;
}

.pf-panel-hode .pf-avatar { background: var(--flate); }
.pf-panel-hode b { font-size: .95em; font-weight: 700; }
.pf-panel-hode > span:not(.pf-status) { font-size: .8em; color: #6b7280; }

.pf-status {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin-left: auto;
	margin-right: 4.5em;
	padding: .3em .65em;
	border-radius: 999px;
	background: #ecfdf5;
	font-size: .72em;
	font-weight: 700;
	color: var(--pf-gront);
}

.pf-status i {
	width: .45em;
	height: .45em;
	border-radius: 50%;
	background: #10b981;
	animation: pf-prikk 1.6s infinite;
}

/* Felix: samtalen */
.pf-chat {
	display: flex;
	flex-direction: column;
	gap: .6em;
	min-height: 15em;
}

.pf-boble {
	display: grid;
	max-width: 86%;
	padding: .72em .95em;
	border-radius: 1.1em;
	font-size: .88em;
	line-height: 1.45;
	opacity: 0;
}

.pf-boble > * { grid-area: 1 / 1; }

.pf-boble--kunde {
	align-self: flex-end;
	background: #7c3aed;
	color: #fff;
	border-bottom-right-radius: .35em;
}

.pf-boble--kunde .pf-skriver { display: none; }

.pf-boble--helt {
	align-self: flex-start;
	background: #f4f3f8;
	color: #1b1733;
	border-bottom-left-radius: .35em;
}

.pf-boble--helt .pf-skriver { align-self: center; }
.pf-boble--helt .pf-boble-tekst { opacity: 0; }

.pf-panel.er-aktiv .pf-boble { animation: pf-opp .5s var(--pf-myk) var(--d) both; }
.pf-panel.er-aktiv .pf-boble--helt .pf-skriver { animation: pf-ut .2s ease calc(var(--d) + 1s) both; }
.pf-panel.er-aktiv .pf-boble--helt .pf-boble-tekst { animation: pf-inn .35s ease calc(var(--d) + 1.05s) both; }

@keyframes pf-ut { to { opacity: 0; } }
@keyframes pf-inn { from { opacity: 0; } to { opacity: 1; } }

.pf-chat-felt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1em;
	padding: .55em .55em .55em 1em;
	border: 1px solid #eceaf2;
	border-radius: .9em;
	font-size: .82em;
	color: #9ca3af;
}

.pf-chat-felt i {
	display: grid;
	place-items: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: #7c3aed;
	color: #fff;
}

.pf-chat-fot {
	margin-top: .6em;
	text-align: center;
	font-size: .7em;
	color: #9ca3af;
}

/* Herman: anbefalinger og utkast */
.pf-faner {
	display: flex;
	flex-wrap: wrap;
	gap: .3em;
	margin-bottom: .9em;
	font-size: .75em;
}

.pf-faner span { padding: .4em .8em; border-radius: 999px; color: #6b7280; }
.pf-faner .er-aktiv { background: #eef0ff; color: #4f46e5; font-weight: 700; }

.pf-anbef { display: flex; flex-direction: column; gap: .5em; }

.pf-anbef li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 6.5em;
	align-items: center;
	gap: .8em;
	padding: .6em .75em;
	border-radius: .75em;
	background: #fafafb;
	font-size: .82em;
	color: #374151;
	opacity: 0;
}

.pf-anbef i {
	height: .45em;
	border-radius: 999px;
	background: #eef0ff;
	overflow: hidden;
}

.pf-anbef b {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #7cc4f0, #238cc6);
	transition: width 1.1s var(--pf-myk) calc(var(--d) + .2s);
}

.pf-panel.er-aktiv .pf-anbef li { animation: pf-opp .5s var(--pf-myk) var(--d) both; }
.pf-panel.er-aktiv .pf-anbef b { width: var(--w); }

.pf-utkast {
	display: flex;
	flex-direction: column;
	gap: .75em;
	margin-top: .9em;
	padding: 1em;
	border: 1px solid #eceaf2;
	border-radius: 1em;
}

.pf-utkast-hode { display: flex; flex-direction: column; gap: .35em; }
.pf-utkast-hode b { font-size: .95em; font-weight: 700; color: #111827; }

.pf-etikett {
	width: fit-content;
	padding: .28em .65em;
	border-radius: 999px;
	background: #eef0ff;
	font-size: .66em;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #4f46e5;
}

.pf-linjer { display: flex; flex-direction: column; gap: .45em; }

.pf-linjer i {
	display: block;
	width: 0;
	height: .5em;
	border-radius: 999px;
	background: #efeef5;
	transition: width .9s var(--pf-myk) var(--d);
}

.pf-panel.er-aktiv .pf-linjer i { width: var(--w); }

.pf-stegrad { display: flex; flex-wrap: wrap; gap: .4em; font-size: .7em; }

.pf-stegrad span {
	padding: .38em .75em;
	border-radius: 999px;
	background: #f4f3f8;
	font-weight: 700;
	color: #9ca3af;
	transition: background-color .4s ease var(--d), color .4s ease var(--d);
}

.pf-panel.er-aktiv .pf-stegrad span { background: #ecfdf5; color: var(--pf-gront); }

/* Astrid: forslagene */
.pf-gjennomgang { display: flex; flex-direction: column; margin-bottom: .8em; }
.pf-gjennomgang b { font-size: .95em; font-weight: 700; }
.pf-gjennomgang span { font-size: .75em; color: #6b7280; }

.pf-forslag {
	display: flex;
	flex-direction: column;
	gap: .6em;
	margin-bottom: .65em;
	padding: .85em .95em;
	border: 1px solid #eceaf2;
	border-radius: 1em;
	opacity: 0;
}

.pf-panel.er-aktiv .pf-forslag { animation: pf-opp .55s var(--pf-myk) var(--d) both; }

.pf-forslag-tekst b { display: block; font-size: .86em; font-weight: 700; color: #111827; }
.pf-forslag-tekst span { font-size: .75em; color: #6b7280; }

.pf-bevis { display: flex; flex-wrap: wrap; gap: .3em; }

.pf-bevis span {
	padding: .25em .6em;
	border-radius: 999px;
	background: var(--flate);
	font-size: .62em;
	font-weight: 700;
	color: color-mix(in oklab, var(--aksent) 80%, #000);
}

.pf-forslag-knapper { display: flex; justify-content: flex-end; gap: .4em; }

.pf-forslag-knapper span {
	padding: .45em .9em;
	border: 1px solid #eceaf2;
	border-radius: .6em;
	font-size: .72em;
	font-weight: 700;
	color: #374151;
}

.pf-forslag-knapper .er-primar { border-color: transparent; background: var(--knapp); color: #fff; }

.pf-grense { display: flex; flex-direction: column; gap: .5em; margin-top: .5em; }
.pf-grense div { display: flex; justify-content: space-between; font-size: .75em; }
.pf-grense span { color: #6b7280; }
.pf-grense > div b { font-weight: 700; color: #111827; }

.pf-grense i {
	display: block;
	height: .55em;
	border-radius: 999px;
	background: #f4f3f8;
	overflow: hidden;
}

.pf-grense i b {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #eb4e00, #fdba74);
	transition: width 1.4s var(--pf-myk) .8s;
}

.pf-panel.er-aktiv .pf-grense i b { width: 68%; }

/* Iris: vekstplanen */
.pf-iris { display: flex; flex-direction: column; gap: .9em; }
.pf-iris-topp { display: flex; flex-direction: column; align-items: flex-start; gap: .4em; }
.pf-iris-topp > span:last-child { font-size: .8em; color: #6b7280; }
.pf-iris-scen { display: flex; flex-direction: column; gap: .5em; }
.pf-iris-rad { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 2.2em; align-items: center; gap: .7em; font-size: .86em; }
.pf-iris-rad > span { font-weight: 600; color: #4b5563; }
.pf-iris-rad i { height: .9em; overflow: hidden; border-radius: .45em; background: #f4f3f8; }
.pf-iris-rad i b { display: block; width: var(--w); height: 100%; border-radius: .45em; background: linear-gradient(90deg, #f9a8d4, var(--aksent)); }
.pf-iris-rad--1 i b { background: linear-gradient(90deg, #f472b6, var(--aksent)); }
.pf-iris-rad em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.pf-iris-tiltak {
	display: flex;
	flex-direction: column;
	gap: .4em;
	padding: .9em 1em;
	border-radius: 1em;
	background: var(--flate);
}

.pf-iris-tiltak-hode { display: flex; align-items: center; gap: .55em; margin-bottom: .15em; }
.pf-iris-tiltak-hode b { font-size: .92em; }

.pf-iris-nr {
	display: grid;
	flex: none;
	place-items: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--aksent);
	color: #fff;
	font-size: .78em;
	font-weight: 700;
}

.pf-iris-linje { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: .6em; font-size: .82em; color: #374151; }
.pf-iris-linje span { font-weight: 700; color: color-mix(in oklab, var(--aksent) 80%, #111827); }
.pf-iris-neste { display: flex; align-items: center; gap: .55em; padding: .2em .2em 0; font-size: .86em; font-weight: 600; color: #6b7280; }
.pf-iris-neste .pf-iris-nr { background: #e5e7eb; color: #4b5563; }

/* Nora: oppfølgingen etter første kontakt */
.pf-nora { display: flex; flex-direction: column; gap: 1em; }
.pf-nora-topp { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; }
.pf-nora-topp b { font-size: .95em; }
.pf-nora-flyt { position: relative; display: flex; flex-direction: column; gap: .7em; padding-left: .2em; }

.pf-nora-flyt::before {
	content: '';
	position: absolute;
	top: .9em;
	bottom: .9em;
	left: .72em;
	width: 2px;
	background: #ecebf2;
}

.pf-nora-fremdrift { position: absolute; top: .9em; bottom: .9em; left: .72em; width: 2px; }
.pf-nora-fremdrift b { display: block; height: 100%; background: var(--aksent); transform-origin: top; }

.pf-nora-steg {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .8em;
	padding: .6em .8em .6em 0;
	font-size: .86em;
}

.pf-nora-steg > i { width: 1.1em; height: 1.1em; border: 3px solid #fff; border-radius: 50%; background: var(--aksent); box-shadow: 0 0 0 1.5px var(--aksent); }
.pf-nora-steg > span { display: flex; flex-direction: column; color: #6b7280; font-size: .92em; }
.pf-nora-steg > span b { font-size: 1.08em; color: #111827; }
.pf-nora-steg em { padding: .3em .65em; border-radius: 999px; background: #ecfdf5; font-size: .8em; font-style: normal; font-weight: 700; color: #059669; white-space: nowrap; }
.pf-nora-steg.er-venter > i { background: #f59e0b; box-shadow: 0 0 0 1.5px #f59e0b; }
.pf-nora-steg.er-venter em { background: #fef3c7; color: #b45309; }

.pf-nora-trykk {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .45em .8em;
	padding: .85em 1em;
	border-radius: 1em;
	background: var(--flate);
	font-size: .82em;
	color: #374151;
}

.pf-nora-trykk b { color: color-mix(in oklab, var(--aksent) 85%, #111827); }
.pf-nora-trykk i { grid-column: 1 / -1; height: .6em; overflow: hidden; border-radius: .3em; background: rgba(255, 255, 255, .8); }
.pf-nora-trykk i b { display: block; width: 66%; height: 100%; border-radius: .3em; background: var(--aksent); }

/* Vera: kontrollen før noe går ut */
.pf-vera { display: flex; flex-direction: column; gap: .9em; }
.pf-vera-utkast { display: flex; flex-direction: column; align-items: flex-start; gap: .5em; padding: .9em 1em; border-radius: 1em; background: #fafafb; }
.pf-vera-utkast p { font-size: .92em; line-height: 1.5; color: #111827; }
.pf-vera-ord { position: relative; display: inline-grid; }
.pf-vera-ord > * { grid-area: 1 / 1; }
.pf-vera-ord s { text-decoration: none; }
.pf-vera-ord mark { padding: 0 .2em; border-radius: .25em; background: #fde68a; color: #111827; opacity: 0; }
.pf-vera-sjekk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em .8em; }
.pf-vera-punkt { display: flex; align-items: center; gap: .5em; font-size: .82em; color: #374151; }
.pf-vera-punkt i { display: grid; flex: none; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: #059669; color: #fff; font-size: .9em; }
.pf-vera-stempel { position: relative; display: grid; }
.pf-vera-stempel > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .5em; justify-self: start; padding: .6em .95em; border-radius: .8em; font-size: .86em; font-weight: 700; }
.pf-vera-ok { background: #ecfdf5; color: #047857; box-shadow: inset 0 0 0 1.5px #a7f3d0; }
.pf-vera-endret { background: #fef3c7; color: #b45309; box-shadow: inset 0 0 0 1.5px #fde68a; opacity: 0; }

/* Status i panelhodet og i stegene for heltene som ikke er i appen ennå */
.pf-status--snart { background: #f3f0ff; color: #6d28d9; }
.pf-steg-snart { margin-left: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12px; font-style: normal; font-weight: 700; color: #c4b5fd; }

.pf-steg-sporsmal {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-bottom: 18px;
	padding: 7px 14px;
	border-radius: 999px;
	background: color-mix(in oklab, var(--aksent) 18%, transparent);
	font-size: 14px;
	color: color-mix(in oklab, var(--aksent) 45%, #fff);
}

.pf-steg-sporsmal b { color: #fff; }

/* Panelene i loop så lenge helten er aktiv. Uten bevegelse står sluttbildet. */
@media (prefers-reduced-motion: no-preference) {
	.pf-panel.er-aktiv .pf-chat .pf-boble:nth-child(1) { animation: pf-felix-1 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-chat .pf-boble:nth-child(2) { animation: pf-felix-2 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-chat .pf-boble:nth-child(2) .pf-skriver { animation: pf-felix-skriv-2 10s linear infinite; }
	.pf-panel.er-aktiv .pf-chat .pf-boble:nth-child(2) .pf-boble-tekst { animation: pf-felix-tekst-2 10s linear infinite; }
	.pf-panel.er-aktiv .pf-chat .pf-boble:nth-child(3) { animation: pf-felix-3 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-chat .pf-boble:nth-child(4) { animation: pf-felix-4 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-chat .pf-boble:nth-child(4) .pf-skriver { animation: pf-felix-skriv-4 10s linear infinite; }
	.pf-panel.er-aktiv .pf-chat .pf-boble:nth-child(4) .pf-boble-tekst { animation: pf-felix-tekst-4 10s linear infinite; }
	.pf-panel.er-aktiv .pf-anbef li:nth-child(1) { animation: pf-herman-1 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-anbef li:nth-child(1) b { animation: pf-herman-styrke-1 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-anbef li:nth-child(2) { animation: pf-herman-2 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-anbef li:nth-child(2) b { animation: pf-herman-styrke-2 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-anbef li:nth-child(3) { animation: pf-herman-3 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-anbef li:nth-child(3) b { animation: pf-herman-styrke-3 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-anbef li:nth-child(4) { animation: pf-herman-4 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-anbef li:nth-child(4) b { animation: pf-herman-styrke-4 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-utkast { animation: pf-herman-utkast 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-linjer i:nth-child(1) { animation: pf-herman-linje-1 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-linjer i:nth-child(2) { animation: pf-herman-linje-2 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-linjer i:nth-child(3) { animation: pf-herman-linje-3 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-linjer i:nth-child(4) { animation: pf-herman-linje-4 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-stegrad span:nth-child(1) { animation: pf-herman-steg-1 10s ease infinite; }
	.pf-panel.er-aktiv .pf-stegrad span:nth-child(2) { animation: pf-herman-steg-2 10s ease infinite; }
	.pf-panel.er-aktiv .pf-stegrad span:nth-child(3) { animation: pf-herman-steg-3 10s ease infinite; }
	.pf-panel.er-aktiv .pf-panel-vindu > .pf-forslag:nth-child(3) { animation: pf-astrid-1 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-panel-vindu > .pf-forslag:nth-child(4) { animation: pf-astrid-2 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-grense i b { animation: pf-astrid-grense 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-panel-vindu > .pf-forslag:nth-child(3) .er-primar { animation: pf-astrid-ja 10s ease infinite; }
	.pf-panel.er-aktiv .pf-iris-rad--0 { animation: pf-iris-rad-0 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-iris-rad--0 b { animation: pf-iris-stolpe-0 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-iris-rad--1 { animation: pf-iris-rad-1 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-iris-rad--1 b { animation: pf-iris-stolpe-1 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-iris-rad--2 { animation: pf-iris-rad-2 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-iris-rad--2 b { animation: pf-iris-stolpe-2 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-iris-tiltak { animation: pf-iris-tiltak 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-iris-linje--0 { animation: pf-iris-linje-0 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-iris-linje--1 { animation: pf-iris-linje-1 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-iris-linje--2 { animation: pf-iris-linje-2 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-iris-neste { animation: pf-iris-neste 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-nora-steg--0 { animation: pf-nora-steg-0 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-nora-steg--1 { animation: pf-nora-steg-1 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-nora-steg--2 { animation: pf-nora-steg-2 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-nora-fremdrift b { animation: pf-nora-fremdrift 10s linear infinite; }
	.pf-panel.er-aktiv .pf-nora-steg.er-venter em { animation: pf-nora-venter 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-nora-trykk { animation: pf-nora-trykk 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-nora-trykk i b { animation: pf-nora-trykk-b 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-vera-utkast { animation: pf-vera-utkast 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-vera-punkt--0 { animation: pf-vera-punkt-0 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-vera-punkt--0 i { animation: pf-vera-hake-0 10s ease infinite; }
	.pf-panel.er-aktiv .pf-vera-punkt--1 { animation: pf-vera-punkt-1 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-vera-punkt--1 i { animation: pf-vera-hake-1 10s ease infinite; }
	.pf-panel.er-aktiv .pf-vera-punkt--2 { animation: pf-vera-punkt-2 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-vera-punkt--2 i { animation: pf-vera-hake-2 10s ease infinite; }
	.pf-panel.er-aktiv .pf-vera-punkt--3 { animation: pf-vera-punkt-3 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-vera-punkt--3 i { animation: pf-vera-hake-3 10s ease infinite; }
	.pf-panel.er-aktiv .pf-vera-ok { animation: pf-vera-ok 10s var(--pf-myk) infinite; }
	.pf-panel.er-aktiv .pf-vera-ord s { animation: pf-vera-gml 10s ease infinite; }
	.pf-panel.er-aktiv .pf-vera-ord mark { animation: pf-vera-ny 10s ease infinite; }
	.pf-panel.er-aktiv .pf-vera-endret { animation: pf-vera-endret 10s var(--pf-myk) infinite; }
}

@keyframes pf-felix-1 {
	0%, 3.0% { opacity: 0; transform: translateY(10px); }
	8.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-felix-2 {
	0%, 14.0% { opacity: 0; transform: translateY(10px); }
	19.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-felix-skriv-2 {
	0%, 24.0% { opacity: 1; }
	25.5%, 100% { opacity: 0; }
}

@keyframes pf-felix-tekst-2 {
	0%, 24.5% { opacity: 0; }
	27.5%, 100% { opacity: 1; }
}

@keyframes pf-felix-3 {
	0%, 32.0% { opacity: 0; transform: translateY(10px); }
	37.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-felix-4 {
	0%, 43.0% { opacity: 0; transform: translateY(10px); }
	48.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-felix-skriv-4 {
	0%, 53.0% { opacity: 1; }
	54.5%, 100% { opacity: 0; }
}

@keyframes pf-felix-tekst-4 {
	0%, 53.5% { opacity: 0; }
	56.5%, 100% { opacity: 1; }
}

@keyframes pf-herman-1 {
	0%, 3.0% { opacity: 0; transform: translateY(10px); }
	8.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-herman-styrke-1 {
	0%, 5.0% { width: 0; }
	15.0%, 100% { width: var(--w); }
}

@keyframes pf-herman-2 {
	0%, 5.0% { opacity: 0; transform: translateY(10px); }
	10.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-herman-styrke-2 {
	0%, 7.0% { width: 0; }
	17.0%, 100% { width: var(--w); }
}

@keyframes pf-herman-3 {
	0%, 7.0% { opacity: 0; transform: translateY(10px); }
	12.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-herman-styrke-3 {
	0%, 9.0% { width: 0; }
	19.0%, 100% { width: var(--w); }
}

@keyframes pf-herman-4 {
	0%, 9.0% { opacity: 0; transform: translateY(10px); }
	14.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-herman-styrke-4 {
	0%, 11.0% { width: 0; }
	21.0%, 100% { width: var(--w); }
}

@keyframes pf-herman-utkast {
	0%, 14.0% { opacity: 0; transform: translateY(10px); }
	19.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-herman-linje-1 {
	0%, 17.0% { width: 0; }
	24.0%, 100% { width: var(--w); }
}

@keyframes pf-herman-linje-2 {
	0%, 18.5% { width: 0; }
	25.5%, 100% { width: var(--w); }
}

@keyframes pf-herman-linje-3 {
	0%, 20.0% { width: 0; }
	27.0%, 100% { width: var(--w); }
}

@keyframes pf-herman-linje-4 {
	0%, 21.5% { width: 0; }
	28.5%, 100% { width: var(--w); }
}

@keyframes pf-herman-steg-1 {
	0%, 26.0% { background: #f4f3f8; color: #9ca3af; }
	29.0%, 100% { background: #ecfdf5; color: #059669; }
}

@keyframes pf-herman-steg-2 {
	0%, 34.0% { background: #f4f3f8; color: #9ca3af; }
	37.0%, 100% { background: #ecfdf5; color: #059669; }
}

@keyframes pf-herman-steg-3 {
	0%, 42.0% { background: #f4f3f8; color: #9ca3af; }
	45.0%, 100% { background: #ecfdf5; color: #059669; }
}

@keyframes pf-astrid-1 {
	0%, 4.0% { opacity: 0; transform: translateY(10px); }
	9.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-astrid-2 {
	0%, 8.0% { opacity: 0; transform: translateY(10px); }
	13.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-astrid-grense {
	0%, 14.0% { width: 0; }
	26.0%, 100% { width: 68%; }
}

@keyframes pf-astrid-ja {
	0%, 46.0% { background: #7c3aed; }
	49.0%, 100% { background: #059669; }
}

@keyframes pf-iris-rad-0 {
	0%, 3.0% { opacity: 0; transform: translateY(10px); }
	8.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-iris-stolpe-0 {
	0%, 5.0% { width: 0; }
	15.0%, 100% { width: var(--w); }
}

@keyframes pf-iris-rad-1 {
	0%, 5.5% { opacity: 0; transform: translateY(10px); }
	10.5%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-iris-stolpe-1 {
	0%, 7.5% { width: 0; }
	17.5%, 100% { width: var(--w); }
}

@keyframes pf-iris-rad-2 {
	0%, 8.0% { opacity: 0; transform: translateY(10px); }
	13.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-iris-stolpe-2 {
	0%, 10.0% { width: 0; }
	20.0%, 100% { width: var(--w); }
}

@keyframes pf-iris-tiltak {
	0%, 20.0% { opacity: 0; transform: translateY(10px); }
	25.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-iris-linje-0 {
	0%, 24.0% { opacity: 0; transform: translateY(10px); }
	29.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-iris-linje-1 {
	0%, 27.5% { opacity: 0; transform: translateY(10px); }
	32.5%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-iris-linje-2 {
	0%, 31.0% { opacity: 0; transform: translateY(10px); }
	36.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-iris-neste {
	0%, 38.0% { opacity: 0; transform: translateY(10px); }
	43.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-nora-steg-0 {
	0%, 4.0% { opacity: 0; transform: translateY(10px); }
	9.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-nora-steg-1 {
	0%, 17.0% { opacity: 0; transform: translateY(10px); }
	22.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-nora-steg-2 {
	0%, 30.0% { opacity: 0; transform: translateY(10px); }
	35.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-nora-fremdrift {
	0%, 4.0% { transform: scaleY(0); }
	30.0%, 100% { transform: scaleY(1); }
}

@keyframes pf-nora-venter {
	0%, 36.0% { opacity: 0; transform: scale(.6); }
	38.5% { opacity: 1; transform: scale(1.12); }
	40.5%, 90.0% { opacity: 1; transform: scale(1); }
	93.5%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-nora-trykk {
	0%, 42.0% { opacity: 0; transform: translateY(10px); }
	47.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-nora-trykk-b {
	0%, 44.0% { width: 0; }
	54.0%, 100% { width: 66%; }
}

@keyframes pf-vera-utkast {
	0%, 2.0% { opacity: 0; transform: translateY(10px); }
	7.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-vera-punkt-0 {
	0%, 6.0% { opacity: 0; transform: translateY(10px); }
	11.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-vera-hake-0 {
	0%, 9.0% { background: #f4f3f8; color: transparent; }
	12.0%, 60.0% { background: #059669; color: #fff; }
	63.0%, 100% { background: #f4f3f8; color: transparent; }
}

@keyframes pf-vera-punkt-1 {
	0%, 10.5% { opacity: 0; transform: translateY(10px); }
	15.5%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-vera-hake-1 {
	0%, 13.5% { background: #f4f3f8; color: transparent; }
	16.5%, 60.0% { background: #059669; color: #fff; }
	63.0%, 100% { background: #f4f3f8; color: transparent; }
}

@keyframes pf-vera-punkt-2 {
	0%, 15.0% { opacity: 0; transform: translateY(10px); }
	20.0%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-vera-hake-2 {
	0%, 18.0% { background: #f4f3f8; color: transparent; }
	21.0%, 60.0% { background: #059669; color: #fff; }
	63.0%, 100% { background: #f4f3f8; color: transparent; }
}

@keyframes pf-vera-punkt-3 {
	0%, 19.5% { opacity: 0; transform: translateY(10px); }
	24.5%, 90.0% { opacity: 1; transform: none; }
	94.0%, 100% { opacity: 0; }
}

@keyframes pf-vera-hake-3 {
	0%, 22.5% { background: #f4f3f8; color: transparent; }
	25.5%, 60.0% { background: #059669; color: #fff; }
	63.0%, 100% { background: #f4f3f8; color: transparent; }
}

@keyframes pf-vera-ok {
	0%, 26.0% { opacity: 0; transform: scale(.6); }
	28.5% { opacity: 1; transform: scale(1.12); }
	30.5%, 56.0% { opacity: 1; transform: scale(1); }
	59.5%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-vera-gml {
	0%, 53.0% { opacity: 1; }
	56.0%, 100% { opacity: 0; }
}

@keyframes pf-vera-ny {
	0%, 54.0% { opacity: 0; }
	57.0%, 100% { opacity: 1; }
}

@keyframes pf-vera-endret {
	0%, 59.0% { opacity: 0; transform: scale(.6); }
	61.5% { opacity: 1; transform: scale(1.12); }
	63.5%, 90.0% { opacity: 1; transform: scale(1); }
	93.5%, 100% { opacity: 0; transform: scale(1); }
}

/* Møt heltene: utstillingen med en fane per helt, som bytter av seg selv */
.pf-vis-rom { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 52px); }

.pf-heltfaner {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

.pf-heltfane {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 12px 14px 18px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 18px;
	background: rgba(255, 255, 255, .03);
	color: #f5f5f7;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color .3s ease, border-color .3s ease, transform .35s var(--pf-myk);
}

.pf-heltfane:hover { background: rgba(255, 255, 255, .07); transform: translateY(-2px); }
.pf-heltfane:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }
.pf-heltfane.er-aktiv { border-color: color-mix(in oklab, var(--aksent) 60%, transparent); background: color-mix(in oklab, var(--aksent) 16%, transparent); }
.pf-heltfane .pf-avatar { flex: none; width: 40px; height: 40px; background: var(--flate); }
.pf-heltfane > span { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--pf-gra-lys); }
.pf-heltfane > span b { font-size: 15.5px; color: #fff; }

.pf-heltfane-tid {
	position: absolute;
	right: 14px;
	bottom: 8px;
	left: 14px;
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(255, 255, 255, .08);
}

.pf-heltfane-tid b { display: block; height: 100%; background: var(--aksent); transform: scaleX(0); transform-origin: left; }
.pf-heltfane.er-aktiv .pf-heltfane-tid b { transform: scaleX(1); }

/* Scenen: teksten til venstre, jobben i appen til høyre */
.pf-vis-scene {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	min-height: 540px;
}

.pf-vis-scene .pf-glod { inset: -12% -6% -12% 32%; }
.pf-vis-tekster { position: relative; display: grid; }

.pf-vis-tekst {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .35s ease, transform .5s var(--pf-myk), visibility 0s linear .35s;
}

.pf-vis-tekst.er-aktiv {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity .5s ease .15s, transform .7s var(--pf-myk) .15s, visibility 0s;
}

.pf-vis-tekst .pf-steg-helt { margin-bottom: 14px; }
.pf-vis-tekst .pf-h3 { margin-bottom: 20px; }
.pf-vis-tekst .pf-sjekk li { color: #33334a; }

/* Panelene ligger i samme rute og glir inn fra siden */
.pf-vis-scene .pf-paneler { position: relative; display: grid; height: auto; }
.pf-vis-scene .pf-panel { position: relative; inset: auto; grid-area: 1 / 1; transform: translateX(56px) scale(.97); }
.pf-vis-scene .pf-panel.er-aktiv { transform: none; }

@media (prefers-reduced-motion: no-preference) {
	.pf-heltfane.er-aktiv .pf-heltfane-tid b { animation: pf-fane-tid 9s linear both; animation-play-state: paused; }
	.er-paa .pf-heltfane.er-aktiv .pf-heltfane-tid b { animation-play-state: running; }
}

/* Musen over utstillingen holder helten som vises */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pf-vis-rom:hover .pf-heltfane.er-aktiv .pf-heltfane-tid b { animation-play-state: paused; }
}

@keyframes pf-fane-tid {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@media (max-width: 1099px) {
	.pf-heltfane > span { font-size: 0; }
	.pf-heltfane > span b { font-size: 15px; }
}

@media (max-width: 959px) {
	.pf-heltfaner {
		grid-template-columns: none;
		grid-auto-columns: minmax(150px, 1fr);
		grid-auto-flow: column;
		margin-inline: -24px;
		padding: 2px 24px 6px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.pf-heltfaner::-webkit-scrollbar { display: none; }
	.pf-heltfane { scroll-snap-align: start; }
	.pf-heltfane > span { font-size: 12.5px; }
	.pf-vis-scene { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 28px; }
	.pf-vis-scene .pf-paneler { order: -1; }
	.pf-vis-scene .pf-glod { inset: -6% -10% 40%; }
}

@media (max-width: 640px) {
	.pf-heltfaner { margin-inline: -16px; padding-inline: 16px; }
}

/* Tekstene til venstre */
.pf-helter-steg { grid-area: steg; }

.pf-steg {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 92vh;
	padding-block: 48px;
	opacity: .26;
	transition: opacity .5s ease;
}

.pf-steg.er-aktiv { opacity: 1; }

.pf-steg-helt { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }

.pf-steg-helt .pf-avatar {
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.pf-steg-helt span { display: flex; flex-direction: column; font-size: 14px; color: var(--aksent); font-weight: 600; }
.pf-steg-helt b { font-size: 19px; color: #fff; }

.pf-steg .pf-h3 { margin-bottom: 18px; }

.pf-steg > p {
	max-width: 32rem;
	font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem);
	line-height: 1.55;
	color: var(--pf-gra-lys);
}

.pf-sjekk { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

.pf-sjekk li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: #e4e4ee;
}

.pf-sjekk svg { flex: none; color: var(--aksent); }

/* ======================================================================
   Ingenting går live uten ditt ja (lys grå)
   ====================================================================== */

.pf-lys { background: var(--pf-flate); }

.pf-godkj-scene {
	position: relative;
	max-width: 680px;
	margin-inline: auto;
	padding-block: 2.4em 3.6em;
	font-size: clamp(11px, 2.55cqw, 16px);
	container-type: inline-size;
}

.pf-godkj-kort {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.15em;
	padding: 1.7em;
	border-radius: 1.6em;
	background: #fff;
	color: #111827;
	box-shadow: 0 34px 80px -34px rgba(10, 15, 31, .3), 0 0 0 1px rgba(10, 15, 31, .05);
	transition: box-shadow .7s ease, opacity .5s ease, transform .6s var(--pf-myk);
}

.er-lansert .pf-godkj-kort { box-shadow: 0 34px 90px -30px rgba(124, 58, 237, .45), 0 0 0 2px rgba(124, 58, 237, .3); }

.pf-godkj-hode { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.pf-godkj-hode .pf-etikett { display: inline-flex; align-items: center; gap: .45em; background: #fff7ed; color: #c2410c; transition: background-color .4s ease, color .4s ease; }
.pf-godkj-hode .pf-etikett i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.pf-etikett-etter { display: none; }
.er-godkjent .pf-godkj-hode .pf-etikett { background: #ecfdf5; color: var(--pf-gront); }
.er-godkjent .pf-etikett-for { display: none; }
.er-godkjent .pf-etikett-etter { display: inline; }

.pf-fra { display: flex; align-items: center; gap: .5em; font-size: .82em; color: #6b7280; }
.pf-fra .pf-avatar { width: 1.9em; height: 1.9em; background: var(--flate); }

.pf-godkj-tittel { font-size: 1.4em; font-weight: 600;}

.pf-godkj-to { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9em; }

.pf-godkj-boks {
	position: relative;
	padding: 1em 1.1em;
	border-radius: 1em;
	background: #fafafb;
	box-shadow: inset 0 0 0 1.5px transparent;
	transition: background-color .35s ease, box-shadow .35s ease;
}

[data-fase='likt'] .pf-godkj-boks--likt { background: #f5f3ff; box-shadow: inset 0 0 0 1.5px #c4b5fd; }

.pf-godkj-ledd {
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #9ca3af;
}

.pf-godkj-to ul { margin-top: .6em; }

.pf-godkj-to li {
	position: relative;
	display: flex;
	align-items: center;
	gap: .55em;
	margin-inline: -.45em;
	padding: .3em .45em;
	border-radius: .55em;
	font-size: .88em;
	color: #374151;
	transition: background-color .3s ease;
}

:is([data-fase='les-1'] [data-mal='les-1'], [data-fase='les-2'] [data-mal='les-2'], [data-fase='les-3'] [data-mal='les-3']) { background: #ecfdf5; }

.pf-pluss,
.pf-likt {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background: #ecfdf5;
	font-style: normal;
	font-size: .9em;
	font-weight: 700;
	color: var(--pf-gront);
}

.pf-pluss::before { content: '+'; }
.pf-likt { background: #f4f3f8; color: #9ca3af; }
.pf-likt::before { content: '='; }

/* Forklaringen pekeren viser: budsjettet holder */
.pf-godkj-tips {
	position: absolute;
	bottom: calc(100% + .55em);
	left: 1.4em;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	width: max-content;
	max-width: 22em;
	padding: .55em .8em;
	border-radius: .65em;
	background: var(--pf-blekk);
	color: #fff;
	font-size: .92em;
	font-weight: 600;
	line-height: 1.3;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s ease, transform .35s var(--pf-myk);
	pointer-events: none;
}

.pf-godkj-tips svg { flex: none; color: #34d399; }

.pf-godkj-tips::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 1.2em;
	border: .4em solid transparent;
	border-top-color: var(--pf-blekk);
}

[data-fase='les-2'] .pf-godkj-tips { opacity: 1; transform: none; }

.pf-godkj-knapper { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5em; }

.pf-k {
	position: relative;
	padding: .7em 1.15em;
	border: 1px solid #eceaf2;
	border-radius: .75em;
	background: #fff;
	font-size: .86em;
	font-weight: 700;
	color: #374151;
}

.pf-k--ja {
	display: grid;
	border-color: transparent;
	background: #7c3aed;
	color: #fff;
	transition: background-color .35s ease, transform .18s ease, box-shadow .3s ease;
}

.pf-k--ja > .pf-k-for,
.pf-k--ja > .pf-k-etter { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .35em; transition: opacity .25s ease; }
.pf-k-etter { opacity: 0; }

[data-fase='hover'] .pf-k--ja { transform: translateY(-2px); background: #6d28d9; box-shadow: 0 12px 26px -10px rgba(124, 58, 237, .75); }
[data-fase='klikk'] .pf-k--ja { transform: scale(.93); }
.er-godkjent .pf-k--ja { background: var(--pf-gront); box-shadow: 0 12px 26px -12px rgba(5, 150, 105, .6); }
.er-godkjent .pf-k-for { opacity: 0; }
.er-godkjent .pf-k-etter { opacity: 1; }

.pf-ring {
	position: absolute;
	inset: -6px;
	border: 2px solid #7c3aed;
	border-radius: 1em;
	opacity: 0;
	pointer-events: none;
}

[data-fase='klikk'] .pf-ring { animation: pf-ring .7s ease-out both; }

@keyframes pf-ring {
	from { opacity: .8; transform: scale(.9); }
	to { opacity: 0; transform: scale(1.3); }
}

/* Gnistene når forslaget godkjennes */
.pf-gnister { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; }

.pf-gnister i {
	position: absolute;
	top: -.22em;
	left: -.22em;
	width: .44em;
	height: .44em;
	border-radius: 50%;
	background: #10b981;
	opacity: 0;
}

.pf-gnister i:nth-child(3n+1) { background: #7c3aed; }
.pf-gnister i:nth-child(3n+2) { background: #f59e0b; }
.er-godkjent .pf-gnister i { animation: pf-gnist .9s cubic-bezier(.2, .7, .3, 1) both; }

@keyframes pf-gnist {
	0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
	100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--l) - 1.4em)) scale(.4); }
}

/* Statusen: godkjent, klar, lansert */
.pf-godkj-steg { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; }

.pf-godkj-steg [data-steg] {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .45em .85em;
	border-radius: 999px;
	background: #f4f3f8;
	font-size: .78em;
	font-weight: 700;
	color: #9ca3af;
	transition: background-color .4s ease, color .4s ease, transform .45s var(--pf-myk);
}

.pf-godkj-steg [data-steg] i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.pf-godkj-linje { flex: 1 1 1.4em; max-width: 3em; height: 2px; overflow: hidden; border-radius: 2px; background: #ecebf2; }
.pf-godkj-linje b { display: block; height: 100%; background: var(--pf-gront); transform: scaleX(0); transform-origin: left; transition: transform .7s ease; }

.er-godkjent [data-steg='godkjent'],
.er-klar [data-steg='klar'],
.er-lansert [data-steg] { background: #ecfdf5; color: var(--pf-gront); }

.er-klar [data-linje='klar'] b,
.er-lansert [data-linje='lansert'] b { transform: scaleX(1); }

.er-lansert [data-steg='lansert'] { background: #7c3aed; color: #fff; transform: scale(1.08); }

/* Varslene: nytt forslag øverst, lansert nederst */
.pf-godkj-varsel {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .7em;
	max-width: 24em;
	padding: .75em 1em;
	border-radius: 1em;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 18px 40px -18px rgba(10, 15, 31, .38), 0 0 0 1px rgba(10, 15, 31, .06);
	font-size: .86em;
	line-height: 1.35;
	color: #6b7280;
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s ease, transform .6s var(--pf-myk);
}

.pf-godkj-varsel b { display: block; color: #111827; }
.pf-godkj-varsel em { align-self: flex-start; margin-left: .4em; font-size: .86em; font-style: normal; color: #9ca3af; }
.pf-godkj-varsel .pf-avatar { flex: none; width: 2.3em; height: 2.3em; background: var(--flate); }
.pf-godkj-varsel--nytt { top: 0; right: -1.2em; transform: translateY(-16px) scale(.96); }
.pf-godkj-varsel--lansert { bottom: .6em; left: -1.2em; transform: translateY(16px) scale(.96); }
.er-varsel .pf-godkj-varsel--nytt,
.er-lansert .pf-godkj-varsel--lansert { opacity: 1; transform: none; }

.pf-godkj-hake { display: grid; flex: none; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--pf-gront); color: #fff; font-size: 1em; }

/* Pekeren: pil som blir til en hånd over knappen, og en ring når den trykker */
.pf-peker {
	position: absolute;
	top: var(--py, 112%);
	left: var(--px, 90%);
	z-index: 5;
	font-size: 2.1em;
	line-height: 0;
	opacity: 0;
	filter: drop-shadow(0 4px 6px rgba(10, 15, 31, .3));
	transition: left .9s cubic-bezier(.65, 0, .25, 1), top .9s cubic-bezier(.65, 0, .25, 1), opacity .4s ease;
	pointer-events: none;
}

.pf-peker svg { display: block; transition: opacity .15s ease, transform .15s ease; }
.pf-peker-hand { position: absolute; top: 0; left: -.3em; opacity: 0; }
.er-peker .pf-peker { opacity: 1; }
.er-hand .pf-peker-pil { opacity: 0; }
.er-hand .pf-peker-hand { opacity: 1; }
[data-fase='klikk'] .pf-peker svg { transform: scale(.86); }

.pf-peker-klikk {
	position: absolute;
	top: .12em;
	left: .12em;
	width: 1.2em;
	height: 1.2em;
	margin: -.6em 0 0 -.6em;
	border-radius: 50%;
	background: rgba(124, 58, 237, .35);
	opacity: 0;
}

[data-fase='klikk'] .pf-peker-klikk { animation: pf-klikk .6s ease-out both; }

@keyframes pf-klikk {
	from { opacity: .9; transform: scale(.3); }
	to { opacity: 0; transform: scale(2.4); }
}

/* Slutten av loopen: alt toner ut før neste forslag */
.er-ut .pf-godkj-kort { opacity: 0; transform: translateY(10px) scale(.985); }
.er-ut .pf-godkj-varsel { opacity: 0; }

@media (max-width: 640px) {
	.pf-godkj-varsel--nytt { right: 0; }
	.pf-godkj-varsel--lansert { left: 0; }
}

.pf-trygg {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: clamp(72px, 9vw, 120px);
}

.pf-trygg li {
	padding: 34px 32px 36px;
	border-radius: 28px;
	background: #fff;
}

.pf-trygg-ikon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #f5f3ff;
	font-size: 22px;
	color: #7c3aed;
}

.pf-trygg .pf-h4 { margin: 22px 0 10px; }
.pf-trygg p { font-size: 16.5px; line-height: 1.55; color: var(--pf-gra); }

/* Kompakt: forslaget og det som gjør det trygt side om side, med mindre luft */
.pf-godkj { padding-block: clamp(64px, 7vw, 104px); }
.pf-godkj .pf-hode { margin-bottom: clamp(28px, 3.5vw, 48px); }

.pf-godkj-rad {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
}

.pf-godkj-rad .pf-godkj-scene { max-width: none; margin: 0; padding-block: 1.6em 2.6em; }
.pf-godkj-rad .pf-trygg { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 0; }

.pf-godkj-rad .pf-trygg li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	padding: 18px 20px;
	border-radius: 20px;
}

.pf-godkj-rad .pf-trygg-ikon { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; font-size: 19px; }
.pf-godkj-rad .pf-trygg .pf-h4 { margin: 0 0 4px; font-size: 1.125rem; }
.pf-godkj-rad .pf-trygg p { font-size: 15px; line-height: 1.5; }

@media (max-width: 959px) {
	.pf-godkj-rad { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   Rytmen, raden som glir sidelengs
   ====================================================================== */

.pf-rytme { padding-bottom: clamp(72px, 9vw, 140px); }
.pf-rytme .pf-hode { margin-bottom: 0; }

.pf-rytme-klebe {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: clamp(48px, 6vw, 80px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.pf-rytme-klebe::-webkit-scrollbar { display: none; }

.pf-rytme-spor {
	display: flex;
	gap: 20px;
	width: max-content;
	padding-inline: max(24px, calc((100vw - 1180px) / 2));
	padding-bottom: 8px;
}

.pf-rytme-kort {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: none;
	width: min(80vw, 370px);
	min-height: 420px;
	padding: 34px 32px 30px;
	border-radius: 30px;
	background: var(--pf-flate);
	scroll-snap-align: center;
	overflow: hidden;
}

.pf-tid {
	width: fit-content;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--flate, #f3f1fa);
	font-size: 14px;
	font-weight: 700;
	color: color-mix(in oklab, var(--aksent, #7c3aed) 82%, #000);
}

.pf-rytme-kort .pf-h4 { margin: 26px 0 12px; font-size: clamp(1.4rem, 1.2rem + .5vw, 1.75rem); }
.pf-rytme-kort p { font-size: 16.5px; line-height: 1.55; color: var(--pf-gra); }

.pf-rytme-helt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 24px;
	font-size: 14px;
	font-weight: 700;
}

.pf-rytme-maskot { width: 76px; height: auto; transition: transform .6s var(--pf-myk); }
.pf-rytme-kort:hover .pf-rytme-maskot { transform: translateY(-6px) rotate(-6deg); }

.pf-fremdrift {
	width: 160px;
	height: 3px;
	margin: 40px auto 0;
	border-radius: 99px;
	background: var(--pf-linje);
	overflow: hidden;
}

.pf-fremdrift i {
	display: block;
	width: calc(var(--p, 0) * 100%);
	height: 100%;
	background: var(--pf-blekk);
}

/* Når skriptet styrer raden (store skjermer): den står fast og glir sidelengs */
.pf-rytme-rom.er-horisontal .pf-rytme-klebe {
	position: sticky;
	top: 0;
	height: 100vh;
	padding-top: 0;
	overflow: hidden;
}

.pf-rytme-rom.er-horisontal .pf-rytme-spor {
	transform: translate3d(calc(var(--x, 0) * -1px), 0, 0);
	will-change: transform;
}

/* ======================================================================
   Bento
   ====================================================================== */

.pf-fliser {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.pf-flis {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-height: 420px;
	padding: 36px 34px 32px;
	border-radius: 30px;
	background: var(--pf-flate);
	overflow: hidden;
}

.pf-flis--kostnad { grid-column: span 2; }

.pf-flis--mennesker {
	grid-column: span 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	min-height: 0;
}

.pf-flis-tekst p { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--pf-gra); max-width: 30rem; }

.pf-flis-bilde {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex: 1;
	min-height: 200px;
}

/* Kostnad per henvendelse: linjen tegnes med en lysende spiss, tallet teller
   ned, og alt starter på nytt. Uten bevegelse står sluttbildet. */
.pf-graf {
	width: 100%;
	padding: 20px 22px 14px;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 20px 50px -30px rgba(10, 15, 31, .25);
}

.pf-graf-topp { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.pf-graf-topp > span { width: 100%; font-size: 13px; font-weight: 600; color: #6b7280; }
.pf-graf-topp b { font-size: 30px; font-weight: 700;color: #111827; font-variant-numeric: tabular-nums; }
.pf-graf-topp b .pf-mo-teller { width: auto; }

.pf-graf-topp em {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #ecfdf5;
	font-style: normal;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--pf-gront);
}

.pf-graf-svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.pf-graf-rutenett line { stroke: #f0eff5; stroke-width: 1.5; }
.pf-graf-linje { stroke: #7c3aed; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; }
.pf-graf-punkt { fill: #7c3aed; stroke: #fff; stroke-width: 3; }
.pf-graf-glorie { fill: #7c3aed; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pf-graf-spiss { opacity: 0; fill: #7c3aed; }
.pf-graf-spiss-glod { fill: rgba(124, 58, 237, .25); }

/* Henvendelser som kommer inn, en om gangen */
.pf-feed {
	width: 100%;
	height: 230px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
	mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}

.pf-feed-spor { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }

.pf-feed-rad {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	height: 47px;
	padding: 0 15px;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 10px 24px -20px rgba(10, 15, 31, .4);
	font-size: 14px;
}

.pf-feed-rad i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.pf-feed-rad b { font-weight: 700; color: #111827; }
.pf-feed-rad span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6b7280; }

/* Tilkoblinger i bane rundt appen, med data som strømmer inn */
.pf-bane {
	position: relative;
	width: 300px;
	height: 300px;
	margin-inline: auto;
}

.pf-bane::before {
	content: '';
	position: absolute;
	inset: 22px;
	border: 1px dashed #d6d5e2;
	border-radius: 50%;
}

.pf-bane-midt {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
	border-radius: 22px;
	background: var(--pf-grad);
	box-shadow: 0 16px 40px -12px rgba(160, 32, 240, .6);
}

.pf-bane-midt i { width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .92); }
.pf-bane-ring { position: absolute; inset: 0; }

.pf-bane-chip {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: rotate(calc(var(--i) * 72deg)) translateY(-128px) rotate(calc(var(--i) * -72deg));
}

.pf-bane-chip > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 20px -10px rgba(10, 15, 31, .3);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	translate: -50% -50%;
}

.pf-bane-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--farge); }

/* Eikene: en prikk fra hver tilkobling inn til appen */
.pf-bane-eike {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform: rotate(calc(var(--i) * 72deg));
}

.pf-bane-eike i {
	position: absolute;
	top: -4px;
	left: -4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #a020f0;
	box-shadow: 0 0 10px 2px rgba(160, 32, 240, .45);
	opacity: 0;
}

@keyframes pf-snurr { to { rotate: 360deg; } }

/* Varsler som kommer og går */
.pf-varsler { display: flex; flex-direction: column; gap: 10px; width: 100%; }

.pf-varsel {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 13px 15px;
	border-radius: 17px;
	background: #fff;
	box-shadow: 0 14px 30px -20px rgba(10, 15, 31, .35);
	font-size: 13.5px;
	line-height: 1.4;
	color: #4b5563;
}

.pf-varsel .pf-avatar { width: 34px; height: 34px; }
.pf-varsel b { display: block; color: #111827; }

/* Målkort: ringen fylles og tallet teller opp */
.pf-maal {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.pf-maal svg { width: 168px; height: 168px; transform: rotate(-90deg); }
.pf-maal circle { fill: none; stroke-width: 11; }
.pf-maal-spor { stroke: #e9e7f2; }
.pf-maal-fyll { stroke: #7c3aed; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 24; }

.pf-maal-tall {
	position: absolute;
	top: 84px;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translate(-50%, -50%);
}

.pf-maal-tall b { font-size: 38px; font-weight: 700;line-height: 1; font-variant-numeric: tabular-nums; }
.pf-maal-tall > span { font-size: 13px; color: #6b7280; }
.pf-maal-etikett { font-size: 13px; font-weight: 600; color: #6b7280; }

.pf-maal-ny {
	position: absolute;
	top: 6px;
	right: calc(50% - 128px);
	padding: 5px 10px;
	border-radius: 999px;
	background: #ecfdf5;
	box-shadow: 0 8px 18px -12px rgba(5, 150, 105, .6);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--pf-gront);
}

/* Menneskene bak */
.pf-folk { display: flex; align-items: center; padding-left: 22px; }

.pf-folk img,
.pf-folk-pluss {
	width: 96px;
	height: 96px;
	margin-left: -22px;
	border: 5px solid var(--pf-flate);
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	transform: scale(.6);
	opacity: 0;
	transition: transform .7s var(--pf-myk), opacity .5s ease;
	transition-delay: calc(var(--i, 3) * .1s + .2s);
}

.pf-folk-pluss { display: grid; place-items: center; background: #ecf4de; }
.pf-folk-pluss img { width: 74%; height: auto; margin: 0; border: 0; border-radius: 0; background: none; transform: none; opacity: 1; object-fit: contain; }

.er-synlig .pf-folk > img,
.er-synlig .pf-folk-pluss { transform: none; opacity: 1; }

/* Bevegelsen i flisene, i loop så lenge siden er åpen */
@media (prefers-reduced-motion: no-preference) {
	.er-synlig .pf-graf-linje { animation: pf-graf-tegn 7s linear infinite; }
	.er-synlig .pf-graf-flate { animation: pf-graf-flate 7s ease infinite; }
	.er-synlig .pf-graf-punkt { animation: pf-graf-punkt 7s var(--pf-myk) infinite; }
	.er-synlig .pf-graf-glorie { animation: pf-glorie 1.8s ease-out infinite; }
	.er-synlig .pf-graf-spiss { animation: pf-graf-spiss 7s linear infinite; }
	.er-synlig .pf-graf-topp .pf-mo-teller { animation: pf-graf-tell 7s linear infinite; }
	.er-synlig .pf-graf-topp em { animation: pf-graf-chip 7s var(--pf-myk) infinite; }

	.er-synlig .pf-feed-spor { animation: pf-feed-steg 11s infinite; }
	.er-synlig .pf-feed-rad i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #10b981; animation: pf-feed-puls 1.8s ease-out infinite; }
	.er-synlig .pf-feed-rad:nth-child(5n+2) i::after { animation-delay: .4s; }
	.er-synlig .pf-feed-rad:nth-child(5n+3) i::after { animation-delay: .8s; }
	.er-synlig .pf-feed-rad:nth-child(5n+4) i::after { animation-delay: 1.2s; }

	.er-synlig .pf-bane-ring { animation: pf-snurr 30s linear infinite; }
	.er-synlig .pf-bane-chip > span { animation: pf-snurr 30s linear infinite reverse; }
	.er-synlig .pf-bane-eike i { animation: pf-eike 2.5s cubic-bezier(.5, 0, .7, 1) infinite both; animation-delay: calc(var(--i) * .5s); }
	.er-synlig .pf-bane-midt { animation: pf-nav 2.5s ease-out infinite; }

	.er-synlig .pf-varsel { animation: pf-varsel-loop 9s var(--pf-myk) infinite both; }
	.er-synlig .pf-varsel:nth-child(2) { animation-delay: .8s; }
	.er-synlig .pf-varsel:nth-child(3) { animation-delay: 1.6s; }

	.er-synlig .pf-maal-fyll { animation: pf-maal-fyll 7s var(--pf-myk) infinite; }
	.er-synlig .pf-maal-tall .pf-mo-teller { animation: pf-maal-tell 7s var(--pf-myk) infinite; }
	.er-synlig .pf-maal-ny { animation: pf-maal-ny 7s var(--pf-myk) infinite; }
}

@keyframes pf-graf-tegn {
	0%, 6% { stroke-dashoffset: 1; opacity: 1; }
	46%, 92% { stroke-dashoffset: 0; opacity: 1; }
	97% { stroke-dashoffset: 0; opacity: 0; }
	100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes pf-graf-flate {
	0%, 30% { opacity: 0; }
	52%, 92% { opacity: 1; }
	97%, 100% { opacity: 0; }
}

@keyframes pf-graf-punkt {
	0%, 45% { opacity: 0; transform: scale(0); }
	50% { opacity: 1; transform: scale(1.3); }
	54%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-glorie {
	from { opacity: .35; transform: scale(1); }
	to { opacity: 0; transform: scale(3.2); }
}

@keyframes pf-graf-tell {
	0%, 6% { --pf-n: 712; }
	46%, 100% { --pf-n: 612; }
}

@keyframes pf-graf-chip {
	0%, 46% { opacity: 0; transform: scale(.6); }
	51% { opacity: 1; transform: scale(1.12); }
	55%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes pf-graf-spiss {
	0% { opacity: 0; transform: translate(0px, 32px); }
	5% { opacity: 1; }
	6.0% { transform: translate(0px, 32px); }
	9.3% { transform: translate(50px, 35px); }
	12.7% { transform: translate(100px, 43px); }
	16.0% { transform: translate(147px, 60px); }
	19.3% { transform: translate(198px, 65px); }
	22.7% { transform: translate(248px, 71px); }
	26.0% { transform: translate(298px, 75px); }
	29.3% { transform: translate(344px, 95px); }
	32.7% { transform: translate(394px, 103px); }
	36.0% { transform: translate(443px, 113px); }
	39.3% { transform: translate(492px, 124px); }
	42.7% { transform: translate(542px, 130px); }
	46.0% { transform: translate(592px, 140px); }
	50% { opacity: 0; transform: translate(592px, 140px); }
	100% { opacity: 0; transform: translate(592px, 140px); }
}

/* Fem steg ned, en rad om gangen, og så samme bilde som starten */
@keyframes pf-feed-steg {
	0%, 14% { transform: translateY(-285px); }
	20%, 34% { transform: translateY(-228px); }
	40%, 54% { transform: translateY(-171px); }
	60%, 74% { transform: translateY(-114px); }
	80%, 94% { transform: translateY(-57px); }
	100% { transform: translateY(0); }
}

@keyframes pf-feed-puls {
	0% { opacity: .6; transform: scale(1); }
	100% { opacity: 0; transform: scale(3); }
}

@keyframes pf-eike {
	0% { opacity: 0; transform: translateY(-118px) scale(.6); }
	15% { opacity: 1; }
	85% { opacity: 1; transform: translateY(-40px) scale(1); }
	100% { opacity: 0; transform: translateY(-36px) scale(.4); }
}

@keyframes pf-nav {
	0%, 70% { box-shadow: 0 16px 40px -12px rgba(160, 32, 240, .6), 0 0 0 0 rgba(160, 32, 240, .35); }
	100% { box-shadow: 0 16px 40px -12px rgba(160, 32, 240, .6), 0 0 0 16px rgba(160, 32, 240, 0); }
}

@keyframes pf-varsel-loop {
	0% { opacity: 0; transform: translateX(28px) scale(.96); }
	7%, 72% { opacity: 1; transform: none; }
	80%, 100% { opacity: 0; transform: translateX(-20px) scale(.97); }
}

@keyframes pf-maal-fyll {
	0%, 4% { stroke-dashoffset: 100; opacity: 1; }
	40%, 92% { stroke-dashoffset: 24; opacity: 1; }
	97% { stroke-dashoffset: 24; opacity: 0; }
	100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes pf-maal-tell {
	0%, 4% { --pf-n: 0; }
	40%, 100% { --pf-n: 38; }
}

@keyframes pf-maal-ny {
	0%, 42% { opacity: 0; transform: translateY(8px) scale(.8); }
	47% { opacity: 1; transform: translateY(-2px) scale(1.08); }
	51%, 90% { opacity: 1; transform: none; }
	96%, 100% { opacity: 0; transform: none; }
}

/* ======================================================================
   Vekstpakkene
   ====================================================================== */

.pf-pakker { background: var(--pf-flate); }

.pf-pakke-liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	padding-top: 14px;
}

.pf-pakke {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 32px 36px;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(10, 15, 31, .07);
	transition: transform .5s var(--pf-myk), box-shadow .5s ease;
}

.pf-pakke:hover {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px rgba(10, 15, 31, .07), 0 30px 60px -34px rgba(10, 15, 31, .35);
}

.pf-pakke.er-uthevet { box-shadow: 0 0 0 2px #7c3aed, 0 34px 70px -36px rgba(124, 58, 237, .55); }
.pf-pakke.er-uthevet:hover { box-shadow: 0 0 0 2px #7c3aed, 0 40px 80px -34px rgba(124, 58, 237, .6); }

.pf-pakke-merke {
	position: absolute;
	top: -13px;
	left: 32px;
	padding: 6px 13px;
	border-radius: 999px;
	background: #7c3aed;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
}

.pf-pakke-merkelapp {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7c3aed;
}

.pf-pakke-navn {
	margin: 10px 0 12px;
	font-family: var(--pf-tittel);
	font-size: clamp(1.9rem, 1.6rem + .8vw, 2.35rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--pf-blekk);
}

.pf-pakke-tekst { min-height: 3.1em; font-size: 15.5px; line-height: 1.55; color: var(--pf-gra); }

.pf-pakke-pris { display: flex; flex-direction: column; gap: 2px; margin-top: 30px; }
.pf-pakke-fra { font-size: 13px; color: var(--pf-gra); }

.pf-pakke-pris b {
	font-family: var(--pf-tittel);
	font-size: clamp(2.5rem, 2.1rem + 1vw, 3rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--pf-blekk);
	font-variant-numeric: tabular-nums;
}

.pf-pakke-pris small { font-size: .42em; font-weight: 700; letter-spacing: 0; }

.pf-pakke-knapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 54px;
	margin-top: 24px;
	border: 1px solid #e2e2ea;
	border-radius: 14px;
	background: #fff;
	font-size: 16px;
	font-weight: 700;
	color: var(--pf-blekk);
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}

.pf-pakke-knapp:hover { border-color: #c9c9d6; }
.pf-pakke-knapp--lilla { border-color: transparent; background: var(--knapp); color: #fff; }
.pf-pakke-knapp--lilla:hover { border-color: transparent; background: var(--knapp-hover); }
.pf-pakke-knapp--mork { border-color: transparent; background: #141a2e; color: #fff; }
.pf-pakke-knapp--mork:hover { border-color: transparent; background: #262640; }

.pf-pakke-knapp:focus-visible {
	outline: 3px solid #a020f0;
	outline-offset: 3px;
}

.pf-pakke-punkter {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 28px;
	padding-top: 26px;
	border-top: 1px solid #ececf1;
}

.pf-pakke-punkter li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.45; color: #374151; }
.pf-pakke-punkter svg { flex: none; margin-top: 3px; color: #7c3aed; }

/* Hvert punkt står på en linje når kortene står side om side */
@media (min-width: 960px) {
	.pf-pakke-punkter li { font-size: clamp(13.5px, 1.25vw, 15.5px); white-space: nowrap; }
}

/* Sammenligningen av pakkene, som på /vekst/ */
.pf-sml { margin-top: clamp(72px, 8vw, 112px); }

.pf-sml-topp {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.pf-sml-ingress { max-width: 36rem; margin-top: 10px; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.5; color: var(--pf-gra); }
.pf-sml-periodevalg { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.pf-sml-periode {
	display: inline-flex;
	padding: 5px;
	border: 1px solid var(--pf-linje);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 24px -16px rgba(10, 15, 31, .25);
}

.pf-sml-periode button {
	padding: 10px 26px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #4b5563;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.pf-sml-periode button.er-aktiv { background: var(--knapp); color: #fff; }
.pf-sml-periode button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.pf-sml-aarlig { font-size: 13px; color: var(--pf-gra); visibility: hidden; }
.pf-sml.er-aarlig .pf-sml-aarlig { visibility: visible; }

.pf-sml-valg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin: 28px 0 18px;
	font-size: 15px;
}

.pf-sml-alle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #7c3aed;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.pf-sml-alle svg { transition: transform .2s ease; }
.pf-sml-alle[aria-expanded='true'] svg { transform: rotate(180deg); }
.pf-sml-bryter { display: inline-flex; align-items: center; gap: 12px; color: #374151; cursor: pointer; user-select: none; }

.pf-sml-bryter input {
	position: relative;
	flex: none;
	width: 44px;
	height: 24px;
	margin: 0;
	border-radius: 999px;
	background: var(--pf-linje);
	appearance: none;
	cursor: pointer;
	transition: background .15s;
}

.pf-sml-bryter input::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	transition: transform .15s;
}

.pf-sml-bryter input:checked { background: #7c3aed; }
.pf-sml-bryter input:checked::after { transform: translateX(20px); }
.pf-sml-bryter input:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }

/* Radene: navnet og en celle per pakke */
.pf-sml-rad { display: grid; grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)); }

.pf-sml-hode {
	position: sticky;
	top: 96px;
	z-index: 6;
	overflow: hidden;
	border: 1px solid var(--pf-linje);
	border-radius: 20px 20px 0 0;
	background: #fff;
	box-shadow: 0 10px 20px -18px rgba(10, 15, 31, .35);
}

.pf-sml-pakke {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 22px 12px;
	border-left: 1px solid var(--pf-linje);
	background: #fbfafe;
	text-align: center;
}

.pf-sml-pakke.er-uthevet { background: #f5f0ff; }
.pf-sml-pakkenavn { font-family: var(--pf-tittel); font-size: 20px; font-weight: 800; color: var(--pf-blekk); }
.pf-sml-pris { color: var(--pf-blekk); font-size: 15px; font-weight: 700; }
.pf-sml-pris b { font-family: var(--pf-tittel); font-size: 30px; font-weight: 800;font-variant-numeric: tabular-nums; }
.pf-sml-pris small { display: block; font-size: 13px; font-weight: 500; color: var(--pf-gra); }

.pf-sml-se {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 8px 18px;
	border: 1.5px solid #7c3aed;
	border-radius: 10px;
	color: #7c3aed;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.pf-sml-se:hover { background: #f5f1fe; transform: translateY(-2px); }

.pf-sml-grupper { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
/* Uten overflow: hidden, så forklaringene over første rad ikke kuttes */
.pf-sml-gruppe { border: 1px solid var(--pf-linje); border-radius: 20px; background: #fff; }

.pf-sml-gruppehode {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 20px;
	border: 0;
	border-radius: 19px 19px 0 0;
	background: #f8f6fe;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .15s;
}

.pf-sml-gruppehode:hover { background: #f3effd; }
.pf-sml-gruppehode:focus-visible { outline: 2px solid #7c3aed; outline-offset: -2px; }
.pf-sml-gruppeikon { display: grid; flex: none; place-items: center; font-size: 22px; color: #7c3aed; }
.pf-sml-gruppenavn { font-family: var(--pf-tittel); font-size: 18px; font-weight: 800; color: var(--pf-blekk); }
.pf-sml-antall { font-size: 14px; color: var(--pf-gra); }
.pf-sml-oppsummering { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .85); font-size: 12.5px; color: #4b5563; }
.pf-sml-pil { flex: none; margin-left: auto; font-size: 20px; color: #7c3aed; transition: transform .2s ease; }
.pf-sml-oppsummering + .pf-sml-pil { margin-left: 0; }
.pf-sml-gruppe[data-aapen='1'] .pf-sml-oppsummering { display: none; }
.pf-sml-gruppe[data-aapen='1'] .pf-sml-oppsummering + .pf-sml-pil { margin-left: auto; }
.pf-sml-gruppe[data-aapen='0'] .pf-sml-innhold { display: none; }
.pf-sml-gruppe[data-aapen='0'] .pf-sml-gruppehode { border-radius: 19px; }
.pf-sml-gruppe[data-aapen='0'] .pf-sml-pil { transform: rotate(-90deg); }

.pf-sml-innhold .pf-sml-rad { border-top: 1px solid var(--pf-linje); }
.pf-sml-navn { display: flex; align-items: center; gap: 8px; padding: 14px 20px; font-size: 15px; color: var(--pf-blekk); }

.pf-sml-verdi {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 12px;
	border-left: 1px solid var(--pf-linje);
	font-size: 15px;
	text-align: center;
}

.pf-sml-ja { display: grid; font-size: 20px; color: #7c3aed; }
.pf-sml-nei { display: grid; font-size: 16px; color: #d4d4dc; }
.pf-sml-tekst { color: #374151; font-weight: 600; }

/* Kun forskjeller: like rader og grupper uten forskjeller skjules */
.pf-sml.kun-forskjeller [data-pf-lik='1'],
.pf-sml.kun-forskjeller .pf-sml-gruppe.ingen-forskjeller { display: none; }

.pf-sml-tips { position: relative; display: inline-flex; color: #9ca3af; cursor: help; }
.pf-sml-tips:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; border-radius: 4px; }

.pf-sml-tips-boks {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 10;
	width: 250px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--pf-blekk);
	color: #fff;
	font-size: 12.5px;
	line-height: 1.45;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity .15s;
}

.pf-sml-tips:hover .pf-sml-tips-boks,
.pf-sml-tips:focus .pf-sml-tips-boks { opacity: 1; }

@media (max-width: 767px) {
	.pf-sml-periodevalg { align-items: flex-start; }
	.pf-sml-rad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pf-sml-hode { top: 76px; border-radius: 16px 16px 0 0; }
	.pf-sml-hode-tom { display: none; }
	.pf-sml-pakke { padding: 12px 4px; }
	.pf-sml-hode-tom + .pf-sml-pakke { border-left: 0; }
	.pf-sml-pakkenavn { font-size: 14px; }
	.pf-sml-pris { font-size: 12px; }
	.pf-sml-pris b { font-size: 17px; }
	.pf-sml-pris small { font-size: 11px; }
	.pf-sml-se { margin-top: 6px; padding: 5px 10px; font-size: 12px; }
	.pf-sml-gruppehode { gap: 10px; padding: 14px 16px; }
	.pf-sml-antall,
	.pf-sml-oppsummering { display: none; }
	.pf-sml-pil { margin-left: auto; }
	.pf-sml-navn { grid-column: 1 / -1; padding: 10px 16px; border-bottom: 1px solid var(--pf-linje); background: #fbfafe; font-size: 14px; font-weight: 600; }
	.pf-sml-verdi { min-height: 46px; padding: 12px 6px; border-left: 0; font-size: 13px; }
	.pf-sml-verdi + .pf-sml-verdi { border-left: 1px solid var(--pf-linje); }
	.pf-sml-tips-boks { left: 0; width: 220px; transform: none; }
}

/* Superkreftene, tilleggene til hovedpakkene */
.pf-krefter { margin-top: clamp(80px, 9vw, 128px); }
.pf-krefter-hode { margin-bottom: clamp(36px, 4.5vw, 56px); }

.pf-kraft-liste {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.pf-kraft {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px 26px 26px;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(10, 15, 31, .07);
	overflow: hidden;
	transition: transform .5s var(--pf-myk), box-shadow .5s ease;
}

/* Et svakt lys i hjørnet, i merkevarens gradient */
.pf-kraft::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(160, 32, 240, .14), transparent);
	transition: transform .6s var(--pf-myk);
	pointer-events: none;
}

.pf-kraft:hover {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px rgba(124, 58, 237, .2), 0 26px 50px -30px rgba(76, 29, 149, .4);
}

.pf-kraft:hover::before { transform: scale(1.4); }

.pf-kraft-ikon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 15px;
	background: linear-gradient(135deg, #4f46ff, #a020f0 55%, #ff1493);
	font-size: 23px;
	color: #fff;
	box-shadow: 0 12px 24px -12px rgba(160, 32, 240, .7);
}

.pf-kraft-navn {
	margin-top: 20px;
	font-family: var(--pf-tittel);
	font-size: 23px;
	font-weight: 800;
	color: var(--pf-blekk);
}

.pf-kraft-tekst { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--pf-gra); }

.pf-kraft-punkter {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #ececf1;
}

.pf-kraft-punkter li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.45; color: #374151; }
.pf-kraft-punkter svg { flex: none; margin-top: 3px; color: #7c3aed; }

.pf-kraft-bunn {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
	padding-top: 22px;
}

.pf-kraft-pris { font-size: 13px; color: var(--pf-gra); }

.pf-kraft-pris b {
	margin-right: 4px;
	font-family: var(--pf-tittel);
	font-size: 26px;
	font-weight: 800;
	color: var(--pf-blekk);
	font-variant-numeric: tabular-nums;
}

.pf-kraft-pris small { font-size: .55em; font-weight: 700; }

.pf-kraft-lenke {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 700;
	color: #6d28d9;
	text-decoration: none;
}

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

@media (max-width: 1099px) {
	.pf-kraft-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ======================================================================
   Avslutningen
   ====================================================================== */

/* Lys, med illustrasjonen av heltene. Teksten står i det åpne feltet under
   heltene, som starter rundt 30 % ned i bildet (bildet er 2:1). */
.pf-avslutt {
	display: grid;
	padding: 0;
	background: #f5edfc;
}

.pf-avslutt-bilde,
.pf-avslutt-innhold { grid-area: 1 / 1; }

.pf-avslutt-bilde {
	display: block;
	width: 100%;
	height: auto;
	/* Bunnen tones ut i bakgrunnen, så det ikke blir en kant under teksten */
	-webkit-mask-image: linear-gradient(#000 78%, transparent);
	mask-image: linear-gradient(#000 78%, transparent);
}

.pf-avslutt-innhold {
	position: relative;
	align-self: start;
	margin-bottom: 0;
	padding-top: 16vw;
	padding-bottom: clamp(48px, 5vw, 72px);
}

.pf-avslutt .pf-ingress { color: #5f5f70; }
.pf-avslutt .pf-knapper { margin-top: 32px; }

/* Menneskene bak heltene, under knappene */
.pf-avslutt-folk { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 36px; }
.pf-avslutt-ansikter { display: flex; flex: none; padding-left: 12px; }

.pf-avslutt-ansikter > img,
.pf-avslutt-helt {
	width: 48px;
	height: 48px;
	margin-left: -12px;
	border: 3px solid #fff;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	box-shadow: 0 6px 14px -8px rgba(10, 15, 31, .4);
}

.pf-avslutt-helt { display: grid; place-items: center; background: #ecf4de; }
.pf-avslutt-helt img { width: 74%; height: auto; }
.pf-avslutt-folk p { max-width: 30rem; font-size: 15px; line-height: 1.5; text-align: left; color: var(--pf-gra); }

@media (max-width: 640px) {
	.pf-avslutt-folk { flex-direction: column; text-align: center; }
	.pf-avslutt-folk p { text-align: center; }
}

/* ======================================================================
   Smale skjermer
   ====================================================================== */

@media (max-width: 959px) {
	.pf-helter-rom {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'scene' 'steg';
	}

	.pf-helter-scene {
		z-index: 2;
		top: 64px;
		height: 56vh;
		margin-inline: -24px;
		padding-inline: 24px;
		background: linear-gradient(var(--pf-natt) 82%, transparent);
	}

	.pf-steg { min-height: 70vh; justify-content: flex-end; padding-block: 24px 10vh; }
	.pf-panel-maskot { width: 22%; top: 7%; right: 0; }
}

@media (max-width: 899px) {
	.pf-pk-liste,
	.pf-trygg,
	.pf-fliser,
	.pf-pakke-liste { grid-template-columns: minmax(0, 1fr); }

	.pf-pakke-liste { gap: 28px; }
	.pf-pakke-tekst { min-height: 0; }

	.pf-flis--kostnad,
	.pf-flis--mennesker { grid-column: auto; }

	.pf-flis--mennesker { grid-template-columns: minmax(0, 1fr); }
	.pf-pk.er-bred { grid-column: auto; padding-right: clamp(26px, 3vw, 38px); }
	.pf-pk.er-bred .pf-pk-topp { padding-right: 96px; }
	.pf-pk.er-bred .pf-pk-maskot { top: 18px; right: 18px; width: 96px; transform: none; }
	.pf-flis { min-height: 0; }
}

@media (max-width: 640px) {
	.pf-bredde { padding-inline: 16px; }
	.pf-scene-inn { padding-inline: 16px; }
	.pf-helter-scene { margin-inline: -16px; padding-inline: 16px; }
	.pf-kraft-liste { grid-template-columns: minmax(0, 1fr); }
	.pf-adresse-felt { flex-wrap: wrap; padding: 8px; border-radius: 10px; }
	.pf-adresse-ikon { padding-left: 12px; }
	.pf-adresse-felt input { flex: 1 1 calc(100% - 48px); font-size: 17px; }
	.pf-adresse-knapp { flex: 1 1 100%; justify-content: center; padding: 16px; border-radius: 16px; }
	.pf-tillit > .pf-tillit-punkt:last-child:nth-child(4) { display: none; }
	.pf-tillit-punkt + .pf-tillit-punkt::before { display: none; }
	.pf-godkj-to { grid-template-columns: minmax(0, 1fr); }
	.pf-godkj-knapper .pf-k:nth-child(2) { display: none; }
	.pf-bane { transform: scale(.82); margin-block: -24px; }
}

/* Under 1100 px er det ikke plass til teksten i bildet, så den står under */
@media (max-width: 1099px) {
	.pf-avslutt { display: block; }
	.pf-avslutt-innhold { padding-top: 8px; padding-bottom: clamp(72px, 12vw, 120px); }
}

/* ---------- Redusert bevegelse: alt står i sluttstillingen ---------- */

@media (prefers-reduced-motion: reduce) {
	.pf *,
	.pf *::before,
	.pf *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}

	.pf-feed-spor,
	.pf-bane-ring,
	.pf-bane-chip > span { animation: none !important; }
}

/* ======================================================================
   Dette tar heltene av bordet ditt, utseendet «lag» (lag.php): ett kort
   per helt på heltens farge, det første stort over hele bredden
   ====================================================================== */

.pf-lag { background: #fff; }
.pf-lag .pf-hode { margin-bottom: clamp(32px, 4vw, 52px); }
.lg-merke { color: var(--knapp, #6712fb); font-size: 14px; font-weight: 800; text-transform: uppercase; }

.lg-liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.lg-kort {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 280px;
	padding: 26px 26px 24px;
	border: 1px solid color-mix(in oklab, var(--flate, #f3f1fa) 55%, #e8e6f0);
	border-radius: 26px;
	background: linear-gradient(150deg, var(--flate, #f3f1fa) 0%, #fff 74%);
	overflow: hidden;
	transition: translate .4s var(--pf-myk), border-color .3s ease;
}

.lg-kort:hover { translate: 0 -4px; border-color: color-mix(in oklab, var(--aksent, #7c3aed) 35%, #fff); }

.lg-tekst { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-width: 0; }
.lg-hvem { display: grid; gap: 2px; margin: 0; padding-right: 100px; }
.lg-hvem b { font-size: 20px; font-weight: 800; color: var(--pf-blekk); }
.lg-hvem span { font-size: 14px; font-weight: 600; color: color-mix(in oklab, var(--aksent, #7c3aed) 85%, #000); }

.lg-snart {
	margin: 10px 0 0;
	padding: 4px 12px;
	border: 1px solid #e6e3ef;
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 700;
	color: #4b4b5a;
}

.lg-tittel { margin: 22px 0 8px; }
:root body .lg-tittel { --hh-fs: clamp(1.2rem, 1rem + .5vw, 1.45rem); --hh-lh: 1.22; }
.lg-svar { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pf-gra); }

.lg-lenke {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 18px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--knapp, #6712fb);
	text-decoration: none;
}

.lg-lenke:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg-lenke svg { transition: translate .25s var(--pf-myk); }
.lg-lenke:hover svg { translate: 2px -2px; }

/* Maskoten øverst til høyre, så tittelen får hele bredden under */
.lg-figur { position: absolute; top: 18px; right: 18px; }
.lg-maskot { display: block; width: 96px; height: auto; }

/* Det store kortet: teksten til venstre, maskoten stor til høyre med boblen */
.lg-kort--stor {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: center;
	min-height: 0;
	padding: clamp(28px, 3.5vw, 44px) clamp(28px, 4vw, 56px);
}

.lg-kort--stor .lg-hvem { display: flex; align-items: baseline; gap: 8px; padding-right: 0; }
.lg-kort--stor .lg-hvem span::before { content: '·'; margin-right: 8px; color: #9ca3af; }
.lg-kort--stor .lg-tittel { margin-top: 14px; }
:root body .lg-kort--stor .lg-tittel { --hh-fs: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); --hh-lh: 1.12; }
.lg-kort--stor .lg-svar { max-width: 30rem; font-size: 17px; }

.lg-kort--stor .lg-figur { position: relative; top: auto; right: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; min-height: 230px; }
.lg-kort--stor .lg-maskot { width: clamp(180px, 19vw, 250px); }

/* Snakkeboblen står over Felix, med spissen ned mot hodet, så det er han
   som sier det. Boblen er forskjøvet til høyre, så spissen treffer toppen
   av hodet midt på maskoten. */
.lg-boble {
	--kant: color-mix(in oklab, var(--aksent, #7c3aed) 22%, #fff);
	position: relative;
	z-index: 2;
	align-self: center;
	max-width: 200px;
	margin: 0;
	padding: 11px 16px;
	border: 1px solid var(--kant);
	border-radius: 18px;
	background: #fff;
	color: color-mix(in oklab, var(--aksent, #7c3aed) 80%, #000);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	translate: calc(50% - 34px) 0;
}
.lg-boble::after {
	content: "";
	position: absolute;
	bottom: -7px;
	left: 28px;
	width: 12px;
	height: 12px;
	border-right: 1px solid var(--kant);
	border-bottom: 1px solid var(--kant);
	background: #fff;
	transform: rotate(45deg);
}

.lg-slutt { display: grid; justify-items: center; gap: 20px; margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.lg-slutt-tekst { margin: 0; font-family: var(--pf-tittel); font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); font-weight: 800; color: var(--pf-blekk); }
.lg-slutt .pf-knapp { gap: 8px; }

@media (max-width: 1023px) {
	.lg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.lg-liste { grid-template-columns: minmax(0, 1fr); }
	.lg-kort { min-height: 0; }
	.lg-kort--stor { grid-template-columns: minmax(0, 1fr); }
	.lg-kort--stor .lg-figur { min-height: 190px; margin-top: 18px; }
	.lg-kort--stor .lg-maskot { width: 170px; }
}

/* ======================================================================
   Spørsmålene som trekkspill (visning «faner», plattform/sporsmal.php)
   Spørsmålet som vises er åpent med svaret rett under, de andre er lukket,
   og filmen står ved siden av. Raden har en tidslinje som fylles, og når
   den er full, åpnes neste (data-pf-utstilling i plattform.js, som i Møt
   heltene). Musen over holder spørsmålet. Fargen følger merkelappen (--glod).
   ====================================================================== */

.pf-sf {
	display: grid;
	grid-template-areas: 'scene' 'liste';
	gap: clamp(18px, 2.4vw, 28px);
	align-items: start;
}

.pf-sf-liste { grid-area: liste; display: grid; gap: 8px; }

.pf-sf-rad {
	position: relative;
	overflow: hidden;
	border: 1px solid #ece8f6;
	border-radius: 20px;
	background: #fff;
	transition: border-color .3s ease;
}
.pf-sf-rad:hover { border-color: #d9cdfb; }
/* Rammen er en lys tone av fargen, så tidslinjen i bunnkanten synes */
.pf-sf-rad.er-aktiv { border-color: color-mix(in oklab, var(--glod, #7c3aed) 35%, #fff); }

.pf-sf-h { margin: 0; }
:root body .pf-sf h3.pf-sf-h { --hh-fs: 16px; --hh-lh: 1.3; }

.pf-sf-fane {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 16px 12px 12px;
	border: 0;
	border-radius: 20px;
	background: none;
	color: var(--pf-blekk);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.pf-sf-fane:focus-visible { outline: 2px solid #6712fb; outline-offset: -3px; }

.pf-sf-ikon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #f4f2f9; color: #8a87a0; transition: background-color .25s ease, color .25s ease; }
.pf-sf-ikon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-sf-fane.er-aktiv .pf-sf-ikon { background: color-mix(in oklab, var(--glod, #7c3aed) 13%, #fff); color: var(--glod, #7c3aed); }

.pf-sf-navn { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; line-height: 1.3; }
.pf-sf-fane .pf-chip { flex: none; font-size: 12px; opacity: 0; transition: opacity .3s ease; }
.pf-sf-fane.er-aktiv .pf-chip { opacity: 1; }

/* Tidslinjen er bunnkanten av raden, og fylles i fargen til spørsmålet */
.pf-sf-fane .pf-sf-tid { right: 0; bottom: 0; left: 0; height: 3px; border-radius: 0; background: none; }
.pf-sf-tid b { background: var(--glod, #7c3aed); }
.pf-sf-fane.er-aktiv .pf-sf-tid b { transform: scaleX(1); }

/* Svaret brettes ut under spørsmålet */
.pf-sf .pf-sf-svar {
	display: grid;
	grid-template-rows: 0fr;
	min-height: 0;
	visibility: hidden;
	transition: grid-template-rows .45s var(--pf-myk), visibility 0s linear .45s;
}
.pf-sf-rad.er-aktiv .pf-sf-svar { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .55s var(--pf-myk), visibility 0s; }
.pf-sf-svar-inni { min-height: 0; overflow: hidden; padding: 0 18px 0 12px; }
.pf-sf .pf-sf-kort { padding-left: 50px; }
.pf-sf-svar-inni > :first-child { margin-top: 4px; }
.pf-sf-svar-inni > :last-child { margin-bottom: 18px; }
/* Svaret: en setning og punktene, med en liten hake i fargen til spørsmålet */
.pf-spm .pf-sf .pf-sf-kort { max-width: none; margin: 0 0 10px; color: var(--pf-blekk); font-size: 16px; font-weight: 700; line-height: 1.45; }
.pf-sf-kort em { font-style: normal; color: var(--spm-tone); }
.pf-sf-punkter { display: grid; gap: 6px; padding-left: 50px; }
.pf-sf-punkter li { display: flex; align-items: baseline; gap: 9px; color: #55556a; font-size: 15px; line-height: 1.45; }
.pf-sf-punkter svg { flex: none; translate: 0 2px; color: var(--spm-tone); stroke-width: 3; }
.pf-sf-punkter em { font-style: normal; }

/* Filmene ligger i samme rute, og den for spørsmålet som er åpent står fram */
.pf-sf-scene { grid-area: scene; }
.pf-sf-filmene { display: grid; width: min(100%, calc((100vh - 170px) * 10 / 9)); margin-inline: auto; }
.pf-sf-film {
	grid-area: 1 / 1;
	align-self: center;
	visibility: hidden;
	opacity: 0;
	transform: translateY(24px) scale(.97);
	transition: opacity .5s var(--pf-myk), transform .7s var(--pf-myk), visibility 0s linear .5s;
}
.pf-sf-film.er-aktiv { visibility: visible; opacity: 1; transform: none; transition: opacity .6s var(--pf-myk) .1s, transform .8s var(--pf-myk) .1s, visibility 0s; }

/* Spørsmålene bytter av seg selv bare på store skjermer. På mobil åpner man
   dem selv, så teksten ikke flytter seg mens man leser. */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
	.pf-sf-fane.er-aktiv .pf-sf-tid b { animation: pf-fane-tid 11s linear both; animation-play-state: paused; }
	.pf-sf.er-paa .pf-sf-fane.er-aktiv .pf-sf-tid b { animation-play-state: running; }
}
@media (min-width: 960px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pf-sf.er-paa:hover .pf-sf-fane.er-aktiv .pf-sf-tid b { animation-play-state: paused; }
}

@media (min-width: 960px) {
	.pf-sf {
		grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
		grid-template-areas: 'liste scene';
		column-gap: clamp(32px, 4vw, 64px);
		align-items: center;
	}
	.pf-sf-scene { position: sticky; top: 96px; }
}

@media (max-width: 959px) {
	.pf-sf-film .pf-mo { aspect-ratio: auto; padding: 1.6em 1.5em 1.8em; font-size: clamp(9px, 3.45cqw, 15px); }
	.pf-sf-fane .pf-chip, .pf-sf-tid { display: none; }
	/* Svaret har ikke luften under som tekstene i scroll-visningen */
	.pf-spm .pf-sf .pf-sf-svar { padding-block: 0; justify-content: stretch; }
}

/* ======================================================================
   Heltene ved siden av hverandre (utseendet «lag-rad», plattform/lag.php)
   Kortene står i en rad som starter der innholdet starter. På små skjermer
   sveiper man i raden. På store skjermer (.er-horisontal fra plattform.js)
   står toppen og raden fast, raden glir sidelengs med --x, og hvert kort
   kommer fram nedenfra når det glir inn (--inn), og maskoten hopper når
   kortet er helt inne (.er-inne).
   ====================================================================== */

.pf-lag--rad { padding-bottom: clamp(56px, 6vw, 96px); }
.pf-lag--rad .pf-hode { margin-bottom: clamp(24px, 3vw, 40px); }

.pf-lag--rad .lg-liste {
	display: flex;
	gap: 16px;
	padding: 4px max(24px, calc((100% - 1228px) / 2 + 24px)) 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 24px;
	scrollbar-width: none;
}
.pf-lag--rad .lg-liste::-webkit-scrollbar { display: none; }
.pf-lag--rad .lg-kort { flex: none; width: min(310px, 80vw); scroll-snap-align: start; }
.pf-lag--rad .lg-kort--stor { grid-column: auto; width: min(620px, 88vw); }

.lg-fremdrift-rad { display: flex; justify-content: center; margin-top: clamp(18px, 2.4vw, 30px); }
.lg-fremdrift { display: block; width: 180px; height: 4px; overflow: hidden; border-radius: 999px; background: #ece8f6; }
.lg-fremdrift b { display: block; height: 100%; background: #6712fb; transform: scaleX(var(--p, 0)); transform-origin: left; }

/* Store skjermer: toppen og raden står fast, og raden glir sidelengs */
.lg-rom.er-horisontal .lg-klebe {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}
.lg-rom.er-horisontal .lg-liste {
	width: max-content;
	overflow: visible;
	scroll-snap-type: none;
	transform: translateX(calc(var(--x, 0) * -1px));
	will-change: transform;
}

/* Hvert kort kommer fram nedenfra når det glir inn */
.lg-rom.er-horisontal .lg-kort {
	opacity: calc(.08 + .92 * var(--inn, 1));
	transform: translateY(calc((1 - var(--inn, 1)) * 56px)) scale(calc(.9 + .1 * var(--inn, 1)));
	transform-origin: 50% 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.lg-rom.er-horisontal .lg-kort:not(.lg-kort--stor).er-inne .lg-figur { animation: lg-hopp .75s cubic-bezier(.34, 1.56, .64, 1) both; }
}

@keyframes lg-hopp {
	0%, 100% { transform: none; }
	35% { transform: translateY(-14px) rotate(-5deg); }
	65% { transform: translateY(0) rotate(3deg); }
}

@media (max-width: 959px) {
	/* Felix er like høy som de andre kortene i raden: mindre maskot og ingen boble */
	.pf-lag--rad .lg-kort--stor { grid-template-columns: minmax(0, 1fr); width: min(310px, 80vw); padding: 26px 26px 24px; }
	.pf-lag--rad .lg-kort--stor .lg-figur { position: absolute; top: 18px; right: 18px; display: block; min-height: 0; }
	.pf-lag--rad .lg-kort--stor .lg-maskot { width: 96px; }
	.pf-lag--rad .lg-kort--stor .lg-boble { display: none; }
	.pf-lag--rad .lg-kort--stor .lg-hvem { display: grid; gap: 2px; padding-right: 100px; }
	.pf-lag--rad .lg-kort--stor .lg-hvem span::before { content: none; }
	.pf-lag--rad .lg-kort--stor .lg-svar { font-size: 15px; }
}

/* ---------- Avslutningen med en samtale ---------- */

/* La oss ta en prat (template-parts/plattform/samtale-slutt.php), nederst på
   /priser/ og /om-oss/. Alt står midtstilt på hvitt: merkelappen, tittelen,
   en setning, knappen og linjen under, og heltene under knappen. */
.pf-samtale { padding-top: clamp(72px, 9vw, 128px); background: #fff; text-align: center; overflow: hidden; }
.pf-samtale-innhold { max-width: 900px; }

.pf-samtale-merke { color: var(--knapp, #6712fb); font-size: 14px; font-weight: 800; line-height: 1.4; text-transform: uppercase; }
:root body h2.pf-samtale-tittel { margin-top: 14px; color: var(--pf-blekk); }
.pf-samtale-tekst { max-width: 34rem; margin: 20px auto 0; color: var(--pf-gra); font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.5; }
.pf-samtale-tekst a { color: var(--knapp, #6712fb); font-weight: 700; text-decoration: none; white-space: nowrap; }
.pf-samtale-tekst a:hover { text-decoration: underline; }

.pf-samtale-handling { display: grid; justify-items: center; gap: 14px; margin-top: 34px; }
.pf-samtale-knapp { gap: 10px; padding: 18px 32px; font-size: 18px; font-weight: 800; }
.pf-samtale-knapp svg { width: 20px; height: 20px; transition: transform .25s var(--pf-myk); }
.pf-samtale-knapp:hover svg { transform: translateX(4px); }
.pf-samtale-merknad { color: var(--pf-gra); font-size: 15px; }

.pf-samtale-bilde img { display: block; width: 100%; height: auto; }

/* Heltene ved bordet med en tom stol, til kunden */
.pf-samtale--samtale { padding-bottom: clamp(40px, 5vw, 72px); }
.pf-samtale--samtale .pf-samtale-bilde { width: min(720px, 100%); margin: clamp(28px, 4vw, 48px) auto 0; padding-inline: 16px; }

/* To helter titter over en hylle nederst, en i hvert hjørne. Hyllen er en
   lys flate med en linje øverst, og heltene står på linjen med hendene litt
   over den (translate). På store skjermer står de ved siden av knappen, på
   mobil under den. */
.pf-samtale--titter { --helt-h: clamp(78px, 13.5vw, 215px); padding-bottom: 0; }
.pf-samtale--titter .pf-samtale-innhold { padding-bottom: clamp(48px, 5vw, 64px); }
.pf-samtale-kant { position: relative; height: clamp(36px, 5vw, 72px); border-top: 2px solid #e4e4e9; background: #f8f8fa; }
.pf-samtale-helt { position: absolute; bottom: 100%; width: auto; height: var(--helt-h); translate: 0 6%; }
.pf-samtale-helt--venstre { left: max(8px, calc(50% - 700px)); }
.pf-samtale-helt--hoyre { right: max(8px, calc(50% - 700px)); }

@media (max-width: 759px) {
	.pf-samtale--titter .pf-samtale-innhold { padding-bottom: calc(var(--helt-h) + 36px); }
}

/* ---------- Avslutningen med bildet til venstre ---------- */

/* plattform__avslutning med visning «side» (/heltene/felix/): bildet til
   venstre og tittelen, teksten, knappene og menneskene bak heltene til
   høyre. Bildet har hvit bakgrunn, så seksjonen er hvit. På mobil står
   bildet over teksten, og alt er midtstilt. */
.pf-avslutt-side { padding-block: clamp(64px, 8vw, 120px); background: #fff; }

.pf-avslutt-side-rad {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
}

.pf-avslutt-side-bilde img { display: block; width: 100%; height: auto; }

.pf-avslutt-side-tekst .pf-samtale-merke { margin-bottom: 14px; }
.pf-avslutt-side .pf-ingress { max-width: 32rem; margin-inline: 0; }
.pf-avslutt-side .pf-knapper { justify-content: flex-start; margin-top: 32px; }
.pf-avslutt-side .pf-lenke:hover svg { transform: translateX(3px); }
.pf-avslutt-side .pf-avslutt-folk { justify-content: flex-start; }

@media (max-width: 899px) {
	.pf-avslutt-side-rad { grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: center; }
	.pf-avslutt-side-bilde { width: min(560px, 100%); margin-inline: auto; }
	.pf-avslutt-side .pf-ingress { margin-inline: auto; }
	.pf-avslutt-side .pf-knapper,
	.pf-avslutt-side .pf-avslutt-folk { justify-content: center; }
}