/* ==========================================================================
   Infoplakat.no - Landing Page Styles
   Organized, maintainable CSS with dark mode support
   ========================================================================== */

/* ==========================================================================
   1. Designtokens - lys og mørk flate
   ========================================================================== */
:root {
	/* ----------------------------------------------------------------------
	   Design B - "Varm og redaksjonell" (2026)

	   Varm papirhvit flate hele veien, dyp grønnblå aksent, tynne streker
	   i stedet for skygger, rette hjørner på knappene. Gradientene er ute
	   etter tilbakemeldingen fra utheve.no.

	   De gamle variabelnavnene (--primary, --bg-body, ...) står igjen
	   nederst og peker på den nye paletten, slik at undersidene (priser,
	   utstyr, FAQ, integrasjoner ...) følger med uten å måtte endres.
	   ---------------------------------------------------------------------- */

	/* Merkefarge. #0f766e mot hvit tekst gir 5,4:1 og klarer WCAG AA.
	   Gamle #667eea ga 3,7:1 og strøk på vanlig tekst. */
	--brand:        #0f766e;
	--brand-hover:  #115e56;
	--brand-active: #0c4f49;
	--brand-soft:   #dcefec;
	--brand-ink:    #0b453f;
	--brand-text:   #0d6b62;   /* lenke- og ikonfarge - lysner i mørkt tema */
	--brand-rgb:    15, 118, 110;   /* --brand som RGB, til fokusringen */

	/* Flater */
	--bg-body:    #faf8f4;
	--bg-section: #f2ede4;
	--bg-card:    #ffffff;
	--bg-navbar:  #faf8f4;
	--bg-footer:  #f2ede4;
	--bg-deep:    #1c1b18;   /* avsluttende CTA-bånd */
	--hero-halo:  #ece5d8;   /* sandflaten bak hero-illustrasjonen */

	/* Tekst */
	--text-primary:   #1a1917;
	--text-secondary: #57534e;
	--text-muted:     #7d7768;

	/* Streker */
	--border-color:  #e2dcd0;
	--border-strong: #cfc7b6;
	--border-light:  #efe9de;

	/* På mørk flate */
	--on-deep:      #faf8f4;
	--on-deep-2:    #cfc9bd;
	--on-deep-3:    #9b958a;
	--on-deep-line: rgba(250, 248, 244, 0.18);

	/* Knapp på det mørke CTA-båndet. Egne tokens fordi lys og mørk
	   variant må ha hver sin flate for å holde kontrastkravet. */
	--cta-btn-bg:   #faf8f4;
	--cta-btn-text: #1a1917;

	/* Skygger - nesten borte, strekene gjør jobben */
	--shadow-light:  0 1px 2px rgba(28, 27, 24, 0.05);
	--shadow-medium: 0 2px 10px rgba(28, 27, 24, 0.06);
	--shadow-hover:  0 10px 30px rgba(28, 27, 24, 0.09);

	/* Geometri */
	--radius:     8px;
	--radius-lg:  10px;
	--radius-btn: 6px;

	/* Serif til overskrifter og pris */
	--font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;

	/* --- Gamle navn, ny verdi ------------------------------------------- */
	--primary:       #0f766e;
	--primary-dark:  #0b453f;
	--primary-hover: #115e56;
	--success:       #0f766e;
	--success-hover: #115e56;

	/* Gradientene er tatt ut. Navnene står igjen fordi de brukes elleve
	   steder i denne fila og tre i beta.jsr - verdien er nå en flat farge. */
	--gradient-primary: #0f766e;
	--gradient-hero:    #1c1b18;

	/* Aksentfarger (ikonvarianter på undersidene). Justert for kontrast:
	   de gamle verdiene var for lyse mot hvit flate. */
	--accent-teal:  #0f766e;
	--accent-blue:  #1d4ed8;
	--accent-green: #15803d;
	--accent-red:   #b91c1c;
}

/* --------------------------------------------------------------------------
   Mørkt tema. Varm mørk, ikke blå - samme temperatur som det lyse temaet.
   Verdiene ligger i én blokk som gjenbrukes av begge inngangene
   (systemvalg og manuelt valg), slik at de ikke kan komme i utakt.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--brand-text: #5eead4;
		--brand-soft: #14352f;
		--brand-rgb:  94, 234, 212;

		--bg-body:    #1a1917;
		--bg-section: #222019;
		--bg-card:    #26241f;
		--bg-navbar:  #1a1917;
		--bg-footer:  #222019;
		--bg-deep:    #100f0d;
		--hero-halo:  #232019;

		--text-primary:   #f6f2e9;
		--text-secondary: #bdb6a8;
		--text-muted:     #948d80;

		--border-color:  #363228;
		--border-strong: #4a4536;
		--border-light:  #2b2822;

		/* #5eead4 mot #06231f gir 11,2:1. Den lyse varianten (#0f766e mot
		   mørk tekst) ga bare 3,0:1 og strøk. */
		--cta-btn-bg:   #5eead4;
		--cta-btn-text: #06231f;

		--shadow-light:  0 1px 2px rgba(0, 0, 0, 0.4);
		--shadow-medium: 0 2px 10px rgba(0, 0, 0, 0.5);
		--shadow-hover:  0 10px 30px rgba(0, 0, 0, 0.6);

		--accent-teal:  #5eead4;
		--accent-blue:  #93c5fd;
		--accent-green: #86efac;
		--accent-red:   #fca5a5;
	}

	:root:not([data-theme="light"]) .navbar-brand img,
	:root:not([data-theme="light"]) .footer-logo {
		filter: brightness(0) invert(1);
	}
}

[data-theme="dark"] {
	--brand-text: #5eead4;
	--brand-soft: #14352f;
	--brand-rgb:  94, 234, 212;

	--bg-body:    #1a1917;
	--bg-section: #222019;
	--bg-card:    #26241f;
	--bg-navbar:  #1a1917;
	--bg-footer:  #222019;
	--bg-deep:    #100f0d;
	--hero-halo:  #232019;

	--text-primary:   #f6f2e9;
	--text-secondary: #bdb6a8;
	--text-muted:     #948d80;

	--border-color:  #363228;
	--border-strong: #4a4536;
	--border-light:  #2b2822;

	--cta-btn-bg:   #5eead4;
	--cta-btn-text: #06231f;

	--shadow-light:  0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-medium: 0 2px 10px rgba(0, 0, 0, 0.5);
	--shadow-hover:  0 10px 30px rgba(0, 0, 0, 0.6);

	--accent-teal:  #5eead4;
	--accent-blue:  #93c5fd;
	--accent-green: #86efac;
	--accent-red:   #fca5a5;
}

[data-theme="dark"] .navbar-brand img,
[data-theme="dark"] .footer-logo {
	filter: brightness(0) invert(1);
}

/* Lenker skal bruke --brand-text, ikke --primary. En mørk merkefarge mot
   mørk bakgrunn ga bare 2,5:1. */
a {
	color: var(--brand-text);
}

/* Dropdown dark mode */
[data-theme="dark"] .dropdown-menu {
	background-color: var(--bg-card);
	border-color: var(--border-color);
}
[data-theme="dark"] .dropdown-item {
	color: var(--text-primary);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
	background-color: var(--bg-section);
	color: var(--text-primary);
}
[data-theme="dark"] .dropdown-item.active {
	background-color: var(--primary);
	color: #fff;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .dropdown-menu {
		background-color: var(--bg-card);
		border-color: var(--border-color);
	}
	:root:not([data-theme="light"]) .dropdown-item {
		color: var(--text-primary);
	}
	:root:not([data-theme="light"]) .dropdown-item:hover,
	:root:not([data-theme="light"]) .dropdown-item:focus {
		background-color: var(--bg-section);
		color: var(--text-primary);
	}
	:root:not([data-theme="light"]) .dropdown-item.active {
		background-color: var(--primary);
		color: #fff;
	}
}


/* ==========================================================================
   2. Base & Reset
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
}

body, html {
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--bg-body);
	color: var(--text-primary);
	font-family: 'Roboto', 'Segoe UI', Verdana, Arial, sans-serif;
	padding-top: 63px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

a {
	transition: color 0.2s ease, background-color 0.2s ease;
}


/* ==========================================================================
   3. Typography
   ========================================================================== */
h1 {
	font-weight: 200;
	padding-top: 15px;
}

h2 {
	font-weight: 600;
	margin-top: 35px;
}

h3 {
	font-weight: 500;
}

/* ==========================================================================
   3.5. Buttons - design B

   Flate knapper med rett hjørne. Gradienten og den lilla glødeskyggen er
   ute etter tilbakemeldingen fra utheve.no.

   Fargene settes gjennom Bootstrap sine egne `--bs-btn-*`-variabler, ikke
   som direkte background/color. Bootstrap driver alle tilstandene
   (:hover, :active, :focus-visible, :disabled) gjennom de variablene med
   høyere spesifisitet enn en vanlig `.btn-primary`-regel - så overstyrer man
   bare bakgrunnen, blinker knappen Bootstrap-blå i det museknappen trykkes.
   ========================================================================== */
.btn {
	border-radius: var(--radius-btn);
	padding: 0.62rem 1.4rem;
	font-weight: 600;
	line-height: 1.35;
	border-width: 1.5px;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, transform 0.08s ease;
}

.btn:active {
	transform: translateY(1px);
}

.btn-lg {
	padding: 0.85rem 1.9rem;
	font-size: 1.04rem;
}

.btn-sm {
	padding: 0.42rem 0.95rem;
	font-size: 0.88rem;
}

.btn-primary,
.btn-success {   /* .btn-success er beholdt for bakoverkompatibilitet */
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--brand);
	--bs-btn-border-color: var(--brand);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--brand-hover);
	--bs-btn-hover-border-color: var(--brand-hover);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--brand-active);
	--bs-btn-active-border-color: var(--brand-active);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--brand);
	--bs-btn-disabled-border-color: var(--brand);
	--bs-btn-focus-shadow-rgb: var(--brand-rgb);
	box-shadow: none;
}

.btn-outline-primary {
	--bs-btn-color: var(--brand-text);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--border-strong);
	--bs-btn-hover-color: var(--brand-text);
	--bs-btn-hover-bg: var(--brand-soft);
	--bs-btn-hover-border-color: var(--brand-text);
	--bs-btn-active-color: var(--brand-text);
	--bs-btn-active-bg: var(--brand-soft);
	--bs-btn-active-border-color: var(--brand-text);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-color: var(--text-muted);
	--bs-btn-disabled-border-color: var(--border-color);
	--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-outline-secondary {
	--bs-btn-color: var(--text-secondary);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--border-strong);
	--bs-btn-hover-color: var(--text-primary);
	--bs-btn-hover-bg: var(--bg-section);
	--bs-btn-hover-border-color: var(--text-secondary);
	--bs-btn-active-color: var(--text-primary);
	--bs-btn-active-bg: var(--bg-section);
	--bs-btn-active-border-color: var(--text-secondary);
	--bs-btn-active-shadow: none;
	--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

/* Knapper på mørk flate (CTA-båndet). Egne tokens, fordi den lyse
   varianten (mørk tekst på merkefargen) bare ga 3,0:1. */
.btn-light {
	--bs-btn-color: var(--cta-btn-text);
	--bs-btn-bg: var(--cta-btn-bg);
	--bs-btn-border-color: var(--cta-btn-bg);
	--bs-btn-hover-color: var(--cta-btn-text);
	--bs-btn-hover-bg: var(--cta-btn-bg);
	--bs-btn-hover-border-color: var(--cta-btn-bg);
	--bs-btn-active-color: var(--cta-btn-text);
	--bs-btn-active-bg: var(--cta-btn-bg);
	--bs-btn-active-border-color: var(--cta-btn-bg);
	--bs-btn-active-shadow: none;
	--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-light:hover,
.btn-light:focus-visible {
	filter: brightness(1.06);
}

.btn-outline-light {
	--bs-btn-color: var(--on-deep);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: rgba(250, 248, 244, 0.45);
	--bs-btn-hover-color: var(--on-deep);
	--bs-btn-hover-bg: rgba(250, 248, 244, 0.12);
	--bs-btn-hover-border-color: var(--on-deep);
	--bs-btn-active-color: var(--on-deep);
	--bs-btn-active-bg: rgba(250, 248, 244, 0.18);
	--bs-btn-active-border-color: var(--on-deep);
	--bs-btn-active-shadow: none;
	--bs-btn-focus-shadow-rgb: 250, 248, 244;
}

/* Tekstlenke med pil */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 0.96rem;
	text-decoration: none;
	color: var(--brand-text);
}

.link-arrow:hover {
	text-decoration: underline;
	color: var(--brand-text);
}

:focus-visible {
	outline: 3px solid var(--brand-text);
	outline-offset: 2px;
}


/* ==========================================================================
   4. Layout - Navbar
   ========================================================================== */
.navbar {
	background-color: var(--bg-navbar) !important;
	border-bottom: 1px solid var(--border-color) !important;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.navbar .nav-link {
	color: var(--text-primary);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
	color: var(--primary);
}

@media (max-width: 992px) {
	.navbar .navbar-nav > li > a.btn {
		margin-bottom: 4px;
	}
}

@media (min-width: 992px) {
	.navbar .navbar-nav > li > a.btn {
		margin-right: 4px;
		margin-left: 10px;
		padding: 0.4rem 1.25rem;
	}
}

.navbar .navbar-nav > li > a.btn-primary {
	color: #fff;
	background-color: var(--primary);
	border: 0;
}

.navbar .navbar-nav > li > a.btn-primary:hover,
.navbar .navbar-nav > li > a.btn-primary:focus {
	background-color: var(--primary-hover);
	color: #fff;
}

.navbar .navbar-nav > li > a.btn-success {
	color: #fff;
	background-color: var(--success);
	border: 0;
}

.navbar .navbar-nav > li > a.btn-success:hover,
.navbar .navbar-nav > li > a.btn-success:focus {
	background-color: var(--success-hover);
	color: #fff;
}

/* Centered nav links */
@media (min-width: 992px) {
	.navbar .container {
		position: relative;
	}

	.navbar-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Navbar toggler (hamburger menu) */
.navbar-toggler {
	border: none;
	padding: 8px 12px;
	color: var(--text-primary);
	font-size: 1.4rem;
}

.navbar-toggler:focus {
	box-shadow: none;
}

.navbar-toggler:hover {
	color: var(--primary);
}

/* Language selector with flags */
.lang-toggle {
	padding: 6px 10px !important;
}

.lang-flag {
	width: 24px;
	height: 18px;
	border-radius: 3px;
	object-fit: cover;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.lang-flag-menu {
	width: 20px;
	height: 15px;
	border-radius: 2px;
	object-fit: cover;
	margin-right: 8px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.dropdown-item {
	display: flex;
	align-items: center;
}

/* Tema-, snø- og språkknappen ligger nå i footeren (.pref-btn, seksjon 30).
   De gamle ID-reglene herfra hadde høyere spesifisitet enn .pref-btn og er
   derfor fjernet. */


/* ==========================================================================
   5. Layout - Page Content & Footer
   ========================================================================== */
.page-content {
	margin-top: 0;
	padding-bottom: 100px;
}

.page-content.no-padding {
	padding-bottom: 0;
}

.breadcrumb {
	background-color: transparent;
	font-size: 12px;
	padding-left: 0;
}

.footer {
	width: 100%;
	background-color: var(--bg-footer);
	border-top: 1px solid var(--border-color);
	min-height: 280px;
	margin-top: 0;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.footer h3 {
	margin-top: 0;
	margin-bottom: 15px;
	font-weight: 200;
	color: var(--text-primary);
}

.footer-inner {
	padding: 15px 8px;
	color: var(--text-secondary);
}

.footer-inner a {
	color: var(--text-secondary);
	text-decoration: none;
	border-bottom: 1px dotted var(--text-secondary);
}

.footer-inner a.no-border {
	border-bottom: 0;
}

.footer-inner a:hover {
	color: var(--primary);
	text-decoration: none;
}

.footer-inner ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

@media only screen and (max-width: 992px) {
	#footer-social {
		text-align: center;
		margin-top: 15%;
	}
}


/* ==========================================================================
   6. Hero Section (Landing Page) - design B

   Lys papirflate hele veien, serif-overskrift og illustrasjonen forankret
   i BUNNEN av heroen, ute mot skjermkanten, med skjermen BAK figurene slik
   at mannen står foran TV-en. Målene er de samme som før (sofa 700 px,
   skjerm 300 px, forskyvning 160/350 px), men regnet om til prosent så den
   skalerer.
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--bg-body);
	color: var(--text-primary);
	/* Bunnpaddingen manglet i utkastet - ikonlista traff seksjonskanten. */
	padding: 72px 0 68px;
	border-bottom: 1px solid var(--border-color);
}

/* Myk sandflate bak illustrasjonen, så den ikke svever på papirbakgrunnen.
   Følger temaet: i utkastet var den låst til en lys farge og ble en lysende
   sirkel i mørkt tema. */
.hero::after {
	content: "";
	position: absolute;
	right: -6%;
	bottom: -14%;
	width: 62%;
	max-width: 820px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--hero-halo);
	z-index: 0;
}

.hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: center;
}

/* Tom rute i rutenettet, så teksten aldri havner under illustrasjonen */
.hero-illu-slot {
	min-height: 430px;
}

.hero h1 {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--text-primary);
	margin: 0 0 22px;
	padding-top: 0;
}

.hero-lead {
	font-size: 1.15rem;
	line-height: 1.65;
	color: var(--text-secondary);
	max-width: 46ch;
	margin: 0 0 14px;
}

.hero-kicker {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.18rem;
	line-height: 1.5;
	color: var(--text-primary);
	margin: 0 0 30px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.hero-note {
	margin: 14px 0 0;
	font-size: 0.88rem;
	color: var(--text-muted);
}

/* Funksjonsikoner under CTA (flyttet opp fra Maler-seksjonen) */
.hero-features {
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--border-color);
}

.hero-features-label {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 700;
	margin: 0 0 14px;
}

.hero-feature-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 22px;
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: center;
}

.hero-feature-list li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.95rem;
	color: var(--text-secondary);
}

.hero-feature-ico {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 6px;
	background: var(--brand-soft);
	color: var(--brand-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
}

.hero-feature-more {
	font-weight: 600;
	color: var(--brand-text);
}

/* Illustrasjonen ligger i eget lag over hele heroen, forankret nede til
   høyre. Da treffer den bunnkanten selv om teksten har bunnpadding. */
.hero-illu-wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	z-index: 1;
}

.hero-illu {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(620px, 46vw);
}

.hero-illu-sofa {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
}

/* Skjermen ligger BAK sofaen (z-index 1 mot 2) */
.hero-illu-screen {
	position: absolute;
	z-index: 1;
	width: 42.9%;
	right: 15.7%;
	bottom: 65%;
	border: 2px solid #1c1b18;
	box-shadow: 0 10px 24px rgba(28, 27, 24, 0.28);
}

@media (max-width: 1100px) {
	.hero-illu-slot { min-height: 360px; }
}

/* Illustrasjonen skjules helt på mobil. I utkastet falt den ned under
   teksten og ble stående og fylle skjermen uten å tilføre noe. */
@media (max-width: 900px) {
	.hero {
		padding: 44px 0 48px;
	}

	.hero::after,
	.hero-illu-wrap,
	.hero-illu-slot {
		display: none;
	}

	.hero-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.hero-lead {
		max-width: none;
	}
}


/* ==========================================================================
   7. Dynamic Font Sizes (Responsive)
   ========================================================================== */
/* Base sizes */
.dynamic-fontsize-xxxxxxxxl { font-size: 110px; }
.dynamic-fontsize-xxxxxxxl { font-size: 100px; }
.dynamic-fontsize-xxxxxxl { font-size: 90px; }
.dynamic-fontsize-xxxxxl { font-size: 80px; }
.dynamic-fontsize-xxxxl { font-size: 70px; }
.dynamic-fontsize-xxxl { font-size: 60px; }
.dynamic-fontsize-xxl { font-size: 50px; }
.dynamic-fontsize-xl { font-size: 30px; }
.dynamic-fontsize-lg { font-size: 20px; }
.dynamic-fontsize-md { font-size: 15px; }
.dynamic-fontsize-sm { font-size: 13px; }
.dynamic-fontsize-xs { font-size: 10px; }

@media only screen and (min-width: 700px) {
	.dynamic-fontsize-xxxxxxxxl { font-size: 120px; }
	.dynamic-fontsize-xxxxxxxl { font-size: 110px; }
	.dynamic-fontsize-xxxxxxl { font-size: 100px; }
	.dynamic-fontsize-xxxxxl { font-size: 90px; }
	.dynamic-fontsize-xxxxl { font-size: 80px; }
	.dynamic-fontsize-xxxl { font-size: 70px; }
	.dynamic-fontsize-xxl { font-size: 60px; }
	.dynamic-fontsize-xl { font-size: 40px; }
	.dynamic-fontsize-lg { font-size: 30px; }
	.dynamic-fontsize-md { font-size: 16px; }
	.dynamic-fontsize-sm { font-size: 12px; }
}

@media only screen and (min-width: 1024px) {
	.dynamic-fontsize-xl { font-size: 50px; }
	.dynamic-fontsize-lg { font-size: 40px; }
	.dynamic-fontsize-md { font-size: 25px; }
	.dynamic-fontsize-sm { font-size: 18px; }
	.dynamic-fontsize-xs { font-size: 13px; }
}

@media only screen and (min-width: 1500px) {
	.dynamic-fontsize-xxxxxxxxl { font-size: 130px; }
	.dynamic-fontsize-xxxxxxxl { font-size: 120px; }
	.dynamic-fontsize-xxxxxxl { font-size: 110px; }
	.dynamic-fontsize-xxxxxl { font-size: 100px; }
	.dynamic-fontsize-xxxxl { font-size: 90px; }
	.dynamic-fontsize-xxxl { font-size: 80px; }
	.dynamic-fontsize-xxl { font-size: 70px; }
	.dynamic-fontsize-xl { font-size: 60px; }
	.dynamic-fontsize-lg { font-size: 50px; }
	.dynamic-fontsize-md { font-size: 35px; }
	.dynamic-fontsize-sm { font-size: 25px; }
	.dynamic-fontsize-xs { font-size: 18px; }
}


/* ==========================================================================
   8. Content Blocks (Legacy support)
   ========================================================================== */
.content-blocks {
	text-align: left;
}

.content-blocks .content-blocks-inner {
	padding: 70px 5%;
}

.content-blocks .row {
	margin-top: 55px;
}

.content-blocks h1 {
	font-size: 50px;
	font-weight: 200;
}

.content-blocks h2 {
	font-size: 30px;
	font-weight: 200;
}

.content-blocks .icon {
	font-size: 60px;
}

.content-blocks .header {
	font-size: 25px;
}

.content-blocks .description {
	margin-top: 15px;
}

.content-blocks.content-dark a {
	color: #8cb5ed;
}

.content-blocks.content-dark a:hover {
	color: #8cb5ed;
	text-decoration: none;
	border-bottom: 1px dotted;
}

.content-block-left {
	text-align: left;
}

.content-block-right {
	text-align: right;
}

@media only screen and (max-width: 992px) {
	.content-blocks h1 { font-size: 30px; }
	.content-blocks h2 { font-size: 22px; }
	.home-templates-center { display: none; }
	.content-block-left { text-align: center; }
	.content-block-right { text-align: center; }
}


/* ==========================================================================
   9. Video Wrapper
   ========================================================================== */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* ==========================================================================
   10. Home Page Templates Section
   ========================================================================== */
.home-templates .icon {
	text-align: center;
}

.home-templates .fa {
	font-size: 50px;
}

.home-templates-center {
	padding-top: 10%;
}


/* ==========================================================================
   11. Thumbnails & Gallery
   ========================================================================== */
.fuThumbnail {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow-light);
	transition: all 0.3s ease;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.fuThumbnail:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-3px);
	text-decoration: none;
}


/* ==========================================================================
   12. Box Components
   ========================================================================== */
.box {
	color: var(--text-primary);
	background-color: var(--bg-card);
	padding: 15px;
	border-radius: 10px;
	border: 1px solid var(--border-color);
	transition: all 0.2s ease;
}

.box-hover:hover {
	box-shadow: var(--shadow-medium);
	text-decoration: none;
	border: 1px solid var(--primary);
}

.box-hover-border:hover {
	border: 1px solid var(--primary);
}

.box-full-width {
	width: 100%;
	display: block;
}

.box-space {
	margin: 25px;
	padding: 15px;
}

.box.bg-red { background-color: #ffcaca; color: #000; }
.box.bg-red-strong { background-color: red; color: #fff; }
.box.bg-red-strong a { color: #fff; }
.box.bg-orange { background-color: #ffde8f; color: #000; }
.box.bg-blue { background-color: #cad3ff; }
.box.bg-glass { background-color: var(--bg-card); }

.box .box-title { font-size: 18px; font-weight: 600; }
.box .box-body { padding: 0; }
.box .box-footer { padding: 0; border-top: 0; background-color: transparent; margin-top: 25px; font-size: 13px; }

.box-dashboard { padding: 18px 25px; }
.box-dashboard .value { font-size: 2.5rem; }
.box-dashboard .info { margin: 10px 10px 0 10px; font-size: 0.7rem; color: var(--text-muted); }
.box-dashboard .link a { color: var(--text-muted); font-size: 0.8rem; }

.box-ellipsis {
	position: absolute;
	top: 0;
	right: 0;
	padding: 15px;
}

/* Box with left-column icon */
.box-with-icon {
	display: inline-block;
}

.box-with-icon-inner {
	display: flex;
}

.box-with-icon-inner .icon {
	flex: 0 0 100px;
	text-align: center;
}

.box-with-icon-inner .icon .svg-inline--fa {
	padding-top: 0;
	font-size: 3rem;
}

.box-with-icon-inner .icon img {
	width: 50px;
}

.box-with-icon-inner .content {
	flex: 1 1 auto;
}

.box-with-icon.db-block-active .icon {
	color: #34e311;
}


/* ==========================================================================
   13. Tiles (Legacy support)
   ========================================================================== */
.tiles {
	display: block;
}

.tile-white {
	background-color: var(--bg-card);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
}

.tile-white:hover {
	color: var(--text-primary) !important;
}

.tiles-col-4 .tile {
	width: 24%;
}

.tile-lg {
	color: var(--text-primary);
	background-color: var(--bg-card);
}

.tile-lg:hover {
	color: var(--text-primary);
}


/* ==========================================================================
   14. Modern Card Components
   ========================================================================== */
.card-link {
	display: block;
	text-decoration: none;
	height: 100%;
}

.card-link:hover {
	text-decoration: none;
}

.card-modern {
	background: var(--bg-card);
	border-radius: 16px;
	padding: 30px;
	height: 100%;
	box-shadow: var(--shadow-light);
	transition: all 0.3s ease;
}

.card-modern:hover {
	box-shadow: var(--shadow-medium);
	transform: translateY(-2px);
}

a.card-modern {
	text-decoration: none;
	display: block;
}

a.card-modern.card-horizontal {
	display: flex;
}

a.card-modern:hover {
	text-decoration: none;
}

.card-video {
	padding: 0;
	overflow: hidden;
}

.card-horizontal {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.card-icon {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.card-icon i,
.card-icon svg {
	font-size: 1.8rem;
	width: 1.8rem;
	height: 1.8rem;
	color: #fff;
}

.card-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* Icon color variants */
.card-icon-image { background: transparent; }
.card-icon-purple { background: var(--gradient-primary); }
.card-icon-pink { background: linear-gradient(135deg, #f093fb, #f5576c); }
.card-icon-blue { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.card-icon-teal { background: linear-gradient(135deg, #a8edea, #fed6e3); }
.card-icon-teal i, .card-icon-teal svg { color: var(--text-primary); }
.card-icon-orange { background: linear-gradient(135deg, #ffecd2, #fcb69f); }
.card-icon-orange i, .card-icon-orange svg { color: var(--text-primary); }
.card-icon-rose { background: linear-gradient(135deg, #d299c2, #fef9d7); }
.card-icon-rose i, .card-icon-rose svg { color: var(--text-primary); }
.card-icon-messenger { background: linear-gradient(135deg, #0084ff, #00c6ff); }

.card-content {
	flex: 1;
	min-width: 0;
}

.card-content h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: var(--text-primary);
}

.card-content p {
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.6;
	font-size: 0.95rem;
}

.card-content .card-action {
	margin-top: 12px;
	color: var(--primary);
	font-size: 0.9rem;
}

/* Equipment list cards */
.equipment-list {
	padding: 20px 0 20px 40px;
}

@media (max-width: 768px) {
	.equipment-list {
		padding-left: 15px;
	}
}

.card-list-item {
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid var(--border-color);
	box-shadow: none;
	height: auto;
}

.card-list-item:hover {
	box-shadow: none;
	transform: none;
}

.card-list-item-last {
	border-bottom: none;
	margin-bottom: 0;
}

/* Info box (used in confirm-account, invite-accept) */
.info-box {
	text-align: left;
	background: var(--bg-section);
	padding: 20px;
	border-radius: 12px;
	margin-bottom: 25px;
}

.info-box-title {
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--text-primary);
}

.info-box ul {
	color: var(--text-secondary);
	margin: 0;
	padding-left: 20px;
}

/* Soft icon color variants for equipment list */
.card-icon-soft-blue {
	background: #e3e8ff;
}
.card-icon-soft-blue i, .card-icon-soft-blue svg { color: #4f46e5; }

.card-icon-soft-pink {
	background: #fbe3ef;
}
.card-icon-soft-pink i, .card-icon-soft-pink svg { color: #db2777; }

.card-icon-soft-green {
	background: #d5f5e5;
}
.card-icon-soft-green i, .card-icon-soft-green svg { color: #059669; }

.card-icon-soft-purple {
	background: #e7e2fb;
}
.card-icon-soft-purple i, .card-icon-soft-purple svg { color: #7c3aed; }

/* Dark mode: stronger contrast for soft icons */
[data-theme="dark"] .card-icon-soft-blue {
	background: #3b34ad;
}
[data-theme="dark"] .card-icon-soft-blue i,
[data-theme="dark"] .card-icon-soft-blue svg { color: #c7d2fe; }

[data-theme="dark"] .card-icon-soft-pink {
	background: #a81a55;
}
[data-theme="dark"] .card-icon-soft-pink i,
[data-theme="dark"] .card-icon-soft-pink svg { color: #fbcfe8; }

[data-theme="dark"] .card-icon-soft-green {
	background: #05664c;
}
[data-theme="dark"] .card-icon-soft-green i,
[data-theme="dark"] .card-icon-soft-green svg { color: #a7f3d0; }

[data-theme="dark"] .card-icon-soft-purple {
	background: #6224c2;
}
[data-theme="dark"] .card-icon-soft-purple i,
[data-theme="dark"] .card-icon-soft-purple svg { color: #ddd6fe; }

.card-content .card-action i {
	margin-left: 6px;
}

.card-content .card-action-external i {
	margin-left: 0;
	margin-right: 6px;
}

/* Card with chevron on right side */
.card-chevron {
	position: relative;
	padding-right: 40px;
}

.card-chevron .card-action {
	display: none;
}

.card-chevron::after {
	content: '›';
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	transition: color 0.2s ease, transform 0.2s ease;
}

.card-chevron:hover::after {
	color: var(--primary);
	transform: translateY(-50%) translateX(3px);
}

.card-muted {
	background: var(--bg-section);
}

.card-title {
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 20px 0;
}

.card-text {
	color: var(--text-secondary);
	margin-bottom: 15px;
}

.card-text strong {
	color: var(--text-primary);
}

.card-link-inline {
	color: var(--primary);
	text-decoration: none;
}

.card-link-inline:hover {
	text-decoration: underline;
}

.card-link-inline i {
	margin-right: 8px;
}


/* ==========================================================================
   15. Section Components
   ========================================================================== */
.section {
	padding: 70px 0;
}

.section-alt {
	background-color: var(--bg-section);
}

.section:last-child:not([style*="background"]):not(.section-alt):not(.section-cta) {
	padding-bottom: 100px;
}

.section-spaced {
	margin-top: 100px;
}

.section-force-padding {
	padding-top: 70px !important;
}

/* Tip cards (used in equipment page) */
.tip-card {
	text-align: center;
	padding: 30px 20px;
}

.tip-icon {
	width: 70px;
	height: 70px;
	background: var(--bg-card);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	box-shadow: var(--shadow-light);
}

.tip-icon i {
	font-size: 1.8rem;
	color: var(--primary);
}

.tip-title {
	font-size: 1rem;
	margin-bottom: 10px;
	color: var(--text-primary);
}

.tip-text {
	color: var(--text-secondary);
	font-size: 0.95rem;
	margin: 0;
}

.section-title {
	font-size: 1.8rem;
	font-weight: 600;
	margin: 0 0 15px 0;
	color: var(--text-primary);
}

.section-description {
	color: var(--text-secondary);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

.section-label {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--primary);
	margin-bottom: 15px;
}

.section-header {
	margin-bottom: 40px;
}

.section-header-lg {
	margin-bottom: 50px;
}

.section-footer {
	margin-top: 35px;
}

/* Text utilities */
.text-muted {
	color: var(--text-muted) !important;
}

/* Feature items */
.feature-item {
	margin-bottom: 35px;
}


/* ==========================================================================
   16. Hero Section Component (for inner pages)
   ========================================================================== */
.hero-section {
	background: var(--gradient-hero);
	color: #fff;
	padding: 40px 0;
}

/* Light mode: white hero */
:root:not([data-theme="dark"]) .hero-section {
	/* Papirflaten, ikke rein hvit - ellers blir båndet en litt annen
	   nyanse enn resten av siden i design B. */
	background: var(--bg-body);
	color: var(--text-primary);
}
:root:not([data-theme="dark"]) .hero-section h1 {
	color: var(--text-primary);
}
:root:not([data-theme="dark"]) .hero-section .hero-description {
	color: var(--text-secondary);
}
:root:not([data-theme="dark"]) .hero-section .hero-label {
	color: var(--primary);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .hero-section {
		background: var(--gradient-hero);
		color: #fff;
	}
	:root:not([data-theme="light"]) .hero-section h1 {
		color: #fff;
	}
	:root:not([data-theme="light"]) .hero-section .hero-description {
		color: rgba(255,255,255,0.7);
	}
	:root:not([data-theme="light"]) .hero-section .hero-label {
		color: var(--accent-teal);
	}
}
[data-theme="dark"] .hero-section {
	background: var(--gradient-hero);
	color: #fff;
}
[data-theme="dark"] .hero-section h1 {
	color: #fff;
}
[data-theme="dark"] .hero-section .hero-description {
	color: rgba(255,255,255,0.7);
}
[data-theme="dark"] .hero-section .hero-label {
	color: var(--accent-teal);
}

.hero-section .hero-label {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--accent-teal);
	margin-bottom: 15px;
}

.hero-section h1 {
	/* Samme serif som seksjonstitlene på forsiden, så undersidene følger
	   design B og ikke står igjen med den tynne sansen. */
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin-bottom: 25px;
	padding-top: 0;
	color: #fff;
}

.hero-section .hero-description {
	font-size: 1.15rem;
	color: rgba(255,255,255,0.7);
	line-height: 1.7;
}

.hero-icon {
	width: 120px;
	height: 120px;
	background: var(--gradient-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.hero-icon i,
.hero-icon svg {
	font-size: 3rem;
	width: 3rem;
	height: 3rem;
	color: #fff;
}

.hero-buttons {
	margin-top: 30px;
}

.hero-buttons .btn {
	margin-bottom: 10px;
}


/* ==========================================================================
   17. Content Text
   ========================================================================== */
.content-text {
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--text-primary);
}

.content-text p {
	margin-bottom: 1.25rem;
}

.content-text p:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   18. Footer CTA Section
   ========================================================================== */
.footer-cta {
	background: var(--bg-deep);
	color: #fff;
	padding: 50px 0;
}

.footer-cta h4 {
	font-weight: 600;
	margin: 0;
}

.footer-cta p {
	color: rgba(255,255,255,0.6);
	margin: 8px 0 0 0;
	font-size: 0.95rem;
}

.footer-cta a {
	color: rgba(255,255,255,0.6);
}


/* ==========================================================================
   19. Privacy Content
   ========================================================================== */
.privacy-content {
	line-height: 1.8;
	color: var(--text-secondary);
}

.privacy-content h2 {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 40px 0 20px 0;
	padding-top: 20px;
	border-top: 1px solid var(--border-color);
}

.privacy-content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.privacy-content h3 {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 30px 0 15px 0;
}

.privacy-content h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 20px 0 10px 0;
}

.privacy-content p {
	margin-bottom: 15px;
}

.privacy-content ul {
	margin-bottom: 20px;
	padding-left: 25px;
}

.privacy-content li {
	margin-bottom: 8px;
}

.privacy-content a {
	color: var(--primary);
}

.privacy-content a:hover {
	text-decoration: underline;
}


/* ==========================================================================
   20. Home Page Specific Components
   ========================================================================== */

/* Equipment icons - for dark background section */
.equipment-icon {
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}

.equipment-icon i,
.equipment-icon svg {
	font-size: 2rem;
	color: var(--accent-blue);
	fill: var(--accent-blue);
}

/* Template items */
.template-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px 0;
	border-bottom: 1px solid var(--border-light);
}

.template-item:last-child {
	border-bottom: none;
}

.template-item.template-item-right {
	justify-content: flex-end;
	text-align: right;
}

.template-icon {
	width: 50px;
	height: 50px;
	background: var(--gradient-primary);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.template-icon i,
.template-icon svg {
	font-size: 1.3rem;
	color: #fff;
	fill: #fff;
}

.template-content h5 {
	font-weight: 600;
	margin: 0 0 4px 0;
	color: var(--text-primary);
}

.template-content p {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.9rem;
}

/* Feature items */
.feature-icon {
	width: 60px;
	height: 60px;
	background: var(--gradient-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 15px;
}

.feature-icon i,
.feature-icon svg {
	font-size: 1.5rem;
	color: #fff;
	fill: #fff;
}

.feature-title {
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 8px;
}

.feature-text {
	color: var(--text-secondary);
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 0;
}

/* Screenshot gallery */
.screenshot-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

/* Gallery layouts - thumbnails inherit size from grid/flex */
.screenshot-gallery .fuThumbnail {
	width: 180px;
	aspect-ratio: 4/3;
}

.screenshot-gallery-lg {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.screenshot-gallery-lg .fuThumbnail {
	width: 280px;
	aspect-ratio: 16/10;
}

/* ==========================================================================
   21. Utilities
   ========================================================================== */
.modal-content {
	border-radius: 0;
	background-color: var(--bg-card);
	color: var(--text-primary);
}

.help {
	color: var(--text-muted);
	font-size: 12px;
	padding: 6px;
}

#load-layer {
	display: none;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 99999;
	left: 0;
	top: 0;
	margin-top: 65px;
	background-color: rgba(255, 255, 255, 0.9);
	overflow-x: hidden;
	transition: 0.5s;
}

[data-theme="dark"] #load-layer {
	background-color: rgba(15, 23, 42, 0.9);
}

/* Legacy prices section */
#prices a.prices-link {
	color: #fff;
	font-size: 18px;
}

#functions .title {
	font-size: 22px;
	font-weight: 200;
	margin-top: 4%;
}

/* ==========================================================================
   21. Price Cards
   ========================================================================== */
.price-card {
	background: var(--bg-card);
	border-radius: 16px;
	padding: 30px;
	text-align: center;
	box-shadow: var(--shadow-light);
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: all 0.3s ease;
}

.price-card:hover {
	box-shadow: var(--shadow-medium);
	transform: translateY(-4px);
}

.price-card-featured {
	border: 2px solid var(--primary);
	box-shadow: var(--shadow-medium);
}

.price-card-equipment {
	background: var(--gradient-primary);
	color: #fff;
}

.price-card-equipment .price-subtitle,
.price-card-equipment .price-period,
.price-card-equipment .price-annual {
	color: rgba(255,255,255,0.8);
}

.price-card-equipment .price-features li {
	color: #fff;
}

.price-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary);
	color: #fff;
	padding: 4px 16px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
}

.price-header h3 {
	margin: 0 0 5px 0;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--text-primary);
}

.price-card-equipment .price-header h3 {
	color: #fff;
}

.price-subtitle {
	color: var(--text-secondary);
	font-size: 0.9rem;
	margin: 0;
}

.price-amount {
	margin: 25px 0 10px;
}

.price-value {
	font-size: 2.8rem;
	font-weight: 700;
	color: var(--primary);
}

.price-card-equipment .price-value {
	color: #fff;
}

.price-period {
	display: block;
	color: var(--text-secondary);
	font-size: 0.9rem;
}

.price-annual {
	color: var(--text-muted);
	font-size: 0.8rem;
	margin-bottom: 20px;
}

.price-features {
	list-style: none;
	padding: 0;
	margin: 0 0 25px 0;
	text-align: left;
	flex-grow: 1;
}

.price-features li {
	padding: 8px 0;
	color: var(--text-primary);
	font-size: 0.95rem;
}

.price-features li i {
	color: var(--accent-green);
	margin-right: 10px;
}

.price-card .btn-block {
	width: 100%;
}

/* CTA Section */
.section-cta {
	background: var(--gradient-primary);
	color: #fff;
	padding: 80px 0 90px;
}

.section-cta h2 {
	color: #fff;
	font-size: 2rem;
	margin-bottom: 15px;
}

.section-cta .section-description {
	color: rgba(255,255,255,0.9);
}

.cta-buttons {
	margin-top: 25px;
}

.cta-buttons .btn {
	margin-bottom: 10px;
}

.cta-note {
	margin-top: 15px;
	font-size: 0.9rem;
	color: rgba(255,255,255,0.7);
}

/* CTA Price (inline on gradient, no box) */
.cta-price {
	margin: 30px 0 25px;
}

.cta-price-value {
	font-size: 3.5rem;
	font-weight: 700;
	color: #fff;
}

.cta-price-period {
	display: block;
	color: rgba(255,255,255,0.8);
	font-size: 1rem;
	margin-top: 5px;
}

.cta-features {
	list-style: none;
	padding: 0;
	margin: 0 0 30px 0;
	display: inline-block;
	text-align: left;
}

.cta-features li {
	padding: 6px 0;
	color: rgba(255,255,255,0.95);
	font-size: 1rem;
}

.cta-features li i {
	color: #fff;
	margin-right: 10px;
}


/* Screen reader only - for accessibility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	padding: 10px 20px;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--primary);
	color: #fff;
	z-index: 100000;
}


/* ==========================================================================
   22. Section Utility Classes
   ========================================================================== */

/* Standard section padding */
.section-padded {
	padding: 70px 0;
}

/* Only apply to images in page content, not GLightbox */
.section-padded > .container img,
.section-padded .content-article img,
.section-padded .content-article-centered img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Article content - narrower for readability */
.content-article,
.content-article-centered {
	max-width: 750px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.content-article-centered {
	margin-left: auto;
	margin-right: auto;
}

/* Break long URLs and code in articles */
.content-article a,
.content-article-centered a,
.content-article code,
.content-article-centered code,
.content-article pre,
.content-article-centered pre {
	word-break: break-all;
}

/* CTA section on bg-section (light) */
.section-cta-light {
	background: var(--bg-section);
	padding: 70px 0;
}

.section-cta-light h2 {
	font-size: 1.8rem;
	font-weight: 600;
	margin: 0 0 15px 0;
}

.section-cta-light p {
	color: var(--text-secondary);
	margin: 0 0 25px 0;
}


/* ==========================================================================
   23. Status Badges
   ========================================================================== */
.status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.status-badge.available,
.integration-status.available {
	background: rgba(16, 185, 129, 0.1);
	color: var(--accent-green);
}

.status-badge.coming-soon,
.integration-status.coming-soon {
	background: rgba(245, 158, 11, 0.1);
	color: #f59e0b;
}

.integration-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}


/* ==========================================================================
   24. Detail Page Components
   ========================================================================== */

/* Breadcrumb */
.page-breadcrumb {
	background: var(--bg-section);
	padding: 15px 0;
	border-bottom: 1px solid var(--border-color);
}

.page-breadcrumb a {
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 0.9rem;
}

.page-breadcrumb a:hover {
	color: var(--primary);
}

.page-breadcrumb i {
	margin-right: 8px;
}

/* Detail Header */
.detail-header {
	padding: 50px 0 40px;
	background: var(--bg-body);
}

.detail-header .container {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	--bs-gutter-x: 0;
}

.detail-intro {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.detail-icon {
	width: 70px;
	height: 70px;
	background: var(--bg-section);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.detail-icon i,
.detail-icon svg {
	font-size: 2.2rem;
	width: 2.2rem;
	height: 2.2rem;
}

.detail-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.detail-icon--image {
	background: transparent;
}

.detail-title h1 {
	font-size: 2rem;
	font-weight: 600;
	margin: 0 0 8px 0;
	padding-top: 0;
}

.detail-header .lead {
	color: var(--text-secondary);
	font-size: 1.1rem;
	max-width: 700px;
	margin: 0;
}


/* ==========================================================================
   25. TV Frame Component (Demo Display)
   ========================================================================== */
.tv-demo-section {
	padding: 60px 0 80px;
	background: var(--bg-section);
}

.tv-demo-section h2 {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 40px 0;
}

/* TV Frame */
.tv-frame {
	max-width: 800px;
	margin: 0 auto;
}

.tv-screen {
	/* Varm nesten-svart ramme, samme temperatur som resten av paletten */
	background: #111010;
	border-radius: 12px;
	border: 8px solid #23221f;
	box-shadow:
		0 4px 6px rgba(0,0,0,0.1),
		0 20px 50px rgba(0,0,0,0.2),
		inset 0 0 0 1px rgba(255,255,255,0.05);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.tv-stand {
	width: 120px;
	height: 25px;
	background: #23221f;
	margin: 0 auto;
	border-radius: 0 0 8px 8px;
	position: relative;
}

.tv-stand::before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
	width: 180px;
	height: 8px;
	background: #2e2c27;
	border-radius: 0 0 4px 4px;
}

/* Clickable TV Frame (Lightbox) */
.tv-frame-clickable .tv-screen-link {
	display: block;
	cursor: zoom-in;
	text-decoration: none;
}

.tv-frame-clickable .tv-screen {
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tv-frame-clickable .tv-screen-link:hover .tv-screen {
	transform: scale(1.02);
	box-shadow:
		0 4px 6px rgba(0,0,0,0.1),
		0 25px 60px rgba(0,0,0,0.3),
		inset 0 0 0 1px rgba(255,255,255,0.1);
}

.tv-screen-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.tv-screen-overlay i {
	font-size: 2.5rem;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.tv-frame-clickable .tv-screen-link:hover .tv-screen-overlay {
	opacity: 1;
}

/* Article Image Lightbox */
.article-image-lightbox {
	display: inline-block;
	cursor: zoom-in;
}

/* GLightbox - prevent body scroll when open */
body.glightbox-open,
html.glightbox-open {
	overflow: hidden !important;
}

/* Demo Content Styles */
.demo-content {
	height: 100%;
	padding: 25px 35px;
	display: flex;
	flex-direction: column;
	color: #fff;
	font-family: 'Roboto', sans-serif;
}

.demo-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.demo-date {
	font-size: 1.1rem;
	font-weight: 300;
}

.demo-clock {
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--accent-teal);
}

/* Calendar Demo */
.demo-calendar-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.demo-event {
	background: rgba(255,255,255,0.05);
	border-radius: 8px;
	padding: 12px 15px;
	border-left: 3px solid var(--primary);
}

.demo-event.current {
	background: rgba(102, 126, 234, 0.15);
	border-left-color: var(--accent-teal);
}

.demo-event-time {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.6);
	margin-bottom: 4px;
}

.demo-event-title {
	font-size: 1rem;
	font-weight: 500;
}

.demo-event-location {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.5);
	margin-top: 4px;
}

.demo-event-location i {
	margin-right: 5px;
}

/* Microsoft Demo */
.demo-header-microsoft {
	background: linear-gradient(135deg, #0078d4 0%, #00bcf2 100%);
	margin: -25px -35px 25px;
	padding: 15px 35px;
	border-bottom: none;
}

.demo-logo-area {
	font-weight: 500;
}

.demo-logo-area i {
	margin-right: 8px;
}

.demo-split-view {
	display: flex;
	gap: 30px;
	flex: 1;
}

.demo-calendar-column {
	flex: 1;
}

.demo-rooms-column {
	flex: 0 0 180px;
}

.demo-split-view h5 {
	font-size: 0.85rem;
	font-weight: 500;
	color: rgba(255,255,255,0.6);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 15px 0;
}

.demo-room {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	background: rgba(255,255,255,0.05);
	border-radius: 6px;
	margin-bottom: 8px;
}

.room-name {
	font-weight: 500;
}

.room-status {
	font-size: 0.75rem;
}

.demo-room.available .room-status {
	color: var(--accent-green);
}

.demo-room.busy .room-status {
	color: var(--accent-red);
}

/* Weather Demo */
.demo-weather {
	text-align: center;
	justify-content: center;
}

.demo-weather-location {
	font-size: 1.1rem;
	margin-bottom: 20px;
	color: rgba(255,255,255,0.8);
}

.demo-weather-location i {
	margin-right: 8px;
	color: var(--accent-red);
}

.demo-weather-main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 25px;
	margin-bottom: 10px;
}

.demo-weather-icon i {
	font-size: 4rem;
	color: #FFB300;
}

.demo-weather-temp {
	font-size: 4rem;
	font-weight: 300;
}

.demo-weather-desc {
	font-size: 1.2rem;
	color: rgba(255,255,255,0.7);
	margin-bottom: 20px;
}

.demo-weather-details {
	display: flex;
	justify-content: center;
	gap: 30px;
	font-size: 0.9rem;
	color: rgba(255,255,255,0.6);
	margin-bottom: 30px;
}

.demo-weather-details i {
	margin-right: 6px;
}

.demo-weather-forecast {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.1);
}

.demo-forecast-day {
	text-align: center;
	padding: 10px 15px;
}

.day-name {
	font-size: 0.85rem;
	color: rgba(255,255,255,0.6);
	margin-bottom: 8px;
}

.day-icon i {
	font-size: 1.5rem;
	margin-bottom: 8px;
}

.day-temp {
	font-size: 0.9rem;
}

/* RSS Demo */
.demo-rss-title {
	font-weight: 500;
}

.demo-rss-title i {
	margin-right: 8px;
	color: #FF6600;
}

.demo-news-ticker {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.demo-news-item {
	background: rgba(255,255,255,0.05);
	border-radius: 8px;
	padding: 15px;
	border-left: 3px solid transparent;
}

.demo-news-item.active {
	background: rgba(255, 102, 0, 0.1);
	border-left-color: #FF6600;
}

.demo-news-source {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 6px;
}

.demo-news-headline {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}

.demo-news-time {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.4);
	margin-top: 6px;
}


/* ==========================================================================
   26. Feature Grid Component
   ========================================================================== */
.feature-grid-section {
	padding: 70px 0;
}

.feature-grid-section h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 40px 0;
}

.feature-grid-section .feature-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.feature-grid-section .feature-item > i {
	width: 50px;
	height: 50px;
	background: var(--bg-section);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	color: var(--primary);
	flex-shrink: 0;
}

.feature-grid-section .feature-item h4 {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: var(--text-primary);
}

.feature-grid-section .feature-item p {
	color: var(--text-secondary);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}


/* ==========================================================================
   27. Use Case Cards
   ========================================================================== */
.use-case-section {
	padding: 70px 0;
	background: var(--bg-section);
}

.use-case-section h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 40px 0;
}

.use-case-card {
	text-align: center;
	padding: 30px;
	background: var(--bg-card);
	border-radius: 16px;
	box-shadow: var(--shadow-light);
}

.use-case-card i {
	font-size: 2.5rem;
	color: var(--primary);
	margin-bottom: 20px;
}

.use-case-card h4 {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 10px 0;
	color: var(--text-primary);
}

.use-case-card p {
	color: var(--text-secondary);
	font-size: 0.95rem;
	margin: 0;
}


/* ==========================================================================
   28. Detail CTA Section
   ========================================================================== */
.detail-cta {
	background: var(--gradient-primary);
	padding: 80px 0;
	color: #fff;
}

.detail-cta h2 {
	font-size: 1.8rem;
	font-weight: 600;
	margin: 0 0 15px 0;
	color: #fff;
}

.detail-cta p {
	color: rgba(255,255,255,0.85);
	margin: 0 0 30px 0;
	font-size: 1.05rem;
}


/* ==========================================================================
   29. Responsive Adjustments
   ========================================================================== */
@media only screen and (max-width: 768px) {
	.content-blocks h1 { font-size: 30px; }
	.content-blocks h2 { font-size: 22px; }

	.hero-section {
		padding: 30px 0;
	}

	.hero-section h1 {
		font-size: 2rem;
	}

	.section-padded {
		padding: 35px 0;
	}

	.template-item {
		padding: 12px 0;
	}

	.feature-icon {
		width: 50px;
		height: 50px;
	}

	.feature-icon i {
		font-size: 1.2rem;
	}

	.screenshot-gallery .fuThumbnail {
		width: 140px;
	}

	.screenshot-gallery-lg .fuThumbnail {
		width: 200px;
	}

	/* TV Frame responsive */
	.tv-screen {
		border-width: 5px;
	}

	.demo-content {
		padding: 15px 20px;
	}

	.demo-header {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.demo-split-view {
		flex-direction: column;
		gap: 20px;
	}

	.demo-rooms-column {
		flex: 1;
	}

	.demo-weather-main {
		flex-direction: column;
		gap: 10px;
	}

	.demo-weather-icon i {
		font-size: 3rem;
	}

	.demo-weather-temp {
		font-size: 3rem;
	}

	.demo-weather-forecast {
		flex-wrap: wrap;
	}

	.demo-forecast-day {
		flex: 0 0 calc(33% - 10px);
	}

	.detail-intro {
		flex-direction: column;
		text-align: center;
	}
}


/* ==========================================================================
   Use Cases Page Styles
   ========================================================================== */

/* Vertical card with image */
.card-vertical {
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.card-vertical .card-image {
	width: 100%;
	height: 180px;
	overflow: hidden;
}

.card-vertical .card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.card-vertical:hover .card-image img {
	transform: scale(1.05);
}

.card-vertical .card-content {
	padding: 20px;
}

.card-hover-lift:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-medium);
}

/* Small icon for cards */
.card-icon-small {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.card-icon-small i,
.card-icon-small svg {
	font-size: 1.1rem;
	color: #fff;
}

/* Card header row - icon and title side by side */
.card-header-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.card-header-row h3 {
	margin: 0;
}

/* Additional icon color variants for small icons */
.card-icon-green {
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.card-icon-red {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Override existing light-colored icons for small icon usage */
.card-icon-small.card-icon-teal {
	background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}
.card-icon-small.card-icon-teal i,
.card-icon-small.card-icon-teal svg { color: #fff; }

.card-icon-small.card-icon-orange {
	background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}
.card-icon-small.card-icon-orange i,
.card-icon-small.card-icon-orange svg { color: #fff; }

.card-icon-small.card-icon-blue {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.card-icon-small.card-icon-blue i,
.card-icon-small.card-icon-blue svg { color: #fff; }

/* Icon list - generic list with icons */
.icon-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.icon-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border-color);
	color: var(--text-secondary);
}

.icon-list li:last-child {
	border-bottom: none;
}

.icon-list li i {
	color: var(--primary);
	width: 20px;
	text-align: center;
}

.icon-list-success li i {
	color: var(--success);
}

/* Sticky positioning for large screens */
@media (min-width: 992px) {
	.position-lg-sticky {
		position: sticky;
	}
}

/* Gallery items */
.gallery-item {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: var(--shadow-light);
	transition: all 0.3s ease;
}

.gallery-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-medium);
}

.gallery-item img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.gallery-item:hover img {
	transform: scale(1.05);
}

/* Responsive adjustments for card and gallery components */
@media (max-width: 767px) {
	.card-vertical .card-image {
		height: 150px;
	}

	.gallery-item img {
		height: 150px;
	}
}

/* ============================================================
   Cookie consent modal. Markup in index.html, logic in
   assets/js/consent.js. Theme-aware via the CSS variables above.
   ============================================================ */
.cookie-consent {
	position: fixed;
	inset: 0;
	z-index: 2000; /* above everything, incl. navbar and app modals */
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.5); /* backdrop */
}

.cookie-consent.is-visible {
	display: flex;
}

body.cookie-consent-open {
	overflow: hidden;
}

.cookie-consent-dialog {
	background: var(--bg-card);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: 14px;
	box-shadow: var(--shadow-hover);
	max-width: 460px;
	width: 100%;
	padding: 28px;
	text-align: center;
}

.cookie-consent-title {
	margin: 0 0 12px;
	font-size: 1.3rem;
	color: var(--text-primary);
}

.cookie-consent-text {
	margin: 0 0 22px;
	font-size: 0.95rem;
	color: var(--text-secondary);
	line-height: 1.5;
}

.cookie-consent-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.cookie-consent-actions .btn {
	min-width: 120px;
}

.cookie-consent-more {
	display: inline-block;
	margin-top: 16px;
	font-size: 0.85rem;
	color: var(--text-secondary);
}

@media (max-width: 480px) {
	.cookie-consent-actions {
		flex-direction: column-reverse;
	}
	.cookie-consent-actions .btn {
		width: 100%;
	}
}


/* ==========================================================================
   30. Landingsside 2026 - design B

   Komponentene til den nye forsiden. Seksjonsrekkefølgen er:
   hero -> populære oppsett -> pris -> så kjapt går det -> funksjoner ->
   editorbilde -> kundecase -> avsluttende CTA.
   ========================================================================== */

/* --- Seksjonshoder ------------------------------------------------------ */
.section-eyebrow {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-strong);
	padding-bottom: 6px;
	margin-bottom: 18px;
}

/* Sentrert variant i seksjonshoder */
.section-header .section-eyebrow,
.section-header-lg .section-eyebrow {
	display: inline-block;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 10px;
}

.section-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.section-description {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}


/* --- Populære oppsett (karusell) ---------------------------------------- */
.showcase-track {
	display: flex;
	gap: 26px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 6px 4px 24px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.showcase-track::-webkit-scrollbar {
	display: none;
}

.showcase-item {
	flex: 0 0 clamp(250px, 30%, 330px);
	scroll-snap-align: center;
}

/* Liten variant av TV-rammen som allerede finnes (seksjon 25) */
.tv-frame--sm .tv-screen {
	border-width: 6px;
	border-radius: 8px;
}

.tv-frame--sm .tv-stand {
	width: 76px;
	height: 14px;
}

.tv-frame--sm .tv-stand::before {
	width: 118px;
	height: 5px;
}

.tv-screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Skjermbildene fra editoren er 1890x982 (1,925:1), ikke helt 16:9. Med
   object-fit: cover ble 3,8 % av hver kant beskåret, og tekst som ligger nær
   venstrekanten havnet helt ut i kanten. contain viser hele bildet; de få
   prosentene som mangler i høyden blir en tynn stripe i skjermens egen farge.
   Bilder som allerede er 16:9 fyller ramma helt. */
.tv-frame--sm .tv-screen img {
	object-fit: contain;
}

.showcase-caption {
	text-align: center;
	margin-top: 18px;
	position: static;
	padding: 0;
	color: inherit;
}

.showcase-caption h3 {
	margin: 0 0 3px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
}

.showcase-caption p {
	margin: 0;
	font-size: 0.89rem;
	color: var(--text-muted);
}

.showcase-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin-top: 6px;
}

.showcase-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--border-strong);
	background: var(--bg-card);
	color: var(--text-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.showcase-btn:hover {
	background: var(--brand-soft);
	border-color: var(--brand-text);
	color: var(--brand-text);
}

.showcase-dots {
	display: flex;
	gap: 8px;
}

.showcase-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: var(--border-strong);
	cursor: pointer;
	transition: width 0.15s ease, background-color 0.15s ease, border-radius 0.15s ease;
}

.showcase-dot[aria-current="true"] {
	background: var(--brand-text);
	width: 22px;
	border-radius: 4px;
}


/* --- Pris --------------------------------------------------------------- */
.price-highlight {
	max-width: 680px;
	margin: 0 auto;
	background: var(--bg-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	padding: 44px 40px;
	text-align: center;
}

.price-highlight-amount {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	margin: 6px 0 4px;
}

/* Bevisst nedskalert fra ~4,5rem. Stor font får prisen til å virke høy. */
.price-highlight-value {
	font-family: var(--font-display);
	font-size: 2.9rem;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--text-primary);
}

.price-highlight-currency {
	font-family: var(--font-display);
	font-size: 1.28rem;
	color: var(--text-primary);
}

.price-highlight-period {
	color: var(--text-muted);
	font-size: 0.92rem;
	margin: 0 0 26px;
}

.price-highlight-list {
	list-style: none;
	padding: 0;
	margin: 0 auto 30px;
	display: inline-grid;
	grid-template-columns: repeat(2, auto);
	gap: 10px 34px;
	text-align: left;
}

.price-highlight-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.96rem;
	color: var(--text-secondary);
}

.price-highlight-list i {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	border-radius: 4px;
	background: var(--brand-soft);
	color: var(--brand-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
}

@media (max-width: 560px) {
	.price-highlight { padding: 32px 22px; }
	.price-highlight-list { grid-template-columns: 1fr; }
}


/* --- Så kjapt går det (steg) -------------------------------------------- */
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.step-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	overflow: hidden;
}

.step-img {
	aspect-ratio: 16 / 10;
	background: var(--bg-section);
	overflow: hidden;
	border-bottom: 1px solid var(--border-color);
}

.step-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Sentrert vannrett: bildene er bredere enn kortet, så beskjæringen skjer
	   på bredden. Med "top left" ble et sentrert skjema dyttet mot høyre. */
	object-position: center top;
}

.step-body {
	padding: 20px 22px 24px;
}

.step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--brand);
	color: #fff;
	font-size: 0.84rem;
	font-weight: 700;
	margin-bottom: 12px;
}

.step-body h3 {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text-primary);
}

.step-body p {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.94rem;
}

@media (max-width: 860px) {
	.steps { grid-template-columns: 1fr; }
}

/* "Hva trenger du?" som fotnote i stedet for egen seksjon */
.needs {
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid var(--border-color);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 24px;
	font-size: 0.95rem;
	color: var(--text-secondary);
}

.needs-label {
	font-weight: 600;
	color: var(--text-primary);
}

.needs-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.needs-item i {
	color: var(--brand-text);
}

.needs-sep {
	color: var(--border-strong);
}


/* --- Funksjoner --------------------------------------------------------- */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 40px;
}

.feature-card {
	display: flex;
	gap: 15px;
	padding: 16px 0;
}

.feature-card-icon {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 8px;
	background: var(--brand-soft);
	color: var(--brand-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
}

.feature-card h3 {
	margin: 2px 0 4px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
}

.feature-card p {
	margin: 0;
	font-size: 0.92rem;
	color: var(--text-secondary);
	line-height: 1.55;
}

@media (max-width: 900px) {
	.feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.feature-grid { grid-template-columns: 1fr; }
}


/* --- Split: editorbilde og kundecase ------------------------------------ */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.split-media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-hover);
}

.split-media img {
	display: block;
	width: 100%;
}

.split-text h2 {
	margin-top: 0;
	margin-bottom: 16px;
}

.split-text p {
	color: var(--text-secondary);
}

.split--media-first .split-media {
	order: -1;
}

.tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 26px;
	padding: 0;
	list-style: none;
}

.tag-row li {
	font-size: 0.86rem;
	padding: 6px 13px;
	border-radius: 4px;
	background: var(--bg-body);
	border: 1px solid var(--border-strong);
	color: var(--text-secondary);
}

@media (max-width: 900px) {
	.split {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.split-media { order: -1; }
}


/* --- Avsluttende CTA-bånd ----------------------------------------------- */
.cta-band {
	background: var(--bg-deep);
	color: var(--on-deep);
	text-align: center;
	padding: 66px 0;
}

.cta-band h2 {
	color: var(--on-deep);
	margin-top: 0;
}

.cta-band p {
	color: var(--on-deep-2);
	max-width: 48ch;
	margin: 0 auto 26px;
}

.cta-band .cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}


/* --- Footer med språk- og temavalg -------------------------------------- */
.footer {
	min-height: 0;
	background-color: var(--bg-footer);
	padding: 58px 0 26px;
	font-size: 0.94rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 36px;
}

.footer-grid h3 {
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--text-muted);
	font-weight: 700;
	margin: 0 0 14px;
}

.footer-grid ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-grid li {
	margin-bottom: 8px;
}

.footer-grid a {
	color: var(--text-secondary);
	text-decoration: none;
	border-bottom: 0;
}

.footer-grid a:hover {
	color: var(--brand-text);
	text-decoration: underline;
}

.footer-logo {
	height: 28px;
	width: auto;
	margin-bottom: 14px;
}

.footer-about {
	color: var(--text-secondary);
	max-width: 34ch;
	margin-bottom: 18px;
}

.footer-social {
	display: flex;
	gap: 14px;
	font-size: 1.6rem;
}

.footer-social a {
	color: var(--text-muted);
	border-bottom: 0;
}

.footer-social a:hover {
	color: var(--brand-text);
}

.footer-bottom {
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid var(--border-color);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	color: var(--text-muted);
	font-size: 0.87rem;
}

.footer-bottom a {
	color: var(--text-muted);
	border-bottom: 0;
	text-decoration: none;
}

.footer-bottom a:hover {
	color: var(--brand-text);
	text-decoration: underline;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: center;
}

/* Språkvalg, tema og snø - flyttet hit fra toppmenyen */
.footer-prefs {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.pref-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-btn);
	padding: 7px 13px;
	font: inherit;
	font-size: 0.87rem;
	line-height: 1.2;
	color: var(--text-secondary);
	cursor: pointer;
	text-decoration: none;
}

.pref-btn:hover,
.pref-btn:focus {
	border-color: var(--brand-text);
	color: var(--brand-text);
}

.pref-btn img {
	height: 13px;
	width: auto;
	border-radius: 2px;
}

.footer-prefs .dropdown-menu {
	min-width: 160px;
}

@media (max-width: 860px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.footer-grid { grid-template-columns: 1fr; gap: 26px; }

	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Bare ikon for språk og tema på smal skjerm - teksten spiser
	   for mye plass. Knappene beholder aria-label. */
	.pref-btn .pref-label {
		display: none;
	}

	.pref-btn {
		padding: 9px 12px;
	}
}

/* Utstyrskortet på prissiden har merkefargen som flate. En .btn-primary
   oppå den blir teal på teal, så den får den lyse varianten i stedet. */
.price-card-equipment .btn-primary,
.section-cta .btn-primary {
	background: var(--cta-btn-bg);
	border-color: var(--cta-btn-bg);
	color: var(--cta-btn-text);
}

.price-card-equipment .btn-primary:hover,
.price-card-equipment .btn-primary:focus,
.section-cta .btn-primary:hover,
.section-cta .btn-primary:focus {
	background: var(--cta-btn-bg);
	border-color: var(--cta-btn-bg);
	color: var(--cta-btn-text);
	filter: brightness(1.06);
}

/* Outline-knapper på farget/mørkt bånd må være lyse - den mørke
   merkefargen mot teal eller nesten-svart holder ikke kontrastkravet. */
.section-cta .btn-outline-primary,
.section-cta .btn-outline-secondary,
.footer-cta .btn-outline-primary,
.footer-cta .btn-outline-secondary {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.section-cta .btn-outline-primary:hover,
.section-cta .btn-outline-primary:focus,
.section-cta .btn-outline-secondary:hover,
.section-cta .btn-outline-secondary:focus,
.footer-cta .btn-outline-primary:hover,
.footer-cta .btn-outline-primary:focus,
.footer-cta .btn-outline-secondary:hover,
.footer-cta .btn-outline-secondary:focus {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
	color: #fff;
}

/* Betalingsvilkår under prisen. Kunden faktureres årlig selv om prisen
   oppgis pr. måned - det må stå et sted. */
.price-note {
	margin: 24px 0 0;
	text-align: center;
	font-size: 0.85rem;
	color: var(--text-muted);
}

/* ==========================================================================
   31. Priser - to pakker (2026-09-12)

   Stigen med fire kort er erstattet av formelen: 299 for inntil tre skjermer,
   99 pr. ekstra. Aarsprisen under hvert kort er ute etter tilbakemeldingen -
   den minnet kunden om et stort tall. Til gjengjeld maa noten om at
   abonnementet forskuddsfaktureres aarlig faktisk vaere lesbar, ellers blir
   foerste faktura en overraskelse.
   ========================================================================== */

/* Linja som forklarer hva en skjerm nummer fire koster. Dette er et
   salgsargument, ikke finskrift, saa den skal ha merkefarge og vekt. */
.price-extra {
	color: var(--brand-text);
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 22px;
}

.price-card-equipment .price-extra {
	color: #fff;
}

.price-highlight-period {
	margin: 0 0 4px;
}

.price-highlight-extra {
	color: var(--brand-text);
	font-size: 0.98rem;
	font-weight: 600;
	margin: 0 0 26px;
}

/* Tekstlenke under hovedknappen paa utstyrskortet. Knappen gaar til
   bestillingen, denne til infosiden. */
.price-card-link {
	display: inline-block;
	margin-top: 14px;
	font-size: 0.92rem;
	font-weight: 600;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.price-card-link:hover,
.price-card-link:focus-visible {
	color: #fff;
	opacity: 0.82;
}

/* Var 0.85rem i --text-muted, altsaa det minste og svakeste paa siden.
   Naar aarsprisen er borte er dette det eneste stedet kunden faar vite at
   det faktureres tolv maaneder i forskudd. */
.price-note {
	margin: 30px auto 0;
	max-width: 620px;
	text-align: center;
	font-size: 0.97rem;
	line-height: 1.5;
	color: var(--text-secondary);
}

.price-highlight .price-note {
	margin-top: 24px;
}

/* To kort taaler mer luft mellom seg enn fire gjorde. */
@media (min-width: 992px) {
	.price-card {
		padding: 36px 32px;
	}
}

/* Oppstartsgebyret er det eneste engangsbeloepet paa siden. Det stod i
   0.8rem paa 80 % hvit - mindre og svakere enn punktlista under. */
.price-card-equipment .price-annual {
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.92rem;
	line-height: 1.45;
	max-width: 34ch;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 24px;
}

/* Punktene i forsidens prisboks var enlinjede foer. Med den nye lista
   brekker flere av dem over to linjer, og da skal haken staa ved foerste
   linje, ikke midt i blokka. */
.price-highlight-list li {
	align-items: flex-start;
}

.price-highlight-list i {
	margin-top: 2px;
}

/* ==========================================================================
   32. Om oss og footer-kontakt (2026-09-12)
   ========================================================================== */

/* Hero-baandet har 40px under seg og .section 70px over. Paa Om oss, der
   ingressen er kort og broedteksten bare to avsnitt, ble de 110px staaende
   som et hull mellom tittelen og teksten. */
.section-tight-top {
	padding-top: 24px;
	padding-bottom: 34px;
}

.content-text .lead-paragraph {
	font-size: 1.2rem;
	line-height: 1.65;
	color: var(--text-primary);
}

.about-points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 40px;
}

.about-point {
	border-top: 1px solid var(--border-strong);
	padding-top: 16px;
}

.about-point h3 {
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	color: var(--text-primary);
}

.about-point p {
	margin: 0;
	font-size: 0.93rem;
	line-height: 1.6;
	color: var(--text-secondary);
}

@media (max-width: 767px) {
	.about-points {
		grid-template-columns: 1fr;
		gap: 22px;
		margin-top: 32px;
	}
}

/* Footer: adresse, kontaktveier og org.nr skal leses som tre blokker. */
.footer-address {
	margin: 0 0 16px;
}

.footer-contact-links {
	margin: 0 0 16px;
}

.footer-orgno {
	margin: 0 0 18px;
}

/* Taggene i kundeseksjonen er lenker til bruksomraadesidene. Pillen flyttes
   fra <li> til <a>, slik at hele flaten er klikkbar og kan ha hover. */
.tag-row li {
	padding: 0;
	border: 0;
	background: none;
}

.tag-row a {
	display: inline-block;
	font-size: 0.86rem;
	padding: 6px 13px;
	border-radius: 4px;
	background: var(--bg-body);
	border: 1px solid var(--border-strong);
	color: var(--text-secondary);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease;
}

.tag-row a:hover,
.tag-row a:focus-visible {
	background: var(--brand-soft);
	border-color: var(--brand-text);
	color: var(--brand-text);
}

/* Om oss har kort ingress og lite broedtekst. Der blir hero-baandets 40px
   under seg, avsnittsmargen og seksjonens 30px over til sammen et hull. */
.hero-section-tight {
	padding-bottom: 16px;
}

.hero-section-tight .hero-description {
	margin-bottom: 0;
}

/* Punktene staar na i egen seksjon nederst paa Om oss. Den maa skille seg fra
   broedteksten over uten aa bruke bakgrunnsfarge: --bg-section og --bg-footer
   er samme verdi, saa et farget baand her ville smeltet sammen med footeren.

   Ingen egen strek paa seksjonen heller: hvert punkt har allerede en over seg,
   og to streker rett under hverandre ble bare stoy. */
.section-about-summary {
	/* Luften over er det eneste som gjoer dette til en egen seksjon - ingen
	   strek og ingen bakgrunnsfarge. Da maa det vaere nok av den. */
	padding: 84px 0 72px;
}

/* Paa smal skjerm stables kortet rett over punktene, og da blir 84px mye
   tomrom aa scrolle forbi. */
@media (max-width: 767px) {
	.section-about-summary {
		padding: 48px 0 48px;
	}
}

/* Full bredde gir bredere spalter enn da punktene sto inne i col-lg-8. */
.section-about-summary .about-points {
	margin-top: 0;
	gap: 40px;
}