* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
	font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
	background: #f6f8f3;
	color: #0e1715;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2vw;
	border-bottom: 1px solid rgba(13, 24, 20, 0.04);
	transition: height 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-scrolled {
	backdrop-filter: blur(24px);
	height: 76px;
	background: rgba(246, 248, 243, 0.99);
	box-shadow: 0 14px 40px rgba(13, 24, 20, 0.06);
}

.brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* Samma logga och storlek som på welcome-sidan (cartaro-site/www/
   partials/topbar.php: cartaro-weblogo-full-m-green-black.webp, se
   dess site.css) — bara den gröna/svarta fullständiga loggan finns,
   ingen egen vit variant, så den byts inte längre ut beroende på
   .is-scrolled som det gamla ikonmärket gjorde. */
.brand img {
	height: 24px;
	width: auto;
	display: block;
}

.site-header .brand img.dark-theme { display: block; }
.site-header .brand img.light-theme { display: none; }

.site-header.is-scrolled .brand img.dark-theme { display: none; }
.site-header.is-scrolled .brand img.light-theme { display: block; }

.site-nav {
	display: flex;
	align-items: center;
	gap: 34px;
}

.site-nav a,
.login-link {
	font-size: 15px;
	font-weight: 750;
	text-decoration: none;
	color: #fff;
}

.site-header.is-scrolled .site-nav a,
.site-header.is-scrolled .login-link {
	color: #000;
}

/* Loggan-in-länken i själva headern är numera vanlig text ("Logga
   in", till vänster om "Kom igång idag" — se markupen) i stället för
   den tidigare ikonknappen. Ärver font/färg från .login-link-
   basstilen (delad med .site-nav a) ovan, bara en hover-effekt
   läggs till här. */
.header-actions .login-link:hover {
	color: #8edb80;
}

.site-header.is-scrolled .header-actions .login-link:hover {
	color: #4f7531;
}

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

.header-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 27px;
	border-radius: 999px;
	background: #4f7531;
	color: #fff;
	font-size: 15px;
	font-weight: 850;
	text-decoration: none;
	box-shadow: 0 14px 34px rgba(31, 122, 31, 0.24);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.header-button:hover {
	transform: translateY(-1px) scale(1.03);
	box-shadow: 0 18px 38px rgba(31, 122, 31, 0.32);
}

/* Samma höjd som språkväljarens knapp (.site-header .lang-switcher-
   toggle) i stället för hero-actions/mobile-nav-actions egna 50px, så
   raden av element till höger i headern får jämn höjd. */
.header-actions .header-button {
	height: 38px;
	padding: 0 20px;
	font-size: 14px;
}

/* Hamburgarknappen ersätter "Kom igång" i mobilvyn (se @media max-width:
   700px nedan) i stället för att stå bredvid den — den öppnar i stället
   en meny (.mobile-nav) som rymmer både navigeringslänkarna (dolda helt
   utan ersättning under 1100px annars, se @media ovan) och "Logga in"/
   "Kom igång". Dold på skrivbordet som standard. */
.mobile-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(13, 24, 20, 0.06);
	color: #fff;
	cursor: pointer;
}

.site-header.is-scrolled .mobile-nav-toggle {
	color: #000;
}

.mobile-nav {
	position: fixed;
	top: 76px;
	left: 0;
	right: 0;
	z-index: 99;
	max-height: calc(100vh - 76px);
	overflow-y: auto;
	padding: 18px 22px 28px;
	background: #fff;
	box-shadow: 0 24px 50px rgba(13, 24, 20, 0.14);
}

.mobile-nav[hidden] {
	display: none;
}

.mobile-nav-links {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 18px;
}

.mobile-nav-links a {
	padding: 12px 6px;
	border-bottom: 1px solid rgba(13, 24, 20, 0.06);
	font-size: 16px;
	font-weight: 750;
	color: #0e1715;
	text-decoration: none;
}

.mobile-nav-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mobile-nav-actions .login-link {
	display: block;
	padding: 12px 6px;
	color: #0e1715;
	font-size: 15px;
	font-weight: 750;
	text-align: center;
	text-decoration: none;
}

.mobile-nav-actions .header-button {
	width: 100%;
}

/* Språkväljaren (partials/language-switcher.php, delad med welcome/
   login/legal) — omstylad här för headern på cartaro.php/legal.php:
   samma transparent-mot-mörk/vit-vid-scroll-princip som resten av
   headern i stället för site.css:s fasta ljusa kort-look. Kortkoden
   ("SV" etc) visas aldrig — bara flagga + pil, se language-switcher.php. */
.site-header .lang-switcher,
.site-footer .lang-switcher,
.mobile-nav .lang-switcher {
	position: relative;
	font-family: inherit;
}

.site-header .lang-switcher-toggle,
.site-footer .lang-switcher-toggle,
.mobile-nav .lang-switcher-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.5);
	color: #0e1715;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.site-header .lang-switcher-toggle:hover {
	background: rgba(255, 255, 255, 0.7);
	transform: translateY(-1px) scale(1.05);
}

/* Samma gröna överlagring som .header-actions .login-link vid scroll —
   vit border mot den ljusa is-scrolled-bakgrunden syntes för dåligt. */
.site-header.is-scrolled .lang-switcher-toggle {
	background: rgba(79, 117, 49, 0.12);
	border-color: rgba(79, 117, 49, 0.4);
}

.site-header.is-scrolled .lang-switcher-toggle:hover {
	background: rgba(79, 117, 49, 0.2);
}

.site-header .lang-flag,
.site-footer .lang-flag,
.mobile-nav .lang-flag {
	display: inline-flex;
	flex-shrink: 0;
	width: 19px;
	height: 13px;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.site-header .lang-flag svg,
.site-footer .lang-flag svg,
.mobile-nav .lang-flag svg {
	display: block;
	width: 100%;
	height: 100%;
}

.site-header .lang-chevron,
.site-footer .lang-chevron,
.mobile-nav .lang-chevron {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.site-header .lang-switcher[data-open="true"] .lang-chevron {
	transform: rotate(180deg);
}

.site-header .lang-switcher-menu,
.site-footer .lang-switcher-menu,
.mobile-nav .lang-switcher-menu {
	list-style: none;
	margin: 10px 0 0;
	padding: 6px;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 170px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid #edf1eb;
	box-shadow: 0 20px 46px rgba(13, 24, 20, 0.16);
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity 0.12s ease, transform 0.12s ease;
	z-index: 50;
}

.site-header .lang-switcher[data-open="true"] .lang-switcher-menu,
.site-footer .lang-switcher[data-open="true"] .lang-switcher-menu,
.mobile-nav .lang-switcher[data-open="true"] .lang-switcher-menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.site-header .lang-switcher-menu li + li,
.site-footer .lang-switcher-menu li + li,
.mobile-nav .lang-switcher-menu li + li {
	margin-top: 2px;
}

.site-header .lang-switcher-menu a,
.site-footer .lang-switcher-menu a,
.mobile-nav .lang-switcher-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 10px;
	color: #0e1715;
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
}

.site-header .lang-switcher-menu a:hover,
.site-footer .lang-switcher-menu a:hover,
.mobile-nav .lang-switcher-menu a:hover {
	background: #f6f8f3;
}

.site-header .lang-switcher-menu a[aria-current="true"],
.site-footer .lang-switcher-menu a[aria-current="true"],
.mobile-nav .lang-switcher-menu a[aria-current="true"] {
	background: rgba(79, 117, 49, 0.1);
	color: #4f7531;
}

.site-header .lang-switcher-menu .lang-check,
.site-footer .lang-switcher-menu .lang-check,
.mobile-nav .lang-switcher-menu .lang-check {
	margin-left: auto;
	width: 14px;
	height: 14px;
	color: #4f7531;
	flex-shrink: 0;
}

/* Modifierare för en språkväljare som fälls UPP i stället för NER —
   används av mobilmenyns instans (.mobile-nav-footer, längst ner i
   den heltäckande menyn) och footerns (.site-footer, längst ner på
   sidan) eftersom knappen i båda fallen sitter vid botten och en
   nedåtfällande meny bara skulle sticka utanför skärmen. */
.lang-switcher--upward .lang-switcher-menu {
	top: auto;
	bottom: calc(100% + 10px);
	right: 0;
	margin: 0;
	transform: translateY(6px);
}

.lang-switcher--upward[data-open="true"] .lang-switcher-menu {
	transform: translateY(0);
}

.lang-switcher--upward .lang-chevron {
	transform: rotate(180deg);
}

.lang-switcher--upward[data-open="true"] .lang-chevron {
	transform: rotate(0deg);
}

/* Footerns språkväljare (bytte plats med headerns, se markupen) ska
   se ut precis som de sociala ikon-knapparna (.footer-social-btn)
   bredvid den — samma mått/färger/hover, ingen pil (bara flaggan). */
.site-footer .lang-switcher {
	position: relative;
}

.site-footer .lang-switcher-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.75);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-footer .lang-switcher-toggle:hover {
	background: #8edb80;
	border-color: #8edb80;
	color: #000;
	transform: translateY(-2px);
}

.site-footer .lang-chevron {
	display: none;
}

.site-footer .lang-flag {
	width: 19px;
	height: 13px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.hero {
	position: relative;
	min-height: 100vh;
	padding: 170px 12vw 100px;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.8fr);
	align-items: center;
	gap: 8vw;
	overflow: hidden;
	background:
		radial-gradient(circle at 82% 28%, rgba(31, 122, 31, 0.14), transparent 34%),
		linear-gradient(180deg, #fbfcf8 0%, #eef5ec 100%);
}

.hero {
	isolation: isolate;
	background: #06100e;
}

.hero-video-layer {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
	background: #06100e;
}

/* "Bulletproof" fullscreen-video-teknik: min-width/min-height 100% med
   width/height auto och centrerande transform garanterar att videon
   alltid fyller hela .hero-video-layer utan att förvrängas (croppas
   i stället för att stretchas), oavsett videons egen upplösning eller
   heroens bildförhållande. object-fit: cover ligger kvar som extra
   säkerhet i webbläsare som hanterar det bättre än transform-tekniken. */
.hero-video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	max-width: none;
	object-fit: cover;
	display: block;
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.02);
	transition: opacity 0.8s ease;
}

.hero-video.is-loaded {
	opacity: 1;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(90deg, rgba(6, 16, 14, 0.88) 0%, rgba(6, 16, 14, 0.58) 42%, rgba(6, 16, 14, 0.3) 100%),
		linear-gradient(180deg, rgba(6, 16, 14, 0.18) 0%, rgba(6, 16, 14, 0.78) 100%);
}

.hero h1,
.hero .lead,
.hero .microcopy {
	color: #ffffff;
}

.hero .lead {
	color: rgba(255, 255, 255, 0.78);
}

.hero .microcopy {
	color: rgba(255, 255, 255, 0.56);
}

.hero .eyebrow {
	color: #8edb80;
}

.hero-copy {
	position: relative;
	z-index: 2;
}

.eyebrow {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1;
	font-weight: 900;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #4f7531;
}

h1 {
	margin: 0;
	max-width: 820px;
	font-size: clamp(58px, 7.4vw, 118px);
	line-height: 0.88;
	font-weight: 700;
	color: #0e1715;
}

.lead {
	margin: 34px 0 0;
	max-width: 650px;
	font-size: 21px;
	line-height: 1.62;
	color: #4e5b57;
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 42px;
}

.primary-button,
.secondary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 54px;
	padding: 0 30px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 850;
	text-decoration: none;
}

.secondary-button svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.primary-button {
	background: #4f7531;
	color: #fff;
	box-shadow: 0 18px 40px rgba(31, 122, 31, 0.22);
}

.secondary-button {
	background: rgba(255, 255, 255, 0.74);
	border: 1px solid rgba(13, 24, 20, 0.12);
	color: #101a18;
}

.microcopy {
	margin: 19px 0 0;
	font-size: 13px;
	color: #7c8782;
}

.hero-stage {
	position: relative;
	height: 640px;
}

.commerce-window {
	position: absolute;
	right: 4%;
	top: 34px;
	width: 430px;
	height: 560px;
	border-radius: 44px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 38px 90px rgba(16, 26, 22, 0.18);
	transform: rotate(3deg);
}

.commerce-top {
	height: 76px;
	background: #4f7531;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 30px;
}

.commerce-top span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.52);
}

.commerce-banner {
	margin: 30px;
	height: 222px;
	border-radius: 32px;
	background:
		linear-gradient(135deg, rgba(31, 122, 31, 0.84), rgba(246, 181, 61, 0.78)),
		#e8efe8;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px;
	color: #fff;
}

.commerce-banner strong {
	font-size: 36px;
	line-height: 1;
	letter-spacing: -0.055em;
}

.commerce-banner small {
	margin-top: 9px;
	font-size: 13px;
	font-weight: 800;
	opacity: 0.82;
}

.commerce-products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	padding: 0 30px;
}

.commerce-products div {
	height: 116px;
	border-radius: 26px;
	background: #eef3ef;
}

.metric-card,
.ai-card {
	position: absolute;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(13, 24, 20, 0.06);
	box-shadow: 0 24px 60px rgba(16, 26, 22, 0.13);
	backdrop-filter: blur(20px);
}

.metric-card {
	padding: 20px 24px;
	border-radius: 24px;
}

.metric-card strong {
	display: block;
	font-size: 32px;
	line-height: 1;
	letter-spacing: -0.06em;
	color: #0e1715;
}

.metric-card span {
	display: block;
	margin-top: 7px;
	font-size: 13px;
	font-weight: 800;
	color: #58635f;
}

.metric-sales {
	left: 5%;
	top: 170px;
}

.metric-orders {
	right: 0;
	bottom: 100px;
}

.ai-card {
	left: 0;
	bottom: 40px;
	width: 230px;
	padding: 22px;
	border-radius: 28px;
}

.ai-card span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 16px;
	background: #0e1715;
	color: #fff;
	font-weight: 900;
	margin-bottom: 14px;
}

.ai-card strong {
	display: block;
	font-size: 20px;
	line-height: 1.15;
	letter-spacing: -0.04em;
}

.statement {
	padding: 110px 12vw 120px;
	background: #06100e;
	color: #fff;
	border-radius: 42px 42px 0 0;
	margin-top: -42px;
	position: relative;
	z-index: 3;
}

.statement-lines {
	max-width: 1180px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.statement-line {
	display: block;
	font-size: clamp(38px, 4.6vw, 70px);
	line-height: 1.05;
	font-weight: 850;
	letter-spacing: -0.035em;
	color: rgba(255, 255, 255, 0.26);
	transition:
		color 0.35s ease,
		text-shadow 0.35s ease,
		transform 0.35s ease;
}

.statement-line.is-active {
	color: #ffffff;
	text-shadow: 0 0 34px rgba(255, 255, 255, 0.18);
	transform: translateX(8px);
}

.section {
	padding: 120px 12vw;
	background: #fff;
}

.section-head {
	max-width: 850px;
	margin-bottom: 58px;
}

h2 {
	margin: 0;
	font-size: clamp(42px, 4.6vw, 76px);
	line-height: 0.98;
	letter-spacing: -0.03em;
	font-weight: 900;
	color: #0e1715;
}

.section-lead {
	margin: 20px 0 0;
	max-width: 720px;
	font-size: 18px;
	line-height: 1.7;
	color: #59635f;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* Korten stretchar (grid-standard) till samma höjd som den högsta i
   raden i stället för align-items:start — annars slutar ett kortare
   kort högre upp än sina grannar, och den utfällda panelen (som
   börjar exakt vid kortets EGEN nederkant) hamnar då en bit ovanför
   radens nederkant med en synlig vit rand emellan. */
.feature-card {
	position: relative;
	padding: 30px;
	border-radius: 32px;
	background: #f6f8f3;
	border: 1px solid #edf1eb;
	transition: box-shadow 0.25s ease, border-color 0.25s ease, border-radius 0.4s ease;
	outline: none;
	/* Så den fasta headern (.site-header) inte täcker kortets topp när
	   bindFeatureCards() (cartaro-home.js) scrollar dit i mobilen. */
	scroll-margin-top: 112px;
}

/* Nedre hörnen flackas ut vid hover/fokus så kortets egen kant möter
   den utfällda panelens raka överkant sömlöst i stället för att en
   bit av den rundade originalkanten sticker fram under panelen. */
.feature-card:hover,
.feature-card:focus-within {
	border-color: rgba(79, 117, 49, 0.35);
	border-radius: 32px 32px 0 0;
	box-shadow: 0 22px 50px rgba(13, 24, 20, 0.1);
	z-index: 4;
}

.feature-summary {
	position: relative;
	display: block;
	padding-right: 30px;
	cursor: default;
}

.feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 26px;
	border-radius: 16px;
	background: rgba(79, 117, 49, 0.12);
	color: #4f7531;
}

.feature-icon svg {
	width: 24px;
	height: 24px;
}

.feature-copy h3 {
	margin: 0 0 14px;
	font-size: 26px;
	line-height: 1.05;
	letter-spacing: -0.055em;
}

.feature-copy p {
	margin: 0;
	color: #5b6763;
	font-size: 15px;
	line-height: 1.68;
}

.feature-toggle {
	position: absolute;
	top: 4px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(13, 24, 20, 0.05);
	color: #0e1715;
	transition: transform 0.25s ease, background 0.25s ease;
}

.feature-toggle svg {
	width: 15px;
	height: 15px;
}

.feature-card:hover .feature-toggle,
.feature-card:focus-within .feature-toggle {
	transform: rotate(180deg);
	background: rgba(79, 117, 49, 0.16);
	color: #4f7531;
}

/* Fälls ut ovanpå innehållet under (absolut positionerad från kortets
   underkant) i stället för att växa i flödet, så resten av rutnätet
   inte hoppar till när ett kort öppnas vid hover. */
.feature-detail {
	position: absolute;
	left: -1px;
	right: -1px;
	top: 100%;
	margin-top: -1px;
	max-height: 0;
	padding: 0 30px;
	overflow: hidden;
	background: #f6f8f3;
	border: 1px solid rgba(79, 117, 49, 0.35);
	border-top: none;
	border-radius: 0 0 32px 32px;
	box-shadow: 0 22px 50px rgba(13, 24, 20, 0.1);
	opacity: 0;
	pointer-events: none;
	transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}

.feature-card:hover .feature-detail,
.feature-card:focus-within .feature-detail {
	max-height: 420px;
	padding: 22px 30px 30px;
	opacity: 1;
	pointer-events: auto;
}

.feature-detail p {
	margin: 0 0 18px;
	color: #5b6763;
	font-size: 15px;
	line-height: 1.68;
}

.feature-detail ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.feature-detail li {
	position: relative;
	padding-left: 24px;
	font-size: 14.5px;
	font-weight: 650;
	line-height: 1.5;
	color: #17211f;
}

.feature-detail li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4f7531;
	box-shadow: 0 0 0 5px rgba(31, 122, 31, 0.1);
}

/* .split-heading (eyebrow + h2) är en egen grid-cell i stället för
   att bara vara de första raderna i .split-copy — det är det som gör
   det möjligt att lägga den ovanför bilden i mobilen (se
   @media max-width: 700px) utan att sikta med paragrafen/listan
   under, som ska stanna kvar under bilden där. */
.split-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "visual heading" "visual copy";
	gap: 7vw;
	align-items: center;
	padding: 125px 12vw;
	background: #f6f8f3;
}

.split-heading {
	grid-area: heading;
	align-self: end;
}

.split-visual {
	grid-area: visual;
}

.split-copy {
	grid-area: copy;
	align-self: start;
}

.split-visual {
	position: relative;
	min-height: 720px;
	border-radius: 46px;
	overflow: hidden;
}

.split-visual img {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	object-fit: cover;
	object-position: center;
	display: block;
}

.dashboard-card {
	position: absolute;
	left: 12%;
	right: 12%;
	top: 50%;
	transform: translateY(-50%) rotate(-2deg);
	padding: 34px;
	border-radius: 34px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.28);
}

.dashboard-line {
	height: 18px;
	width: 60%;
	border-radius: 999px;
	background: #dfe7df;
	margin-bottom: 18px;
}

.dashboard-line.wide {
	width: 84%;
	background: #4f7531;
}

.dashboard-bars {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	height: 170px;
	margin-top: 36px;
}

.dashboard-bars span {
	flex: 1;
	border-radius: 18px 18px 8px 8px;
	background: linear-gradient(180deg, #4f7531, #a6c76c);
}

.dashboard-bars span:nth-child(1) {
	height: 44%;
}

.dashboard-bars span:nth-child(2) {
	height: 68%;
}

.dashboard-bars span:nth-child(3) {
	height: 52%;
}

.dashboard-bars span:nth-child(4) {
	height: 88%;
}

.split-copy ul {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.split-copy li {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	font-weight: 750;
	color: #17211f;
}

.split-copy li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #4f7531;
	box-shadow: 0 0 0 6px rgba(31, 122, 31, 0.1);
}

.testimonial-section {
	padding: 0 12vw 130px;
	background: #f6f8f3;
}

.testimonial-card {
	position: relative;
	padding: 76px 80px;
	border-radius: 40px;
	background: #06100e;
	background-image: radial-gradient(circle at 12% 0%, rgba(142, 219, 128, 0.12), transparent 40%);
	text-align: center;
	overflow: hidden;
}

.testimonial-quote-mark {
	width: 44px;
	height: 33px;
	margin: 0 auto 28px;
	color: rgba(142, 219, 128, 0.5);
}

.testimonial-card blockquote {
	margin: 0 auto;
	max-width: 80%;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.45;
	font-weight: 650;
	letter-spacing: -0.015em;
	color: #fff;
}

.testimonial-person {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 40px;
}

.testimonial-person img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial-person div {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.testimonial-person strong {
	font-size: 15.5px;
	color: #fff;
}

.testimonial-person span {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.55);
}

.testimonial-person em {
	font-style: normal;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.55);
}

.dark-section {
	padding: 125px 12vw;
	background: #06100e;
	color: #fff;
}

.dark-section h2 {
	color: #fff;
	max-width: 920px;
}

.dark-section .section-lead {
	color: rgba(255, 255, 255, 0.62);
}

.pricing-section {
	padding: 130px 12vw;
	background:
		radial-gradient(circle at 50% 0%, rgba(31, 122, 31, 0.12), transparent 40%),
		#f6f8f3;
}

.section-head.centered {
	margin-left: auto;
	margin-right: auto;
	max-width: 920px;
	text-align: center;
}

.section-head.centered .section-lead {
	margin-left: auto;
	margin-right: auto;
}

.pricing-grid {
	margin-top: 64px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* Hela kortet är en länk till respektive paketsida (/start,
   /business, /enterprice) — pricing-cta är därför en <span> stylad
   som knapp inuti länken, inte en egen nästlad <a>. */
.pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 40px 34px;
	border-radius: 34px;
	background: #fff;
	border: 1px solid #edf1eb;
	box-shadow: 0 20px 50px rgba(13, 24, 20, 0.05);
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pricing-card:hover {
	transform: translateY(-6px);
	border-color: rgba(79, 117, 49, 0.35);
	box-shadow: 0 26px 60px rgba(13, 24, 20, 0.1);
}

.pricing-card.is-featured {
	background: #0e1715;
	border-color: #0e1715;
	transform: translateY(-14px);
	box-shadow: 0 34px 70px rgba(13, 24, 20, 0.24);
}

.pricing-card.is-featured:hover {
	transform: translateY(-18px);
	box-shadow: 0 38px 80px rgba(13, 24, 20, 0.3);
}

.pricing-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	padding: 7px 18px;
	border-radius: 999px;
	background: #4f7531;
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pricing-card-head h3 {
	margin: 0 0 12px;
	font-size: 24px;
	letter-spacing: -0.04em;
	color: #0e1715;
}

.pricing-card.is-featured .pricing-card-head h3 {
	color: #fff;
}

.pricing-card-head p {
	margin: 0;
	min-height: 84px;
	color: #59635f;
	font-size: 14.5px;
	line-height: 1.65;
}

.pricing-card.is-featured .pricing-card-head p {
	color: rgba(255, 255, 255, 0.66);
}

.pricing-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 28px;
}

.pricing-price .amount {
	font-size: 40px;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: #0e1715;
}

.pricing-card.is-featured .pricing-price .amount {
	color: #fff;
}

.pricing-price .period {
	font-size: 15px;
	font-weight: 700;
	color: #7c8782;
}

.pricing-card.is-featured .pricing-price .period {
	color: rgba(255, 255, 255, 0.5);
}

.pricing-fee {
	margin: 8px 0 0;
	font-size: 13.5px;
	font-weight: 800;
	color: #4f7531;
}

.pricing-card.is-featured .pricing-fee {
	color: #8edb80;
}

.pricing-features {
	list-style: none;
	margin: 30px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid rgba(13, 24, 20, 0.08);
	display: grid;
	gap: 13px;
	flex: 1;
}

.pricing-card.is-featured .pricing-features {
	border-top-color: rgba(255, 255, 255, 0.12);
}

.pricing-features li {
	position: relative;
	padding-left: 24px;
	font-size: 14.5px;
	font-weight: 650;
	line-height: 1.5;
	color: #17211f;
}

.pricing-card.is-featured .pricing-features li {
	color: rgba(255, 255, 255, 0.86);
}

.pricing-features li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4f7531;
	box-shadow: 0 0 0 5px rgba(31, 122, 31, 0.1);
}

.pricing-card.is-featured .pricing-features li:before {
	background: #8edb80;
	box-shadow: 0 0 0 5px rgba(142, 219, 128, 0.14);
}

.pricing-cta {
	margin-top: 30px;
	width: 100%;
}

.pricing-card.is-featured .secondary-button.pricing-cta {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.pricing-footnote {
	margin: 56px auto 0;
	max-width: 620px;
	text-align: center;
}

.pricing-footnote h3 {
	margin: 0 0 14px;
	font-size: 24px;
	letter-spacing: -0.03em;
	color: #0e1715;
}

.pricing-footnote p {
	margin: 0;
	color: #59635f;
	font-size: 14.5px;
	line-height: 1.7;
}

.pricing-footnote a {
	font-weight: 800;
	color: #4f7531;
	text-decoration: none;
}

/* Funktionslista ("Allt som ingår, i detalj") */
.features-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 56px 40px;
}

.features-column-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

.features-column-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(79, 117, 49, 0.12);
	color: #4f7531;
}

.features-column-icon svg {
	width: 19px;
	height: 19px;
}

.features-column h3 {
	margin: 0;
	font-size: 19px;
	letter-spacing: -0.03em;
	color: #0e1715;
}

.feature-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid #edf1eb;
}

.features-column-head + .feature-row {
	padding-top: 22px;
}

.feature-row-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.feature-row-text strong {
	font-size: 15px;
	font-weight: 750;
	color: #17211f;
}

.feature-row-text span {
	font-size: 13.5px;
	line-height: 1.55;
	color: #7c8782;
}

.feature-check {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: rgba(79, 117, 49, 0.12);
	color: #4f7531;
}

.feature-check svg {
	width: 12px;
	height: 12px;
}

/* AI & Automation: klickbara accordion-kort till vänster, flytande
   visuell panel till höger. */
.automation-layout {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 60px;
	align-items: start;
}

.automation-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Paddingen ligger på summary (inte på kortet) så att hela den ytan —
   inklusive utrymmet runt ikon/text/pil — är en del av <summary> och
   därmed klickbar för att öppna/stänga, utan att det utfällda
   innehållet nedanför också blir klickbart för att stänga igen. */
.automation-card {
	position: relative;
	padding: 0;
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: background 0.25s ease, border-color 0.25s ease;
	/* Så den fasta headern (.site-header) inte täcker kortets topp när
	   bindAutomationVisual() (cartaro-home.js) scrollar dit i mobilen. */
	scroll-margin-top: 112px;
}

.automation-card:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.16);
}

.automation-card[open] {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(142, 219, 128, 0.3);
	z-index: 3;
}

.automation-card summary {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 54px 22px 24px;
	cursor: pointer;
	list-style: none;
}

.automation-card summary::-webkit-details-marker {
	display: none;
}

.automation-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	color: #8edb80;
}

.automation-icon svg {
	width: 20px;
	height: 20px;
}

.automation-copy {
	flex: 1;
	min-width: 0;
}

.automation-copy h3 {
	margin: 0 0 5px;
	font-size: 17px;
	letter-spacing: -0.03em;
	color: #fff;
}

.automation-copy p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.55);
}

.automation-toggle {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.7);
	transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.automation-toggle svg {
	width: 14px;
	height: 14px;
}

.automation-card[open] .automation-toggle {
	transform: translateY(-50%) rotate(180deg);
	background: rgba(142, 219, 128, 0.18);
	color: #8edb80;
}

.automation-detail {
	/* <details> utan open-attribut döljer sitt innehåll (utom summary)
	   direkt via webbläsarens standard-CSS (display: none) — det hoppar
	   till, ingen transition hinner spela upp. Tvingar display: block
	   här (högre specificitet än webbläsarens details:not([open]) > *)
	   så det är max-height/opacity nedan som styr synligheten i
	   stället, både när ett kort öppnas OCH när ett annat kort stängs
	   av den exklusiva accordion-logiken i bindAutomationVisual(). */
	display: block;
	max-height: 0;
	padding: 0 82px;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}

.automation-card[open] .automation-detail {
	max-height: 320px;
	opacity: 1;
	padding-top: 16px;
	padding-bottom: 22px;
}

.automation-detail p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
}

.automation-detail ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.automation-detail li {
	position: relative;
	padding-left: 20px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.automation-detail li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8edb80;
}

/* Sticky tills man scrollat förbi hela AI & Automation-stycket —
   .automation-layout har align-items: start, vilket krävs för att en
   sticky-position ska fungera i en grid-kolumn (annars sträcks kolumnen
   till radens fulla höjd och sticky får inget att "fastna" mot). */
.automation-visual {
	position: sticky;
	top: 112px;
	min-height: 560px;
	border-radius: 40px;
	background: #0c1613;
	border: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

/* Sex "scener" staplas ovanpå varandra och korsblendas mjukt beroende
   på vilket automation-card som är öppet — se bindAutomationVisual()
   i cartaro-home.js. Varje scen har en egen bakgrundsbild (ett
   mörknings-lager läggs på ovanpå fotot för kontrast) i stället för
   den tidigare enfärgade gröna bakgrunden, plus tre flytande bubblor
   ovanpå — se scen-specifika bilder nedan. */
.automation-scene {
	position: absolute;
	inset: 0;
	padding: 40px;
	opacity: 0;
	background-size: cover;
	background-position: center;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.automation-scene.is-active {
	opacity: 1;
}

.automation-scene[data-scene="campaigns"] {
	background-image: linear-gradient(180deg, rgba(8, 17, 15, 0.35), rgba(8, 17, 15, 0.72)), url("https://assets.cartaro.se/cartaro-assets/static/images/cartaro-images/automation-section-cartaro-smarter-campaigns.webp");
}

.automation-scene[data-scene="copy"] {
	background-image: linear-gradient(180deg, rgba(8, 17, 15, 0.35), rgba(8, 17, 15, 0.72)), url("https://assets.cartaro.se/cartaro-assets/static/images/cartaro-images/automation-section-cartaro-product-copy.webp");
}

.automation-scene[data-scene="workflows"] {
	background-image: linear-gradient(180deg, rgba(8, 17, 15, 0.35), rgba(8, 17, 15, 0.72)), url("https://assets.cartaro.se/cartaro-assets/static/images/cartaro-images/automation-section-cartaro-workflows.webp");
}

.automation-scene[data-scene="insights"] {
	background-image: linear-gradient(180deg, rgba(8, 17, 15, 0.35), rgba(8, 17, 15, 0.72)), url("https://assets.cartaro.se/cartaro-assets/static/images/cartaro-images/automation-section-cartaro-predictive-insights.webp");
}

.automation-scene[data-scene="segmentation"] {
	background-image: linear-gradient(180deg, rgba(8, 17, 15, 0.35), rgba(8, 17, 15, 0.72)), url("https://assets.cartaro.se/cartaro-assets/static/images/cartaro-images/automation-section-cartaro-customer-segmentation.webp");
}

.automation-scene[data-scene="support"] {
	background-image: linear-gradient(180deg, rgba(8, 17, 15, 0.35), rgba(8, 17, 15, 0.72)), url("https://assets.cartaro.se/cartaro-assets/static/images/cartaro-images/automation-section-cartaro-automated-customer-service.webp");
}

/* Riktiga "bubblor" i stället för raka kort: stort, organiskt
   avrundade hörn (olika radie per hörn ger en mjuk, ombubblad form),
   markant större än tidigare, med en lätt studsande float-loop. */
.automation-bubble {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 270px;
	padding: 28px 30px;
	border-radius: 42px 38px 46px 34px;
	background: rgba(255, 255, 255, 0.97);
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: #0e1715;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
	animation: automationFloat 6s ease-in-out infinite;
}

.automation-bubble strong {
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.automation-bubble span {
	font-size: 14.5px;
	line-height: 1.5;
	color: #5b6763;
}

.automation-bubble-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 4px;
	border-radius: 16px;
	background: rgba(79, 117, 49, 0.12);
	color: #4f7531;
}

.automation-bubble-icon svg {
	width: 22px;
	height: 22px;
}

.automation-bubble-a {
	left: 6%;
	top: 8%;
	border-radius: 44px 40px 48px 36px;
	animation-delay: 0s;
}

.automation-bubble-b {
	right: 5%;
	top: 40%;
	max-width: 230px;
	border-radius: 42px 52px 38px 50px;
	animation-delay: 0.9s;
}

.automation-bubble-b strong {
	font-size: 26px;
	color: #4f7531;
}

.automation-bubble-c {
	left: 10%;
	bottom: 7%;
	border-radius: 36px 48px 34px 46px;
	animation-delay: 1.8s;
}

@keyframes automationFloat {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-12px) rotate(-0.6deg);
	}
}

@media (prefers-reduced-motion: reduce) {

	.automation-bubble {
		animation: none;
	}

}

/* Kontaktsidan */
/* Ljus, beige hero i stället för mörkgrön botten — matchar resten av
   sajtens ljusa sektioner (samma bakgrundston som body) i stället för
   att kännas som en egen, hårt avgränsad mörk yta. */
.contact-hero {
	position: relative;
	padding: 190px 12vw 90px;
	background: #f6f8f3;
	color: #0e1715;
	text-align: center;
	overflow: hidden;
}

.contact-hero-glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 0%, rgba(79, 117, 49, 0.08), transparent 45%);
}

.contact-hero .eyebrow,
.contact-hero h1,
.contact-hero .lead,
.contact-hero-links {
	position: relative;
}

.contact-hero h1 {
	margin: 0 auto;
	max-width: 720px;
	font-size: clamp(38px, 4.6vw, 64px);
	line-height: 1.04;
	font-weight: 900;
	letter-spacing: -0.03em;
}

.contact-hero .lead {
	margin: 24px auto 0;
	max-width: 560px;
	color: #59635f;
	font-size: 18px;
}

.contact-hero-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}

.contact-hero-links a {
	padding: 10px 20px;
	border-radius: 999px;
	background: rgba(79, 117, 49, 0.08);
	border: 1px solid rgba(79, 117, 49, 0.18);
	color: #0e1715;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.contact-hero-links a:hover {
	background: rgba(79, 117, 49, 0.14);
	border-color: rgba(79, 117, 49, 0.3);
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 80px 12vw 40px;
	background: #f6f8f3;
}

.contact-card {
	display: block;
	padding: 34px;
	border-radius: 28px;
	background: #fff;
	border: 1px solid #edf1eb;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

a.contact-card:hover {
	transform: translateY(-4px);
	border-color: rgba(79, 117, 49, 0.35);
	box-shadow: 0 22px 50px rgba(13, 24, 20, 0.08);
}

.contact-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border-radius: 16px;
	background: rgba(79, 117, 49, 0.12);
	color: #4f7531;
}

.contact-card-icon svg {
	width: 22px;
	height: 22px;
}

.contact-card h3 {
	margin: 0 0 8px;
	font-size: 18px;
	letter-spacing: -0.03em;
	color: #0e1715;
}

.contact-card p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: #5b6763;
}

/* scroll-margin-top gör att "Skicka ett meddelande"-länken (och andra
   ankarlänkar hit) inte scrollar sektionen ända upp under den fasta
   headern (92px, se .site-header) — annars hamnar eyebrow-texten
   gömd bakom den. */
.contact-form-section {
	padding: 40px 12vw 130px;
	background: #f6f8f3;
	scroll-margin-top: 112px;
}

.contact-form-banner {
	max-width: 640px;
	margin: 0 auto 28px;
	padding: 16px 22px;
	border-radius: 16px;
	font-size: 14.5px;
	line-height: 1.6;
}

.contact-form-banner-success {
	background: rgba(79, 117, 49, 0.12);
	color: #38551f;
	border: 1px solid rgba(79, 117, 49, 0.25);
}

.contact-form-banner-error {
	background: rgba(214, 69, 69, 0.1);
	color: #8a2b2b;
	border: 1px solid rgba(214, 69, 69, 0.25);
}

.contact-form-banner ul {
	margin: 0;
	padding-left: 18px;
}

.contact-form {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	padding: 34px 44px 56px;
	border-radius: 36px;
	background: #fff;
	border: 1px solid #edf1eb;
	box-shadow: 0 30px 70px rgba(13, 24, 20, 0.06);
}

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

.contact-form-group {
	padding: 30px 0;
	border-bottom: 1px solid #edf1eb;
}

.contact-form-group:first-of-type {
	padding-top: 0;
}

.contact-form-group h3 {
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #4f7531;
}

.contact-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* Moderna "flytande" etiketter: platshållartexten är bara ett
   mellanslag (placeholder=" " i markupen) så :placeholder-shown alltid
   går att lita på för att avgöra om fältet är tomt. Etiketten ligger
   normalt centrerad över platshållaren och glider upp till en liten
   text i fältets överkant vid fokus eller när fältet har ett värde. */
.field-float {
	position: relative;
	margin-bottom: 22px;
}

.contact-form-group .field-float:last-child {
	margin-bottom: 0;
}

.field-float input,
.field-float textarea {
	width: 100%;
	padding: 25px 18px 11px;
	border-radius: 14px;
	border: 1px solid #dfe6df;
	background: #f6f8f3;
	font-family: inherit;
	font-size: 15px;
	color: #0e1715;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.field-float textarea {
	resize: vertical;
	min-height: 170px;
	padding-top: 30px;
}

/* Vilopositionen ligger vertikalcentrerad i faltet (inte ett fast
   avstand fran toppen) sa den ser ratt ut oavsett faltets hojd.
   Textarean ar flerradig och ska i stallet ha etiketten kvar
   upptill, se overridern nedan. */
.field-float label {
	position: absolute;
	left: 19px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: #7c8782;
	pointer-events: none;
	transition: top 0.16s ease, font-size 0.16s ease, color 0.16s ease, font-weight 0.16s ease, transform 0.16s ease;
}

.field-float textarea ~ label {
	top: 19px;
	transform: none;
}

.field-float input:focus,
.field-float textarea:focus {
	outline: none;
	border-color: rgba(79, 117, 49, 0.5);
	background: #fff;
}

.field-float input:focus ~ label,
.field-float input:not(:placeholder-shown) ~ label,
.field-float textarea:focus ~ label,
.field-float textarea:not(:placeholder-shown) ~ label {
	top: 10px;
	transform: none;
	font-size: 11.5px;
	font-weight: 800;
	color: #4f7531;
}

/* Dämpad varningston i stället för mättat rött mot rosa bakgrund — en
   tunn, lite genomskinlig kant och en mjukare textfärg räcker för att
   synas utan att kännas alarmerande. */
.field-float.has-error input,
.field-float.has-error textarea {
	border-color: rgba(196, 64, 64, 0.4);
	background: rgba(196, 64, 64, 0.04);
}

.field-float.has-error input:focus ~ label,
.field-float.has-error input:not(:placeholder-shown) ~ label,
.field-float.has-error textarea:focus ~ label,
.field-float.has-error textarea:not(:placeholder-shown) ~ label {
	color: #b6483f;
}

.field-error {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 650;
	line-height: 1.4;
	color: #b6483f;
}

.field-error:empty {
	display: none;
}

.field-select {
	margin-bottom: 22px;
}

.field-select label {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	font-weight: 750;
	color: #17211f;
}

/* Egen-designad dropdown (samma mönster som adminpanelens
   CustomSelect) — byggs av bindCustomSelects()/enhanceCustomSelect()
   i cartaro-home.js. Den riktiga <select> ligger kvar dold i DOM:en
   och bär formulärvärdet. */
.custom-select {
	position: relative;
}

.custom-select-native {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.custom-select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 14px 18px;
	border-radius: 14px;
	border: 1px solid #dfe6df;
	background: #f6f8f3;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #0e1715;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.custom-select-trigger:hover {
	border-color: rgba(79, 117, 49, 0.3);
}

/* Så länge inget verkligt val gjorts (den tomma platshållar-optionen)
   ska texten kännas som en platshållare — tunn och grå — i stället för
   att se ut som ett redan ifyllt fält. Sätts av CustomSelect i JS när
   select.value är tomt, se enhanceCustomSelect(). */
.custom-select-trigger.is-placeholder {
	font-weight: 500;
	color: #7c8782;
}

.custom-select.is-open .custom-select-trigger {
	border-color: rgba(79, 117, 49, 0.5);
	background: #fff;
}

.custom-select-label {
	flex: 1;
	min-width: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.custom-select-chevron {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: #7c8782;
	transition: transform 0.18s ease;
}

.custom-select.is-open .custom-select-chevron {
	transform: rotate(180deg);
	color: #4f7531;
}

.custom-select-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 260px;
	overflow-y: auto;
	padding: 6px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid #edf1eb;
	box-shadow: 0 24px 55px rgba(13, 24, 20, 0.16);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.14s ease, transform 0.14s ease;
}

.custom-select.is-open .custom-select-menu {
	opacity: 1;
	transform: translateY(0);
}

.custom-select-option {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 650;
	text-align: left;
	color: #374542;
	cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option:focus-visible {
	background: #f6f8f3;
	color: #0e1715;
	outline: none;
}

.custom-select-option.is-active {
	color: #4f7531;
	font-weight: 800;
}

.contact-form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 28px;
	cursor: pointer;
}

.contact-form-checkbox input {
	flex-shrink: 0;
	width: 19px;
	height: 19px;
	margin-top: 2px;
	accent-color: #4f7531;
	cursor: pointer;
}

.contact-form-checkbox span {
	font-size: 13.5px;
	line-height: 1.6;
	color: #5b6763;
}

.contact-form-checkbox a {
	font-weight: 750;
	color: #4f7531;
	text-decoration: none;
}

.contact-form-checkbox + .field-error {
	margin-top: 8px;
}

.contact-form-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 26px;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.contact-form-submit:disabled {
	cursor: default;
	opacity: 0.85;
}

.contact-form-spinner {
	display: none;
	width: 18px;
	height: 18px;
	margin-left: 10px;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	animation: contactFormSpin 0.7s linear infinite;
}

.contact-form-submit.is-loading .contact-form-submit-label {
	opacity: 0.75;
}

.contact-form-submit.is-loading .contact-form-spinner {
	display: inline-block;
}

@keyframes contactFormSpin {
	to {
		transform: rotate(360deg);
	}
}

/* Formulärets banners (success/error) döljs/visas smidigt av JS via
   [hidden] i stället för att sidan laddas om. */
.contact-form-banner[hidden] {
	display: none;
}

.contact-form-banner-success {
	animation: contactFormFadeIn 0.35s ease both;
}

@keyframes contactFormFadeIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.contact-form-note {
	margin: 20px 0 0;
	text-align: center;
	font-size: 13.5px;
	color: #7c8782;
}

.contact-form-note a {
	font-weight: 750;
	color: #4f7531;
	text-decoration: none;
}

.site-footer {
	padding: 90px 12vw 0;
	background: #06100e;
	color: rgba(255, 255, 255, 0.7);
}

.footer-top {
	display: grid;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	gap: 40px;
	padding-bottom: 64px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand {
	display: flex;
	align-items: flex-start;
}

.footer-logo-icon {
	height: 40px;
	width: auto;
	display: block;
}

.footer-column {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.footer-column h4 {
	margin: 0 0 8px;
	font-size: 12.5px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.38);
}

.footer-column a {
	font-size: 14.5px;
	font-weight: 650;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-column a:hover {
	color: #8edb80;
}

.footer-column address {
	margin: 0;
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
}

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 26px 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.34);
}

.footer-bottom-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.footer-bottom-meta address {
	font-style: normal;
}

.footer-bottom-meta a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-bottom-meta a:hover {
	color: #8edb80;
}

.footer-social-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-social-row {
	display: flex;
	gap: 10px;
}

.footer-social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.75);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer-social-btn:hover {
	background: #8edb80;
	border-color: #8edb80;
	color: #000;
	transform: translateY(-2px);
}

.footer-social-btn svg {
	width: 18px;
	height: 18px;
}

/* Ikonerna ritas med fill="currentColor" som ett presentations-
   attribut i markupen (lägst tänkbara prioritet), men sätter man
   ändå bara :hover-läget ovan har det setts hänga kvar ljusgrönt mot
   den ljusgröna hover-bakgrunden i vissa lägen (cache av äldre CSS).
   Sätter fill rakt av på svg:en här också som ett extra skyddsnät —
   samma svarta färg oavsett hur currentColor råkar lösas ut. */
.footer-social-btn:hover svg {
	fill: #000;
}

@media (max-width: 1100px) {
	.site-nav {
		display: none;
	}

	.hero {
		grid-template-columns: 1fr;
		padding: 145px 7vw 80px;
	}

	.hero-stage {
		display: none;
	}

	.feature-grid {
		grid-template-columns: 1fr 1fr;
	}

	.split-section {
		grid-template-columns: 1fr;
		grid-template-areas: "heading" "visual" "copy";
	}

	.pricing-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}

	.pricing-card.is-featured {
		transform: none;
		order: -1;
	}

	.footer-top {
		grid-template-columns: 1fr 1fr;
		row-gap: 46px;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}

	.features-columns {
		grid-template-columns: 1fr 1fr;
	}

	.automation-layout {
		grid-template-columns: 1fr;
	}

	/* Listan och visualen ligger staplade i en kolumn här i stället för
	   sida vid sida — sticky ger då ingen mening (och skulle bara få
	   visualen att krocka med listan under), så den stängs av. */
	.automation-visual {
		position: static;
		min-height: 420px;
	}

	.automation-bubble {
		max-width: 220px;
		padding: 22px 24px;
	}

	.automation-bubble-b {
		max-width: 190px;
	}

	.contact-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin: 0 auto;
	}
}

@media (max-width: 700px) {
	/* Visualen (bilderna bakom automation-korten) + dess tre flytande
	   bubblor tillför inget i mobilen — den staplas bara ovanpå/under
	   korten utan sin sticky-positionering (se .automation-visual i
	   1100px-brytpunkten ovan) och bubblorna hamnar synligt längst upp
	   på sidan. Göms helt i stället för att bara döljas visuellt. */
	.automation-visual {
		display: none;
	}

	.site-header {
		height: 76px;
		padding: 0 22px;
	}

	/* När man scrollat blir headern en flytande, rundad "pill" med luft
	   runt om i stället för en helbred remsa — samma idé som adminpanelens
	   .dashboard-header.is-compact (dashboard-root.css). Bakgrund/blur
	   ligger på en egen ::after i stället för direkt på .site-header
	   (som annars ärver bas-regelns backdrop-filter) — precis som i
	   adminpanelen, av samma skäl: backdrop-filter på själva den fixed-
	   positionerade headern skapar ett eget containing block för
	   position: fixed-barn, vilket skulle låsa ::before nedan (den som
	   ska sudda REMSAN OVANFÖR pillen, ut till skärmens egna kanter)
	   fast vid pillens egen, indragna box i stället för hela viewporten. */
	.site-header.is-scrolled {
		top: 8px;
		left: 8px;
		right: 8px;
		height: 48px;
		padding: 0 8px 0 16px;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
		border-radius: 14px;
		border-bottom: none;
		transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.site-header.is-scrolled > * {
		position: relative;
		z-index: 1;
	}

	/* Pillens egen bakgrund/sudd/skugga — se kommentaren ovan för varför
	   den ligger här och inte direkt på .site-header.is-scrolled. */
	.site-header.is-scrolled::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: rgba(6, 16, 14, 0.88);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		box-shadow: 0 6px 18px rgba(13, 24, 20, 0.12);
		z-index: 0;
		pointer-events: none;
	}

	/* Suddar REMSAN mellan skärmens absoluta topp och pillens 10px-
	   marginal (samt en bit av pillen själv, för en mjuk urtoning i
	   stället för en hård kant) — annars syns det som scrollar förbi
	   där skarpt, oavsett hur suddig pillen längre ner är. Fast
	   positionerad relativt VIEWPORTEN (se kommentaren ovan om varför
	   .site-header.is-scrolled inte själv får ha backdrop-filter). */
	.site-header.is-scrolled::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 72px;
		background: rgba(6, 16, 14, 0.3);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
		z-index: -1;
		pointer-events: none;
	}

	/* Pillen är nu mörk (::after ovan) i stället för ljus, så loggan och
	   hamburgarikonen ska förbli i sin ljusa/vita variant i mobilen även
	   efter scroll — annars försvinner de mot den mörka bakgrunden (den
	   ljusa varianten/svarta ikonen är bara tänkt för skrivbordets
	   ljusa, kantlösa is-scrolled-remsa). */
	.site-header.is-scrolled .brand img.dark-theme {
		display: block;
	}

	.site-header.is-scrolled .brand img.light-theme {
		display: none;
	}

	/* Ingen rund bakgrund bakom hamburgarikonen i den hopdragna pillen —
	   känns tightare/lättare mot den redan runda pillen runt om. Lite
	   mindre knapp av samma skäl. */
	.site-header.is-scrolled .mobile-nav-toggle {
		width: 30px;
		height: 30px;
		background: transparent;
		color: #fff;
	}

	.site-header.is-scrolled .mobile-nav-toggle svg {
		width: 19px;
		height: 19px;
	}

	.site-header.is-scrolled .brand img {
		height: 15px;
	}

	/* Samma 18px som welcome-sidans logga på den här bredden, se
	   cartaro-site/www/partials/site.css @media max-width: 640px. */
	.brand img {
		height: 18px;
	}

	/* Samma specificitet som .header-actions .login-link (basstilen)
	   krävs för att faktiskt vinna över den — .mobile-nav-actions
	   .login-link (textlänken i mobilmenyn) är opåverkad. */
	.header-actions .login-link {
		display: none;
	}

	/* "Kom igång" i själva headern ersätts av hamburgarknappen — den
	   finns kvar inne i .mobile-nav-actions i stället, se markupen. */
	.header-actions > .header-button {
		display: none;
	}

	.mobile-nav-toggle {
		display: inline-flex;
	}

	/* Heltäckande meny — täcker numera även headern (fixed, top: 0,
	   högre z-index än .site-headers 100) i stället för att bara
	   hänga under den, med en grönaktig bakgrund i linje med resten av
	   sajtens mörka sektioner (.hero, .automation-section) i stället
	   för den tidigare vita panelen. En egen loggan+stäng-rad
	   (.mobile-nav-topbar) ersätter då headern visuellt medan menyn är
	   öppen. Allt är tajtat (paddings/font-storlekar/gap nedan) så hela
	   menyn — logga, länkar, knappar OCH språkväljaren — får plats i en
	   vanlig mobilskärm utan att man behöver scrolla; overflow-y: auto
	   finns kvar som skyddsnät på riktigt korta skärmar. */
	.mobile-nav {
		top: 0;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		z-index: 150;
		display: flex;
		flex-direction: column;
		padding: 18px 22px;
		background: #0c1712;
		background-image: radial-gradient(circle at 18% 0%, rgba(142, 219, 128, 0.14), transparent 45%);
		box-shadow: none;
		overflow-y: auto;
	}

	.mobile-nav[hidden] {
		display: none;
	}

	/* Ersätter headern visuellt medan menyn är öppen — samma logga,
	   plus stäng-knappen som gör att man inte behöver headerns egen
	   hamburgarknapp (den ligger ju kvar UNDER den heltäckande menyn
	   nu) för att komma därifrån. Ligger kvar i det vanliga flödet
	   (inte absolut positionerad) så den centrerade resten av menyn
	   (justify-content: center ovan) alltid har rätt utrymme kvar och
	   aldrig kan hamna bakom/under den. */
	.mobile-nav-topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		margin: -18px -22px 22px;
		height: 76px;
		padding: 0 22px;
	}

	.mobile-nav-topbar .brand img {
		height: 18px;
	}

	.mobile-nav-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
		cursor: pointer;
	}

	.mobile-nav-links {
		gap: 0;
		margin-bottom: 10px;
	}

	.mobile-nav-links a {
		padding: 11px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		font-size: 18px;
		font-weight: 800;
		letter-spacing: -0.01em;
		color: #fff;
		transition: color 0.15s ease;
	}

	.mobile-nav-links a:hover {
		color: #8edb80;
	}

	/* Utan justify-content: center på .mobile-nav (borttaget ovan, se
	   kommentaren där) ligger loggan/stäng-knappen nu exakt där
	   headerns egen logga sitter i stället för mitt på skärmen —
	   margin-top: auto här trycker i stället ner både knapparna OCH
	   språkväljaren (.mobile-nav-footer, kommer efter i flödet) till
	   botten, oavsett hur många länkar .mobile-nav-links råkar ha. */
	.mobile-nav-actions {
		gap: 8px;
		margin-top: auto;
	}

	.mobile-nav-actions .login-link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 13px 6px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.12);
		color: #fff;
	}

	.mobile-nav-actions .header-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: auto;
		padding: 13px 6px;
	}

	/* Språkväljaren längst ner till höger i menyn — se markupen
	   (.mobile-nav-footer, andra include av language-switcher.php med
	   $languageSwitcherOpenUp). */
	.mobile-nav-footer {
		display: flex;
		justify-content: flex-end;
		margin-top: 14px;
	}

	.mobile-nav-footer .lang-switcher-toggle {
		height: 38px;
		padding: 0 14px;
		border-radius: 999px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
	}

	.mobile-nav-footer .lang-switcher-toggle:hover {
		background: rgba(255, 255, 255, 0.14);
	}

	/* Ingen pil på språkväljaren i mobilmenyn heller (bara flaggan) —
	   samma önskemål som redan gäller footerns instans (.site-footer
	   .lang-chevron). */
	.mobile-nav-footer .lang-chevron {
		display: none;
	}

	.hero {
		padding: 115px 24px 70px;
	}

	/* Samma sak som i landscape-läget (se @media orientation: landscape
	   längre ner) — rundade hörn känns bara som ett hack i mobilvyn i
	   stället för en sömlös övergång. */
	.statement {
		border-radius: 0;
	}

	h1 {
		font-size: 48px;
	}

	.lead {
		font-size: 18px;
	}

	.hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.primary-button,
	.secondary-button {
		width: 100%;
	}

	.statement,
	.section,
	.split-section,
	.dark-section,
	.pricing-section,
	.testimonial-section {
		padding-left: 24px;
		padding-right: 24px;
	}

	.statement,
	.section,
	.split-section,
	.dark-section,
	.pricing-section,
	.testimonial-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.site-footer {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.testimonial-card {
		padding: 50px 28px;
	}

	.testimonial-person {
		flex-direction: column;
		text-align: center;
	}

	.testimonial-person div {
		text-align: center;
	}

	.feature-grid {
		grid-template-columns: 1fr;
	}

	/* Mindre padding/ikon/text på feature-korten i porträttläget också
	   — kortet är visserligen fullbrett här, men 30px padding och en
	   52px-ikon kändes onödigt tilltaget mot resten av den tajtade
	   mobilanpassningen. */
	.feature-card,
	.feature-card:hover,
	.feature-card:focus-within {
		padding: 22px;
		border-radius: 24px;
	}

	.feature-card.is-open {
		border-radius: 24px;
	}

	.feature-icon {
		width: 42px;
		height: 42px;
		margin-bottom: 18px;
		border-radius: 14px;
	}

	.feature-icon svg {
		width: 20px;
		height: 20px;
	}

	.feature-toggle {
		width: 24px;
		height: 24px;
	}

	.feature-toggle svg {
		width: 13px;
		height: 13px;
	}

	.feature-copy h3 {
		margin-bottom: 10px;
		font-size: 21px;
	}

	.feature-copy p {
		font-size: 14px;
	}

	/* margin matchar kortets nya 22px-padding (se .feature-card ovan) —
	   se motsvarande resonemang i landscape-blocket längre ner om
	   varför den måste matcha exakt. */
	.feature-detail {
		margin: 0 -22px;
		padding: 0 22px;
		border-radius: 0 0 24px 24px;
	}

	.feature-card:hover .feature-detail,
	.feature-card:focus-within .feature-detail {
		padding: 0 22px;
	}

	.feature-card.is-open .feature-detail {
		padding: 18px 22px 22px;
	}

	.feature-detail p {
		font-size: 14px;
	}

	.feature-detail li {
		font-size: 13.5px;
	}

	.pricing-card.is-featured {
		transform: none;
	}

	.site-footer {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* "Cartaro" och "Resurser" (de två första .footer-column) delar en
	   rad 50/50, "Följ oss" (sista .footer-column) tar sedan en egen
	   hel rad under dem — i stället för att alla fyra staplas i en
	   enda kolumn. */
	.footer-top {
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
		row-gap: 36px;
	}

	.footer-brand,
	.footer-column:last-of-type {
		grid-column: 1 / -1;
	}

	/* Ikon-knapparna för sociala medier på en rad i stället för två —
	   varje .footer-social-row (2 knappar) hamnar bredvid varandra i
	   stället för under, så det blir 4 i rad totalt. */
	.footer-social-buttons {
		flex-direction: row;
		flex-wrap: wrap;
	}

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

	/* Mobilen har redan en språkväljare i den heltäckande menyn
	   (.mobile-nav-footer) — footerns instans (desktop, se markupen)
	   göms här i stället för att visa samma väljare två gånger. */
	.site-footer .lang-switcher {
		display: none;
	}

	.footer-logo-icon {
		height: 32px;
	}

	.features-columns {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.automation-card summary {
		flex-wrap: wrap;
		padding: 20px 46px 20px 20px;
	}

	.automation-toggle {
		right: 20px;
	}

	.automation-detail {
		padding: 0 20px;
	}

	.automation-card[open] .automation-detail {
		padding-top: 14px;
		padding-bottom: 20px;
	}

	.automation-visual {
		min-height: 360px;
	}

	.automation-scene {
		padding: 20px;
	}

	.automation-bubble {
		max-width: 175px;
		padding: 18px 20px;
		border-radius: 30px 26px 32px 24px;
		gap: 5px;
	}

	.automation-bubble strong {
		font-size: 15px;
	}

	.automation-bubble span {
		font-size: 12px;
	}

	.automation-bubble-icon {
		width: 36px;
		height: 36px;
		border-radius: 12px;
	}

	.automation-bubble-icon svg {
		width: 17px;
		height: 17px;
	}

	.automation-bubble-b {
		max-width: 160px;
		border-radius: 32px 40px 28px 38px;
	}

	.automation-bubble-b strong {
		font-size: 20px;
	}

	.contact-hero {
		padding: 150px 24px 70px;
	}

	.contact-grid {
		padding: 60px 24px 0;
	}

	.contact-form-section {
		padding: 40px 24px 90px;
		scroll-margin-top: 96px;
	}

	.contact-form {
		padding: 30px 22px;
	}

	.contact-form-row {
		grid-template-columns: 1fr;
	}

	h2 {
		font-size: 34px;
	}

	.eyebrow {
		line-height: 1.5;
	}

	/* Feature-korten (platform-sektionen) hade bara ett hover/fokus-läge,
	   vilket dels inte går att "hovra" med fingret, dels kan fastna i
	   fokus-läge efter ett tryck. En riktig öppna/stäng-toggle styrd av
	   klass (satt av klick-lyssnaren i cartaro-home.js) ersätter det i
	   mobilen — se .feature-card.is-open nedan. Panelen ligger dessutom
	   kvar i flödet (position: relative i stället för absolute) så att
	   resten av rutnätet flyttas ner i stället för att täckas över. */
	.feature-card:hover,
	.feature-card:focus-within {
		border-color: #edf1eb;
		border-radius: 32px;
		box-shadow: none;
		z-index: auto;
	}

	.feature-card.is-open {
		border-color: rgba(79, 117, 49, 0.35);
		box-shadow: 0 22px 50px rgba(13, 24, 20, 0.1);
	}

	.feature-summary {
		cursor: pointer;
	}

	.feature-card:hover .feature-toggle,
	.feature-card:focus-within .feature-toggle {
		transform: none;
		background: rgba(13, 24, 20, 0.05);
		color: #0e1715;
	}

	.feature-card.is-open .feature-toggle {
		transform: rotate(180deg);
		background: rgba(79, 117, 49, 0.16);
		color: #4f7531;
	}

	/* Bas-CSS:n bredar ut panelen till kortets EGNA kanter med
	   left/right: -1px (den är absolut positionerad där, oberoende av
	   kortets 30px-padding). Här ligger den kvar i normala flödet i
	   stället — då hamnar den i stället INNANFÖR kortets padding om
	   den inte får en negativ marginal som exakt matchar den paddingen,
	   annars ser den ut som en indragen ruta med synliga sidkanter
	   (border) i stället för att kännas som en sömlös fortsättning av
	   kortet. */
	.feature-detail {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		margin: 0 -30px;
		border: none;
		border-radius: 0 0 32px 32px;
		/* Bas-CSS:ns box-shadow (tänkt för panelen som ett eget flytande
		   lager OVANPÅ resten av rutnätet) syns som en konstig, ljus
		   skugglinje rakt över skarven mot .feature-summary här — den
		   ligger ju kvar i kortets EGNA bakgrund nu, ingen egen skugga
		   behövs (kortet har redan sin på .feature-card.is-open). */
		box-shadow: none;
	}

	.feature-card:hover .feature-detail,
	.feature-card:focus-within .feature-detail {
		max-height: 0;
		padding: 0 30px;
		opacity: 0;
		pointer-events: none;
	}

	.feature-card.is-open .feature-detail {
		max-height: 800px;
		padding: 22px 30px 30px;
		opacity: 1;
		pointer-events: auto;
	}

	/* Eyebrow + h2 (.split-heading) hamnar ovanför bilden i stället för
	   ovanför brödtexten/listan under den, se grid-template-areas på
	   .split-section (basstilen + 1100px-brytpunkten ovan) — samma
	   ordning gäller redan där, det här behöver bara bildens egen
	   höjd. */
	.split-visual {
		min-height: 280px;
	}

	.testimonial-card blockquote {
		max-width: 100%;
		font-size: 19px;
	}
}

/* Integritetspolicy (legal.php) — samma header/footer som resten av
   sajten (cartaro.php), bara innehållet i legal-shell/legal-card är
   sidspecifikt. */
.legal-shell {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 150px 12vw 100px;
}

/* Utan header/footer (inte inloggad via /login, se legal.php) behövs
   inte det extra utrymmet upptill som annars reserverar plats åt den
   fasta headern. */
.legal-page.no-chrome .legal-shell {
	padding-top: 60px;
}

.legal-card {
	background: #ffffff;
	border-radius: 32px;
	border: 1px solid #edf1eb;
	box-shadow: 0 24px 60px rgba(13, 24, 20, 0.06);
	padding: 56px;
	font-size: 16px;
	line-height: 1.7;
}

.legal-card .eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #4f7531;
}

.legal-card h1 {
	margin: 0;
	font-size: 46px;
	line-height: 1.05;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: #0e1715;
}

.legal-card .legal-updated {
	margin: 14px 0 0;
	color: #7c8782;
}

.legal-card .intro {
	margin: 22px 0 0;
	font-size: 17px;
	line-height: 1.75;
	color: #59635f;
}

.legal-card section {
	margin-top: 36px;
	padding-top: 36px;
	border-top: 1px solid #edf1eb;
}

.legal-card h2 {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 1.35;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #0e1715;
}

.legal-card p,
.legal-card li {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.8;
	color: #59635f;
	word-break: break-word;
}

.legal-card a {
	color: #4f7531;
	font-weight: 700;
	text-decoration: none;
}

.legal-card a:hover {
	text-decoration: underline;
}

.legal-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
}

.legal-table th,
.legal-table td {
	text-align: left;
	padding: 10px 12px;
	border: 1px solid #edf1eb;
	font-size: 14px;
	vertical-align: top;
}

.legal-table th {
	background: #f6f8f3;
}

.legal-card address {
	font-style: normal;
	line-height: 1.7;
	margin: 12px 0;
}

.legal-card h3 {
	margin: 18px 0 6px;
	font-size: 15px;
	color: #0e1715;
}

@media (max-width: 700px) {
	.legal-shell {
		padding: 130px 24px 70px;
	}

	.legal-page.no-chrome .legal-shell {
		padding-top: 40px;
	}

	.legal-card {
		padding: 34px 24px;
		border-radius: 24px;
		font-size: 15px;
		line-height: 1.65;
	}

	.legal-card h1 {
		font-size: 30px;
	}

	.legal-card h2 {
		font-size: 18px;
	}

	.legal-card .intro {
		font-size: 16px;
	}

	.legal-table th,
	.legal-table td {
		padding: 8px;
		font-size: 13px;
	}
}

/* Paketsidorna (/start, /business, /enterprice) — hero-bilden sätts
   inline per sida (style="background-image") från plan_image i
   plans.php, se plan.php. Mörkningslagret (.plan-hero-glow) ligger
   ovanpå för att texten ska gå att läsa mot fotot. */
.plan-hero {
	position: relative;
	min-height: 680px;
	padding: 220px 12vw 110px;
	background-color: #06100e;
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
	overflow: hidden;
}

/* Samma svepande mörkgröna filter som .hero-overlay på startsidan
   (diagonal-liknande tvåskiktad gradient) i stället för en jämn
   mörkning, så paket-heron känns som en del av samma bildspråk. */
.plan-hero-glow {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(6, 16, 14, 0.68) 0%, rgba(6, 16, 14, 0.4) 42%, rgba(6, 16, 14, 0.18) 100%),
		linear-gradient(180deg, rgba(6, 16, 14, 0.1) 0%, rgba(6, 16, 14, 0.58) 100%),
		radial-gradient(circle at 50% 0%, rgba(142, 219, 128, 0.14), transparent 45%);
}

/* :not() utesluter glowen — annars vinner denna regel över
   .plan-hero-glows egen "position: absolute" (samma specificitet, men
   den här regeln kommer senare i filet) och gör att den kollapsar till
   ett tomt, osynligt lager i stället för att täcka hela heron. */
.plan-hero > *:not(.plan-hero-glow) {
	position: relative;
}

.plan-hero .eyebrow {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(142, 219, 128, 0.14);
	color: #8edb80;
}

.plan-hero h1 {
	margin: 0 auto;
	max-width: 720px;
	font-size: clamp(42px, 5.6vw, 78px);
	line-height: 1;
	color: #fff;
}

.plan-hero .lead {
	margin: 20px auto 0;
	max-width: 560px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 19px;
}

.plan-hero-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
}

.plan-hero-price .amount {
	font-size: 48px;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: #fff;
}

.plan-hero-price .period {
	font-size: 17px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
}

.plan-hero-price .fee {
	margin-left: 8px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
	font-weight: 700;
}

.plan-hero-description {
	margin: 26px auto 0;
	max-width: 640px;
	color: rgba(255, 255, 255, 0.68);
	font-size: 16px;
	line-height: 1.7;
}

.plan-hero .hero-actions {
	justify-content: center;
	margin-top: 38px;
}

.plan-hero-trust {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 34px 0 0;
	padding: 0;
}

.plan-hero-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.72);
}

.plan-hero-trust svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: #8edb80;
}

.plan-audience-layout {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 60px;
	align-items: start;
}

.plan-audience-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 560px;
	display: grid;
	gap: 16px;
}

.plan-audience-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 17px;
	font-weight: 650;
	color: #17211f;
}

.plan-audience-check {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	border-radius: 50%;
	background: rgba(79, 117, 49, 0.12);
	color: #4f7531;
}

.plan-audience-check svg {
	width: 15px;
	height: 15px;
}

/* Sammanfattande "kort" bredvid checklistan i stället för tomrum —
   återanvänder planens egen data (pris, avgift, tagline) så det är
   riktigt innehåll, inte bara dekoration. */
/* Sticky tills man scrollat förbi hela "Passar det dig?"-stycket —
   .plan-audience-layout har align-items: start, vilket krävs för att
   en sticky-position ska fungera i en grid-kolumn (se samma mönster
   för .automation-visual). Avstängt i den staplade en-kolumns-
   layouten under 1100px, se motsvarande media query. */
.plan-audience-visual {
	position: sticky;
	top: 112px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 34px;
	border-radius: 32px;
	background: #0c1613;
	color: #fff;
	overflow: hidden;
}

/* Bleeder ut till kortets kanter (negativ margin motsvarande kortets
   egen padding) — overflow: hidden på kortet klipper den mot samma
   rundade hörn i stället för att behöva ett eget border-radius här. */
.plan-audience-visual-image {
	margin: -34px -34px 0;
	height: 150px;
	background-size: cover;
	background-position: center;
	background-color: #06100e;
}

.plan-audience-visual-eyebrow {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #8edb80;
}

.plan-audience-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.plan-audience-stat:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

.plan-audience-stat-label {
	font-size: 12.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
}

.plan-audience-stat-value {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #fff;
}

.plan-audience-visual-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 4px;
	padding: 14px 20px;
	border-radius: 999px;
	background: #4f7531;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.15s ease;
}

.plan-audience-visual-link:hover {
	transform: translateY(-2px);
}

.plan-audience-visual-link svg {
	width: 16px;
	height: 16px;
}

.plan-features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.plan-feature-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 26px;
	border-radius: 24px;
	background: #f6f8f3;
	border: 1px solid #edf1eb;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.plan-feature-card:hover {
	transform: translateY(-4px);
	border-color: rgba(79, 117, 49, 0.3);
	box-shadow: 0 22px 46px rgba(13, 24, 20, 0.08);
}

.plan-feature-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(79, 117, 49, 0.12);
	color: #4f7531;
}

.plan-feature-icon svg {
	width: 21px;
	height: 21px;
}

.plan-feature-card strong {
	display: block;
	margin-bottom: 6px;
	font-size: 16.5px;
	letter-spacing: -0.02em;
	color: #0e1715;
}

.plan-feature-card p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: #5b6763;
}

.plan-feature-tag {
	position: absolute;
	top: 22px;
	right: 22px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(79, 117, 49, 0.1);
	color: #4f7531;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* "Allt som ingår, i detalj" — samma idé som startsidans
   features-columns, men som en klickbar accordion i stället för
   statiska kolumner, så paketsidorna inte bara upprepar startsidan. */
.plan-detail-accordion {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.plan-detail-category {
	border-radius: 24px;
	background: #f6f8f3;
	border: 1px solid #edf1eb;
	overflow: hidden;
}

.plan-detail-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
}

.plan-detail-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(79, 117, 49, 0.12);
	color: #4f7531;
}

.plan-detail-icon svg {
	width: 18px;
	height: 18px;
}

.plan-detail-title {
	flex: 1;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #0e1715;
}

.plan-detail-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 16px;
	margin: 0;
	padding: 0 24px 24px 76px;
	list-style: none;
}

.plan-detail-items li {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.5;
	color: #5b6763;
}

.plan-detail-items li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4f7531;
}

.plan-benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 60px;
}

.plan-benefit-card {
	padding: 34px;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.plan-benefit-card:hover {
	transform: translateY(-4px);
	border-color: rgba(142, 219, 128, 0.3);
	background: rgba(255, 255, 255, 0.09);
}

.plan-benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: rgba(142, 219, 128, 0.14);
	color: #8edb80;
}

.plan-benefit-icon svg {
	width: 22px;
	height: 22px;
}

.plan-benefit-card h3 {
	margin: 0 0 14px;
	font-size: 21px;
	letter-spacing: -0.02em;
	color: #fff;
}

.plan-benefit-card p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.62);
}

.plan-crosslinks-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.plan-crosslink-card {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 28px 30px;
	border-radius: 28px;
	background: #f6f8f3;
	border: 1px solid #edf1eb;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.plan-crosslink-card:hover {
	transform: translateY(-4px);
	border-color: rgba(79, 117, 49, 0.35);
	box-shadow: 0 22px 50px rgba(13, 24, 20, 0.08);
}

.plan-crosslink-card > div:first-child {
	flex: 1;
	min-width: 0;
}

.plan-crosslink-card h3 {
	margin: 0 0 6px;
	font-size: 19px;
	letter-spacing: -0.02em;
	color: #0e1715;
}

.plan-crosslink-card p {
	margin: 0 0 14px;
	font-size: 14px;
	color: #5b6763;
}

.plan-crosslink-includes {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plan-crosslink-includes li {
	position: relative;
	padding-left: 16px;
	font-size: 13px;
	font-weight: 650;
	color: #17211f;
}

.plan-crosslink-includes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #4f7531;
}

.plan-crosslink-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
}

.plan-crosslink-price .amount {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: #0e1715;
}

.plan-crosslink-price .period {
	font-size: 12px;
	font-weight: 700;
	color: #7c8782;
}

.plan-crosslink-arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(79, 117, 49, 0.1);
	color: #4f7531;
}

.plan-crosslink-arrow svg {
	width: 18px;
	height: 18px;
}

.plan-cta-band {
	text-align: center;
}

.plan-cta-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}

@media (max-width: 1100px) {
	.plan-features-grid,
	.plan-benefits-grid,
	.plan-crosslinks-grid,
	.plan-detail-accordion {
		grid-template-columns: 1fr;
	}

	.plan-audience-layout {
		grid-template-columns: 1fr;
	}

	.plan-audience-list {
		max-width: none;
	}

	/* Staplade i en kolumn här — sticky ger då ingen mening och skulle
	   bara få panelen att krocka med innehållet under. */
	.plan-audience-visual {
		position: static;
	}
}

@media (max-width: 700px) {
	.plan-hero {
		min-height: 0;
		padding: 150px 24px 70px;
	}

	.plan-hero-trust {
		gap: 8px 18px;
	}

	.plan-hero .hero-actions,
	.plan-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.plan-detail-items {
		grid-template-columns: 1fr;
		padding-left: 24px;
	}

	.plan-crosslink-card {
		flex-wrap: wrap;
	}

	.plan-crosslink-price {
		align-items: flex-start;
	}
}

.reveal-item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Mobil i liggande läge (kort/bred viewport, t.ex. en telefon vriden
   90°) — ingen av de befintliga brytpunkterna ovan (styrda av bredd:
   1100px/700px) fångar det här läget, en bred telefon i liggande
   läge kan mycket väl vara bredare än 700px. Problemet där är i
   stället HÖJDEN: .hero hade fortfarande min-height: 100vh och stora
   paddings/font-storlekar tänkta för en hög, smal skärm, vilket på en
   kort viewport tvingade fram scroll innan man ens såg CTA-knapparna.
   Knapparna (.hero-actions) läggs nu i en egen högerkolumn i stället
   för att staplas under texten — det är det som faktiskt vinner
   höjd, inte bara mindre text. .hero-text (ny, bara en wrapper runt
   eyebrow/h1/lead — se markupen) gör det möjligt utan att röra
   ordningen på skrivbordet, där .hero-copy fortfarande är ett
   vanligt block och allt hamnar i samma ordning som förut. */
@media (orientation: landscape) and (max-height: 500px) {
	/* Samma horisontella marginal som headern (se .site-header nedan)
	   så logga/hamburgare och text/knappar börjar och slutar precis
	   jäms med varandra — annars blir det två olika "kantlinjer" på en
	   redan trång skärm. */
	.hero,
	.site-header {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Headern tar för mycket av den redan knappa höjden i liggande
	   läge — betydligt lägre här. Logga/hamburgare behåller däremot
	   sin vanliga storlek (bara höjden på själva raden krymper). */
	.site-header {
		height: 44px;
	}

	.site-header.is-scrolled {
		top: 6px;
		left: 6px;
		right: 6px;
		height: 36px;
		padding: 0 6px 0 12px;
		border-radius: 11px;
	}

	/* Ingen hel pill-bakgrund bakom hela headern i liggande läge —
	   bara logga och hamburgarikon får var sin egen, mindre bakgrund
	   (mörk nog för kontrast mot vad som än scrollar bakom, vit logga
	   mot vit sektion inräknat) i stället för en hel platta över hela
	   raden. */
	.site-header.is-scrolled::after,
	.site-header.is-scrolled::before {
		display: none;
	}

	.site-header.is-scrolled .brand {
		padding: 5px 12px;
		border-radius: 999px;
		background: rgba(6, 16, 14, 0.75);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.site-header.is-scrolled .mobile-nav-toggle {
		background: rgba(6, 16, 14, 0.75);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.hero {
		min-height: 100vh;
		min-height: 100dvh;
		padding-top: 56px;
		padding-bottom: 18px;
	}

	/* .statement drar sig upp -42px över heron på alla andra
	   brytpunkter (avsiktligt, för att dess rundade hörn ska möta
	   heron sömlöst) — i det här redan trånga läget gjorde det att den
	   åt sig in i heron innan videon ens hunnit visas i sin fulla
	   höjd. Ingen överlappning här, och då behövs inte de rundade
	   hörnen heller (utan den negativa marginalen syns de bara som ett
	   konstigt hack ovanpå heron i stället för en sömlös övergång). */
	.statement {
		margin-top: 0;
		border-radius: 0;
	}

	.hero-copy {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 24px;
		row-gap: 10px;
	}

	.hero-text {
		flex: 1 1 280px;
		min-width: 0;
	}

	.hero .eyebrow {
		margin-bottom: 6px;
		font-size: 11px;
	}

	.hero h1 {
		font-size: 34px;
		line-height: 1.08;
		max-width: 100%;
	}

	.hero .lead {
		margin-top: 10px;
		max-width: 100%;
		font-size: 15px;
		line-height: 1.42;
	}

	/* Högerkolumn — knapparna ovanpå varandra i stället för i en rad,
	   så de tar liten bredd men lika mycket höjd som textkolumnen
	   bredvid i stället för att bli en tredje våning under den. */
	.hero-actions {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: stretch;
		width: 168px;
		margin-top: 0;
		gap: 8px;
	}

	.hero-actions .primary-button,
	.hero-actions .secondary-button {
		height: 34px;
		padding: 0 14px;
		font-size: 12px;
		width: 100%;
	}

	/* Egen hel rad under bägge kolumnerna i stället för att bli en
	   tredje flex-kolumn. */
	.hero .microcopy {
		flex-basis: 100%;
		margin-top: 2px;
		font-size: 10px;
	}

	/* Platform-sektionens kort — två per rad (tre när ett är öppet, se
	   .feature-grid.has-open längre ner) i stället för ett enda brett
	   kort per rad, med mindre padding/ikon/text så det faktiskt får
	   plats i den knappa höjden.

	   Hela hover/fokus-baserade utfällningen (basstilen, tänkt för
	   musanvändare på skrivbordet) neutraliseras här helt och styrs i
	   stället uteslutande av .is-open (satt av klicket i
	   bindFeatureCards(), cartaro-home.js) — annars, i en landscape-
	   telefon bredare än 700px, gäller INTE portlägets @media
	   max-width: 700px-neutralisering längre upp i filen, och då
	   krockar två system: JS växlar .is-open korrekt, men kortet
	   (tabindex="0") behåller sin :focus-within efter ett tryck (det
	   finns ingen "blur" som händer av sig själv), så
	   bas-CSS:ns :focus-within-regel håller panelen utfälld/kortets
	   hörn flata även efter att man klickat för att stänga den. */
	.feature-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	/* Ett öppet kort tar hela bredden och hamnar överst (order: -1) —
	   de stängda samlas i stället i tre kompakta kolumner under. */
	.feature-grid.has-open {
		grid-template-columns: repeat(3, 1fr);
	}

	.feature-card,
	.feature-card:hover,
	.feature-card:focus-within {
		padding: 16px;
		border-radius: 20px;
		border-color: #edf1eb;
		box-shadow: none;
		z-index: auto;
		transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		/* Så headern (mycket lägre här än i porträttläge, se
		   .site-header ovan) inte täcker kortets topp när JS:en
		   (bindFeatureCards(), cartaro-home.js) scrollar dit. */
		scroll-margin-top: 56px;
	}

	.feature-card.is-open {
		grid-column: 1 / -1;
		order: -1;
		border-color: rgba(79, 117, 49, 0.35);
		box-shadow: 0 22px 50px rgba(13, 24, 20, 0.1);
	}

	.feature-summary {
		padding-right: 22px;
		cursor: pointer;
	}

	.feature-icon {
		width: 34px;
		height: 34px;
		margin-bottom: 12px;
		border-radius: 11px;
	}

	.feature-icon svg {
		width: 16px;
		height: 16px;
	}

	.feature-toggle {
		top: 2px;
		width: 22px;
		height: 22px;
	}

	.feature-toggle svg {
		width: 12px;
		height: 12px;
	}

	.feature-card:hover .feature-toggle,
	.feature-card:focus-within .feature-toggle {
		transform: none;
		background: rgba(13, 24, 20, 0.05);
		color: #0e1715;
	}

	.feature-card.is-open .feature-toggle {
		transform: rotate(180deg);
		background: rgba(79, 117, 49, 0.16);
		color: #4f7531;
	}

	.feature-copy h3 {
		margin-bottom: 6px;
		font-size: 17px;
	}

	.feature-copy p {
		font-size: 12px;
		line-height: 1.45;
	}

	/* Kvar i flödet (inte den absolut positionerade basstilen) med en
	   negativ marginal som bleder ut den till kortets EGNA 16px-padding
	   — se motsvarande resonemang i @media max-width: 700px längre upp,
	   samma sak gäller här bara med kortets mindre mått i landscape. */
	.feature-detail {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		margin: 0 -16px;
		padding: 0 16px;
		border: none;
		border-radius: 0 0 20px 20px;
		box-shadow: none;
		transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.feature-card:hover .feature-detail,
	.feature-card:focus-within .feature-detail {
		max-height: 0;
		opacity: 0;
		pointer-events: none;
	}

	.feature-card.is-open .feature-detail {
		max-height: 800px;
		padding: 14px 16px 16px;
		opacity: 1;
		pointer-events: auto;
	}

	.feature-detail p {
		margin-bottom: 10px;
		font-size: 12px;
		line-height: 1.45;
	}

	.feature-detail li {
		padding-left: 18px;
		font-size: 11.5px;
	}

	/* Commerce-sektionen: bilden 40% bredd till vänster, rubrik+text
	   60% till höger — sida vid sida igen (samma grid-template-areas
	   som skrivbordet, bara med 40/60 i stället för 1fr 1fr) i stället
	   för staplat i en kolumn som på smalare portlägesbrytpunkter. */
	.split-section {
		grid-template-columns: 40% 60%;
		grid-template-areas: "visual heading" "visual copy";
		row-gap: 8px;
		column-gap: 24px;
		align-items: start;
		padding: 24px 20px;
	}

	.split-visual {
		min-height: 0;
		align-self: stretch;
		border-radius: 20px;
	}

	.split-heading {
		align-self: auto;
	}

	.split-heading h2 {
		font-size: 22px;
	}

	.split-copy p {
		font-size: 12.5px;
		line-height: 1.5;
	}

	.split-copy ul {
		margin-top: 14px;
		gap: 14px;
	}

	/* Flex + align-items: center i stället för basstilens absolut-
	   positionerade punkt (top: 8px, avstämd mot skrivbordets 16px-
	   text) — den hamnade fel/"off" mot den mindre 12.5px-texten här. */
	.split-copy li {
		display: flex;
		align-items: center;
		gap: 10px;
		padding-left: 0;
		font-size: 12.5px;
	}

	.split-copy li:before {
		position: static;
		flex-shrink: 0;
	}
}