/*
 * Innsamlingskart — temaets egne stiler.
 *
 * theme.json gjør grunnarbeidet (farger, typografi, avstander).
 * Her ligger bare det blokkene ikke kan uttrykke selv: introfilmen,
 * kortene, prispakkene og finpussen på små og store skjermer.
 *
 * Skalerer fra 320 px til brede skjermer. Ingenting er låst i piksler
 * der det kan stå i relative enheter.
 */

/* ---------- Grunnpuss ---------- */

:root {
	/* Andres ruter i kartet. Egen farge, ikke en av temaets fire:
	 * den må skille seg fra gult (mine ruter), rødt (ingen hjemme) og
	 * grønt (bæreren selv), og fortsatt leses over et beige kart. */
	--inns-rosa: #E6007E;
}

body {
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

img, canvas, svg { max-width: 100%; height: auto; }

p, li { text-wrap: pretty; }

h1, h2, h3 { text-wrap: balance; }

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--gronn);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Brede elementer skal aldri dytte siden sidelengs. */
.wp-block-table,
.wp-block-code,
figure.wp-block-table { overflow-x: auto; }

/* ---------- Topplinja ---------- */

.inns-topp {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--wp--preset--color--papir) 92%, transparent);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

@supports not (backdrop-filter: blur(1px)) {
	.inns-topp { background: var(--wp--preset--color--papir); }
}

.inns-merke {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.inns-merke-rute {
	width: 22px;
	height: 22px;
	border-radius: 3px;
	background: var(--wp--preset--color--gul);
	border: 2px solid var(--wp--preset--color--gronn);
	flex: 0 0 auto;
}

.inns-topp .wp-block-navigation__responsive-container-open,
.inns-topp .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--blekk);
}

/* ---------- Introfilmen ---------- */

.inns-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-block: clamp(44px, 8vw, 92px);
}

/* Ekte Kartverket-utsnitt i farger (turkart-laget «topo»), hentet én
 * gang (ingen løpende nettkall) og lagret lokalt — et boligfelt
 * (Brødløs/Hjortefaret/Alfheimveien i Halden), ikke Halden sentrum:
 * mange små eneboliger tett i tett (oransje), akkurat det bøssebæreren
 * faktisk går mellom, i stedet for sentrums store blandede kvartaler.
 * Ligger lengst bak, dempet så teksten alltid er lesbar over. */
.inns-hero-kart {
	position: absolute;
	inset: 0;
	z-index: -4;
	pointer-events: none;
	background-image: url('../assets/images/bolig-brodlos.png?v=2');
	background-size: cover;
	background-position: center 38%;
	filter: saturate(0.72) brightness(1.04) contrast(0.97);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .inns-hero-kart { filter: saturate(0.55) brightness(0.34) contrast(1.08); }
}
:root[data-theme="dark"] .inns-hero-kart { filter: saturate(0.55) brightness(0.34) contrast(1.08); }

.inns-introfilm {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	display: block;
}

/* Et mykt slør så teksten alltid er lesbar over filmen. */
.inns-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		var(--wp--preset--color--papir) 0%,
		color-mix(in srgb, var(--wp--preset--color--papir) 88%, transparent) 44%,
		color-mix(in srgb, var(--wp--preset--color--papir) 30%, transparent) 74%,
		transparent 100%
	);
}

@media (max-width: 781px) {
	.inns-hero::after {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--wp--preset--color--papir) 96%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--papir) 92%, transparent) 55%,
			color-mix(in srgb, var(--wp--preset--color--papir) 72%, transparent) 82%,
			color-mix(in srgb, var(--wp--preset--color--papir) 35%, transparent) 100%
		);
	}
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.inns-hero::after { background: rgba(251, 250, 246, 0.82); }
}

.inns-hero-tekst { position: relative; z-index: 1; max-width: 34ch; }

/* ---------- Levende tall i heroen ---------- */
/* Dekorative, ikke ekte data — derfor aria-hidden i markupet. Følger
 * introfilmen frame for frame, samme sted den kjører (forsiden). */

.inns-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px clamp(20px, 4vw, 34px);
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--linje);
}

.inns-hero-stat-tall {
	display: block;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(17px, 2.3vw, 23px);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--gronn);
	letter-spacing: -0.01em;
}

.inns-hero-stat-etikett {
	display: block;
	font-size: 12.5px;
	color: var(--wp--preset--color--blekk-svak);
	margin-top: 2px;
}

@media (max-width: 480px) {
	.inns-hero-stats { gap: 18px; }
}

/* Svak glød bak overskriften — gul/grønn, langt bak kartet (z-index -3),
 * så det gir dybde uten å konkurrere med rutene som males. */
.inns-hero-glod {
	position: absolute;
	inset: 0;
	z-index: -3;
	pointer-events: none;
	background: var(--wp--preset--gradient--produkt-lys);
}

/* ---------- Gradientknapp ---------- */
/* Egen variant av Stripe-språket: diagonal grønn→gul i stedet for deres
 * lilla/blå, og gløden er farget etter samme gradient — ikke bare svart. */

.wp-block-button__link {
	background: linear-gradient(120deg, var(--wp--preset--color--gronn) 0%, var(--wp--preset--color--gronn-dyp) 100%);
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-position 0.4s ease;
	background-size: 160% 160%;
	background-position: 0% 50%;
}

@media (hover: hover) {
	.wp-block-button__link:hover {
		background: linear-gradient(120deg, var(--wp--preset--color--gronn) 0%, var(--wp--preset--color--gronn-dyp) 100%);
		background-position: 100% 50%;
		transform: translateY(-2px);
		box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--wp--preset--color--gronn) 55%, transparent);
	}
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	box-shadow: none;
}

@media (hover: hover) {
	.wp-block-button.is-style-outline .wp-block-button__link:hover {
		background: color-mix(in srgb, var(--wp--preset--color--gronn) 7%, transparent);
		box-shadow: none;
		transform: translateY(-2px);
	}
}

/* ---------- Fargebånd ---------- */
/* Egen variasjon over Stripes fargerike avsnitt: mørk grønn→gul-diagonal
 * med to myke, sakte drivende gløder — ikke et bilde, ren CSS. */

.inns-band-gradient {
	position: relative;
	overflow: clip;
	background: var(--wp--preset--gradient--produkt);
	color: #F4F1E6;
}

.inns-band-gradient::before,
.inns-band-gradient::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
	opacity: 0.55;
}

.inns-band-gradient::before {
	width: 46vw;
	height: 46vw;
	max-width: 560px;
	max-height: 560px;
	background: radial-gradient(circle, rgba(255, 196, 0, 0.55) 0%, transparent 70%);
	top: -18%;
	right: -8%;
	animation: inns-drift-a 22s ease-in-out infinite alternate;
}

.inns-band-gradient::after {
	width: 34vw;
	height: 34vw;
	max-width: 420px;
	max-height: 420px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 72%);
	bottom: -14%;
	left: -6%;
	animation: inns-drift-b 26s ease-in-out infinite alternate;
}

@keyframes inns-drift-a {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(-4%, 5%) scale(1.08); }
}

@keyframes inns-drift-b {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(5%, -4%) scale(1.05); }
}

.inns-band-gradient > * { position: relative; z-index: 1; }

.inns-band-gradient h2,
.inns-band-gradient h3 { color: #ffffff; }

.inns-band-gradient .inns-stikkord { color: var(--wp--preset--color--gul); }

.inns-band-gradient p { color: color-mix(in srgb, #F4F1E6 88%, transparent); }

.inns-band-gradient .wp-block-button__link {
	background: #ffffff;
	color: var(--wp--preset--color--gronn-dyp);
}

@media (hover: hover) {
	.inns-band-gradient .wp-block-button__link:hover {
		background: #ffffff;
		box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.35);
	}
}

.inns-band-gradient .wp-block-button.is-style-outline .wp-block-button__link {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.5);
}

@media (hover: hover) {
	.inns-band-gradient .wp-block-button.is-style-outline .wp-block-button__link:hover {
		background: rgba(255, 255, 255, 0.1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.inns-band-gradient::before,
	.inns-band-gradient::after { animation: none; }
}

/* ---------- Stikkord over overskrifter ---------- */

.inns-stikkord {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12.5px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gronn);
	margin-bottom: 12px;
}

/* ---------- Kort ---------- */

.inns-kort {
	background: var(--wp--preset--color--flate);
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: 10px;
	padding: clamp(18px, 3vw, 26px);
	height: 100%;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) {
	.inns-kort:hover {
		transform: translateY(-3px);
		border-color: color-mix(in srgb, var(--wp--preset--color--gronn) 45%, var(--wp--preset--color--linje));
		box-shadow: 0 4px 10px rgba(13, 79, 68, 0.06), 0 16px 32px -8px rgba(13, 79, 68, 0.14), 0 0 0 1px rgba(255, 196, 0, 0.05);
	}
	.inns-kort:hover .inns-kort-ikon {
		background: var(--wp--preset--color--gul);
		transform: scale(1.06);
	}
}

.inns-kort-ikon { transition: transform 0.18s ease, background 0.18s ease; }

.inns-kort > *:last-child { margin-bottom: 0; }

.inns-kort-ikon {
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--wp--preset--color--gul-blek);
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--gronn) 28%, transparent);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.inns-kort-ikon svg {
	width: 19px;
	height: 19px;
	color: var(--wp--preset--color--gronn);
	display: block;
}

/* Kortrekker: bryter selv, uten at redaktøren må tenke på kolonner.
 * WordPress legger margin-block-start på alle barn etter det første i
 * flyt-oppsettet; i et rutenett gir det trappetrinn. Derfor nulles de. */
.inns-rekke {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 16px;
	align-items: stretch;
}

.inns-rekke > *,
.inns-rekke.is-layout-flow > * + *,
.inns-rekke.is-layout-constrained > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
	max-width: none;
}

/* Kolonneblokker skal stable pent på mobil uten skarpe hopp. */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
}

/* ---------- Faktabokser ---------- */

.inns-gul-boks {
	background: var(--wp--preset--color--gul-blek);
	border-left: 3px solid var(--wp--preset--color--gul);
	border-radius: 0 8px 8px 0;
	padding: clamp(16px, 2.6vw, 22px);
}

.inns-gronn-boks {
	background: var(--wp--preset--color--flate);
	border: 2px solid var(--wp--preset--color--gronn);
	border-radius: 10px;
	padding: clamp(18px, 3vw, 26px);
}

.inns-gul-boks > *:last-child,
.inns-gronn-boks > *:last-child { margin-bottom: 0; }

/* ---------- Nummererte steg ---------- */

.inns-steg { list-style: none; padding-left: 0; margin: 0; counter-reset: inns-steg; }

/* Tallet ligger absolutt plassert, ikke som eget rutenettfelt: da flyter
 * teksten i punktet normalt, uansett om den står i <strong>, i et avsnitt
 * eller som løs tekst. */
.inns-steg > li {
	counter-increment: inns-steg;
	position: relative;
	padding: 18px 0 18px 48px;
	border-top: 1px solid var(--wp--preset--color--linje);
	list-style: none;
}

.inns-steg > li::before {
	content: counter(inns-steg);
	position: absolute;
	left: 0;
	top: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--gronn);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
}

.inns-steg > li > p { margin-bottom: 0; }
.inns-steg > li > p + p { margin-top: 8px; }

.inns-steg strong { display: block; margin-bottom: 3px; }

/* ---------- Prispakker ---------- */

.inns-pakker {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
	gap: 16px;
	align-items: stretch;
}

.inns-pakker > *,
.inns-pakker.is-layout-flow > * + *,
.inns-pakker.is-layout-constrained > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
	max-width: none;
}

.inns-pakke {
	background: var(--wp--preset--color--flate);
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: 10px;
	padding: clamp(20px, 3vw, 28px);
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) {
	.inns-pakke:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(13, 79, 68, 0.1); }
}

.inns-pakke-valgt {
	border: 2px solid var(--wp--preset--color--gronn);
	box-shadow: 0 6px 24px rgba(13, 79, 68, 0.09);
	position: relative;
}

.inns-pakke-valgt::before {
	content: "Mest brukt";
	position: absolute;
	top: -12px;
	left: 20px;
	background: var(--wp--preset--color--gronn);
	color: #fff;
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
}

.inns-pakke h3 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--blekk-svak);
	margin-bottom: 12px;
}

.inns-pris {
	font-size: clamp(30px, 4.4vw, 38px);
	font-weight: 750;
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
	line-height: 1.08;
}

.inns-pris-under {
	font-size: 14px;
	color: var(--wp--preset--color--blekk-svak);
	margin-bottom: 18px;
}

.inns-pakke ul { list-style: none; padding-left: 0; margin: 0 0 22px; flex: 1; font-size: 16px; }

.inns-pakke li { padding: 7px 0 7px 26px; position: relative; }

.inns-pakke li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--wp--preset--color--gul);
	border: 1.5px solid var(--wp--preset--color--gronn);
}

.inns-pakke li.inns-av { color: var(--wp--preset--color--blekk-svak); }
.inns-pakke li.inns-av::before {
	background: transparent;
	border-color: var(--wp--preset--color--linje);
}

/* ---------- To små grafiske eksempler (5 sek. løkke hver) ---------- */
/* Rene mock-ups, ikke ekte skjermbilder — bygget av CSS/SVG, ingen bilder
 * å laste. Pauser helt ved redusert bevegelse (regelen lenger nede). */

.inns-mock {
	background: var(--wp--preset--color--flate);
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: 12px;
	padding: 18px;
	margin-top: 14px;
	max-width: 260px;
}

/* Telefonen i lite format, til kortene på forsiden: nøyaktig samme
 * skjerm som på «Slik virker det», bare skalert ned — da er de to
 * grafikkene garantert like høye, uten egne mål å holde i synk. */
/* Telefonene skal stå like nær bunnen av hvert sitt kort, uansett hvor
 * lang teksten over dem er — derfor skyves de ned, ikke plasseres rett
 * under avsnittet. */
.inns-kort:has(.inns-telefon-mini) {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
}

.inns-kort:has(.inns-telefon-mini) > .inns-telefon-mini { margin-top: auto; }

/* Garantert luft mellom teksten og telefonen. Auto-margen over fordeler
 * bare det som ER til overs — i det kortet som er høyest, er det
 * ingenting til overs, og da ville teksten ligget klint inntil rammen. */
.inns-kort:has(.inns-telefon-mini) > p:last-of-type { margin-bottom: 30px; }

.inns-telefon-mini {
	/* Telefonens ytre mål: 270 px innhold + 10 px ramme på hver side. */
	--inns-tlf-b: 290px;
	--inns-tlf-h: 606px;
	--inns-mini: 0.72;
	position: relative;
	width: calc(var(--inns-tlf-b) * var(--inns-mini));
	height: calc(var(--inns-tlf-h) * var(--inns-mini));
	margin: 16px auto 0;
}

/* Full høyde — samme telefon som på de andre sidene — så snart kortet
 * er bredt nok til å romme den. Er det trangere, krympes den heller
 * enn å renne ut av kortet. Begge telefonene får samme mål uansett,
 * fordi de står i like brede kort. */
@container (min-width: 250px) { .inns-telefon-mini { --inns-mini: 0.85; } }
@container (min-width: 290px) { .inns-telefon-mini { --inns-mini: 1; } }

.inns-telefon-mini .inns-telefon {
	position: absolute;
	top: 0; left: 0;
	width: 270px;
	transform: scale(var(--inns-mini));
	transform-origin: top left;
}

/* -- Betalingskortet: det ekte kortet, i lite format --
 * Samme kort som ligger i telefonen på «Slik virker det», bare uten
 * telefonrammen rundt — det er kortet som er poenget her, ikke skjermen. */
.inns-kortmini {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: 12px;
	padding: 16px 14px 14px;
	margin-top: 14px;
	max-width: 260px;
	text-align: center;
}

.inns-kortmini-tittel {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.15;
	color: #E32B4B;
}

.inns-kortmini-bilde {
	width: 66px; height: 66px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--flate);
}

.inns-kortmini-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }

.inns-kortmini-logo { width: 140px; height: auto; display: block; }

.inns-kortmini-navn { font-size: 17px; font-weight: 800; line-height: 1; }

.inns-kortmini-qr {
	width: 108px; height: 108px;
	display: block;
	border: 2.5px solid #FF5B24;
	border-radius: 7px;
	padding: 0;
}

.inns-kortmini-kode {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	margin: -2px 0 0;
}

.inns-kortmini-qr.inns-kortmini-qr-annet { border-color: #1A1F71; }

/* Valget giveren får på sin egen skjerm etter at koden er skannet —
 * samme merker som ligger nederst på kortet i telefonen. Boksen har
 * fast størrelse, så kortet ikke hopper når den veksler. */
.inns-kortmini-velg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 210px;
	min-height: 96px;
	box-sizing: border-box;
	margin-top: 4px;
	padding: 10px;
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: 10px;
}

.inns-kortmini-velgtittel {
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--blekk-svak);
}

.inns-kortmini-merker {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
}

.inns-kortmini-merker .inns-app-badge-vipps { height: 34px; padding: 0 18px; font-size: 16px; border-radius: 8px; }

.inns-kortmini-merker .inns-app-kort-badge { height: 24px; padding: 0 10px; font-size: 11.5px; }
.inns-kortmini-merker .inns-app-badge-apple svg { width: 9px; height: 9px; }
.inns-kortmini-merker .inns-app-badge-mc { padding: 0 8px; }
.inns-kortmini-merker .inns-app-badge-mc-sirkler { width: 19px; height: 12px; }
.inns-kortmini-merker .inns-app-badge-mc-sirkler span { width: 12px; height: 12px; }
.inns-kortmini-merker .inns-app-badge-mc-sirkler span:last-child { left: 7px; }

/* -- Det gamle, tegnede kortet -- */

.inns-mock-topp { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }

.inns-mock-avatar {
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--wp--preset--color--gronn);
	color: #fff; font-size: 13px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
}

.inns-mock-navn { font-weight: 650; font-size: 14.5px; }

.inns-mock-qr {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	width: 74px; height: 74px;
	margin: 0 auto 14px;
	padding: 6px;
	background: var(--wp--preset--color--papir);
	border-radius: 6px;
}

.inns-mock-qr span { background: var(--wp--preset--color--blekk); border-radius: 1px; }
.inns-mock-qr span:nth-child(3n) { background: transparent; }
.inns-mock-qr span:nth-child(5n+1) { background: transparent; }

.inns-mock-belop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--gronn);
}

.inns-mock-sum { opacity: 0; transform: translateY(4px); animation: inns-sum-inn 5s ease infinite; }

.inns-mock-hake { width: 18px; height: 18px; flex: 0 0 auto; }
.inns-mock-hake path {
	fill: none;
	stroke: var(--wp--preset--color--gronn);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 26;
	stroke-dashoffset: 26;
	animation: inns-hake-tegn 5s ease infinite;
}

@keyframes inns-sum-inn {
	0%, 14% { opacity: 0; transform: translateY(4px); }
	28%, 82% { opacity: 1; transform: translateY(0); }
	96%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes inns-hake-tegn {
	0%, 20% { stroke-dashoffset: 26; }
	38%, 82% { stroke-dashoffset: 0; }
	96%, 100% { stroke-dashoffset: 26; }
}

/* -- Topplista -- */

.inns-mock-liste { max-width: 300px; }

.inns-mock-listerad {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 0;
	border-top: 1px solid var(--wp--preset--color--linje);
}

.inns-mock-listerad:first-child { border-top: none; }

.inns-mock-rang {
	width: 20px; height: 20px;
	border-radius: 50%;
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700;
	font-family: var(--wp--preset--font-family--mono);
	background: var(--wp--preset--color--linje);
	color: var(--wp--preset--color--blekk-svak);
}

.inns-mock-listerad:first-child .inns-mock-rang {
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--gronn-dyp);
}

.inns-mock-listenavn { flex: 1; font-size: 13.5px; }

.inns-mock-poeng {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--gronn);
	transition: color 0.25s ease;
}

.inns-mock-poeng.inns-stiger { color: var(--wp--preset--color--rod); }

/* -- Lederpanelet -- */

.inns-mock-rad {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	padding: 6px 0;
}

.inns-mock-rad span:first-child { flex: 0 0 52px; color: var(--wp--preset--color--blekk-svak); }

.inns-mock-bar {
	flex: 1;
	height: 7px;
	border-radius: 4px;
	background: var(--wp--preset--color--linje);
	overflow: hidden;
}

.inns-mock-fyll {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--gronn), var(--wp--preset--color--gul));
	animation: inns-bar-fyll 5s ease infinite;
}

@keyframes inns-bar-fyll {
	0% { width: 0; }
	55% { width: var(--maal, 70%); }
	100% { width: var(--maal, 70%); }
}

@media (prefers-reduced-motion: reduce) {
	.inns-mock-sum, .inns-mock-hake path, .inns-mock-fyll { animation: none; }
	.inns-mock-sum { opacity: 1; transform: none; }
	.inns-mock-hake path { stroke-dashoffset: 0; }
	.inns-mock-fyll { width: var(--maal, 70%); }
}

/* ---------- Spørsmål og svar (native <details>, ingen JS) ---------- */

.inns-akkordion { margin: 18px 0 26px; }

.inns-akkordion details {
	background: var(--wp--preset--color--flate);
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: 10px;
	margin-bottom: 10px;
	padding: 4px 18px;
}

.inns-akkordion summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	font-weight: 650;
	font-size: 15.5px;
}

.inns-akkordion summary::-webkit-details-marker { display: none; }

.inns-akkordion summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--gul-blek);
	color: var(--wp--preset--color--gronn);
	font-size: 16px;
	line-height: 22px;
	text-align: center;
	transition: transform 0.2s ease;
}

.inns-akkordion details[open] summary::after { transform: rotate(45deg); }

.inns-akkordion details > p { padding-bottom: 16px; margin: 0; color: var(--wp--preset--color--blekk-svak); }

/* ---------- Fargenøkkelen (kartets fire tegn) ---------- */

.inns-fargenokkel {
	display: grid;
	gap: 10px;
	margin: 18px 0 26px;
}

.inns-farge-rad {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	background: var(--wp--preset--color--flate);
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: 9px;
	font-size: 15px;
}

.inns-farge-rad strong { display: inline; }

.inns-farge-proeve {
	width: 22px; height: 22px;
	border-radius: 4px;
	flex: 0 0 auto;
	margin-top: 1px;
}

.inns-farge-egen { background: var(--wp--preset--color--gul); border: 2px solid var(--wp--preset--color--gronn); }
/* Andres ruter er rosa og litt gjennomsiktige — kartet under skal
 * fortsatt være lesbart der noen andre har gått. */
.inns-farge-andres { background: var(--inns-rosa); opacity: 0.9; }
.inns-farge-tom {
	background: repeating-linear-gradient(45deg, var(--wp--preset--color--papir), var(--wp--preset--color--papir) 3px, var(--wp--preset--color--linje) 3px, var(--wp--preset--color--linje) 4px);
	border: 1px solid var(--wp--preset--color--linje);
}
.inns-farge-dor {
	background: var(--wp--preset--color--rod);
}

/* ---------- To ruter: leder-teksten til venstre, bærerens skjerm til høyre ---------- */

.inns-to-ruter {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 56px);
	align-items: center;
	margin: 28px 0 40px;
}

@media (max-width: 780px) {
	.inns-to-ruter { grid-template-columns: 1fr; }
}

.inns-to-ruter-tekst h3 { margin-top: 0; }
.inns-to-ruter-tekst p:last-child { margin-bottom: 0; }

/* Telefonrammen — ingen kartbakgrunn, ingen bilder, bare det ekte
 * appskallet gjenskapt i miniatyr (samme klassenavn-mønster som
 * kart.css, egne inns-app-*-navn så det ikke kolliderer med
 * markedssidens egne klasser). */
.inns-telefon-boks {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(14px, 3vw, 26px);
	flex-wrap: wrap;
}

.inns-telefon-stabel { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.inns-telefon-tekst {
	font-size: 12.5px;
	font-weight: 650;
	color: var(--wp--preset--color--blekk-svak);
}

.inns-telefon {
	width: min(270px, 78vw);
	aspect-ratio: 9 / 19.5;
	background: #111;
	border-radius: 34px;
	padding: 10px;
	box-shadow: 0 18px 40px rgba(20, 30, 25, 0.28);
}

.inns-telefon-liten { width: min(200px, 58vw); }

.inns-app-skjerm {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--papir);
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	font-size: 12px;
}

.inns-app-hakk {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 46%; height: 16px;
	background: #111;
	border-radius: 0 0 12px 12px;
	z-index: 5;
}

.inns-app-stripe {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 12px 8px;
	background: var(--wp--preset--color--gronn);
	color: #fff;
}

.inns-app-navn { font-weight: 700; font-size: 12.5px; }

/* Sagnavnet ved siden av fornavnet — står i gull først når bæreren
 * faktisk er inne blant de fem beste, ikke ellers. */
.inns-app-sagnavn {
	font-style: normal;
	font-weight: 700;
	font-size: 9.5px;
	color: var(--wp--preset--color--gul);
	margin-left: 6px;
	white-space: nowrap;
}
.inns-app-poeng { font-size: 11px; opacity: 0.85; }

/* «Lukk» ligger øverst til høyre — den vanlige plassen for å lukke et
 * kort som er åpnet oppå kartet. Øverst til venstre er «tilbake», og
 * der står navnet. */
.inns-app-lukk {
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	padding: 3px 8px;
	white-space: nowrap;
}

.inns-app-kart {
	flex: 1 1 auto;
	position: relative;
	background:
		repeating-linear-gradient(0deg, transparent, transparent 17px, var(--wp--preset--color--linje) 17px, var(--wp--preset--color--linje) 18px),
		repeating-linear-gradient(90deg, transparent, transparent 17px, var(--wp--preset--color--linje) 17px, var(--wp--preset--color--linje) 18px),
		var(--wp--preset--color--flate);
}

/* Selve kartfilmen inne i telefonen: samme slag som introfilmen i
 * toppen, bare zoomet helt inn på én gate. Ligger over reserve-rutene
 * under, så skjermen ikke er tom om JavaScript er slått av. */
.inns-app-lerret {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Topplista øverst til venstre, slik den ligger i appen: fem plasser
 * med norrøne sagnavn, ingen ekte navn. */
.inns-app-toppliste {
	position: absolute;
	top: 8px; left: 8px;
	z-index: 3;
	width: 108px;
	padding: 5px 6px 6px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
	font-size: 7.5px;
	line-height: 1.35;
	color: var(--wp--preset--color--blekk);
}

.inns-app-toppliste b {
	display: block;
	font-size: 7px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gronn);
	margin-bottom: 3px;
}

.inns-app-tl-rad {
	display: flex;
	justify-content: space-between;
	gap: 4px;
	font-variant-numeric: tabular-nums;
}

.inns-app-tl-rad span:first-child {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.inns-app-tl-rad i {
	font-style: normal;
	font-weight: 700;
	transition: color 0.25s;
}

.inns-app-tl-rad i.inns-stiger { color: var(--wp--preset--color--rod); }

/* Bærerens egen plass i lista — gull, samme merket som sagnavnet
 * oppe i stripa, så det er lett å se at det er ham. */
.inns-app-tl-rad.inns-meg {
	background: var(--wp--preset--color--gul);
	border-radius: 3px;
	padding: 0 3px;
	margin: 0 -3px;
	font-weight: 700;
}

/* Zoom-kontrollen — liten og diskret. Ligger til høyre her, fordi
 * topplista har det venstre hjørnet. */
.inns-app-zoom {
	position: absolute;
	top: 8px; right: 8px;
	display: flex;
	flex-direction: column;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	z-index: 2;
}

.inns-app-zoom span {
	width: 18px; height: 18px;
	background: #fff;
	color: var(--wp--preset--color--blekk);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

.inns-app-zoom span:last-child { border-bottom: none; }

.inns-app-rute {
	position: absolute;
	width: 17px; height: 17px;
	background: var(--wp--preset--color--gul);
	box-shadow: inset 0 0 0 1px rgba(13, 79, 68, 0.35);
}

.inns-app-prikk {
	position: absolute;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--gronn);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.inns-app-dor {
	position: absolute;
	width: 10px; height: 10px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--rod);
}

.inns-app-knapper {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 4; /* over kartfilmen, ellers tegnes lerretet oppå knappene */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 22px 12px 16px;
	background: linear-gradient(to top, var(--wp--preset--color--papir) 35%, transparent);
}

.inns-app-mal-her {
	width: 58px; height: 58px;
	border-radius: 50%;
	background: var(--wp--preset--color--gronn);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1.15;
	box-shadow: 0 0 0 3px var(--wp--preset--color--gul);
}

/* Knappen blinker i samme øyeblikk som et hus males — det er trykket
 * som maler, og det skal leses av skjermen, ikke forklares. */
.inns-app-mal-puls { animation: inns-mal-puls 620ms ease-out; }

@keyframes inns-mal-puls {
	0%   { transform: scale(1);    box-shadow: 0 0 0 3px var(--wp--preset--color--gul); }
	35%  { transform: scale(0.92); box-shadow: 0 0 0 9px rgba(255, 196, 0, 0.55); }
	100% { transform: scale(1);    box-shadow: 0 0 0 3px var(--wp--preset--color--gul); }
}

@media (prefers-reduced-motion: reduce) {
	.inns-app-mal-puls { animation: none; }
}

/* «Ingen hjemme» er en knapp på linje med «Mal her» og ID-merket —
 * rød, fordi det er den røde ringen den setter på døra. */
.inns-app-ingen-hjemme {
	width: 46px;
	display: flex;
	justify-content: center;
}

.inns-app-ingen-hjemme span {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--rod);
	color: var(--wp--preset--color--rod);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 7.5px;
	font-weight: 700;
	line-height: 1.15;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Blinker når en dør merkes «ingen hjemme», slik «Mal her» blinker
 * når et hus males. */
.inns-app-ingen-puls span { animation: inns-ingen-puls 620ms ease-out; }

@keyframes inns-ingen-puls {
	0%   { transform: scale(1);    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
	35%  { transform: scale(0.92); box-shadow: 0 0 0 7px rgba(217, 26, 54, 0.28); }
	100% { transform: scale(1);    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
	.inns-app-ingen-puls span { animation: none; }
}

/* ID-merket — åpner kortet, samme plass som «Ingen hjemme» har på
 * venstre side, bare speilvendt til høyre og formet som en knapp. */
.inns-app-id-knapp {
	width: 46px;
	display: flex;
	justify-content: center;
}

.inns-app-id-knapp span {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--gronn);
	color: var(--wp--preset--color--gronn);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	font-weight: 750;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Kortskjermen — det bæreren trykker seg fram til for å vise ID og
 * betalingskode. Egen tilstand i samme telefonramme, ikke kartet. */
.inns-app-kort-skjerm {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 10px 20px 14px;
	background: var(--wp--preset--color--flate);
	text-align: center;
	overflow: hidden;
}

.inns-app-kort-bilde {
	width: 82px; height: 82px;
	border-radius: 50%;
	background: var(--wp--preset--color--gronn);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	overflow: hidden;
	flex: 0 0 auto;
}

.inns-app-kort-bilde img {
	width: 100%; height: 100%;
	object-fit: cover;
}

.inns-app-kort-navn { font-weight: 700; font-size: 19px; }
.inns-app-kort-forening { font-size: 12px; color: var(--wp--preset--color--blekk-svak); margin-top: -8px; }
.inns-app-kort-tittel { font-size: 20px; font-weight: 800; color: var(--wp--preset--color--rod); margin-bottom: 2px; line-height: 1.15; }
.inns-app-kort-logo { height: 38px; width: auto; margin-top: -2px; border-radius: 5px; }

.inns-app-kort-qr {
	display: block;
	object-fit: cover;
	width: 152px; height: 152px;
	margin-top: -6px;
	padding: 0;
	background: var(--wp--preset--color--papir);
	border-radius: 9px;
	border: 3px solid #FF5B24;
}

.inns-app-kort-qr.inns-app-kort-qr-annet { border-color: #1A1F71; }

.inns-app-kort-qr span { background: var(--wp--preset--color--blekk); border-radius: 1px; }
.inns-app-kort-qr span:nth-child(3n) { background: transparent; }
.inns-app-kort-qr span:nth-child(5n+1) { background: transparent; }

.inns-app-kort-hint { font-size: 16px; font-weight: 750; color: var(--wp--preset--color--blekk); max-width: 180px; margin-top: -10px; }

/* Betalingsmerkene under kortet — hvem som helst kan velge, ikke bare
 * Vipps. Egne merkefarger (offisielle merkevarefarger, ikke gjengitt
 * logokunst) så de kjennes igjen på avstand. */
.inns-app-kort-betalinger {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	gap: 7px;
	width: 210px;
	min-height: 100px;
	margin-top: 14px;
	padding: 10px;
	border: 1.5px solid var(--wp--preset--color--linje);
	border-radius: 12px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	box-sizing: border-box;
}

.inns-app-kort-velg {
	flex-basis: 100%;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--blekk-svak);
	text-align: center;
	margin-bottom: 2px;
}

a.inns-app-kort-betalinger:hover,
a.inns-app-kort-betalinger:focus-visible {
	background: var(--wp--preset--color--linje);
}

.inns-app-kort-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 21px;
	padding: 0 9px;
	border-radius: 5px;
	font-size: 10.5px;
	font-weight: 750;
	line-height: 1;
	white-space: nowrap;
}

.inns-app-badge-vipps { background: #FF5B24; color: #fff; font-style: italic; box-shadow: 0 0 0 2px #FF5B24, 0 0 0 3px rgba(255,91,36,0.35); }

/* Betalingsmerkene står på ÉN linje under koden — de skal leses som
 * en rad med valg, ikke som en klynge. Vipps får sin egen linje over,
 * som det store valget, og er derfor lavere enn før så alt får plass. */
.inns-app-kort-vippsrad,
.inns-app-kort-merkerad {
	flex-basis: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.inns-app-kort-merkerad .inns-app-kort-badge { height: 20px; padding: 0 6px; font-size: 9.5px; }
.inns-app-kort-merkerad .inns-app-badge-mc { padding: 0 5px; }
.inns-app-kort-vippsrad .inns-app-badge-vipps { height: 34px; padding: 0 18px; font-size: 16px; border-radius: 8px; }
.inns-app-badge-apple { background: #000; color: #fff; display: inline-flex; align-items: center; gap: 2px; }
.inns-app-badge-apple svg { width: 8px; height: 8px; }
.inns-app-badge-google { background: #fff; border: 1px solid var(--wp--preset--color--linje); color: #5F6368; }
.inns-app-badge-google b:nth-child(1) { color: #4285F4; }
.inns-app-badge-google b:nth-child(2) { color: #EA4335; }
.inns-app-badge-google b:nth-child(3) { color: #FBBC05; }
.inns-app-badge-google b:nth-child(4) { color: #4285F4; }
.inns-app-badge-google b:nth-child(5) { color: #34A853; }
.inns-app-badge-google b:nth-child(6) { color: #EA4335; }
.inns-app-badge-google b { font-weight: 750; }
.inns-app-badge-visa { background: #1A1F71; color: #fff; font-style: italic; letter-spacing: 0.02em; }
.inns-app-badge-mc { background: #fff; border: 1px solid var(--wp--preset--color--linje); gap: 0; padding: 0 6px; }
.inns-app-badge-mc-sirkler { display: inline-flex; width: 15px; height: 9px; position: relative; }
.inns-app-badge-mc-sirkler span { position: absolute; top: 0; width: 9px; height: 9px; border-radius: 50%; }
.inns-app-badge-mc-sirkler span:first-child { left: 0; background: #EB001B; }
.inns-app-badge-mc-sirkler span:last-child { left: 6px; background: #F79E1B; mix-blend-mode: multiply; }

/* ---------- Tabeller ---------- */

.wp-block-table table { border-collapse: collapse; width: 100%; }

.wp-block-table th,
.wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--linje);
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
}

.wp-block-table th {
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--blekk-svak);
	font-weight: 650;
}

/* På smal skjerm stables tabellen til kort — samme grep som husstilen. */
@media (max-width: 600px) {
	.inns-tabell table,
	.inns-tabell tbody,
	.inns-tabell tr,
	.inns-tabell td { display: block; width: 100%; }

	.inns-tabell thead { display: none; }

	.inns-tabell tr {
		border: 1px solid var(--wp--preset--color--linje);
		border-radius: 8px;
		padding: 6px 12px;
		margin-bottom: 12px;
		background: var(--wp--preset--color--flate);
	}

	.inns-tabell td { border-bottom: 0; padding: 7px 0; }

	.inns-tabell td:first-child { font-weight: 650; }
}

/* ---------- Bunnlinja ---------- */

.inns-bunn {
	background: var(--wp--preset--color--gronn-dyp);
	color: #D6E5DF;
}

.inns-bunn h2,
.inns-bunn h3,
.inns-bunn h4 { color: #ffffff; }

.inns-bunn a { color: #ffffff; }

.inns-bunn .inns-bunn-tittel {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #8FB5A9;
	margin-bottom: 10px;
}

.inns-bunn ul { list-style: none; padding-left: 0; }
.inns-bunn li { margin-bottom: 6px; }

.inns-bunn-strek {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 18px;
	font-size: 13px;
	color: #8FB5A9;
}

/* ---------- Hopp til innhold ---------- */

.inns-hopp {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--gronn);
	color: #ffffff;
	padding: 10px 18px;
	border-radius: 0 0 6px 0;
	z-index: 100;
	text-decoration: none;
}

.inns-hopp:focus { left: 0; position: fixed; }

/* ---------- Mørk modus ----------
 * Følger systemet. Kartfargene består; det er flatene som snur. */

@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--papir: #0E1411;
		--wp--preset--color--flate: #17201B;
		--wp--preset--color--blekk: #E6EBE6;
		--wp--preset--color--blekk-svak: #9BA79F;
		--wp--preset--color--linje: #29332C;
		--wp--preset--color--gronn: #6BC4A8;
		--wp--preset--color--gronn-dyp: #0A1F1A;
		--wp--preset--color--gul-blek: #2C2410;
	}

	.inns-pakke-valgt { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }

	@supports not (background: color-mix(in srgb, red 50%, transparent)) {
		.inns-hero::after { background: rgba(14, 20, 17, 0.82); }
	}
}

/* ---------- Redusert bevegelse ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Utskrift ---------- */

@media print {
	.inns-topp, .inns-bunn, .inns-introfilm { display: none !important; }
	body { background: #fff; color: #000; }
}