/*
 * Toppen av forsiden, versjon 2 (template-parts/sections/plattform/hero_v2.php).
 *
 * Teksten og valgene til venstre, filmen av appen til høyre. Filmen er
 * tegnet i em, og skriftstørrelsen følger bredden på filmen (2cqi), så hele
 * scenen skaleres likt på alle skjermer. Stegene styres av data-steg på
 * scenen (kort, tavle, panel, godkjenn, slutt) fra assets/plattform/hero-v2.js.
 * Ingen skygger: kortene skilles med kanter og bakgrunn.
 */

.pf-hero-v2 {
	/* Lav nok til at Kunder som stoler på oss synes uten å scrolle på vanlige skjermer */
	padding-top: clamp(88px, 7vw, 112px);
	padding-bottom: 12px;
	background: #fff;
	overflow: clip;
}

.hv2-rad-ytre {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
}

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

.pf-hero-v2 .hv2-h1 { margin: 0; }
/* H1 på to linjer: hver linje holdes samlet, og størrelsen følger bredden
   på tekstkolonnen, så den lengste linjen («mennesker og agenter», 10,6 em
   i Nunito 800) akkurat får plass. Aldri over 4rem */
.hv2-tekst { container-type: inline-size; }
/* Spesifikk nok til å gå foran h1.pf-h1 i assets/topp/typografi.css */
:root body main .pf-hero-v2 h1.hv2-h1 { --hh-fs: min(4rem, 100cqi / var(--hv2-deler, 10.9)); --hh-lh: 1.04; }
.hv2-h1 .pf-linje { display: block; white-space: nowrap; }

.pf-hero-v2 .hv2-ingress { max-width: 32rem; margin: 16px 0 0; color: #4a4a62; font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); }

/* Valgene */
.hv2-valg { margin-top: 24px; }
.hv2-valg-etikett { margin: 0 0 10px; color: #6b6b80; font-size: 14px; font-weight: 700; }
.hv2-valg-liste { display: flex; flex-wrap: wrap; gap: 8px; }

.hv2-valg-knapp {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 8px 15px;
	border: 1px solid #e3dfee;
	border-radius: 999px;
	background: #f7f6fb;
	color: #3b3654;
	font: 700 15px/1.2 var(--font-sans, 'Nunito'), system-ui, sans-serif;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s, gap .2s;
}

.hv2-valg-hake {
	display: inline-grid;
	place-items: center;
	width: 0;
	height: 18px;
	overflow: hidden;
	border-radius: 50%;
	background: #7c3aed;
	color: #fff;
	font-size: 11px;
	transition: width .2s;
}

.hv2-valg-hake svg { stroke-width: 3; }
.hv2-valg-knapp:hover { border-color: #c4b5fd; }
.hv2-valg-knapp:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.hv2-valg-knapp[aria-pressed="true"] { gap: 7px; border-color: #c4b5fd; background: #f1ecff; color: #5b21b6; }
.hv2-valg-knapp[aria-pressed="true"] .hv2-valg-hake { width: 18px; }

/* Nettadressefeltet, med knappen der en glød sveiper over */
.pf-hero-v2 .hv2-skjema { max-width: 560px; margin: 22px 0 0; }

.hv2-knapp {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--knapp);
}

.hv2-knapp:hover { background: var(--knapp-hover); }

.hv2-knapp::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -70%;
	left: -80%;
	width: 70%;
	height: 240%;
	background: radial-gradient(closest-side, rgba(255, 105, 180, .95), rgba(255, 140, 0, .55) 55%, transparent);
	filter: blur(6px);
	pointer-events: none;
}

.hv2-tillit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 14px 0 0;
	color: #6b6b80;
	font-size: 14px;
	font-weight: 500;
}

.hv2-gnist { color: #a78bfa; font-size: 11px; }

/* ---------- Filmen ---------- */

/* Fargene i appen (wonderwave, components/customer/oversikt/felles.tsx) */
.hv2-film {
	--a-lilla: #7c3aed;
	--a-lilla-mork: #6d28d9;
	--a-flis: #f3eeff;
	--a-groenn: #059669;
	--a-tekst: #111827;
	--a-tekst2: #374151;
	--a-graa: #6b7280;
	--a-graa2: #9ca3af;
	--a-kant: #eceaf2;
	--a-skille: #f1eff6;
	position: relative;
	margin: 0;
	container-type: inline-size;
}

.hv2-scene {
	position: relative;
	font-size: clamp(6.5px, 2cqi, 13px);
	aspect-ratio: 50 / 38;
	transition: opacity .5s ease;
}

.hv2-scene.er-ut { opacity: 0; }

.hv2-glod {
	position: absolute;
	z-index: 0;
	inset: -6%;
	background:
		radial-gradient(42% 42% at 72% 28%, rgba(167, 139, 250, .22), transparent 70%),
		radial-gradient(36% 36% at 22% 82%, rgba(244, 114, 182, .16), transparent 70%);
	pointer-events: none;
}

/* Maskotflisene, som Maskotflis i appen */
.hv2-flis {
	display: inline-grid;
	flex: none;
	place-items: end center;
	width: 2.9em;
	height: 2.9em;
	overflow: hidden;
	border-radius: .6em;
	background: var(--bg, var(--a-flis));
}

.hv2-flis img { width: 118%; height: auto; max-width: none; margin-bottom: -.15em; }
.hv2-flis--rund { width: 2em; height: 2em; border-radius: 50%; }
.hv2-flis--liten { width: 2em; height: 2em; border-radius: .5em; }
.hv2-flis--ikon { place-items: center; background: #e7f8f0; color: var(--a-groenn); font-size: .9em; }
.hv2-flis--ikon svg { width: 1.1em; height: 1.1em; }

/* 1. Kortene */
.hv2-kortene {
	position: absolute;
	z-index: 1;
	inset: 0;
	transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1), filter .6s ease;
}

.hv2-kort {
	position: absolute;
	top: 50%;
	margin: 0;
	border: 1px solid rgba(10, 15, 31, .07);
	border-radius: 1.3em;
}

.hv2-kort--midt {
	z-index: 2;
	left: 50%;
	width: 21em;
	height: 29em;
	padding: 1em 1.05em;
	transform: translate(-50%, -50%);
	border-color: var(--a-kant);
	background: #fff;
}

.hv2-kort--side {
	width: 16em;
	height: 22em;
	overflow: hidden;
	padding: 1em;
	transform: translateY(-50%);
	background: var(--bg);
}

.hv2-kort--v { left: calc(50% - 23.5em); }
.hv2-kort--h { left: calc(50% + 7.5em); }
.hv2-kort--h .hv2-kort-navn { text-align: right; }

.hv2-kort--side img {
	position: absolute;
	left: 50%;
	bottom: -.6em;
	width: 125%;
	max-width: none;
	height: auto;
	transform: translateX(-50%);
}

.hv2-kort-navn { position: relative; z-index: 1; margin: 0; color: #33334a; font-size: .86em; }
.hv2-kort-navn b { font-weight: 800; }

/* Chatten med Felix, som i appen */
.hv2-chat-topp { display: flex; align-items: center; gap: .5em; margin: 0; padding-bottom: .8em; border-bottom: 1px solid var(--a-skille); }
.hv2-chat-topp b { color: var(--a-tekst); font-size: .9em; font-weight: 800; }
.hv2-chat-topp > span:not(.hv2-flis) { color: var(--a-graa); font-size: .74em; }

.hv2-jobber {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin-left: auto;
	padding: .2em .55em;
	border-radius: 99px;
	background: #ecfdf5;
	color: var(--a-groenn);
	font-size: .62em;
	font-style: normal;
	font-weight: 700;
}

.hv2-jobber::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: #10b981; }

.hv2-chat { display: grid; gap: .6em; margin-top: .9em; }

.hv2-boble { max-width: 88%; margin: 0; font-size: .8em; line-height: 1.42; }

.hv2-boble--felix {
	justify-self: start;
	padding: .6em .8em;
	border-radius: .9em .9em .9em .25em;
	background: #f4f3f8;
	color: var(--a-tekst2);
}

.hv2-boble--kari {
	justify-self: end;
	padding: .6em .8em;
	border-radius: .9em .9em .25em .9em;
	background: var(--a-lilla);
	color: #fff;
	font-weight: 600;
}

.hv2-boble--kari,
.hv2-boble--svar {
	opacity: 0;
	transform: translateY(.6em);
	transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

.hv2-scene.er-sendt .hv2-boble--kari,
.hv2-scene.er-skriver .hv2-boble--svar,
.hv2-scene.er-svart .hv2-boble--svar { opacity: 1; transform: none; }

.hv2-svar-tekst { display: none; }
.hv2-scene.er-svart .hv2-svar-tekst { display: inline; }
.hv2-scene.er-svart .hv2-prikker { display: none; }

.hv2-prikker { display: inline-flex; gap: .25em; padding: .2em 0; }
.hv2-prikker i { width: .42em; height: .42em; border-radius: 50%; background: var(--a-graa2); animation: hv2-prikk 1s ease-in-out infinite; }
.hv2-prikker i:nth-child(2) { animation-delay: .15s; }
.hv2-prikker i:nth-child(3) { animation-delay: .3s; }

@keyframes hv2-prikk { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-.2em); } }

.hv2-skriv {
	position: absolute;
	left: 1.05em;
	right: 1.05em;
	bottom: 2.5em;
	display: flex;
	align-items: center;
	min-height: 3em;
	margin: 0;
	padding: .45em .45em .45em .85em;
	border: 1px solid var(--a-kant);
	border-radius: .8em;
	color: var(--a-tekst);
	font-size: .8em;
}

.hv2-plass { color: var(--a-graa2); }
.hv2-scene.er-skriving .hv2-plass { display: none; }
.hv2-markor { width: 1px; height: 1.15em; margin-left: 1px; background: var(--a-tekst); animation: hv2-blink 1s steps(1) infinite; }
.hv2-scene:not(.er-skriving) .hv2-markor { display: none; }
.hv2-send { display: grid; place-items: center; width: 2.1em; height: 2.1em; margin-left: auto; border-radius: 50%; background: var(--a-lilla); color: #fff; transition: transform .2s ease, background-color .2s; }
.hv2-scene.er-trykk .hv2-send { transform: scale(.86); background: var(--a-lilla-mork); }
.hv2-chat-fot { position: absolute; left: 0; right: 0; bottom: .9em; margin: 0; color: var(--a-graa2); font-size: .62em; text-align: center; }

@keyframes hv2-blink { 50% { opacity: 0; } }

/* 2. Appen: Oversikt */
.hv2-app {
	position: absolute;
	z-index: 2;
	inset: .4em 0;
	display: grid;
	grid-template-columns: 8.6em minmax(0, 1fr);
	overflow: hidden;
	font-size: 1.12em;
	border: 1px solid var(--a-kant);
	border-radius: 1.2em;
	background: #fff;
	opacity: 0;
	transform: translateY(1.4em) scale(.97);
	transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
	pointer-events: none;
}

.hv2-meny { display: flex; flex-direction: column; gap: .5em; min-width: 0; padding: .9em .6em; border-right: 1px solid var(--a-skille); background: #fcfbfe; }
.hv2-logo { width: 3.6em; height: auto; margin: 0 0 .2em .3em; }
.hv2-firma { display: flex; align-items: center; gap: .4em; margin: 0 0 .3em; padding: .35em .4em; border: 1px solid var(--a-kant); border-radius: .6em; background: #fff; }
.hv2-firma-ikon { display: grid; flex: none; place-items: center; width: 1.6em; height: 1.6em; border-radius: .4em; background: var(--a-lilla); color: #fff; font-size: .62em; font-weight: 800; }
.hv2-firma b { display: block; overflow: hidden; color: var(--a-tekst); font-size: .56em; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.hv2-firma small { display: block; color: var(--a-graa); font-size: .48em; }
.hv2-firma > span:last-child { min-width: 0; }

.hv2-meny ul { display: grid; gap: .05em; margin: 0; padding: 0; list-style: none; }
.hv2-meny li { display: flex; align-items: center; gap: .55em; padding: .42em .5em; border-radius: .5em; color: #4a4663; font-size: .62em; font-weight: 600; }
.hv2-meny li svg { flex: none; width: 1.15em; height: 1.15em; }
.hv2-meny li.er-aktiv { background: var(--a-flis); color: var(--a-lilla-mork); }
.hv2-meny .hv2-meny-gruppe { padding: .9em .5em .2em; color: var(--a-graa2); font-size: .5em; font-weight: 700; }
.hv2-meny-merke { margin-left: auto; padding: .05em .45em; border-radius: 99px; background: var(--a-lilla); color: #fff; font-size: .85em; font-style: normal; font-weight: 800; }
.hv2-meny em { margin-left: auto; color: var(--a-graa2); font-size: .8em; font-style: normal; }

.hv2-flate { display: flex; flex-direction: column; gap: .8em; min-width: 0; padding: 1.1em 1.25em; }

.hv2-hilsen { margin: 0; }
.hv2-hilsen b { display: block; color: var(--a-tekst); font-size: 1.45em; font-weight: 800; line-height: 1.2; }
.hv2-hilsen span { display: block; margin-top: .2em; color: var(--a-graa); font-size: .7em; }

.hv2-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.hv2-kpi p { margin: 0; padding: .55em .7em; border: 1px solid var(--a-kant); border-radius: .8em; }
.hv2-kpi span { display: flex; align-items: center; gap: .35em; overflow: hidden; color: var(--a-graa); font-size: .56em; white-space: nowrap; text-overflow: ellipsis; }
.hv2-kpi span svg { flex: none; color: var(--a-lilla); }
.hv2-kpi b { display: block; margin-top: .15em; color: var(--a-tekst); font-size: 1.1em; font-weight: 800; }
.hv2-opp { display: inline-flex; align-items: center; gap: .25em; color: var(--a-groenn); font-size: .54em; font-style: normal; font-weight: 700; }

.hv2-kolonner { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: .7em; align-items: start; }

.hv2-boks { min-width: 0; padding: .75em .8em; border: 1px solid var(--a-kant); border-radius: .9em; background: #fff; }
.hv2-boks-topp { display: flex; align-items: center; gap: .4em; margin: 0 0 .3em; }
.hv2-boks-topp b { color: var(--a-tekst); font-size: .72em; font-weight: 800; }
.hv2-pille { padding: .15em .55em; border-radius: 99px; background: var(--a-flis); color: var(--a-lilla-mork); font-size: .54em; font-weight: 700; }
.hv2-vis { margin-left: auto; color: var(--a-lilla); font-size: .56em; font-weight: 700; }

/* Forslagene i «Trenger din godkjenning» */
.hv2-forslag {
	display: grid;
	grid-template-columns: 2.9em minmax(0, 1fr) auto;
	align-items: center;
	gap: .6em;
	padding: .55em 0;
	border-top: 1px solid var(--a-skille);
	animation: hv2-inn .5s cubic-bezier(.2, .8, .2, 1) both;
}

.hv2-forslag:first-child { border-top: 0; }
.hv2-forslag-tekst { min-width: 0; }
.hv2-forslag-tekst small { display: block; color: var(--a-graa); font-size: .52em; }
.hv2-forslag-tekst small b { color: var(--a-tekst2); font-weight: 600; }
.hv2-forslag-tekst > b { display: block; margin-top: .1em; color: var(--a-tekst); font-size: .68em; font-weight: 700; line-height: 1.3; }
.hv2-forslag-tekst > span { display: -webkit-box; margin-top: .1em; overflow: hidden; color: var(--a-graa); font-size: .56em; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.hv2-forslag-knapp,
.hv2-forslag-ok {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .55em .75em;
	border-radius: .5em;
	font-size: .56em;
	font-weight: 700;
	white-space: nowrap;
	transition: transform .2s ease, background-color .2s;
}

.hv2-forslag-knapp { background: var(--a-lilla); color: #fff; }
.hv2-forslag-knapp.er-trykk { transform: scale(.9); background: var(--a-lilla-mork); }
.hv2-forslag-ok { display: none; border: 1px solid #a7f3d0; background: #ecfdf5; color: var(--a-groenn); }
.hv2-forslag.er-godkjent .hv2-forslag-knapp { display: none; }
.hv2-forslag.er-godkjent .hv2-forslag-ok { display: inline-flex; animation: hv2-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }

.hv2-kontroll { display: flex; align-items: center; justify-content: center; gap: .4em; margin: .3em 0 0; padding-top: .55em; border-top: 1px solid var(--a-skille); color: var(--a-graa); font-size: .54em; text-align: center; }
.hv2-kontroll svg { flex: none; color: var(--a-lilla); }

/* «Siste aktivitet» */
.hv2-aktivitet { margin: 0; padding: 0; list-style: none; }

.hv2-akt {
	position: relative;
	display: grid;
	grid-template-columns: .6em 2em minmax(0, 1fr) auto;
	align-items: start;
	gap: .45em;
	padding: .38em 0;
	animation: hv2-inn .5s cubic-bezier(.2, .8, .2, 1) both;
}

.hv2-akt:not(:last-child)::before { content: ''; position: absolute; top: 1.35em; bottom: -.4em; left: .27em; width: 1px; background: var(--a-skille); }
.hv2-prikk { width: .5em; height: .5em; margin-top: .75em; border-radius: 50%; background: var(--a-lilla); }
.hv2-akt[data-slag="henvendelser"] .hv2-prikk,
.hv2-akt[data-slag="live"] .hv2-prikk { background: #10b981; }
.hv2-akt[data-slag="forslag"] .hv2-prikk { background: #f59e0b; }
.hv2-akt-tekst { min-width: 0; }
.hv2-akt-tekst b { display: block; color: var(--a-tekst); font-size: .6em; font-weight: 600; line-height: 1.35; }
.hv2-akt-tekst small { display: block; overflow: hidden; color: var(--a-graa); font-size: .52em; white-space: nowrap; text-overflow: ellipsis; }
.hv2-akt time { margin-top: .2em; color: var(--a-graa2); font-size: .5em; white-space: nowrap; }

.hv2-akt.er-jobber .hv2-akt-tekst b {
	background: linear-gradient(90deg, var(--a-tekst) 0%, #a855f7 40%, #ec4899 55%, var(--a-tekst) 90%) 0 0 / 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: hv2-skimmer 1.6s linear infinite;
}

@keyframes hv2-inn { from { opacity: 0; transform: translateY(.6em); } }
@keyframes hv2-pop { from { opacity: 0; transform: scale(.7); } }
@keyframes hv2-skimmer { to { background-position: -200% 0; } }

/* 3. Forslaget, som forslagspanelet i appen */
.hv2-panel {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: .5em;
	width: 58%;
	padding: 1em 1.15em;
	overflow: hidden;
	border-left: 1px solid var(--a-kant);
	background: #fff;
	transform: translateX(102%);
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.hv2-panel-av { margin: 0; color: var(--a-graa); font-size: .54em; }
.hv2-panel-helt { display: flex; align-items: center; gap: .45em; margin: 0; }
.hv2-panel-helt b { color: var(--a-tekst); font-size: .68em; font-weight: 800; }
.hv2-panel-helt span:last-child { color: var(--a-graa); font-size: .58em; }
.hv2-panel-tittel { margin: .2em 0 0; color: var(--a-tekst); font-size: .98em; font-weight: 800; line-height: 1.25; }
.hv2-panel-h { margin: .35em 0 0; color: var(--a-tekst); font-size: .66em; font-weight: 800; }

.hv2-del { opacity: 0; transform: translateY(.6em); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.hv2-del.er-synlig { opacity: 1; transform: none; }

.hv2-annonse { padding: .5em .7em; border: 1px solid var(--a-kant); border-radius: .7em; }
.hv2-annonse small { display: block; color: #5f6368; font-size: .52em; }
.hv2-annonse b { display: block; margin-top: .15em; color: #1a0dab; font-size: .7em; font-weight: 700; }
.hv2-annonse span { display: block; margin-top: .1em; color: #4d5156; font-size: .56em; line-height: 1.35; }

.hv2-artikkel { padding: .7em .8em; border: 1px solid var(--a-kant); border-radius: .7em; }
.hv2-artikkel b { display: block; color: var(--a-tekst); font-size: .74em; font-weight: 800; }
.hv2-linje { display: block; height: .45em; margin-top: .5em; border-radius: 99px; background: #eeeaf6; }
.hv2-merker { display: flex; flex-wrap: wrap; gap: .35em; }
.hv2-merker span { padding: .3em .6em; border-radius: 99px; background: var(--a-flis); color: var(--a-lilla-mork); font-size: .54em; font-weight: 700; }

.hv2-tall { border-top: 1px solid var(--a-skille); }
.hv2-tall-rad { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em 4.4em 3.8em; align-items: center; min-height: 2.5em; border-bottom: 1px solid var(--a-skille); font-size: .6em; }
.hv2-tall-rad b { overflow: hidden; color: var(--a-tekst); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.hv2-tall-rad span { padding-right: .4em; color: var(--a-graa); text-align: right; }
.hv2-tall-rad i { justify-self: end; padding: .25em .6em; border-radius: .35em; font-style: normal; font-weight: 800; }
.hv2-tall-rad i[data-v="Stopp"] { background: #fee2e2; color: #991b1b; }
.hv2-tall-rad i[data-v="Behold"] { background: #ecfdf5; color: var(--a-groenn); }

.hv2-sider { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55em; }
.hv2-side { margin: 0; }
.hv2-side-ramme { display: block; aspect-ratio: 4 / 4.4; overflow: hidden; border: 1px solid var(--a-kant); border-radius: .55em; background: #fff; }
.hv2-side-ramme i { display: block; height: 42%; background: linear-gradient(135deg, #ede9fe, #fbe4f1); }
.hv2-side-ramme span { display: block; height: .35em; margin: .5em .5em 0; border-radius: 99px; background: #eeeaf6; }
.hv2-side-ramme span:nth-of-type(2) { width: 60%; }
.hv2-side figcaption { margin-top: .3em; color: var(--a-graa); font-size: .52em; font-weight: 700; text-align: center; }

.hv2-punkter { display: grid; gap: .3em; margin: 0; padding: 0; list-style: none; }
.hv2-punkter li { display: flex; align-items: flex-start; gap: .45em; color: var(--a-tekst2); font-size: .6em; line-height: 1.4; }
.hv2-punkter li::before { content: ''; flex: none; width: .55em; height: .3em; margin-top: .45em; border-bottom: 2px solid var(--a-lilla); border-left: 2px solid var(--a-lilla); transform: rotate(-45deg); }

.hv2-likt { margin: .1em 0 0; padding: .45em .65em; border: 1px solid var(--a-kant); border-radius: .6em; color: var(--a-tekst2); font-size: .58em; }
.hv2-likt small { display: block; color: var(--a-graa); font-size: .88em; }

.hv2-panel-knapper { display: flex; align-items: center; gap: .4em; margin-top: auto; }
.hv2-panel-knapper span { padding: .6em 1em; border-radius: .5em; font-size: .6em; font-weight: 700; white-space: nowrap; transition: transform .2s ease, background-color .2s; }
.hv2-p-godkjenn { background: var(--a-lilla); color: #fff; }
.hv2-p-endre { border: 1px solid var(--a-kant); color: var(--a-tekst2); }
.hv2-p-avsla { color: var(--a-graa); }
.hv2-scene.er-trykk-godkjenn .hv2-p-godkjenn { transform: scale(.9); background: var(--a-lilla-mork); }
.hv2-panel-fot { margin: 0; color: var(--a-graa); font-size: .52em; }

/* Merkelappen som viser hvem som jobber */
.hv2-merke {
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: .55em;
	padding: .42em .7em .42em .42em;
	border: 2px solid #f0abfc;
	border-radius: .9em;
	background: #fff;
	white-space: nowrap;
	opacity: 0;
	transform: translate(var(--x, 27em), var(--y, 7.4em));
	transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
	pointer-events: none;
}

.hv2-merke.er-synlig { opacity: 1; }
.hv2-merke-ava { display: grid; flex: none; }
.hv2-merke-ava .hv2-flis { width: 2.3em; height: 2.3em; }

.hv2-kari {
	display: grid;
	place-items: center;
	width: 2.3em;
	height: 2.3em;
	border-radius: 50%;
	background: linear-gradient(135deg, #fbcfe8, #fde68a);
	color: #9d174d;
	font-weight: 800;
}

.hv2-merke-navn { color: #1b1733; font-size: .9em; }
.hv2-merke-navn b { font-weight: 800; }
.hv2-merke-jobb { padding: .3em .65em; border-radius: .45em; background: #ede9fe; color: #4c1d95; font-size: .74em; font-weight: 800; }

.hv2-merke.er-jobber .hv2-merke-jobb {
	background: linear-gradient(90deg, #4c1d95 0%, #a855f7 40%, #ec4899 55%, #4c1d95 90%) 0 0 / 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	outline: 1px solid #ddd6fe;
	outline-offset: -1px;
	animation: hv2-skimmer 1.6s linear infinite;
}

.hv2-merke.er-kari .hv2-merke-jobb { background: #dcfce7; color: #166534; }

.hv2-peker { position: absolute; top: -.95em; left: -1.45em; width: 1.7em; height: 1.7em; transition: transform .15s ease; }
.hv2-merke.er-klikk .hv2-peker { transform: scale(.82); }
.hv2-merke.er-venstre .hv2-peker { left: auto; right: -1.45em; transform: scaleX(-1); }
.hv2-merke.er-venstre.er-klikk .hv2-peker { transform: scaleX(-1) scale(.82); }

/* 4. Meldingen fra Felix */
.hv2-melding {
	position: absolute;
	z-index: 4;
	left: 11em;
	bottom: 1.4em;
	display: flex;
	align-items: center;
	gap: .6em;
	max-width: 27em;
	margin: 0;
	padding: .6em .85em .6em .6em;
	border: 1px solid var(--a-kant);
	border-radius: .9em;
	background: #fff;
	color: var(--a-tekst2);
	font-size: .78em;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(1em);
	transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}

.hv2-melding b { display: block; color: var(--a-tekst); font-weight: 800; }

/* Stegene */
.hv2-scene:not([data-steg="kort"]) .hv2-kortene { opacity: 0; transform: scale(.88); filter: blur(.25em); }
.hv2-scene:not([data-steg="kort"]) .hv2-app { opacity: 1; transform: none; }
.hv2-scene[data-steg="panel"] .hv2-panel { transform: none; }
.hv2-scene[data-steg="slutt"] .hv2-melding { opacity: 1; transform: none; }

/* Pauseknappen */
.hv2-pause {
	position: absolute;
	z-index: 6;
	right: 10px;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid #e4e0f0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #4a4663;
	font-size: 13px;
	cursor: pointer;
}

.hv2-pause:hover { color: #1b1733; border-color: #c4b5fd; }
.hv2-pause:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.hv2-pause-spill, .hv2-pause[aria-pressed="true"] .hv2-pause-stopp { display: none; }
.hv2-pause[aria-pressed="true"] .hv2-pause-spill { display: block; }

@media (prefers-reduced-motion: no-preference) {
	.hv2-knapp::before { animation: hv2-orb 6s ease-in-out infinite; }
}

@keyframes hv2-orb {
	0%, 55% { left: -80%; }
	85%, 100% { left: 115%; }
}

@media (prefers-reduced-motion: reduce) {
	.hv2-scene *, .hv2-scene { transition: none !important; animation: none !important; }
	.hv2-pause { display: none; }
}

@media (max-width: 959px) {
	.hv2-rad-ytre { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 520px) {
	.hv2-valg-knapp { padding: 7px 12px; font-size: 14px; }
	.pf-hero-v2 .pf-adresse-felt { padding-left: 14px; }
}

/* Meldingen under feltet tar ingen plass før den har tekst */
.hv2-skjema .pf-adresse-melding:empty { display: none; }

/* På store skjermer strekker filmen seg litt ut mot kanten, som en skjerm som stikker ut */
@media (min-width: 1200px) {
	.pf-hero-v2 .hv2-film { width: calc(100% + min(6vw, 110px)); }
}

/* Smal film (mobil): uten menyen i appen, så Oversikt får hele bredden */
@container (max-width: 520px) {
	.hv2-app { grid-template-columns: minmax(0, 1fr); }
	.hv2-meny { display: none; }
	.hv2-melding { left: 1em; }
}

/* ---------- Kunden er helten: bildet i stedet for filmen ----------
   Bildet av bedriftseieren står i en ramme og zoomer sakte inn og ut.
   Felix titter fram over kanten og hilser (liv.js), og Astrid svever ved
   siden av. Kortene fra appen kommer inn ett om gangen nede til venstre,
   som om de dukker opp på telefonen, og knappene trykkes (hero-v2.js).
   Telleren for bookinger går opp når en booking kommer inn. */

.hv2-helt {
	position: relative;
	margin: 0;
	padding: 56px 28px 8px 34px;
}

.hv2-helt-ramme {
	position: relative;
	aspect-ratio: 4 / 5;
	/* Følger høyden på skjermen, så toppen og logoene får plass i første skjermbilde */
	max-height: clamp(380px, calc(100svh - 360px), 640px);
	margin-left: auto;
	border-radius: 32px;
	overflow: hidden;
	background: #f4f1fb;
}

.hv2-helt-ramme > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hv2-helt-ramme > .hh-plass { height: 100%; align-content: start; border-radius: 32px; }

.hv2-helt-felix {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	width: clamp(108px, 9.5vw, 150px);
	height: auto;
}

/* Felix som titter over kanten: hendene hviler på overkanten av bildet */
.hv2-helt-felix.er-titter {
	top: auto;
	right: 36px;
	bottom: calc(100% - 96px);
	width: clamp(130px, 11vw, 176px);
	/* Kroppen slutter 7,4 % over bunnen av tegningen, og hendene henger over kanten */
	transform: translateY(7.4%);
	transform-origin: 50% 100%;
}

.hv2-helt:has(.er-titter) { padding-top: 96px; }
.hv2-helt:has(.er-titter) .hv2-hilsen-boble { top: 34px; right: clamp(176px, 14vw, 222px); max-width: 300px; }

.hv2-hilsen-boble {
	position: absolute;
	z-index: 4;
	top: 8px;
	right: clamp(112px, 10vw, 156px);
	max-width: 240px;
	margin: 0;
	padding: 11px 15px;
	border-radius: 18px 18px 4px 18px;
	background: #0a0f1f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.hv2-helt-astrid {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 16%;
	width: clamp(92px, 8vw, 124px);
	height: auto;
}

.hv2-helt-merke { position: absolute; z-index: 5; top: 66px; right: 30px; max-width: 250px; }

.hv2-strom {
	position: absolute;
	z-index: 4;
	left: 0;
	bottom: 6%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(300px, 74%);
}

.hv2-helt-kort {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 8px 10px;
	padding: 12px 14px;
	border: 1px solid #ece8f6;
	border-radius: 18px;
	background: #fff;
	font-size: 13.5px;
	line-height: 1.35;
	color: #111827;
}

.hv2-helt-kort .hv2-flis { font-size: 12px; }
.hv2-helt-kort p { margin: 0; }
.hv2-helt-kort b { display: block; font-size: 12px; font-weight: 800; color: #6d28d9; }

.hv2-helt-knapp { position: relative; grid-column: 2; justify-self: start; display: inline-grid; font-size: 12.5px; font-weight: 800; }
.hv2-helt-knapp > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 999px; transition: opacity .3s ease, scale .3s var(--pf-myk); }
.hv2-helt-knapp-for { background: var(--knapp); color: #fff; }
.hv2-helt-knapp-etter { background: #d1fae5; color: #047857; opacity: 0; scale: .85; }
.er-trykket .hv2-helt-knapp-for { opacity: 0; scale: .85; }
.er-trykket .hv2-helt-knapp-etter { opacity: 1; scale: 1; }

/* Telleren for bookinger denne uka, øverst til venstre på bildet */
.hv2-helt-tall {
	position: absolute;
	z-index: 4;
	top: calc(96px + 16px);
	left: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: #374151;
	font-size: 13px;
	font-weight: 700;
}

.hv2-helt:not(:has(.er-titter)) .hv2-helt-tall { top: calc(56px + 16px); }
.hv2-helt-tall b { min-width: 1.4em; color: #0a0f1f; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hv2-helt-tall b.er-ny { animation: hv2-tall .6s var(--pf-myk); }
.hv2-helt-puls { width: 8px; height: 8px; border-radius: 50%; background: #10b981; }

@media (prefers-reduced-motion: no-preference) {
	.hv2-hilsen-boble { opacity: 0; animation: hv2-helt-inn .7s var(--pf-myk) .5s forwards; }
	.hv2-strom .hv2-helt-kort.er-inne:not(.er-ny) { opacity: 0; animation: hv2-helt-inn .7s var(--pf-myk) forwards; }
	.hv2-strom .hv2-helt-kort.er-inne:nth-child(1) { animation-delay: 1s; }
	.hv2-strom .hv2-helt-kort.er-inne:nth-child(2) { animation-delay: 1.6s; }

	/* Kortene som kommer inn senere, og det eldste som glir ut */
	.hv2-strom .hv2-helt-kort.er-ny { max-height: 0; margin-bottom: -10px; padding-block: 0; opacity: 0; overflow: hidden; translate: 18px 0; scale: .96; transition: max-height .6s var(--pf-myk), margin .6s var(--pf-myk), padding .6s var(--pf-myk), opacity .5s ease .1s, translate .6s var(--pf-myk), scale .6s var(--pf-myk); }
	.hv2-strom .hv2-helt-kort.er-ny.er-inne { max-height: 160px; margin-bottom: 0; padding-block: 12px; opacity: 1; translate: 0 0; scale: 1; }
	.hv2-strom .hv2-helt-kort.er-ute { max-height: 0 !important; margin-bottom: -10px; padding-block: 0 !important; opacity: 0 !important; overflow: hidden; translate: 0 -12px !important; transition: max-height .6s var(--pf-myk), margin .6s var(--pf-myk), padding .6s var(--pf-myk), opacity .35s ease, translate .6s var(--pf-myk); }

	/* Fingeren som trykker på knappen */
	.hv2-helt-knapp::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(124, 58, 237, .35); opacity: 0; pointer-events: none; }
	.er-trykker .hv2-helt-knapp::after { animation: hv2-trykk .7s ease-out; }

	/* Bildet zoomer sakte, og Astrid svever */
	.hv2-helt-ramme > img { animation: hv2-zoom 22s ease-in-out infinite alternate; }
	.hv2-helt-astrid { animation: hv2-svev 4.5s ease-in-out infinite; }
}

@keyframes hv2-helt-inn {
	from { opacity: 0; translate: 0 14px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes hv2-trykk {
	0% { opacity: 1; scale: 1; }
	100% { opacity: 0; scale: 9; }
}

@keyframes hv2-tall {
	0% { scale: 1; color: #0a0f1f; }
	40% { scale: 1.35; color: #059669; }
	100% { scale: 1; color: #0a0f1f; }
}

@keyframes hv2-zoom {
	from { scale: 1; translate: 0 0; }
	to { scale: 1.07; translate: -1.5% -1%; }
}

@keyframes hv2-svev {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -8px; }
}

@media (max-width: 959px) {
	.hv2-helt { max-width: 520px; margin-inline: auto; padding: 48px 16px 16px 26px; }
	.hv2-helt-ramme { max-height: none; }
}

@media (max-width: 520px) {
	/* Plassholderen har mer tekst enn et bilde har plass til på mobil */
	.hv2-helt-ramme:has(> .hh-plass) { aspect-ratio: auto; }
	.hv2-helt-ramme > .hh-plass { padding-top: 52px; padding-bottom: 200px; }
	.hv2-hilsen-boble { max-width: 190px; font-size: 13.5px; }
	.hv2-strom { width: 80%; }
	.hv2-helt-kort { font-size: 12.5px; }
	.hv2-helt-tall { top: calc(96px + 10px); left: 12px; font-size: 12px; }
	.hv2-helt-merke { top: 58px; right: 18px; max-width: 200px; }
}

/* Merket som sier at bildet er midlertidig (bare lokalt og for redaktører) */
.hv2-helt-midl { position: absolute; z-index: 2; top: 14px; left: 14px; max-width: 42%; }

@media (max-width: 520px) {
	.hv2-helt-midl { max-width: 60%; top: 10px; left: 10px; }
	.hv2-helt-merke { top: 150px; right: 22px; }
}

/* Kunder som stoler på oss rett under toppen: tettere over logoene, så hele
   raden står over bretten også på skjermer som er 768 px høye */
.pf-hero-v2 + .cl-marquee-section > div { padding-top: 18px; }
.pf-hero-v2 + .cl-marquee-section .text-center { margin-bottom: 24px !important; }