/*
 * /nettside/ og /nettbutikk/: filmen i toppen der Viktor bygger siden
 * (template-parts/plattform/byggefilm.php) og flisene i Alt som er med
 * (plattform__bento med typene for nettsiden og nettbutikken).
 *
 * Filmen er tegnet i em, og skriftstørrelsen følger bredden på filmen
 * (cqi), så hele scenen skaleres likt på alle skjermer. Delene med data-s
 * kommer fram når de får er-inne (assets/plattform/bygging.js). Flate
 * farger og ingen skygger: kortene skilles med kanter.
 */

/* ---------- «Bygget i» over overskriften i toppen fra forsiden ---------- */

.pf-hero-v2 .hv2-bygget { margin-bottom: 22px; border: 1px solid #e9e6f2; background: #fff; }

/* Lengre overskrifter (--hv2-deler) får bryte på mobil i stedet for å bli små */
@media (max-width: 600px) {
	:root body main .pf-hero-v2 h1.hv2-h1--lang { --hh-fs: min(2.1rem, 100cqi / 10.6); }
	.hv2-h1--lang .pf-linje.pf-aksent { white-space: normal; }
}

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

.bf {
	--bf-merke: #0f5d5e;
	--bf-merke-lys: #e3f1ef;
	--bf-viktor: #0a5fe5;
	--bf-du: #7c3aed;
	--bf-kant: #e4e1ec;
	--bf-strek: #e9e7f0;
	--bf-blekk: #1b1733;
	--bf-gra: #6b6880;
	position: relative;
	z-index: 1;
	margin: 0;
	container-type: inline-size;
}

.bf--nettbutikk { --bf-merke: #2f4858; --bf-merke-lys: #f3efe6; }

.bf-scene {
	position: relative;
	aspect-ratio: 1.12;
	font-size: 2.15cqi;
	color: var(--bf-blekk);
	line-height: 1.3;
}

.bf-scene svg { display: block; }

/* Delene kommer fram ett steg om gangen */
.bf [data-s] {
	opacity: 0;
	transform: translateY(.7em);
	transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}

.bf [data-s].er-inne { opacity: 1; transform: none; }

/* Vinduet */
.bf-vindu {
	position: absolute;
	top: 2%;
	left: 0;
	width: 82%;
	height: 84%;
	border: 1px solid var(--bf-kant);
	border-radius: 1.3em;
	background: #fff;
	overflow: hidden;
}

.bf-topp {
	display: flex;
	align-items: center;
	gap: .9em;
	height: 2.7em;
	padding: 0 1em;
	border-bottom: 1px solid var(--bf-kant);
	background: #f7f6fa;
}

.bf-prikker { display: flex; gap: .35em; }
.bf-prikker i { width: .6em; height: .6em; border-radius: 50%; background: #dcd9e5; }

.bf-adresse {
	display: flex;
	flex: 1;
	align-items: center;
	gap: .45em;
	padding: .3em .8em;
	border: 1px solid var(--bf-kant);
	border-radius: 999px;
	background: #fff;
	color: var(--bf-gra);
	font-size: .85em;
}

.bf-adresse svg { color: #16a34a; }
.bf-plattform--wp { width: 1.4em; height: 1.4em; color: #21759b; }
.bf-plattform--woo { width: 5.2em; height: 1.13em; color: #7f54b3; }

.bf-side {
	display: flex;
	flex-direction: column;
	gap: 1.1em;
	padding: 1.2em 1.4em;
}

.bf-linje { display: block; width: 92%; height: .5em; border-radius: 999px; background: var(--bf-strek); }
.bf-linje--kort { width: 62%; }

.bf-nav { display: flex; align-items: center; gap: 1.1em; }

.bf-logo {
	display: flex;
	align-items: center;
	gap: .45em;
	color: var(--bf-merke);
	font-size: 1.05em;
	font-weight: 800;
	white-space: nowrap;
}

.bf-logo i { width: 1.3em; height: 1.3em; border-radius: .35em; background: var(--bf-merke); }
.bf-menyer { display: flex; flex: 1; gap: .7em; }
.bf-menyer i { width: 2.8em; height: .45em; border-radius: 999px; background: var(--bf-strek); }

.bf-nav em,
.bf-topptekst em,
.bf-banner em {
	display: inline-block;
	padding: .45em .95em;
	border-radius: 999px;
	background: var(--bf-merke);
	color: #fff;
	font-size: .85em;
	font-style: normal;
	font-weight: 700;
	white-space: nowrap;
}

/* Nettsiden: toppen, tjenestene, omtalene og skjemaet */
.bf-topptekst {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: center;
	gap: 1.2em;
}

.bf-topptekst b { display: block; margin-bottom: .5em; font-size: 1.8em; font-weight: 800; line-height: 1.08; }
.bf-topptekst .bf-linje { margin-top: .45em; }
.bf-topptekst em { margin-top: 1em; }

.bf-topptekst .bf-bilde {
	display: grid;
	place-items: center;
	aspect-ratio: 1.15;
	border-radius: .9em;
	background: var(--bf-merke-lys);
	color: var(--bf-merke);
	font-size: 3.2em;
}

.bf-tjenester {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .7em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bf-tjenester li {
	display: grid;
	gap: .4em;
	padding: .8em;
	border: 1px solid var(--bf-kant);
	border-radius: .8em;
}

.bf-tjenester svg { color: var(--bf-merke); font-size: 1.35em; }
.bf-tjenester b { font-size: .9em; }
.bf-tjenester .bf-linje { width: 80%; height: .4em; }

.bf-omtaler { display: flex; align-items: center; gap: .5em; margin: 0; color: var(--bf-gra); font-size: .9em; }
.bf-stjerner { display: flex; gap: .1em; color: #f5a524; }
.bf-stjerner svg { width: 1em; height: 1em; fill: currentColor; }
.bf-omtaler b { color: var(--bf-blekk); font-weight: 800; }

.bf-skjema {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: .6em;
}

.bf-felt { height: 2.3em; border: 1px solid #dcd9e5; border-radius: .55em; background: #fff; }

/* Knapper som bytter til en grønn hake når de er trykket */
.bf-send,
.bf-legg,
.bf-vipps,
.bf-ja {
	position: relative;
	display: inline-grid;
	place-items: center;
	border-radius: .55em;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
}

.bf-send { padding: 0 1em; background: var(--bf-merke); color: #fff; font-size: .85em; }

.bf-send > span[data-s],
.bf-legg > span[data-s],
.bf-vipps > span[data-s],
.bf-ja > span[data-s] {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35em;
	background: #16a34a;
	color: #fff;
	transform: scale(.85);
}

.bf-send > span[data-s].er-inne,
.bf-legg > span[data-s].er-inne,
.bf-vipps > span[data-s].er-inne,
.bf-ja > span[data-s].er-inne { transform: none; }

/* Mobilen ved siden av vinduet */
.bf-mobil {
	position: absolute;
	right: 0;
	bottom: 6%;
	display: flex;
	flex-direction: column;
	gap: .5em;
	width: 25%;
	height: 56%;
	padding: 1.5em .75em .75em;
	border: .45em solid var(--bf-blekk);
	border-radius: 1.7em;
	background: #fff;
	overflow: hidden;
}

.bf-mobil-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3em; }
.bf-mobil-nav i { width: 1.1em; height: 1.1em; border-radius: .3em; background: var(--bf-merke); }
.bf-mobil-nav em { width: 1.4em; height: .4em; border-radius: 999px; background: var(--bf-strek); }
.bf-mobil b { font-size: .95em; font-weight: 800; line-height: 1.1; }
.bf-mobil .bf-linje { height: .4em; }

.bf-mobil-knapp {
	align-self: start;
	margin: .2em 0 .3em;
	padding: .4em .8em;
	border-radius: 999px;
	background: var(--bf-merke);
	color: #fff;
	font-size: .75em;
	font-style: normal;
	font-weight: 700;
}

.bf-mobil-kort { height: 2.6em; border-radius: .55em; background: #f3f2f7; }

/* Nettbutikken: banneret, produktene, kurven og kassen */
.bf-kurv { position: relative; color: var(--bf-merke); font-size: 1.3em; }

.bf-kurv b {
	position: absolute;
	top: -.55em;
	right: -.7em;
	display: grid;
	place-items: center;
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	background: #ff5b24;
	color: #fff;
	font-size: .55em;
	font-weight: 800;
}

.bf-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1.1em 1.2em;
	border-radius: .9em;
	background: var(--bf-merke-lys);
}

.bf-banner b { display: block; margin-bottom: .55em; color: var(--bf-merke); font-size: 1.45em; font-weight: 800; }
.bf-banner .bf-linje { width: 11em; background: #e4ddcd; }

.bf-produkter {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .8em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bf-produkt { display: grid; gap: .3em; font-size: .9em; }
.bf-produkt > span:not(.bf-bilde) { color: var(--bf-gra); }

.bf-produkt .bf-bilde {
	display: grid;
	place-items: center;
	aspect-ratio: 1.1;
	margin-bottom: .2em;
	border-radius: .8em;
}

.bf-produkt .bf-bilde i { width: 42%; aspect-ratio: 1; border-radius: 50%; }
.bf-produkt--a .bf-bilde { background: #f6dfd3; }
.bf-produkt--a .bf-bilde i { border-radius: 50% 50% 18% 18%; background: #d9906c; }
.bf-produkt--b .bf-bilde { background: #dcebd8; }
.bf-produkt--b .bf-bilde i { border-radius: 40% 40% 30% 30%; background: #6f9d6a; }
.bf-produkt--c .bf-bilde { background: #dde4f3; }
.bf-produkt--c .bf-bilde i { width: 62%; aspect-ratio: 1.6; border-radius: .4em; background: #6c83b6; }

.bf-legg {
	justify-self: start;
	margin-top: .3em;
	padding: .38em .8em;
	border-radius: 999px;
	background: var(--bf-merke);
	color: #fff;
	font-size: .82em;
}

.bf-kasse {
	position: absolute;
	top: 2.7em;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: .55em;
	width: 47%;
	padding: 1.2em 1.1em;
	border-left: 1px solid var(--bf-kant);
	background: #fff;
	font-size: .92em;
}

/* Kassen glir inn fra siden i stedet for nedenfra */
.bf .bf-kasse[data-s] { opacity: 1; transform: translateX(105%); }
.bf .bf-kasse[data-s].er-inne { transform: none; }

.bf-kasse-tittel { margin-bottom: .2em; font-size: 1.2em; font-weight: 800; }
.bf-kasse p { display: flex; justify-content: space-between; margin: 0; color: var(--bf-gra); }
.bf-kasse .bf-kasse-sum { padding-top: .5em; border-top: 1px solid var(--bf-kant); color: var(--bf-blekk); font-weight: 800; }

.bf-vipps { margin-top: .4em; padding: .7em; background: #ff5b24; color: #fff; }
.bf-vipps b { font-weight: 800; }
.bf-betal-andre { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }

.bf-betal-andre > span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35em;
	padding: .55em;
	border: 1px solid var(--bf-kant);
	border-radius: .55em;
	font-weight: 700;
}

.bf-betal-andre > .bf-klarna { border-color: #ffb3c7; background: #ffb3c7; color: #17120f; font-weight: 800; }

.bf-ordre {
	position: absolute;
	top: 44%;
	right: 0;
	display: flex;
	align-items: center;
	gap: .65em;
	margin: 0;
	padding: .75em 1em;
	border: 1px solid var(--bf-kant);
	border-radius: 1em;
	background: #fff;
	font-size: .92em;
}

.bf-ordre svg { color: #16a34a; font-size: 1.5em; }
.bf-ordre b { display: block; font-weight: 800; }
.bf-ordre span { color: var(--bf-gra); }

/* Hakene for testene */
.bf-haker {
	position: absolute;
	top: 11%;
	right: 0;
	display: grid;
	justify-items: end;
	gap: .55em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bf-haker li {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .45em 1em .45em .45em;
	border: 1px solid var(--bf-kant);
	border-radius: 999px;
	background: #fff;
	font-size: .92em;
	font-weight: 700;
	white-space: nowrap;
}

.bf-haker li > span {
	display: grid;
	place-items: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: #dcfce7;
	color: #15803d;
}

/* Godkjenningen nederst */
.bf-godkjenn {
	position: absolute;
	bottom: 0;
	left: 4%;
	display: flex;
	align-items: center;
	gap: .8em;
	width: 66%;
	padding: .8em .9em .8em .8em;
	border: 1px solid var(--bf-kant);
	border-radius: 1.1em;
	background: #fff;
}

.bf-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.8em;
	height: 2.8em;
	border-radius: 50%;
	background: #e7f1fe;
	overflow: hidden;
}

.bf-avatar img { width: 82%; height: auto; }
.bf-godkjenn p { flex: 1; margin: 0; min-width: 0; }
.bf-godkjenn b { display: block; font-weight: 800; }
.bf-godkjenn p span { color: var(--bf-gra); font-size: .85em; }
.bf-ja { padding: .6em 1.1em; border-radius: 999px; background: var(--bf-du); color: #fff; font-size: .9em; }
.bf-ja > span[data-s] { border-radius: 999px; }

/* Pekerne. Hvor de står, følger steget i data-steg */
.bf-peker {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	opacity: 0;
	pointer-events: none;
	transition: left .75s cubic-bezier(.45, 0, .2, 1), top .75s cubic-bezier(.45, 0, .2, 1), opacity .3s ease;
}

.bf-peker svg { width: 1.25em; height: 1.55em; fill: var(--farge); stroke: #fff; stroke-width: 1.2; }

.bf-peker b {
	margin: 1.1em 0 0 .1em;
	padding: .15em .55em;
	border-radius: 999px;
	background: var(--farge);
	color: #fff;
	font-size: .75em;
	font-weight: 700;
}

.bf-peker--helt { --farge: var(--bf-helt, var(--bf-viktor)); }
.bf-peker--du { --farge: var(--bf-du); top: 96%; left: 62%; }
.bf[data-peker="helt"] .bf-peker--helt,
.bf[data-peker="du"] .bf-peker--du { opacity: 1; }

/* Trykket på Godkjenn */
.bf--nettside[data-steg="11"] .bf-peker--du svg,
.bf--nettbutikk[data-steg="12"] .bf-peker--du svg { transform: scale(.85); }

.bf--nettside[data-steg="1"] .bf-peker--helt { top: 13%; left: 34%; }
.bf--nettside[data-steg="2"] .bf-peker--helt { top: 30%; left: 24%; }
.bf--nettside[data-steg="3"] .bf-peker--helt { top: 50%; left: 42%; }
.bf--nettside[data-steg="4"] .bf-peker--helt { top: 61%; left: 30%; }
.bf--nettside[data-steg="5"] .bf-peker--helt { top: 71%; left: 40%; }
.bf--nettside[data-steg="6"] .bf-peker--helt { top: 58%; left: 86%; }
.bf--nettside[data-steg="7"] .bf-peker--helt { top: 72%; left: 70%; }
.bf--nettside[data-steg="8"] .bf-peker--helt { top: 24%; left: 74%; }
.bf--nettside[data-steg="9"] .bf-peker--helt { top: 32%; left: 72%; }

.bf--nettbutikk[data-steg="1"] .bf-peker--helt { top: 13%; left: 34%; }
.bf--nettbutikk[data-steg="2"] .bf-peker--helt { top: 27%; left: 30%; }
.bf--nettbutikk[data-steg="3"] .bf-peker--helt { top: 52%; left: 40%; }
.bf--nettbutikk[data-steg="4"] .bf-peker--helt { top: 74%; left: 64%; }
.bf--nettbutikk[data-steg="5"] .bf-peker--helt { top: 13%; left: 76%; }
.bf--nettbutikk[data-steg="6"] .bf-peker--helt { top: 55%; left: 66%; }
.bf--nettbutikk[data-steg="7"] .bf-peker--helt { top: 62%; left: 64%; }
.bf--nettbutikk[data-steg="8"] .bf-peker--helt { top: 52%; left: 88%; }
.bf--nettbutikk[data-steg="9"] .bf-peker--helt { top: 68%; left: 74%; }
.bf--nettbutikk[data-steg="10"] .bf-peker--helt { top: 76%; left: 72%; }

/* I butikken står ordren og hakene under kassen, der den er tom */
.bf--nettbutikk .bf-ordre { top: 47%; }
.bf--nettbutikk .bf-haker { top: 62%; }

@media (min-width: 1200px) {
	.pf-hero-v2 .bf { width: calc(100% + min(4vw, 70px)); }
}

@media (prefers-reduced-motion: reduce) {
	.bf [data-s], .bf-peker { transition: none !important; }
}

/* ======================================================================
   Filmene på tjenestesidene (template-parts/plattform/tjenestefilm.php)
   Vinduet til venstre og kortene fra helten til høyre. Fargen til helten
   står i --bf-helt og --bf-helt-lys.
   ====================================================================== */

.bf-tj .bf-vindu { width: 64%; height: 78%; }

.bf-kort {
	position: absolute;
	display: grid;
	gap: .5em;
	padding: .9em 1em;
	border: 1px solid var(--bf-kant);
	border-radius: 1.1em;
	background: #fff;
}

.bf-kort > b { font-size: 1em; font-weight: 800; line-height: 1.25; }
.bf-kort > span:not([class]) { color: var(--bf-gra); font-size: .85em; }
.bf-kort .bf-ja { justify-self: start; }
.bf-fra { display: flex; align-items: center; gap: .5em; color: var(--bf-gra); font-size: .82em; }
.bf-fra .bf-avatar { width: 2.1em; height: 2.1em; background: var(--bf-helt-lys); }
.bf-fra b { color: var(--bf-blekk); font-weight: 800; }
.bf-haker--rad { top: auto; right: auto; bottom: 0; left: 0; display: flex; flex-wrap: wrap; max-width: 66%; }
.bf-tj .bf-peker--du { top: 70%; left: 88%; }

/* Synlighet: søket der siden klatrer, utkastet og AI-svaret */
.bs-liste { position: relative; --rad: 3.7em; }

.bs-rad {
	position: absolute;
	top: calc(1em + var(--r) * var(--rad));
	right: 1.1em;
	left: 1.1em;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .2em .55em;
	padding: .35em .5em;
	border-radius: .7em;
	transition: top .8s cubic-bezier(.45, 0, .2, 1), opacity .45s ease, transform .6s ease;
}

.bs-rad i { grid-row: span 2; width: 1.1em; height: 1.1em; border-radius: 50%; background: #dcd9e5; }
.bs-rad > span { color: var(--bf-gra); font-size: .75em; }
.bs-rad b { grid-column: 2; width: 72%; height: .55em; border-radius: 999px; background: #c9d4f6; }
.bs-rad em { grid-column: 2; width: 88%; height: .45em; border-radius: 999px; background: var(--bf-strek); }
.bs-rad--k0 { --r: 0; }
.bs-rad--k1 { --r: 1; }
.bs-rad--k2 { --r: 2; }
.bs-rad--k3 { --r: 3; }
.bs-rad--k4 { --r: 4; }
.bs-rad--din { --r: 5; z-index: 1; background: #eef6ff; }
.bs-rad--din i { background: #0f5d5e; }
.bs-rad--din b { width: auto; height: auto; background: none; color: #1a3fb6; font-size: .95em; font-weight: 700; }
.bs-rad--din em.bs-plass { grid-column: 3; grid-row: 1 / span 2; width: auto; height: auto; padding: .3em .7em; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .75em; font-style: normal; font-weight: 800; white-space: nowrap; }
.bs-plass span { display: none; align-items: center; gap: .3em; }
.bs-plass .bs-p9 { display: inline-flex; }

/* Siden klatrer etter at den er publisert: til plass 4, så plass 2 */
.bf--synlighet[data-steg="8"] .bs-rad--din { --r: 3; }
.bf--synlighet[data-steg="8"] .bs-rad--k3 { --r: 4; }
.bf--synlighet[data-steg="8"] .bs-rad--k4 { --r: 5; }
.bf--synlighet:is([data-steg="9"], [data-steg="10"]) .bs-rad--din { --r: 1; }
.bf--synlighet:is([data-steg="9"], [data-steg="10"]) .bs-rad--k1 { --r: 2; }
.bf--synlighet:is([data-steg="9"], [data-steg="10"]) .bs-rad--k2 { --r: 3; }
.bf--synlighet:is([data-steg="9"], [data-steg="10"]) .bs-rad--k3 { --r: 4; }
.bf--synlighet:is([data-steg="9"], [data-steg="10"]) .bs-rad--k4 { --r: 5; }
.bf--synlighet:is([data-steg="8"], [data-steg="9"], [data-steg="10"]) .bs-plass .bs-p9 { display: none; }
.bf--synlighet[data-steg="8"] .bs-plass .bs-p4 { display: inline-flex; }
.bf--synlighet:is([data-steg="9"], [data-steg="10"]) .bs-plass .bs-p2 { display: inline-flex; }
.bf--synlighet:is([data-steg="8"], [data-steg="9"], [data-steg="10"]) .bs-plass { background: #dcfce7; color: #15803d; }

.bs-utkast { top: 3%; right: 0; width: 40%; }
.bs-utkast-tittel { color: var(--bf-blekk); }
.bs-linjer { display: grid; gap: .4em; }
.bs-utkast-bunn { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: .2em; }
.bf--synlighet:is([data-steg="7"], [data-steg="8"], [data-steg="9"], [data-steg="10"]) .bs-venter { visibility: hidden; }
.bs-venter { padding: .3em .7em; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .75em; font-weight: 700; white-space: nowrap; }
.bs-ai { top: 50%; right: 0; width: 40%; }
.bs-ai-merke { display: inline-flex; align-items: center; justify-self: start; gap: .35em; padding: .25em .7em; border-radius: 999px; background: #f1ecff; color: #6d28d9; font-size: .75em; font-weight: 700; }
.bs-ai p { margin: 0; padding: .5em .7em; border-radius: .8em .8em .25em .8em; background: #f4f3f8; font-size: .82em; }
.bs-kilde { display: inline-flex; align-items: center; justify-self: start; gap: .35em; padding: .25em .7em; border: 1px solid #b8dcd6; border-radius: 999px; background: #e3f1ef; color: #0f5d5e; font-size: .75em; font-weight: 700; }
.bs-kilde i { width: .6em; height: .6em; border-radius: 50%; background: #0f5d5e; }

.bf--synlighet .bf-peker--du { top: 37%; left: 90%; }
.bf--synlighet[data-steg="1"] .bf-peker--helt { top: 6%; left: 34%; }
.bf--synlighet[data-steg="2"] .bf-peker--helt { top: 32%; left: 30%; }
.bf--synlighet[data-steg="3"] .bf-peker--helt { top: 10%; left: 80%; }
.bf--synlighet[data-steg="4"] .bf-peker--helt { top: 22%; left: 74%; }
.bf--synlighet[data-steg="5"] .bf-peker--helt { top: 28%; left: 70%; }
.bf--synlighet[data-steg="8"] .bf-peker--helt { top: 48%; left: 44%; }
.bf--synlighet[data-steg="9"] .bf-peker--helt { top: 30%; left: 44%; }
.bf--synlighet[data-steg="10"] .bf-peker--helt { top: 66%; left: 80%; }

/* Annonsering: tallene, kampanjene, annonsene og forslaget fra Astrid */
.ba-tall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.ba-tall > span { display: grid; gap: .15em; padding: .6em .75em; border: 1px solid var(--bf-kant); border-radius: .8em; }
.ba-tall em { color: var(--bf-gra); font-size: .72em; font-style: normal; }
.ba-tall b { font-size: 1.3em; font-weight: 800; }
.ba-tall .ba-etter { color: #15803d; }
.bf--annonsering .ba-for { display: none; }
.bf--annonsering:not([data-steg="9"]):not([data-steg="10"]) .ba-for { display: block; }
.bf--annonsering:not([data-steg="9"]):not([data-steg="10"]) .ba-etter { display: none; }
.ba-kampanjer { display: grid; gap: .55em; margin: 0; padding: 0; list-style: none; }
.ba-kampanje { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .3em .6em; padding: .6em .75em; border: 1px solid var(--bf-kant); border-radius: .8em; }
.ba-kampanje i { width: .75em; height: .75em; border-radius: 50%; background: #4285f4; }
.ba-kampanje--m i { background: #0467df; }
.ba-kampanje b { font-size: .85em; }
.ba-kampanje > span { color: var(--bf-gra); font-size: .72em; }
.ba-kampanje em { grid-column: 1 / -1; height: .45em; border-radius: 999px; background: var(--bf-strek); }
.ba-kampanje u { display: block; width: var(--etter); height: 100%; border-radius: inherit; background: var(--bf-helt); transition: width .8s ease; }
.bf--annonsering:not([data-steg="8"]):not([data-steg="9"]):not([data-steg="10"]) .ba-kampanje u { width: var(--for); }
.ba-google { top: 3%; right: 0; width: 40%; }
.ba-sponset { color: var(--bf-gra); font-size: .72em; }
.ba-google b { color: #1a3fb6; }
.ba-meta { top: 24%; right: 0; grid-template-columns: 3.2em minmax(0, 1fr); align-items: center; width: 40%; }
.ba-meta-bilde { display: grid; grid-row: span 2; place-items: center; width: 3.2em; height: 3.2em; border-radius: .7em; background: var(--bf-helt-lys); color: var(--bf-helt); font-size: 1em; }
.ba-forslag { top: 47%; right: 0; width: 40%; }

.bf--annonsering .bf-peker--du { top: 76%; left: 70%; }
.bf--annonsering[data-steg="1"] .bf-peker--helt { top: 14%; left: 30%; }
.bf--annonsering[data-steg="2"] .bf-peker--helt { top: 40%; left: 30%; }
.bf--annonsering[data-steg="3"] .bf-peker--helt { top: 9%; left: 80%; }
.bf--annonsering[data-steg="4"] .bf-peker--helt { top: 30%; left: 80%; }
.bf--annonsering[data-steg="5"] .bf-peker--helt { top: 58%; left: 76%; }
.bf--annonsering[data-steg="8"] .bf-peker--helt { top: 44%; left: 40%; }
.bf--annonsering[data-steg="9"] .bf-peker--helt { top: 16%; left: 32%; }
.bf--annonsering[data-steg="10"] .bf-peker--helt { top: 16%; left: 14%; }

/* Grafisk design: logoen, fargene, skriften, innlegget og trykkfilen */
.bd-flate {
	display: grid;
	grid-template-areas: "logo farger" "skrift trykk" "innlegg trykk";
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: .9em 1em;
	padding: 1.1em 1.2em;
}

.bd-logo { display: flex; grid-area: logo; align-items: center; gap: .6em; }
.bd-merke { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .8em; background: #0f5d5e; }
.bd-merke i { width: 1.1em; height: 1.1em; border: .3em solid #8cc7bd; border-radius: 50% 50% 50% 0; }
.bd-logo b { color: #0f5d5e; font-size: 1.35em; font-weight: 800; }
.bd-farger { display: flex; grid-area: farger; align-self: center; gap: .4em; }
.bd-farger i { width: 1.8em; height: 1.8em; border-radius: 50%; }
.bd-farger i:nth-child(1) { background: #0f5d5e; }
.bd-farger i:nth-child(2) { background: #8cc7bd; }
.bd-farger i:nth-child(3) { background: #f5a524; }
.bd-farger i:nth-child(4) { border: 1px solid var(--bf-kant); background: #f7f6fa; }
.bd-skrift { display: flex; grid-area: skrift; align-items: baseline; gap: .5em; color: var(--bf-gra); font-size: .8em; }
.bd-skrift b { color: var(--bf-blekk); font-size: 2.4em; font-weight: 800; line-height: 1; }
.bd-innlegg { display: grid; grid-area: innlegg; grid-template-rows: auto 1fr auto; gap: .5em; aspect-ratio: 1.15; padding: .9em; border-radius: .9em; background: #0f5d5e; color: #fff; }
.bd-innlegg-merke { display: flex; align-items: center; gap: .4em; font-size: .72em; font-weight: 700; opacity: .85; }
.bd-innlegg-merke i { width: 1.2em; height: 1.2em; border-radius: .35em; background: #8cc7bd; }
.bd-innlegg b { align-self: end; font-size: 1.15em; font-weight: 800; line-height: 1.15; }
.bd-innlegg em { align-self: end; justify-self: start; line-height: 1.2; padding: .3em .7em; border-radius: 999px; background: #f5a524; color: #1b1733; font-size: .72em; font-style: normal; font-weight: 800; }
.bd-trykk { display: grid; grid-area: trykk; gap: .6em; }
.bd-kort-forside { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1.7; padding: .8em; border: 1px solid var(--bf-kant); border-radius: .6em; background: #e3f1ef; }
.bd-kort-forside i { width: 1.4em; height: 1.4em; border-radius: .4em; background: #0f5d5e; }
.bd-kort-forside b { color: #0f5d5e; font-size: .95em; font-weight: 800; }
.bd-trykk em { display: inline-flex; align-items: center; justify-self: start; gap: .35em; padding: .3em .7em; border-radius: 999px; background: var(--bf-helt-lys); color: var(--bf-helt); font-size: .75em; font-style: normal; font-weight: 700; }
.bd-versjon { top: 46%; right: 0; width: 38%; }
.bd-versjoner { display: flex; gap: .4em; }
.bd-versjoner i { padding: .2em .6em; border: 1px solid var(--bf-kant); border-radius: .5em; color: var(--bf-gra); font-size: .75em; font-style: normal; font-weight: 700; }
.bd-versjoner .er-ny { border-color: var(--bf-helt); background: var(--bf-helt-lys); color: var(--bf-helt); }
.bf--design .bf-vindu { width: 66%; height: 70%; }

.bf--design .bf-peker--du { top: 80%; left: 70%; }
.bf--design[data-steg="1"] .bf-peker--helt { top: 13%; left: 8%; }
.bf--design[data-steg="2"] .bf-peker--helt { top: 13%; left: 22%; }
.bf--design[data-steg="3"] .bf-peker--helt { top: 13%; left: 50%; }
.bf--design[data-steg="4"] .bf-peker--helt { top: 28%; left: 12%; }
.bf--design[data-steg="5"] .bf-peker--helt { top: 52%; left: 18%; }
.bf--design[data-steg="6"] .bf-peker--helt { top: 36%; left: 50%; }
.bf--design[data-steg="7"] .bf-peker--helt { top: 52%; left: 76%; }
.bf--design[data-steg="10"] .bf-peker--helt { top: 22%; left: 84%; }

/* Sosiale medier: kalenderen, innlegget på mobilen og neste uke */
.bm-kalender { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: dense; align-content: start; gap: .45em; padding: 1em; }
.bm-dag { color: var(--bf-gra); font-size: .72em; font-weight: 700; text-align: center; }
.bm-post { display: grid; gap: .4em; padding: .55em; border-radius: .6em; background: #def6f1; font-size: .72em; font-weight: 700; line-height: 1.25; }
.bm-post i { height: 3.4em; border-radius: .4em; background: #9fdcd0; }
.bm-post--b { background: #f3edfc; }
.bm-post--b i { background: #d3c2f5; }
.bm-post--c { background: #fff0c2; }
.bm-post--c i { background: #f5d36b; }
.bf--sosiale .bf-vindu { height: 64%; }

.bm-mobil {
	position: absolute;
	top: 3%;
	right: 1%;
	display: flex;
	flex-direction: column;
	gap: .5em;
	width: 31%;
	padding: 1.2em .75em .9em;
	border: .45em solid var(--bf-blekk);
	border-radius: 1.7em;
	background: #fff;
}

.bm-profil { display: flex; align-items: center; gap: .45em; font-size: .78em; }
.bm-profil i { width: 1.6em; height: 1.6em; border-radius: 50%; background: #0f5d5e; }
.bm-bilde { display: grid; place-items: end start; aspect-ratio: 1; padding: .6em; border-radius: .6em; background: #def6f1; }
.bm-bilde span { padding: .25em .6em; border-radius: 999px; background: #fff; font-size: .72em; font-weight: 800; }
.bm-hjerter { display: flex; align-items: center; gap: .4em; color: var(--bf-gra); font-size: .78em; }
.bm-hjerter b { color: var(--bf-blekk); }
.bm-mobil .bf-linje { height: .4em; }
.bm-klar { bottom: 0; left: 4%; width: 58%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.bm-klar .bf-fra { grid-column: 1 / -1; }
.bm-klar .bf-ja { justify-self: end; }
.bf--sosiale .bf-haker { top: auto; bottom: 18%; }

.bf--sosiale .bf-peker--du { top: 92%; left: 54%; }
.bf--sosiale[data-steg="1"] .bf-peker--helt { top: 9%; left: 20%; }
.bf--sosiale[data-steg="2"] .bf-peker--helt { top: 26%; left: 14%; }
.bf--sosiale[data-steg="3"] .bf-peker--helt { top: 30%; left: 34%; }
.bf--sosiale[data-steg="4"] .bf-peker--helt { top: 40%; left: 52%; }
.bf--sosiale[data-steg="5"] .bf-peker--helt { top: 18%; left: 82%; }
.bf--sosiale[data-steg="6"] .bf-peker--helt { top: 30%; left: 80%; }
.bf--sosiale[data-steg="7"] .bf-peker--helt { top: 86%; left: 30%; }
.bf--sosiale[data-steg="10"] .bf-peker--helt { top: 48%; left: 86%; }

/* Drift: oppetiden, oppdateringene, sikkerhetskopien og feilen som rettes */
.bt-oppetid { display: grid; gap: .5em; padding: .75em .85em; border: 1px solid var(--bf-kant); border-radius: .9em; }
.bt-oppetid > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.bt-oppetid em { color: var(--bf-gra); font-size: .75em; font-style: normal; }
.bt-oppetid b { font-size: 1.3em; font-weight: 800; }
.bt-stolper { display: flex; gap: .15em; }
.bt-stolper i { flex: 1; height: 1.6em; border-radius: .2em; background: #22c55e; }
.bt-stolper i.er-gul { background: #f59e0b; }
.bt-logg { display: grid; gap: .5em; margin: 0; padding: 0; list-style: none; }
.bt-logg li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6em; padding: .55em .7em; border: 1px solid var(--bf-kant); border-radius: .8em; }
.bt-ikon { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--bf-helt-lys); color: var(--bf-helt); }
.bt-logg b { font-size: .85em; }
.bt-status { position: relative; display: inline-grid; overflow: hidden; border-radius: 999px; font-size: .72em; font-style: normal; font-weight: 800; white-space: nowrap; }
.bt-status > span { padding: .3em .7em; background: #fef3c7; color: #92400e; }
.bt-status--ok > span,
.bt-status > span[data-s] { background: #dcfce7; color: #15803d; }
.bt-status > span[data-s] { position: absolute; inset: 0; display: grid; place-items: center; }
.bt-feil .bt-status > span:first-child { background: #fee2e2; color: #b91c1c; }
.bt-forslag { top: 42%; right: 0; width: 38%; }
.bf--drift .bf-vindu { height: 66%; }

.bf--drift .bf-peker--du { top: 66%; left: 70%; }
.bf--drift[data-steg="1"] .bf-peker--helt { top: 14%; left: 30%; }
.bf--drift[data-steg="2"] .bf-peker--helt { top: 36%; left: 34%; }
.bf--drift[data-steg="3"] .bf-peker--helt { top: 36%; left: 56%; }
.bf--drift[data-steg="4"] .bf-peker--helt { top: 48%; left: 34%; }
.bf--drift[data-steg="5"] .bf-peker--helt { top: 60%; left: 34%; }
.bf--drift[data-steg="6"] .bf-peker--helt { top: 60%; left: 56%; }
.bf--drift[data-steg="7"] .bf-peker--helt { top: 50%; left: 80%; }
.bf--drift[data-steg="10"] .bf-peker--helt { top: 20%; left: 84%; }

/* Prosessen: prosjektet fra samtalen til annonsene, med radene fra driften.
   Streken øverst fylles etter steget, og hele er fylt når siden står ferdig */
.bp-fremdrift { display: grid; gap: .4em; }
.bp-fremdrift em { color: var(--bf-gra); font-size: .75em; font-style: normal; font-weight: 700; }
.bp-fremdrift i { height: .5em; border-radius: 999px; background: var(--bf-strek); overflow: hidden; }
.bp-fremdrift u { display: block; width: var(--bp-fylt, 100%); height: 100%; border-radius: inherit; background: var(--bf-helt); transition: width .6s cubic-bezier(.45, 0, .2, 1); }
.bf--prosess .bt-logg { gap: .7em; }
.bf--prosess .bf-vindu { height: 72%; }
.bp-felix { top: 4%; right: 0; width: 40%; }
.bp-lansering { top: 27%; right: 0; width: 40%; }
.bp-brief { top: 55%; right: 0; width: 40%; }
.bp-brief-hode { display: flex; align-items: center; gap: .4em; color: var(--bf-helt); font-size: .78em; font-weight: 800; }
.bp-brief .ba-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bp-brief .ba-tall b { font-size: 1.1em; }
.bf--prosess:is([data-steg="7"], [data-steg="8"], [data-steg="9"], [data-steg="10"]) .bs-venter { visibility: hidden; }
.bf--prosess .bf-haker { top: 80%; bottom: auto; max-width: 100%; }

.bf--prosess[data-steg="0"] { --bp-fylt: 0%; }
.bf--prosess[data-steg="1"] { --bp-fylt: 14%; }
.bf--prosess[data-steg="2"] { --bp-fylt: 28%; }
.bf--prosess[data-steg="3"] { --bp-fylt: 42%; }
.bf--prosess:is([data-steg="4"], [data-steg="5"], [data-steg="6"], [data-steg="7"]) { --bp-fylt: 60%; }
.bf--prosess[data-steg="8"] { --bp-fylt: 82%; }

.bf--prosess .bf-peker--du { top: 40%; left: 90%; }
.bf--prosess[data-steg="1"] .bf-peker--helt { top: 23%; left: 54%; }
.bf--prosess[data-steg="2"] .bf-peker--helt { top: 32%; left: 54%; }
.bf--prosess[data-steg="3"] .bf-peker--helt { top: 9%; left: 90%; }
.bf--prosess[data-steg="4"] .bf-peker--helt { top: 50%; left: 30%; }
.bf--prosess[data-steg="5"] .bf-peker--helt { top: 36%; left: 84%; }
.bf--prosess[data-steg="8"] .bf-peker--helt { top: 59%; left: 30%; }
.bf--prosess[data-steg="9"] .bf-peker--helt { top: 68%; left: 30%; }
.bf--prosess[data-steg="10"] .bf-peker--helt { top: 59%; left: 90%; }

/* ======================================================================
   Alt som er med: flisene for nettsiden og nettbutikken
   (template-parts/plattform/leveranse-flis.php)
   ====================================================================== */

.pf-flis--seo,
.pf-flis--kasse { grid-column: span 2; }

@media (max-width: 899px) {
	.pf-flis--seo,
	.pf-flis--kasse { grid-column: auto; }
}

.lev {
	--lev-t: 7s;
	--lev-gronn: #16a34a;
	--lev-gronn-lys: #dcfce7;
	--lev-kant: #e7e4ef;
	--lev-strek: #ebe9f1;
	--lev-gra: #6b6880;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 14px;
	width: 100%;
	color: #1b1733;
	font-size: 14px;
	line-height: 1.35;
}

.lev svg { display: block; }

.lev-kort {
	padding: 14px 16px;
	border: 1px solid var(--lev-kant);
	border-radius: 16px;
	background: #fff;
}

.lev-linje { display: block; width: 100%; height: 7px; border-radius: 999px; background: var(--lev-strek); }
.lev-linje--kort { width: 62%; }
.lev-stjerner { display: inline-flex; align-items: center; gap: 1px; color: #f5a524; font-size: 12px; }
.lev-stjerner svg { width: 1em; height: 1em; fill: currentColor; }
.lev-stjerner em { margin-left: 6px; color: var(--lev-gra); font-style: normal; }

.lev-merke {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 8px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	white-space: nowrap;
}

.lev-merke--ok { background: var(--lev-gronn-lys); color: #15803d; }
.lev-merke--varsel { background: #fef3c7; color: #92400e; }

/* Teksten som skrives, bokstav for bokstav */
.lev-skriv {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: bottom;
}

.lev-varsel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 14px 10px 10px;
	border: 1px solid var(--lev-kant);
	border-radius: 14px;
	background: #fff;
	font-size: 13px;
}

.lev-varsel > span:first-child {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--lev-gronn-lys);
	color: #15803d;
	font-size: 16px;
}

.lev-varsel b { display: block; font-weight: 800; }
.lev-varsel > span:last-child { color: var(--lev-gra); }

/* Google og AI-søk */
.lev-seo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }

.lev-sok {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid #e3e0ea;
	border-radius: 999px;
	background: #fff;
	color: var(--lev-gra);
	font-size: 13px;
}

.lev-google .lev-skriv { width: 15ch; }
.lev-treff { display: grid; gap: 5px; margin-top: 14px; }
.lev-treff-adresse { display: flex; align-items: center; gap: 6px; color: var(--lev-gra); font-size: 12px; }
.lev-treff-adresse i { width: 14px; height: 14px; border-radius: 50%; background: #0f5d5e; }
.lev-treff b { color: #1a3fb6; font-size: 15px; font-weight: 700; }

.lev-ai-merke {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f1ecff;
	color: #6d28d9;
	font-size: 12px;
	font-weight: 700;
}

.lev-ai-sporsmal {
	margin: 10px 0 10px auto;
	padding: 8px 12px;
	border-radius: 14px 14px 4px 14px;
	background: #f4f3f8;
	font-size: 13px;
}

.lev-ai-svar { display: grid; gap: 6px; }

.lev-kilde {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 6px;
	margin-top: 4px;
	padding: 4px 10px;
	border: 1px solid #b8dcd6;
	border-radius: 999px;
	background: #e3f1ef;
	color: #0f5d5e;
	font-size: 12px;
	font-weight: 700;
}

.lev-kilde i { width: 10px; height: 10px; border-radius: 50%; background: #0f5d5e; }

/* Fart på mobil */
.lev-fart { flex-direction: column; align-items: center; gap: 12px; }
.lev-fart > svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.lev-fart circle { fill: none; stroke-width: 10; }
.lev-fart-spor { stroke: #e6e3ef; }
.lev-fart-fyll { stroke: var(--lev-gronn); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 2; }

.lev-fart-tall {
	position: absolute;
	top: 0;
	left: 50%;
	display: grid;
	place-content: center;
	justify-items: center;
	width: 150px;
	height: 150px;
	transform: translateX(-50%);
}

.lev-fart-tall b { display: block; font-size: 40px; font-weight: 800; line-height: 1; }
.lev-fart-tall span { color: var(--lev-gra); font-size: 13px; }
.lev-fart-merke { display: inline-flex; align-items: center; gap: 6px; color: var(--lev-gra); font-size: 13px; font-weight: 700; }

/* Designet */
.lev-design { flex-direction: column; align-items: center; }
.lev-farger { display: flex; gap: 8px; }
.lev-farger i { width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50%; }
.lev-farger i:nth-child(1) { background: #0f5d5e; }
.lev-farger i:nth-child(2) { background: #8cc7bd; }
.lev-farger i:nth-child(3) { background: #f5a524; }
.lev-farger i:nth-child(4) { background: #1b1733; }
.lev-skisse { display: grid; gap: 10px; width: min(100%, 250px); }
.lev-skisse-nav { display: flex; align-items: center; gap: 8px; }
.lev-skisse-nav i { width: 16px; height: 16px; border-radius: 5px; background: #0f5d5e; }
.lev-skisse-nav span { width: 50%; height: 6px; border-radius: 999px; background: var(--lev-strek); }
.lev-skisse-topp { height: 52px; border-radius: 10px; background: #e3f1ef; }
.lev-skisse-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lev-skisse-rad i { height: 34px; border-radius: 8px; background: #f4f3f8; }

/* Tekstene */
.lev-dok { display: grid; gap: 8px; width: min(100%, 270px); }
.lev-dok b { font-size: 16px; font-weight: 800; }
.lev-dok .lev-dok-under { margin-top: 6px; font-size: 14px; }

/* Skjemaet */
.lev-skjema { flex-direction: column; align-items: stretch; width: min(100%, 300px); margin-inline: auto; }
.lev-skjema .lev-kort { display: grid; gap: 8px; }

.lev-felt {
	display: block;
	padding: 9px 12px;
	border: 1px solid #dcd9e5;
	border-radius: 10px;
	font-size: 13px;
}

.lev-felt .lev-skriv { width: 11ch; }
.lev-felt--stor .lev-skriv { width: 28ch; }

.lev-knapp {
	justify-self: start;
	padding: 8px 18px;
	border-radius: 999px;
	background: #7c3aed;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

/* Google-bedriftsprofilen */
.lev-profil { align-items: center; justify-content: flex-start; }

.lev-kart {
	position: relative;
	flex: none;
	width: 46%;
	aspect-ratio: .9;
	border-radius: 16px;
	background: #e6efe2;
	overflow: hidden;
}

.lev-vei { position: absolute; display: block; height: 10px; background: #fff; }
.lev-vei--1 { top: 30%; left: -10%; width: 130%; transform: rotate(-12deg); }
.lev-vei--2 { top: 64%; left: -10%; width: 130%; transform: rotate(8deg); }
.lev-vei--3 { top: -10%; left: 46%; width: 10px; height: 130%; }

.lev-nal {
	position: absolute;
	top: 34%;
	left: 50%;
	color: #dc2626;
	font-size: 34px;
	transform: translate(-50%, -50%);
}

.lev-nal svg { fill: #fee2e2; }
.lev-bedrift { display: grid; gap: 4px; margin-left: -10%; }
.lev-bedrift b { font-size: 16px; font-weight: 800; }
.lev-apen { color: #15803d; font-size: 12px; font-weight: 700; }
.lev-knapper { display: flex; gap: 6px; margin-top: 6px; }

.lev-knapper em {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	border: 1px solid var(--lev-kant);
	border-radius: 999px;
	color: #1a3fb6;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
}

/* Målingen */
.lev-maaling { flex-direction: column; align-items: stretch; gap: 8px; }
.lev-maal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; }

.lev-maal-ikon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #f1ecff;
	color: #6d28d9;
}

.lev-maal-navn { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.lev-maal-navn i { display: block; height: 6px; border-radius: 999px; background: var(--lev-strek); }
.lev-maal-navn i b { display: block; width: var(--v); height: 100%; border-radius: inherit; background: #7c3aed; }
.lev-maal > b { font-size: 20px; font-weight: 800; }

/* Drift og sikkerhetskopi */
.lev-drift { align-items: center; }

.lev-skjold {
	display: grid;
	flex: none;
	place-items: center;
	width: 74px;
	height: 74px;
	border-radius: 22px;
	background: var(--lev-gronn-lys);
	color: #15803d;
	font-size: 36px;
}

.lev-logg { display: grid; gap: 10px; }
.lev-logg-rad { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; }

.lev-logg-rad i {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--lev-gronn-lys);
	color: #15803d;
	font-size: 12px;
}

/* Kassen */
.lev-kasse { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
.lev-betaling { display: grid; gap: 8px; }
.lev-betaling-tittel { margin-bottom: 2px; font-size: 15px; font-weight: 800; }

.lev-valg {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid var(--lev-kant);
	border-radius: 12px;
	font-size: 13px;
}

.lev-valg i { width: 16px; height: 16px; border: 2px solid #cfcbdb; border-radius: 50%; }
.lev-valg b { font-weight: 800; }
.lev-valg em { overflow: hidden; color: var(--lev-gra); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.lev-valg--vipps { border-color: #ff5b24; }
.lev-valg--vipps i { border: 5px solid #ff5b24; }
.lev-valg--vipps b { color: #ff5b24; }
.lev-valg--klarna b { padding: 1px 8px; border-radius: 6px; background: #ffb3c7; color: #17120f; }

.lev-betal {
	position: relative;
	display: grid;
	place-items: center;
	margin-top: 4px;
	padding: 10px;
	border-radius: 12px;
	background: #ff5b24;
	color: #fff;
	font-weight: 800;
	overflow: hidden;
}

.lev-betalt {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--lev-gronn);
}

/* Produktene */
.lev-produkter .lev-kort { display: grid; gap: 14px; width: min(100%, 300px); }
.lev-rutenett { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lev-rutenett i { aspect-ratio: 1; border-radius: 10px; background: #f6dfd3; }
.lev-rutenett i:nth-child(3n + 2) { background: #dcebd8; }
.lev-rutenett i:nth-child(3n) { background: #dde4f3; }
.lev-fremdrift { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 4px; align-items: baseline; font-size: 13px; font-weight: 700; }
.lev-fremdrift > b { font-weight: 800; }
.lev-fremdrift > i { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--lev-strek); }
.lev-fremdrift > i b { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--lev-gronn); }

/* Frakten */
.lev-frakt { flex-direction: column; align-items: center; gap: 0; }
.lev-skriver { position: relative; z-index: 2; width: 220px; height: 34px; border-radius: 12px; background: #2f4858; }
.lev-skriver span { position: absolute; bottom: 8px; left: 20px; width: 180px; height: 4px; border-radius: 999px; background: #1b2a33; }

.lev-lapp {
	display: grid;
	gap: 4px;
	width: 180px;
	margin-top: -10px;
	padding: 18px 14px 12px;
	border: 1px solid var(--lev-kant);
	border-radius: 0 0 12px 12px;
	background: #fff;
	font-size: 12px;
}

.lev-lapp b { color: #4d7a1f; font-size: 16px; font-weight: 800; }
.lev-lapp > span:not(.lev-strek) { color: var(--lev-gra); }
.lev-strek { display: flex; gap: 2px; height: 30px; margin: 4px 0; }
.lev-strek i { width: calc(var(--b) * 2px); background: #1b1733; }
.lev-lapp em { color: #15803d; font-style: normal; font-weight: 700; }

/* Google Shopping */
.lev-shopping { flex-direction: column; align-items: stretch; }
.lev-shopping .lev-sok { align-self: flex-start; }
.lev-hylle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.lev-vare {
	display: grid;
	gap: 2px;
	padding: 8px;
	border: 1px solid var(--lev-kant);
	border-radius: 12px;
	background: #fff;
	font-size: 12px;
}

.lev-vare i { display: block; aspect-ratio: 1.2; margin-bottom: 4px; border-radius: 8px; background: #dde4f3; }
.lev-vare--a i { background: #f6dfd3; }
.lev-vare--b i { background: #dcebd8; }
.lev-vare b { font-weight: 800; }
.lev-vare em { font-style: normal; font-weight: 700; }
.lev-vare small { overflow: hidden; color: var(--lev-gra); text-overflow: ellipsis; white-space: nowrap; }
.lev-vare.er-din { border: 2px solid #7c3aed; }

/* Regnskapet */
/* Regnskapet: ordren går til Tripletex, Visma eller Fiken, ett system om
   gangen, med de ekte logoene. Uten bevegelse står Tripletex som valgt */
.lev-regnskap { --lev-t: 9s; align-items: center; gap: 10px; }
.lev-boks { position: relative; display: grid; flex: none; justify-items: center; gap: 4px; padding: 16px 14px; font-size: 13px; text-align: center; }
.lev-boks > svg { color: #2f4858; font-size: 22px; }
.lev-boks b { font-weight: 800; }
.lev-boks em { color: var(--lev-gra); font-style: normal; }
.lev-pil { position: relative; flex: 1; min-width: 28px; max-width: 64px; height: 3px; border-radius: 999px; background: var(--lev-strek); }
.lev-pil i { position: absolute; top: 50%; left: 100%; width: 12px; height: 12px; border-radius: 50%; background: #7c3aed; transform: translate(-50%, -50%); }
.lev-systemer { display: grid; flex: 1; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }

.lev-system {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 56px;
	padding: 0 10px 0 14px;
	border: 1.5px solid var(--lev-kant);
	border-radius: 12px;
	background: #fff;
}

.lev-system img { display: block; width: auto; max-width: 62%; height: 26px; object-fit: contain; object-position: left center; }
.lev-system--visma img { height: 19px; }
.lev-system--fiken img { height: 32px; }
.lev-system .lev-merke { padding: 3px 9px 3px 6px; font-size: 11px; opacity: 0; }
.lev-system:first-child { border-color: #7c3aed; }
.lev-system:first-child .lev-merke { opacity: 1; }

/* Lageret */
.lev-lager { flex-direction: column; align-items: center; }
.lev-lagerrad { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: min(100%, 300px); }
.lev-lagerrad .lev-vare { padding: 0; border: 0; }
.lev-lagerrad .lev-vare i { margin: 0; aspect-ratio: 1; }
.lev-lager-navn { display: grid; color: var(--lev-gra); font-size: 12px; }
.lev-lager-navn b { color: #1b1733; font-size: 14px; font-weight: 800; }
.lev-lager-tall { position: relative; display: grid; width: 40px; height: 40px; border-radius: 12px; background: #f4f3f8; }
.lev-lager-tall b { grid-area: 1 / 1; place-self: center; font-size: 20px; font-weight: 800; opacity: 0; }
.lev-lager-tall .lev-lager-1 { color: #b45309; opacity: 1; }

/* ---------- Bevegelsen, når flisen er på skjermen ---------- */

@media (prefers-reduced-motion: no-preference) {
	.er-synlig .lev-google .lev-skriv { animation: lev-skriv var(--lev-t) steps(15) infinite; }
	.er-synlig .lev-treff { animation: lev-inn-30 var(--lev-t) ease infinite; }
	.er-synlig .lev-ai-sporsmal { animation: lev-inn-20 var(--lev-t) ease infinite; }
	.er-synlig .lev-ai-svar .lev-linje { transform-origin: left; animation: lev-gro-40 var(--lev-t) ease infinite; }
	.er-synlig .lev-kilde { animation: lev-inn-55 var(--lev-t) ease infinite; }

	.er-synlig .lev-fart-fyll { animation: lev-fart var(--lev-t) cubic-bezier(.3, .7, .2, 1) infinite; }
	.er-synlig .lev-fart-tall .pf-mo-teller { animation: lev-tell var(--lev-t) cubic-bezier(.3, .7, .2, 1) infinite; }

	.er-synlig .lev-farger i { animation: lev-pop var(--lev-t) ease infinite; }
	.er-synlig .lev-farger i:nth-child(2) { animation-delay: .15s; }
	.er-synlig .lev-farger i:nth-child(3) { animation-delay: .3s; }
	.er-synlig .lev-farger i:nth-child(4) { animation-delay: .45s; }
	.er-synlig .lev-skisse > span { animation: lev-inn-30 var(--lev-t) ease infinite; }
	.er-synlig .lev-skisse > span:nth-child(2) { animation-name: lev-inn-40; }
	.er-synlig .lev-skisse > span:nth-child(3) { animation-name: lev-inn-50; }
	.er-synlig .lev-design .lev-merke { animation: lev-pop-70 var(--lev-t) ease infinite; }

	.er-synlig .lev-dok .lev-linje { transform-origin: left; animation: lev-gro-40 var(--lev-t) ease calc(var(--i) * .35s) infinite; }

	.er-synlig .lev-felt .lev-skriv { animation: lev-skriv-1 var(--lev-t) steps(11) infinite; }
	.er-synlig .lev-felt--stor .lev-skriv { animation: lev-skriv-2 var(--lev-t) steps(28) infinite; }
	.er-synlig .lev-skjema .lev-knapp { animation: lev-trykk var(--lev-t) ease infinite; }
	.er-synlig .lev-skjema .lev-varsel { animation: lev-inn-70 var(--lev-t) ease infinite; }

	.er-synlig .lev-nal { animation: lev-nal var(--lev-t) cubic-bezier(.3, 1.5, .5, 1) infinite; }
	.er-synlig .lev-bedrift { animation: lev-inn-40 var(--lev-t) ease infinite; }

	.er-synlig .lev-maal { animation: lev-inn-20 var(--lev-t) ease calc(var(--i) * .2s) infinite; }
	.er-synlig .lev-maal-navn i b { transform-origin: left; animation: lev-gro-50 var(--lev-t) ease infinite; }
	.er-synlig .lev-maal > .pf-mo-teller { animation: lev-tell var(--lev-t) ease infinite; }

	.er-synlig .lev-logg-rad { animation: lev-inn-30 var(--lev-t) ease calc(var(--i) * .5s) infinite; }
	.er-synlig .lev-skjold { animation: lev-puls var(--lev-t) ease infinite; }

	.er-synlig .lev-valg--vipps { animation: lev-valgt var(--lev-t) ease infinite; }
	.er-synlig .lev-betal { animation: lev-trykk var(--lev-t) ease infinite; }
	.er-synlig .lev-betalt { animation: lev-inn-60 var(--lev-t) ease infinite; }
	.er-synlig .lev-kasse .lev-varsel { animation: lev-inn-70 var(--lev-t) ease infinite; }

	.er-synlig .lev-rutenett i { animation: lev-pop var(--lev-t) ease calc(var(--i) * .18s) infinite; }
	.er-synlig .lev-fremdrift > i b { transform-origin: left; animation: lev-gro-50 var(--lev-t) ease infinite; }
	.er-synlig .lev-fremdrift .pf-mo-teller { animation: lev-tell var(--lev-t) ease infinite; }

	.er-synlig .lev-lapp { animation: lev-skriv-ut var(--lev-t) ease infinite; }
	.er-synlig .lev-lapp em { animation: lev-inn-70 var(--lev-t) ease infinite; }

	.er-synlig .lev-hylle .lev-vare { animation: lev-inn-30 var(--lev-t) ease calc(var(--i) * .2s) infinite; }

	.er-synlig .lev-pil i { animation: lev-pil calc(var(--lev-t) / 3) ease-in-out infinite; }
	.er-synlig .lev-system { animation: lev-system var(--lev-t) ease calc(var(--i) * var(--lev-t) / 3) infinite backwards; }
	.er-synlig .lev-system .lev-merke { animation: lev-system-merke var(--lev-t) ease calc(var(--i) * var(--lev-t) / 3) infinite backwards; }

	.er-synlig .lev-lager-3 { animation: lev-tall-1 var(--lev-t) steps(1) infinite; }
	.er-synlig .lev-lager-2 { animation: lev-tall-2 var(--lev-t) steps(1) infinite; }
	.er-synlig .lev-lager-tall .lev-lager-1 { animation: lev-tall-3 var(--lev-t) steps(1) infinite; }
	.er-synlig .lev-lager > .lev-merke { animation: lev-inn-70 var(--lev-t) ease infinite; }
}

@keyframes lev-skriv { 0%, 6% { width: 0; } 28%, 100% { width: 15ch; } }
@keyframes lev-skriv-1 { 0%, 6% { width: 0; } 22%, 100% { width: 11ch; } }
@keyframes lev-skriv-2 { 0%, 22% { width: 0; } 50%, 100% { width: 28ch; } }
@keyframes lev-inn-20 { 0%, 14% { opacity: 0; transform: translateY(10px); } 22%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lev-inn-30 { 0%, 24% { opacity: 0; transform: translateY(10px); } 32%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lev-inn-40 { 0%, 34% { opacity: 0; transform: translateY(10px); } 42%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lev-inn-50 { 0%, 44% { opacity: 0; transform: translateY(10px); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lev-inn-55 { 0%, 50% { opacity: 0; transform: translateY(8px); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lev-inn-60 { 0%, 56% { opacity: 0; transform: scale(.85); } 62%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lev-inn-70 { 0%, 64% { opacity: 0; transform: translateY(12px); } 72%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lev-gro-40 { 0%, 30% { transform: scaleX(0); } 44%, 92% { transform: none; } 100% { transform: scaleX(0); } }
@keyframes lev-gro-50 { 0%, 10% { transform: scaleX(0); } 55%, 92% { transform: none; } 100% { transform: scaleX(0); } }
@keyframes lev-fart { 0%, 8% { stroke-dashoffset: 100; } 55%, 92% { stroke-dashoffset: 2; } 100% { stroke-dashoffset: 100; } }
@keyframes lev-tell { 0%, 8% { --pf-n: 0; } 55%, 100% { --pf-n: var(--mal); } }
@keyframes lev-pop { 0%, 8% { opacity: 0; transform: scale(.4); } 16%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lev-pop-70 { 0%, 66% { opacity: 0; transform: scale(.6); } 74%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lev-system { 0%, 12% { border-color: var(--lev-kant); } 16%, 30% { border-color: #7c3aed; } 34%, 100% { border-color: var(--lev-kant); } }
@keyframes lev-system-merke { 0%, 14% { opacity: 0; transform: scale(.7); } 18%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; } }
@keyframes lev-trykk { 0%, 54% { transform: none; } 57% { transform: scale(.92); } 60%, 100% { transform: none; } }
@keyframes lev-nal { 0%, 14% { opacity: 0; transform: translate(-50%, -160%); } 26%, 92% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
@keyframes lev-puls { 0%, 60% { transform: none; } 66% { transform: scale(1.08); } 72%, 100% { transform: none; } }
@keyframes lev-valgt { 0%, 30% { border-color: var(--lev-kant); } 38%, 100% { border-color: #ff5b24; } }
/* Lappen kommer ut under skriveren: toppen vises først, og resten glir ned */
@keyframes lev-skriv-ut { 0%, 10% { clip-path: inset(0 0 100% 0); transform: translateY(-40%); } 50%, 92% { clip-path: inset(0); transform: none; opacity: 1; } 100% { clip-path: inset(0); transform: none; opacity: 0; } }
@keyframes lev-pil { 0%, 15% { left: 0; opacity: 0; } 20% { opacity: 1; } 55% { left: 100%; opacity: 1; } 60%, 100% { left: 100%; opacity: 0; } }
@keyframes lev-tall-1 { 0%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes lev-tall-2 { 0%, 33% { opacity: 0; } 34%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes lev-tall-3 { 0%, 60% { opacity: 0; } 61%, 100% { opacity: 1; } }

/* ======================================================================
   Flisene på tjenestesidene (/seo/, /annonsering/, /grafisk-design/,
   /sosiale-medier/ og /wordpress-vedlikehold/)
   ====================================================================== */

.pf-flis--effekt,
.pf-flis--kanaler,
.pf-flis--formater,
.pf-flis--maler,
.pf-flis--kalender,
.pf-flis--rekkevidde,
.pf-flis--oppetid,
.pf-flis--rapport { grid-column: span 2; }

@media (max-width: 899px) {
	.pf-flis--effekt,
	.pf-flis--kanaler,
	.pf-flis--formater,
	.pf-flis--maler,
	.pf-flis--kalender,
	.pf-flis--rekkevidde,
	.pf-flis--oppetid,
	.pf-flis--rapport { grid-column: auto; }
}

/* Felles bevegelse: inn ved 20 til 70 prosent av runden, stolper som vokser,
   ting som spretter fram og tall som teller, med forsinkelsen i --i */
@media (prefers-reduced-motion: no-preference) {
	.er-synlig .lev-a20 { animation: lev-inn-20 var(--lev-t) ease calc(var(--i, 0) * .25s) infinite backwards; }
	.er-synlig .lev-a40 { animation: lev-inn-40 var(--lev-t) ease calc(var(--i, 0) * .25s) infinite backwards; }
	.er-synlig .lev-a50 { animation: lev-inn-50 var(--lev-t) ease infinite; }
	.er-synlig .lev-a60 { animation: lev-inn-60 var(--lev-t) ease infinite; }
	.er-synlig .lev-a70 { animation: lev-inn-70 var(--lev-t) ease infinite; }
	.er-synlig .lev-agro { transform-origin: left; animation: lev-gro-50 var(--lev-t) ease calc(var(--i, 0) * .2s) infinite backwards; }
	.er-synlig .lev-avokse { transform-origin: bottom; animation: lev-vokse var(--lev-t) ease calc(var(--i, 0) * .25s) infinite backwards; }
	.er-synlig .lev-apop { animation: lev-pop var(--lev-t) ease calc(var(--i, 0) * .15s) infinite backwards; }
	.er-synlig .lev-ateller { animation: lev-tell var(--lev-t) ease infinite; }
	.er-synlig .lev-viser { animation: lev-viser var(--lev-t) ease-in-out infinite; }
	.er-synlig .lev-gjen-ok { animation: lev-inn-60 var(--lev-t) ease infinite; }
}

@keyframes lev-vokse { 0%, 10% { transform: scaleY(0); } 50%, 92% { transform: none; } 100% { transform: scaleY(0); } }
@keyframes lev-viser { 0%, 10% { transform: rotate(0deg); } 50%, 100% { transform: rotate(300deg); } }

/* Lister med rader i et kort */
.lev-liste .lev-kort { display: grid; gap: 8px; width: min(100%, 320px); }
.lev-liste-hode,
.lev-liste-rad { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.4em; align-items: center; gap: 10px; }
.lev-liste-hode { color: var(--lev-gra); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.lev-liste-hode span:last-child { text-align: center; }
.lev-liste-rad { padding: 8px 0; border-top: 1px solid var(--lev-kant); font-size: 13px; }
.lev-liste-rad > span { color: var(--lev-gra); }
.lev-plass { padding: 3px 0; border-radius: 999px; background: #f4f3f8; font-size: 12px; font-style: normal; font-weight: 800; text-align: center; }
.lev-plass--ok { background: var(--lev-gronn-lys); color: #15803d; }
.lev-plass--opp { background: #e0f0fb; color: #1f6fa0; }
.lev-plass--ny { background: #f1ecff; color: #6d28d9; }

/* Herman leser siden i natt */
.lev-forslag { flex-direction: column; align-items: center; }
.lev-natt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #1b1733; color: #fff; font-size: 12px; font-weight: 700; }
.lev-forslag .lev-kort { display: grid; gap: 10px; width: min(100%, 300px); }
.lev-forslag-rad { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.lev-forslag-rad i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #238cc6; }
.lev-forslag .lev-merke { justify-self: start; }

/* Effekten målt etter 28, 56 og 90 dager, og rekkevidden per uke */
.lev-effekt .lev-kort { display: grid; gap: 12px; width: 100%; }
.lev-effekt-tittel { font-size: 14px; font-weight: 800; }
.lev-stolper { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; align-items: end; gap: 14px; height: 150px; }
.lev-stolper > span { display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: center; height: 100%; gap: 6px; }
.lev-stolper i { display: block; width: 100%; height: var(--v); border-radius: 10px 10px 4px 4px; background: #238cc6; }
.lev-stolper b { color: var(--lev-gra); font-size: 12px; font-weight: 700; }
.lev-stolper em { padding: 2px 8px; border-radius: 999px; background: var(--lev-gronn-lys); color: #15803d; font-size: 12px; font-style: normal; font-weight: 800; }
.lev-effekt-merke { color: var(--lev-gra); font-size: 12px; }
.lev-rekkevidde .lev-stolper i { background: #009495; }

/* Kanalene i annonseringen, med merket til hver kanal */
.lev-kanaler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.lev-kanal { display: grid; align-content: start; gap: 6px; font-size: 13px; }
.lev-kanal-ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--farge) 12%, #fff); color: var(--farge); font-size: 18px; }
.lev-kanal b { font-weight: 800; }
.lev-kanal > span:not(.lev-kanal-ikon) { color: var(--lev-gra); font-size: 12px; }
.lev-kanal > i { display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: var(--lev-strek); }
.lev-kanal > i u { display: block; width: var(--v); height: 100%; border-radius: inherit; background: var(--farge); }

/* A/B-testen av annonsetekstene */
.lev-abtest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lev-variant { position: relative; display: grid; gap: 6px; font-size: 13px; }
.lev-variant-hode { display: flex; align-items: center; gap: 6px; color: var(--lev-gra); font-size: 11px; }
.lev-variant-hode em { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #f4f3f8; color: #1b1733; font-style: normal; font-weight: 800; }
.lev-variant b { color: #1a3fb6; }
.lev-variant-tall { color: var(--lev-gra); font-size: 12px; }
.lev-variant-tall b { color: #1b1733; }
.lev-variant.er-vinner { border-color: #15803d; }
.lev-variant .lev-merke { position: absolute; top: -12px; right: 10px; padding: 3px 10px 3px 6px; font-size: 11px; }

/* Budsjettet */
.lev-budsjett .lev-kort { display: grid; gap: 10px; width: min(100%, 300px); font-size: 13px; }
.lev-budsjett-hode,
.lev-budsjett-rad { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lev-budsjett-hode b { font-size: 20px; font-weight: 800; }
.lev-budsjett-rad span { color: var(--lev-gra); }
.lev-skyv { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--lev-strek); }
.lev-skyv i { display: block; width: 66%; height: 100%; border-radius: inherit; background: #eb4e00; }
.lev-skyv b { position: absolute; top: 50%; left: 66%; width: 18px; height: 18px; border: 3px solid #eb4e00; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.lev-budsjett .lev-merke { justify-self: start; white-space: normal; }

/* Formatene til et design */
.lev-formater { align-items: flex-end; gap: 16px; }
.lev-format { display: grid; justify-items: center; gap: 8px; }
.lev-format-flate { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 10px; border-radius: 12px; background: #0f5d5e; color: #fff; }
.lev-format-flate i { width: 14px; height: 14px; border-radius: 4px; background: #8cc7bd; }
.lev-format-flate b { align-self: end; font-size: 12px; font-weight: 800; line-height: 1.15; }
.lev-format-flate em { justify-self: start; padding: 2px 7px; border-radius: 999px; background: #f5a524; color: #1b1733; font-size: 10px; font-style: normal; font-weight: 800; }
.lev-format--0 .lev-format-flate { width: 130px; height: 130px; }
.lev-format--1 .lev-format-flate { width: 92px; height: 164px; }
.lev-format--2 .lev-format-flate { width: 210px; height: 118px; }
.lev-format-navn { color: var(--lev-gra); font-size: 12px; }
.lev-format-navn b { color: #1b1733; }

/* Logoen i tre varianter */
.lev-logo { gap: 10px; }
.lev-logo-flis { display: flex; align-items: center; gap: 8px; padding: 18px 16px; border: 1px solid var(--lev-kant); border-radius: 14px; background: #fff; color: #0f5d5e; font-size: 14px; font-weight: 800; white-space: nowrap; }
.lev-logo-flis i { width: 26px; height: 26px; border-radius: 8px; background: #0f5d5e; }
.lev-logo-flis--merke { padding: 14px; }
.lev-logo-flis--mork { border-color: #0f5d5e; background: #0f5d5e; color: #fff; }
.lev-logo-flis--mork i { background: #8cc7bd; }

/* Trykksakene */
.lev-trykk { align-items: center; flex-wrap: wrap; }
.lev-trykksak { display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--lev-kant); border-radius: 8px; background: #e3f1ef; }
.lev-trykksak i { width: 18px; height: 18px; border-radius: 5px; background: #0f5d5e; }
.lev-trykksak b { color: #0f5d5e; font-size: 13px; font-weight: 800; }
.lev-trykksak--kort { width: 150px; height: 88px; padding: 12px; }
.lev-trykksak--flyer { gap: 6px; justify-content: flex-start; width: 110px; height: 150px; padding: 12px; background: #fff; }
.lev-trykk .lev-merke { flex-basis: 100%; justify-content: center; }

/* Versjonene og godkjenningen */
.lev-versjoner .lev-kort { display: grid; gap: 12px; width: min(100%, 290px); }
.lev-versjon-par { display: flex; gap: 10px; }
.lev-versjon { display: grid; justify-items: center; gap: 6px; padding: 10px 18px; border: 1px solid var(--lev-kant); border-radius: 12px; color: var(--lev-gra); font-size: 12px; font-weight: 800; }
.lev-versjon i { width: 34px; height: 34px; border-radius: 10px; background: var(--farge); }
.lev-versjon--ny { border-color: #690bd5; color: #690bd5; }
.lev-boble { justify-self: start; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #f4f3f8; font-size: 13px; }
.lev-versjoner .lev-merke { justify-self: start; }

/* Filene som er dine */
.lev-filer .lev-kort { display: grid; gap: 8px; width: min(100%, 320px); }
.lev-fil { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; font-size: 13px; }
.lev-fil-ikon { display: grid; grid-row: span 2; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #f3edfc; color: #690bd5; font-size: 16px; }
.lev-fil b { font-weight: 800; }
.lev-fil em { grid-column: 2; color: var(--lev-gra); font-size: 12px; font-style: normal; }
.lev-fil > svg { grid-column: 3; grid-row: 1 / span 2; color: var(--lev-gra); }

/* Malene i appen */
.lev-maler { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; }
.lev-mal { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; aspect-ratio: .8; padding: 10px; border-radius: 12px; background: #0f5d5e; }
.lev-mal i { width: 12px; height: 12px; border-radius: 4px; background: #8cc7bd; }
.lev-mal b { align-self: end; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .8); }
.lev-mal em { width: 60%; height: 10px; border-radius: 999px; background: #f5a524; }
.lev-mal--b { background: #e3f1ef; }
.lev-mal--b b { background: #0f5d5e; }
.lev-mal--c { background: #f5a524; }
.lev-mal--c em { background: #0f5d5e; }
.lev-maler .lev-merke { grid-column: 1 / -1; justify-self: center; }

/* Kalenderen og innlegget */
.lev-kalender .lev-kort { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: dense; gap: 8px; width: 100%; }
.lev-dag { color: var(--lev-gra); font-size: 11px; font-weight: 700; text-align: center; }
.lev-post { display: grid; gap: 5px; padding: 8px; border-radius: 10px; background: #def6f1; font-size: 11px; font-weight: 700; }
.lev-post i { height: 22px; border-radius: 6px; background: #9fdcd0; }
.lev-post--b { background: #f3edfc; }
.lev-post--b i { background: #d3c2f5; }
.lev-post--c { background: #fff0c2; }
.lev-post--c i { background: #f5d36b; }
.lev-telefon { display: grid; gap: 8px; width: 170px; padding: 18px 12px 14px; border: 6px solid #1b1733; border-radius: 26px; background: #fff; }
.lev-profil { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.lev-profil i { width: 22px; height: 22px; border-radius: 50%; background: #0f5d5e; }
.lev-innlegg-bilde { display: grid; place-items: end start; aspect-ratio: 1; padding: 8px; border-radius: 10px; background: #def6f1; }
.lev-innlegg-bilde b { padding: 3px 8px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; }
.lev-likes { display: flex; align-items: center; gap: 5px; color: var(--lev-gra); font-size: 12px; }
.lev-likes svg { color: #e11d48; fill: #e11d48; }
.lev-likes b { color: #1b1733; font-weight: 800; }

/* Planen for kvartalet */
.lev-plan .lev-kort { display: grid; gap: 10px; width: min(100%, 300px); }
.lev-plan-rad { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid #009495; font-size: 13px; }
.lev-plan-rad em { color: var(--lev-gra); font-size: 11px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* Bildene i stilen din */
.lev-bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lev-bilde { display: grid; grid-template-rows: 1fr auto; gap: 6px; aspect-ratio: .85; padding: 10px; border-radius: 14px; background: #0f5d5e; }
.lev-bilde i { border-radius: 8px; background: rgba(255, 255, 255, .18); }
.lev-bilde b { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .85); }
.lev-bilde--b { background: #8cc7bd; }
.lev-bilde--c { background: #f5a524; }
.lev-bilder .lev-merke { grid-column: 1 / -1; justify-self: center; }

/* Kommentarene som får et svar */
.lev-kommentarer .lev-kort { display: grid; gap: 10px; width: min(100%, 300px); font-size: 13px; }
.lev-kommentar { display: flex; align-items: flex-start; gap: 8px; }
.lev-kommentar i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fde2c4; }
.lev-kommentar b { display: block; }
.lev-svar { display: flex; align-items: flex-start; gap: 8px; margin-left: 20px; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #def6f1; }
.lev-svar svg { flex: none; margin-top: 2px; color: #009495; }
.lev-kommentarer .lev-merke { justify-self: start; }

/* Klokka */
.lev-tid { flex-direction: column; align-items: center; }
.lev-klokke { position: relative; width: 110px; height: 110px; border: 6px solid #1b1733; border-radius: 50%; background: #fff; }
.lev-klokke::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #1b1733; transform: translate(-50%, -50%); }
.lev-viser { position: absolute; bottom: 50%; left: calc(50% - 2px); width: 4px; height: 38%; border-radius: 999px; background: #009495; transform-origin: bottom; transform: rotate(300deg); }

/* Oppetiden */
.lev-oppetid .lev-kort { display: grid; gap: 14px; width: 100%; }
.lev-oppetid-hode { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--lev-gra); font-size: 13px; }
.lev-oppetid-hode b { color: #1b1733; font-size: 24px; font-weight: 800; }
.lev-dager { display: flex; gap: 3px; }
.lev-dager i { flex: 1; height: 34px; border-radius: 4px; background: #22c55e; }
.lev-dager i.er-gul { background: #f59e0b; }

/* Kopien først, så den ekte siden */
.lev-kopi { align-items: center; gap: 10px; }
.lev-miljo { display: grid; gap: 6px; font-size: 13px; }
.lev-miljo em { color: var(--lev-gra); font-size: 11px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.lev-miljo b { font-weight: 800; }
.lev-miljo .lev-merke { padding: 3px 9px 3px 6px; font-size: 11px; }
.lev-miljo--ekte { border-color: #15803d; }
.lev-kopi .lev-pil { max-width: 40px; }

/* Sikkerhetskopiene som kan hentes tilbake */
.lev-gjen .lev-kort { display: grid; gap: 8px; width: min(100%, 300px); }
.lev-gjen-rad { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--lev-kant); border-radius: 10px; font-size: 13px; }
.lev-gjen-rad svg { color: #df3e34; }
.lev-gjen-rad b { flex: 1; }
.lev-gjen-rad.er-valgt { border-color: #df3e34; }
.lev-gjen-knapp { position: relative; overflow: hidden; padding: 4px 10px; border-radius: 999px; background: #df3e34; color: #fff; font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
.lev-gjen-ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--lev-gronn); }

/* Angrepene som stoppes */
.lev-sikkerhet { flex-direction: column; align-items: center; }
.lev-sikkerhet-tall { display: grid; justify-items: center; color: var(--lev-gra); font-size: 13px; }
.lev-sikkerhet-tall b { color: #1b1733; font-size: 40px; font-weight: 800; line-height: 1.1; }

/* Månedsrapporten */
.lev-rapport .lev-dok { display: grid; gap: 10px; width: min(100%, 420px); }
.lev-rapport-hode { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--lev-kant); }
.lev-rapport-hode svg { grid-row: span 2; color: #df3e34; font-size: 26px; }
.lev-rapport-hode b { font-size: 15px; font-weight: 800; }
.lev-rapport-hode em { color: var(--lev-gra); font-size: 12px; font-style: normal; }

/* ======================================================================
   Integrasjonene (29.10.2026): filmene i toppen
   (template-parts/plattform/integrasjonsfilm.php) og flisene for Google Ads
   og Meta. Samme oppsett som filmene på tjenestesidene: vinduet til venstre,
   kortene fra helten til høyre og hakene nederst.
   ====================================================================== */

/* «Kobles til» med logoen over overskriften */
.hv2-kobles { display: inline-flex; align-items: center; gap: 8px; }
.hv2-kobles .int-logo { width: 26px; height: 26px; border-radius: 8px; font-size: 15px; }
.hv2-kobles b { font-weight: 800; }

.bi-merke.int-logo { width: 1.5em; height: 1.5em; border-radius: .45em; font-size: .95em; }
.bf-int .bf-adresse { color: var(--bf-blekk); font-weight: 700; }

/* Linjen som viser at verktøyet er koblet til appen */
.bi-synk { display: inline-flex; align-items: center; align-self: flex-start; gap: .5em; padding: .35em .8em; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: .78em; font-weight: 700; }
.bi-synk i { width: .55em; height: .55em; border-radius: 50%; background: #16a34a; }
@media (prefers-reduced-motion: no-preference) {
	.bi-synk i { animation: bi-puls 1.6s ease-in-out infinite; }
}
@keyframes bi-puls { 50% { box-shadow: 0 0 0 .35em rgba(22, 163, 74, .18); } }

/* Google Ads: søkene, med det som ekskluderes */
.bf-int .ba-tall b { font-size: 1.1em; }
.bi-tabell { display: grid; gap: .1em; }
.bi-hode,
.bi-rad { display: grid; grid-template-columns: minmax(0, 1fr) 3.4em 3.4em; align-items: center; gap: .6em; }
.bi-hode { padding-bottom: .4em; color: var(--bf-gra); font-size: .7em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bi-hode span + span,
.bi-rad > span { text-align: right; }
.bi-rad { position: relative; padding: .55em 0; border-top: 1px solid var(--bf-kant); font-size: .85em; }
.bi-rad b { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.bi-rad > span { color: var(--bf-gra); }
.bi-rad em { position: absolute; top: 50%; right: 0; padding: .2em .6em; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: .75em; font-style: normal; font-weight: 800; transform: translateY(-50%); }
.bi-rad--ut { margin-inline: -.6em; padding-inline: .6em; border-radius: .6em; transition: background-color .4s ease; }
.bf--int-google-ads:not([data-steg="1"]):not([data-steg="2"]) .bi-rad--ut { background: #fff1f1; }
.bf--int-google-ads:is([data-steg="8"], [data-steg="9"], [data-steg="10"]) .bi-rad--ut b,
.bf--int-google-ads:is([data-steg="8"], [data-steg="9"], [data-steg="10"]) .bi-rad--ut > span { color: #a8a3b8; text-decoration: line-through; }

/* Kortene står til høyre for vinduet, så tallene i tabellen ikke dekkes */
.bf-int .bf-kort { width: 35%; }
.bi-funn { top: 4%; right: 0; }
.bi-forslag { top: 33%; right: 0; }
.bi-spart { top: 69%; right: 0; gap: .2em; }
.bi-spart-tall { display: flex; align-items: center; gap: .4em; color: #15803d; font-size: .95em; font-weight: 800; }
.bi-spart > span:not(.bi-spart-tall) { color: var(--bf-gra); font-size: .8em; }

.bf--int-google-ads .bf-peker--du { top: 60%; left: 72%; }
.bf--int-google-ads[data-steg="1"] .bf-peker--helt { top: 14%; left: 34%; }
.bf--int-google-ads[data-steg="2"] .bf-peker--helt { top: 40%; left: 30%; }
.bf--int-google-ads[data-steg="3"] .bf-peker--helt { top: 66%; left: 34%; }
.bf--int-google-ads[data-steg="4"] .bf-peker--helt { top: 12%; left: 82%; }
.bf--int-google-ads[data-steg="5"] .bf-peker--helt { top: 42%; left: 82%; }
.bf--int-google-ads[data-steg="8"] .bf-peker--helt { top: 66%; left: 50%; }
.bf--int-google-ads[data-steg="9"] .bf-peker--helt { top: 74%; left: 80%; }
.bf--int-google-ads[data-steg="10"] .bf-peker--helt { top: 30%; left: 20%; }

/* Meta: annonsene, henvendelsen fra skjemaet og forslaget om å pause */
.bi-annonser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7em; }
.bi-annonse { position: relative; display: grid; gap: .3em; padding: .7em; border: 1px solid var(--bf-kant); border-radius: .9em; }
.bi-annonse-bilde { display: grid; place-items: center; aspect-ratio: 1.4; margin-bottom: .2em; border-radius: .6em; background: var(--bf-helt-lys); color: var(--bf-helt); font-size: 1.5em; }
.bi-annonse--dyr .bi-annonse-bilde { background: #eef2ff; color: #0467df; }
.bi-annonse b { font-size: .85em; font-weight: 800; }
.bi-annonse > span:not(.bi-annonse-bilde) { color: var(--bf-gra); font-size: .75em; }
.bi-annonse em { color: var(--bf-gra); font-size: .72em; font-style: normal; }
.bi-annonse em span { color: #15803d; font-weight: 800; }
.bi-annonse--dyr em span { color: #b91c1c; }
.bi-pauset { position: absolute; top: .9em; right: .9em; padding: .2em .6em; border-radius: 999px; background: #1b1733; color: #fff; font-size: .72em; font-style: normal; font-weight: 800; }
.bf--int-meta:is([data-steg="8"], [data-steg="9"], [data-steg="10"]) .bi-annonse--dyr { opacity: .55; }

.bi-lead { top: 4%; right: 0; }
.bi-lead-hode { display: flex; align-items: center; gap: .45em; color: var(--bf-gra); font-size: .78em; font-weight: 700; }
.bi-lead-hode .int-logo { width: 1.5em; height: 1.5em; font-size: .9em; }
.bf--int-meta .bi-forslag { top: 36%; }

.bf--int-meta .bf-peker--du { top: 62%; left: 72%; }
.bf--int-meta[data-steg="1"] .bf-peker--helt { top: 14%; left: 30%; }
.bf--int-meta[data-steg="2"] .bf-peker--helt { top: 44%; left: 46%; }
.bf--int-meta[data-steg="3"] .bf-peker--helt { top: 12%; left: 82%; }
.bf--int-meta[data-steg="4"] .bf-peker--helt { top: 24%; left: 70%; }
.bf--int-meta[data-steg="5"] .bf-peker--helt { top: 46%; left: 82%; }
.bf--int-meta[data-steg="8"] .bf-peker--helt { top: 48%; left: 52%; }
.bf--int-meta[data-steg="9"] .bf-peker--helt { top: 30%; left: 30%; }
.bf--int-meta[data-steg="10"] .bf-peker--helt { top: 14%; left: 20%; }

/* ---------- Flisene for integrasjonene ---------- */

.pf-flis--ga-synk,
.pf-flis--meta-leads,
.pf-flis--ga-eier,
.pf-flis--meta-eier { grid-column: span 2; }

@media (max-width: 899px) {
	.pf-flis--ga-synk,
	.pf-flis--meta-leads,
	.pf-flis--ga-eier,
	.pf-flis--meta-eier { grid-column: auto; }
}

/* Verktøyet og appen med en linje mellom, og loggen fra synken */
.lev-synk { flex-wrap: wrap; align-items: center; }
.lev-synk-node { display: grid; justify-items: center; gap: 6px; font-size: 12px; }
.lev-synk-node b { font-weight: 800; }
.lev-synk-node img,
.lev-synk-logo.int-logo { width: 44px; height: 44px; border-radius: 13px; font-size: 22px; }
.lev-synk-node img { padding: 8px; border: 1px solid var(--lev-kant); background: #fff; object-fit: contain; }
.lev-synk-bane { display: flex; gap: 6px; }
.lev-synk-bane i { width: 7px; height: 7px; border-radius: 50%; background: #c9c5d6; }
@media (prefers-reduced-motion: no-preference) {
	.er-synlig .lev-synk-bane i { animation: lev-bane 1.4s ease-in-out infinite; }
	.er-synlig .lev-synk-bane i:nth-child(2) { animation-delay: .2s; }
	.er-synlig .lev-synk-bane i:nth-child(3) { animation-delay: .4s; }
}
@keyframes lev-bane { 40% { background: #16a34a; transform: scale(1.3); } }
.lev-synk-logg { display: grid; gap: 2px; width: min(100%, 300px); margin-left: 10px; }
.lev-synk-logg .lev-liste-rad:first-child { border-top: 0; }
.lev-synk-logg .lev-plass svg { width: 13px; height: 13px; margin-inline: auto; }

/* Søket som aldri blir kunder */
.lev-sokeord-ut .lev-kort { gap: 6px; }
.lev-ut b,
.lev-ut > span { color: #a8a3b8; text-decoration: line-through; }
.lev-ut .lev-plass { background: #fee2e2; color: #b91c1c; }
.lev-sokeord-ut .lev-merke { justify-self: start; margin-top: 4px; }

/* Taket på budsjettet */
.lev-tak .lev-kort { display: grid; gap: 10px; width: min(100%, 290px); font-size: 13px; }
.lev-tak-skala { position: relative; display: block; height: 10px; border-radius: 999px; background: var(--lev-strek); }
.lev-tak-skala i { display: block; width: 80%; height: 100%; border-radius: inherit; background: #eb4e00; }
.lev-tak-skala u { position: absolute; top: -5px; bottom: -5px; left: 80%; width: 3px; border-radius: 2px; background: #1b1733; }
.lev-tak-tekst { display: flex; justify-content: space-between; color: var(--lev-gra); font-size: 12px; }
.lev-tak .lev-merke { justify-self: start; }

/* Morgensjekken */
.lev-vakt { flex-direction: column; align-items: center; }
.lev-vakt .lev-kort { display: grid; gap: 10px; width: min(100%, 300px); }
.lev-vakt-ok i { background: #16a34a; }
.lev-vakt-varsel i { background: #eb4e00; }
.lev-vakt .lev-merke { justify-self: start; }

/* Ny kampanje på pause */
.lev-pause .lev-kort { display: grid; gap: 10px; width: min(100%, 280px); }
.lev-pause-hode { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lev-pause-hode b { font-weight: 800; }
.lev-pause-hode .lev-plass { padding: 3px 10px; background: #1b1733; color: #fff; }
.lev-pause-ja { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; color: var(--lev-gra); font-size: 12px; }
.lev-pause-ja b { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: #7c3aed; color: #fff; font-size: 12px; font-weight: 800; }

/* Kontoen er din */
.lev-eier .lev-kort { display: grid; gap: 10px; width: min(100%, 360px); font-size: 13px; }
.lev-eier-hode { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--lev-kant); }
.lev-eier-hode b { font-size: 14px; font-weight: 800; }
.lev-eier-fra { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: #6d28d9; font-size: 13px; font-weight: 800; }

/* Henvendelsene fra skjemaet i annonsen, rett inn i appen */
.lev-leads { align-items: center; }
.lev-leads .lev-kort { display: grid; gap: 8px; font-size: 13px; }
.lev-leads-skjema { width: min(42%, 220px); }
.lev-leads-merke { display: flex; align-items: center; gap: 8px; color: var(--lev-gra); font-size: 12px; font-weight: 700; }
.lev-felt { display: grid; gap: 2px; padding: 6px 10px; border: 1px solid var(--lev-kant); border-radius: 10px; }
.lev-felt em { color: var(--lev-gra); font-size: 11px; font-style: normal; }
.lev-felt b { font-weight: 700; }
.lev-knapp { justify-self: start; padding: 6px 14px; border-radius: 999px; background: #0467df; color: #fff; font-size: 12px; font-weight: 800; }
.lev-leads-pil { display: grid; justify-items: center; gap: 2px; color: #16a34a; font-size: 22px; }
.lev-leads-pil em { color: var(--lev-gra); font-size: 11px; font-style: normal; font-weight: 700; }
.lev-leads-app { flex: 1; max-width: 300px; }
.lev-leads-rad { display: grid; grid-template-columns: 8px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--lev-kant); }
.lev-leads-rad i { width: 8px; height: 8px; border-radius: 50%; background: #0467df; }
.lev-leads-rad b { font-weight: 800; }
.lev-leads-rad > span { overflow: hidden; color: var(--lev-gra); text-overflow: ellipsis; white-space: nowrap; }
.lev-leads-rad .lev-plass { padding: 2px 8px; }

/* Henvendelsene tilbake til Meta */
.lev-signal .lev-kort { display: grid; gap: 10px; width: min(100%, 300px); font-size: 13px; }
.lev-signal-rad { display: flex; justify-content: space-between; gap: 10px; }
.lev-signal-rad b { font-weight: 800; }
.lev-signal-rad span { color: var(--lev-gra); }
.lev-signal-pil { display: inline-flex; align-items: center; gap: 8px; color: #0467df; font-weight: 800; }
.lev-signal .lev-merke { justify-self: start; white-space: normal; }

/* Nye annonsesett via teamet */
.lev-oppgave .lev-kort { display: grid; gap: 10px; width: min(100%, 300px); font-size: 13px; }
.lev-oppgave-hode b { font-weight: 800; }
.lev-oppgave .lev-plass { padding: 3px 10px; }

@media (max-width: 599px) {
	.lev-leads { flex-direction: column; }
	.lev-leads-skjema,
	.lev-leads-app { width: 100%; max-width: none; }
	.lev-leads-pil { transform: rotate(90deg); }
	.lev-synk-logg { width: 100%; margin: 6px 0 0; }
}