/*
Theme Name: IPTV Sverige Max
Theme URI: https://iptvsverigemax.com/
Author: IPTV Sverige Max
Author URI: https://iptvsverigemax.com/
Description: Nätverksdrivet WordPress-tema för IPTV Sverige Max. Byggt för svensk marknad med fokus på hastighet, tillgänglighet, tydlig prissättning och support på svenska.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iptvsverigemax
Tags: custom-menu, featured-images, translation-ready, blog, accessibility-ready, threaded-comments
*/

/* ==========================================================================
   IPTV SVERIGE MAX — Design DNA: "Network-Grade Nordic"
   Family: Telecom Tech Platform on a dominant white canvas
   Fonts:  Space Grotesk (rubriker) + DM Sans (brödtext)
   --------------------------------------------------------------------------
   0.  Tokens
   1.  Reset & bas
   2.  Typografi
   3.  Layout
   4.  Knappar & länkar
   5.  Små komponenter (badge, pill, chip, ikonruta)
   6.  Header
   7.  Hero
   8.  Signalremsa / statistik
   9.  Kort & rutnät
   10. Steg-rail
   11. Editoriella split-sektioner
   12. Mörk nätverkssektion
   13. Enheter
   14. Priser (plan-rail)
   15. Innehåll / kategorier
   16. Support & tidslinje
   17. Scenariokort
   18. FAQ
   19. Jämförelsetabell
   20. CTA-band
   21. Blogg
   22. Formulär
   23. Sidhuvud för undersidor & brödsmulor
   24. Juridiska / editoriella sidor
   25. Footer
   26. WhatsApp-flytknapp
   27. Kommentarer
   28. Sidnavigering & 404
   29. WordPress-standardklasser
   30. Hjälpklasser
   31. Rörelse & tillgänglighet
   ========================================================================== */

/* ==========================================================================
   0. TOKENS
   ========================================================================== */
:root {
	/* Ytor */
	--smx-white: #ffffff;
	--smx-mist: #f5f8fc;
	--smx-mist-2: #eef3fa;
	--smx-mist-3: #e8eef8;

	/* Text */
	--smx-ink: #08172e;
	--smx-ink-2: #16294a;
	--smx-body: #4c5d77;
	--smx-muted: #78899f;

	/* Linjer */
	--smx-line: #e1e8f2;
	--smx-line-2: #cfdae9;

	/* Primär signal */
	--smx-primary: #0e4fd1;
	--smx-primary-d: #0a3ba3;
	--smx-primary-l: #e9f0ff;
	--smx-primary-l2: #d6e3ff;

	/* Nätverksaccent */
	--smx-signal: #00a98f;
	--smx-signal-d: #04806d;
	--smx-signal-l: #e2f6f2;

	/* Highlight (logotypens gula) */
	--smx-amber: #ffb703;
	--smx-amber-d: #b57c00;
	--smx-amber-l: #fff5de;

	/* Status */
	--smx-success: #12854f;
	--smx-success-l: #e5f5ed;
	--smx-warn: #c2410c;
	--smx-warn-l: #fdf0e8;

	/* Djup (enda mörka bandet) */
	--smx-deep: #061229;
	--smx-deep-2: #0c1e3c;
	--smx-deep-3: #16305a;

	/* WhatsApp */
	--smx-wa: #25d366;
	--smx-wa-d: #128c7e;

	/* Radier */
	--smx-r-xs: 6px;
	--smx-r-s: 10px;
	--smx-r: 14px;
	--smx-r-l: 20px;
	--smx-r-xl: 28px;
	--smx-r-pill: 999px;

	/* Skuggor */
	--smx-sh-1: 0 1px 2px rgba(8, 23, 46, .05);
	--smx-sh-2: 0 6px 20px -8px rgba(8, 23, 46, .14);
	--smx-sh-3: 0 18px 44px -22px rgba(8, 23, 46, .28);
	--smx-sh-4: 0 32px 70px -34px rgba(8, 23, 46, .42);
	--smx-sh-focus: 0 0 0 3px rgba(14, 79, 209, .28);

	/* Typografi */
	--smx-font-head: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
	--smx-font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Layout */
	--smx-container: 1200px;
	--smx-container-narrow: 860px;
	--smx-gutter: clamp(18px, 4vw, 40px);
	--smx-section-y: clamp(56px, 7vw, 104px);
	--smx-header-h: 76px;

	/* Rörelse */
	--smx-ease: cubic-bezier(.2, .7, .3, 1);
	--smx-t: 220ms var(--smx-ease);
}

@media (max-width: 900px) {
	:root {
		--smx-header-h: 62px;
	}
}

/* ==========================================================================
   1. RESET & BAS
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--smx-header-h) + 18px);
}

body {
	margin: 0;
	background: var(--smx-white);
	color: var(--smx-body);
	font-family: var(--smx-font-body);
	font-size: 17px;
	line-height: 1.7;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.smx-no-scroll {
	overflow: hidden;
}

img,
picture,
video,
svg,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

svg {
	flex-shrink: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

hr {
	border: 0;
	border-top: 1px solid var(--smx-line);
	margin: 32px 0;
}

::selection {
	background: var(--smx-primary-l2);
	color: var(--smx-ink);
}

/* Hoppa-till-innehåll */
.smx-skip {
	position: absolute;
	left: 16px;
	top: -80px;
	z-index: 999;
	background: var(--smx-ink);
	color: #fff;
	padding: 12px 20px;
	border-radius: var(--smx-r-s);
	font-weight: 600;
	text-decoration: none;
	transition: top 160ms var(--smx-ease);
}

.smx-skip:focus {
	top: 16px;
}

/* Synlig fokusring överallt */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--smx-primary);
	outline-offset: 2px;
	border-radius: var(--smx-r-xs);
}

.smx-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   2. TYPOGRAFI
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--smx-font-head);
	color: var(--smx-ink);
	margin: 0 0 .5em;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -.022em;
}

h1 {
	font-size: clamp(2.05rem, 1.35rem + 2.9vw, 3.55rem);
	line-height: 1.08;
	letter-spacing: -.03em;
}

h2 {
	font-size: clamp(1.62rem, 1.2rem + 1.8vw, 2.5rem);
	letter-spacing: -.026em;
}

h3 {
	font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
}

h4 {
	font-size: 1.09rem;
	letter-spacing: -.012em;
}

h5 {
	font-size: 1rem;
}

h6 {
	font-size: .92rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--smx-muted);
}

p {
	margin: 0 0 1.15em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--smx-primary);
	text-decoration: none;
	transition: color var(--smx-t);
}

a:hover {
	color: var(--smx-primary-d);
	text-decoration: underline;
	text-underline-offset: 3px;
}

strong, b {
	font-weight: 700;
	color: var(--smx-ink-2);
}

small {
	font-size: .87rem;
}

blockquote {
	margin: 28px 0;
	padding: 22px 26px;
	background: var(--smx-mist);
	border-left: 3px solid var(--smx-signal);
	border-radius: 0 var(--smx-r) var(--smx-r) 0;
	font-size: 1.06rem;
	color: var(--smx-ink-2);
}

blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: .9rem;
	font-style: normal;
	color: var(--smx-muted);
}

code, kbd, pre {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: .9em;
}

code {
	background: var(--smx-mist-2);
	padding: .15em .45em;
	border-radius: var(--smx-r-xs);
	color: var(--smx-ink-2);
}

pre {
	background: var(--smx-deep);
	color: #dfe8f5;
	padding: 20px;
	border-radius: var(--smx-r);
	overflow-x: auto;
}

pre code {
	background: none;
	color: inherit;
	padding: 0;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.smx-container {
	width: 100%;
	max-width: var(--smx-container);
	margin-inline: auto;
	padding-inline: var(--smx-gutter);
}

.smx-container--narrow {
	max-width: var(--smx-container-narrow);
}

.smx-section {
	padding-block: var(--smx-section-y);
	position: relative;
}

.smx-section--tight {
	padding-block: clamp(40px, 5vw, 72px);
}

.smx-section--mist {
	background: var(--smx-mist);
}

.smx-section--mist-soft {
	background: linear-gradient(180deg, var(--smx-white) 0%, var(--smx-mist) 42%, var(--smx-mist) 100%);
}

.smx-section--deep {
	background: var(--smx-deep);
	color: #b9c8de;
}

.smx-section--deep h2,
.smx-section--deep h3,
.smx-section--deep h4 {
	color: #fff;
}

/* Sektionsrubrik */
.smx-shead {
	max-width: 720px;
	margin-bottom: clamp(30px, 4vw, 52px);
}

.smx-shead--center {
	margin-inline: auto;
	text-align: center;
}

.smx-shead__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--smx-font-head);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--smx-signal-d);
	margin-bottom: 14px;
}

.smx-shead__eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--smx-signal);
	border-radius: 2px;
}

.smx-shead--center .smx-shead__eyebrow::before {
	display: none;
}

.smx-section--deep .smx-shead__eyebrow {
	color: #6fe3cd;
}

.smx-shead__title {
	margin-bottom: 14px;
}

.smx-shead__lead {
	font-size: 1.06rem;
	color: var(--smx-body);
	margin: 0;
}

.smx-section--deep .smx-shead__lead {
	color: #a9bcd6;
}

/* Hårfin nätverkslinje som återkommande motiv */
.smx-hairline {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--smx-line-2) 18%, var(--smx-line-2) 82%, transparent);
	border: 0;
	margin: 0;
}

/* ==========================================================================
   4. KNAPPAR
   ========================================================================== */
.smx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--smx-font-head);
	font-size: .98rem;
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: 1.2;
	padding: 15px 26px;
	border-radius: var(--smx-r-s);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--smx-t), color var(--smx-t), border-color var(--smx-t), box-shadow var(--smx-t), transform var(--smx-t);
	min-height: 50px;
	text-align: center;
}

.smx-btn:hover {
	text-decoration: none;
}

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

.smx-btn--primary {
	background: var(--smx-primary);
	color: #fff;
	box-shadow: 0 8px 18px -10px rgba(14, 79, 209, .8);
}

.smx-btn--primary:hover {
	background: var(--smx-primary-d);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 14px 26px -12px rgba(14, 79, 209, .85);
}

.smx-btn--ghost {
	background: #fff;
	color: var(--smx-ink);
	border-color: var(--smx-line-2);
	box-shadow: var(--smx-sh-1);
}

.smx-btn--ghost:hover {
	border-color: var(--smx-ink-2);
	color: var(--smx-ink);
	background: var(--smx-mist);
}

.smx-btn--dark {
	background: var(--smx-ink);
	color: #fff;
}

.smx-btn--dark:hover {
	background: var(--smx-ink-2);
	color: #fff;
	transform: translateY(-1px);
}

.smx-btn--outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .34);
}

.smx-btn--outline-light:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

.smx-btn--wa {
	background: var(--smx-wa);
	color: #06301b;
	border-color: transparent;
	font-weight: 700;
}

.smx-btn--wa:hover {
	background: #1fbb5a;
	color: #06301b;
	transform: translateY(-1px);
}

.smx-btn--wa-outline {
	background: #fff;
	color: #0b5c36;
	border-color: rgba(37, 211, 102, .5);
}

.smx-btn--wa-outline:hover {
	background: #f0fdf4;
	border-color: var(--smx-wa);
	color: #0b5c36;
}

.smx-btn--sm {
	padding: 10px 18px;
	min-height: 42px;
	font-size: .9rem;
}

.smx-btn--lg {
	padding: 17px 32px;
	min-height: 56px;
	font-size: 1.03rem;
}

.smx-btn--block {
	width: 100%;
}

.smx-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Textlänk med pil */
.smx-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--smx-font-head);
	font-weight: 600;
	font-size: .95rem;
	color: var(--smx-primary);
}

.smx-link svg {
	width: 15px;
	height: 15px;
	transition: transform var(--smx-t);
}

.smx-link:hover {
	text-decoration: none;
	color: var(--smx-primary-d);
}

.smx-link:hover svg {
	transform: translateX(3px);
}

/* ==========================================================================
   5. SMÅ KOMPONENTER
   ========================================================================== */
.smx-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--smx-font-head);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .01em;
	padding: 6px 13px;
	border-radius: var(--smx-r-pill);
	background: var(--smx-mist-2);
	color: var(--smx-ink-2);
	border: 1px solid var(--smx-line);
}

.smx-badge--signal {
	background: var(--smx-signal-l);
	color: var(--smx-signal-d);
	border-color: rgba(0, 169, 143, .26);
}

.smx-badge--amber {
	background: var(--smx-amber-l);
	color: #7a5300;
	border-color: rgba(255, 183, 3, .38);
}

.smx-badge--primary {
	background: var(--smx-primary-l);
	color: var(--smx-primary-d);
	border-color: var(--smx-primary-l2);
}

.smx-badge--dark {
	background: rgba(255, 255, 255, .08);
	color: #dbe6f6;
	border-color: rgba(255, 255, 255, .16);
}

/* Statusprick */
.smx-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--smx-signal);
	flex-shrink: 0;
	position: relative;
}

.smx-dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid rgba(0, 169, 143, .35);
}

/* Ikonruta */
.smx-ico {
	width: 46px;
	height: 46px;
	border-radius: var(--smx-r-s);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--smx-primary-l);
	color: var(--smx-primary);
	flex-shrink: 0;
}

.smx-ico svg {
	width: 22px;
	height: 22px;
}

.smx-ico--signal {
	background: var(--smx-signal-l);
	color: var(--smx-signal-d);
}

.smx-ico--amber {
	background: var(--smx-amber-l);
	color: #8a5f00;
}

.smx-ico--ink {
	background: var(--smx-mist-2);
	color: var(--smx-ink);
}

.smx-ico--dark {
	background: rgba(255, 255, 255, .09);
	color: #7fe6d1;
}

.smx-ico--sm {
	width: 36px;
	height: 36px;
	border-radius: 9px;
}

.smx-ico--sm svg {
	width: 18px;
	height: 18px;
}

/* Checklista */
.smx-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.smx-checks li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: .98rem;
}

.smx-checks li svg {
	width: 19px;
	height: 19px;
	margin-top: 3px;
	color: var(--smx-signal-d);
	flex-shrink: 0;
}

.smx-checks--dark li svg {
	color: #4fd6bb;
}

.smx-checks--2 {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.smx-checks--2 {
		grid-template-columns: 1fr 1fr;
		gap: 11px 26px;
	}
}

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.smx-topbar {
	background: var(--smx-deep);
	color: #9fb3cf;
	font-size: .82rem;
	line-height: 1.4;
}

.smx-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 38px;
	padding-block: 7px;
}

.smx-topbar__list {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.smx-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.smx-topbar__item svg {
	width: 14px;
	height: 14px;
	color: #5ed9c0;
}

.smx-topbar a {
	color: #d3e0f0;
}

.smx-topbar a:hover {
	color: #fff;
}

@media (max-width: 900px) {
	.smx-topbar {
		display: none;
	}
}

.smx-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(150%) blur(10px);
	-webkit-backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--smx-line);
	transition: box-shadow var(--smx-t), border-color var(--smx-t);
}

.smx-header.is-stuck {
	box-shadow: 0 6px 22px -16px rgba(8, 23, 46, .5);
}

.smx-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--smx-header-h);
}

.smx-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	flex-shrink: 0;
	text-decoration: none;
}

.smx-brand:hover {
	text-decoration: none;
}

.smx-brand__img {
	height: 42px;
	width: auto;
	max-width: 210px;
	object-fit: contain;
}

.smx-brand__text {
	font-family: var(--smx-font-head);
	font-weight: 700;
	font-size: 1.16rem;
	letter-spacing: -.025em;
	color: var(--smx-ink);
	line-height: 1.05;
}

.smx-brand__text span {
	color: var(--smx-amber-d);
}

@media (max-width: 900px) {
	.smx-brand__img {
		height: 34px;
		max-width: 158px;
	}
}

/* Primär navigation */
.smx-nav {
	margin-left: auto;
}

.smx-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.smx-nav__list > li {
	position: relative;
}

.smx-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--smx-font-head);
	font-size: .93rem;
	font-weight: 500;
	color: var(--smx-ink-2);
	padding: 9px 13px;
	border-radius: var(--smx-r-s);
	white-space: nowrap;
	transition: background-color var(--smx-t), color var(--smx-t);
}

.smx-nav__list a:hover {
	background: var(--smx-mist-2);
	color: var(--smx-ink);
	text-decoration: none;
}

.smx-nav__list .current-menu-item > a,
.smx-nav__list .current_page_item > a,
.smx-nav__list .current-menu-ancestor > a {
	color: var(--smx-primary-d);
	background: var(--smx-primary-l);
	font-weight: 600;
}

/* Undermenyer */
.smx-nav__list .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: .55;
}

.smx-nav__list ul.sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 244px;
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	box-shadow: var(--smx-sh-3);
	padding: 8px;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 180ms var(--smx-ease), transform 180ms var(--smx-ease), visibility 180ms;
	z-index: 30;
}

.smx-nav__list li:hover > ul.sub-menu,
.smx-nav__list li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.smx-nav__list ul.sub-menu a {
	display: block;
	padding: 9px 12px;
	font-size: .91rem;
	white-space: normal;
}

.smx-nav__list ul.sub-menu ul.sub-menu {
	top: -8px;
	left: calc(100% + 6px);
}

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

/* Header-actions */
.smx-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: 14px;
}

@media (max-width: 1100px) {
	.smx-header__actions {
		margin-left: auto;
	}
}

@media (max-width: 640px) {
	.smx-header__actions .smx-btn--ghost {
		display: none;
	}

	.smx-header__actions .smx-btn {
		padding: 10px 16px;
		min-height: 42px;
		font-size: .88rem;
	}
}

/* Hamburgare */
.smx-burger {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--smx-line-2);
	background: #fff;
	border-radius: var(--smx-r-s);
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: 0;
}

.smx-burger span {
	display: block;
	width: 19px;
	height: 2px;
	background: var(--smx-ink);
	border-radius: 2px;
	transition: transform 200ms var(--smx-ease), opacity 160ms var(--smx-ease);
}

.smx-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.smx-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.smx-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1100px) {
	.smx-burger {
		display: inline-flex;
	}
}

/* Mobilpanel */
.smx-mobile {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 280ms var(--smx-ease), visibility 280ms;
	overscroll-behavior: contain;
}

.smx-mobile.is-open {
	transform: translateX(0);
	visibility: visible;
}

.smx-mobile__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px var(--smx-gutter);
	border-bottom: 1px solid var(--smx-line);
	min-height: var(--smx-header-h);
}

.smx-mobile__close {
	width: 44px;
	height: 44px;
	border: 1px solid var(--smx-line-2);
	background: #fff;
	border-radius: var(--smx-r-s);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--smx-ink);
}

.smx-mobile__close svg {
	width: 20px;
	height: 20px;
}

.smx-mobile__body {
	flex: 1;
	overflow-y: auto;
	padding: 18px var(--smx-gutter) 30px;
	-webkit-overflow-scrolling: touch;
}

.smx-mobile__list,
.smx-mobile__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.smx-mobile__list > li {
	border-bottom: 1px solid var(--smx-line);
}

.smx-mobile__list a {
	display: block;
	padding: 14px 2px;
	font-family: var(--smx-font-head);
	font-size: 1.03rem;
	font-weight: 600;
	color: var(--smx-ink);
}

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

.smx-mobile__list .sub-menu {
	padding-bottom: 8px;
}

.smx-mobile__list .sub-menu a {
	padding: 9px 2px 9px 18px;
	font-size: .95rem;
	font-weight: 500;
	color: var(--smx-body);
	border-left: 2px solid var(--smx-line);
}

.smx-mobile__foot {
	padding: 20px var(--smx-gutter) calc(24px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--smx-line);
	background: var(--smx-mist);
	display: grid;
	gap: 10px;
}

.smx-mobile__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: .88rem;
	color: var(--smx-body);
	margin-top: 4px;
}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.smx-hero {
	position: relative;
	padding-block: clamp(38px, 5vw, 74px) clamp(52px, 6vw, 92px);
	background:
		radial-gradient(1100px 480px at 88% -8%, rgba(14, 79, 209, .07), transparent 62%),
		radial-gradient(760px 420px at 4% 6%, rgba(0, 169, 143, .06), transparent 60%),
		var(--smx-white);
	overflow: hidden;
}

/* Hårfint nätverksraster */
.smx-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(8, 23, 46, .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(8, 23, 46, .045) 1px, transparent 1px);
	background-size: 62px 62px;
	-webkit-mask-image: radial-gradient(760px 420px at 20% 20%, #000, transparent 78%);
	mask-image: radial-gradient(760px 420px at 20% 20%, #000, transparent 78%);
	pointer-events: none;
}

.smx-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(34px, 5vw, 58px);
	align-items: center;
}

@media (min-width: 1024px) {
	.smx-hero__grid {
		grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
	}
}

.smx-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--smx-line-2);
	border-radius: var(--smx-r-pill);
	padding: 7px 15px 7px 11px;
	font-family: var(--smx-font-head);
	font-size: .82rem;
	font-weight: 600;
	color: var(--smx-ink-2);
	box-shadow: var(--smx-sh-1);
	margin-bottom: 20px;
}

.smx-hero__title {
	margin-bottom: 18px;
	max-width: 15ch;
}

.smx-hero__title em {
	font-style: normal;
	position: relative;
	/* Egen stapelkontext så att markeringen hamnar bakom texten men framför sektionsbakgrunden. */
	z-index: 0;
	color: var(--smx-primary);
	white-space: nowrap;
}

.smx-hero__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .06em;
	height: .17em;
	background: var(--smx-amber);
	opacity: .42;
	border-radius: 3px;
	z-index: -1;
}

.smx-hero__lead {
	font-size: clamp(1.02rem, .96rem + .3vw, 1.14rem);
	color: var(--smx-body);
	max-width: 54ch;
	margin-bottom: 26px;
}

.smx-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 26px;
}

@media (max-width: 480px) {
	.smx-hero__cta .smx-btn {
		width: 100%;
	}
}

.smx-hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	padding-top: 22px;
	border-top: 1px solid var(--smx-line);
}

.smx-hero__proof-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: .89rem;
	color: var(--smx-ink-2);
	font-weight: 500;
}

.smx-hero__proof-item svg {
	width: 17px;
	height: 17px;
	color: var(--smx-signal-d);
}

/* Hero-media */
.smx-hero__media {
	position: relative;
}

.smx-hero__frame {
	position: relative;
	border-radius: var(--smx-r-xl);
	overflow: hidden;
	border: 1px solid var(--smx-line);
	box-shadow: var(--smx-sh-4);
	background: var(--smx-mist);
	aspect-ratio: 16 / 10;
}

.smx-hero__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Statuspanel som överlappar bilden */
.smx-hero__panel {
	position: absolute;
	left: clamp(-6px, -1vw, 0px);
	bottom: -22px;
	width: min(272px, 74%);
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-l);
	box-shadow: var(--smx-sh-3);
	padding: 16px 18px;
}

.smx-hero__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 11px;
	margin-bottom: 11px;
	border-bottom: 1px solid var(--smx-line);
}

.smx-hero__panel-title {
	font-family: var(--smx-font-head);
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--smx-muted);
}

.smx-hero__panel-rows {
	display: grid;
	gap: 9px;
}

.smx-hero__panel-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: .86rem;
}

.smx-hero__panel-row span:first-child {
	color: var(--smx-body);
}

.smx-hero__panel-row strong {
	font-family: var(--smx-font-head);
	color: var(--smx-ink);
	font-size: .92rem;
}

/* Enhetschip uppe till höger */
.smx-hero__chip {
	position: absolute;
	right: -10px;
	top: 26px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-pill);
	padding: 9px 16px 9px 11px;
	box-shadow: var(--smx-sh-3);
	font-family: var(--smx-font-head);
	font-size: .84rem;
	font-weight: 600;
	color: var(--smx-ink);
}

.smx-hero__chip svg {
	width: 17px;
	height: 17px;
	color: var(--smx-primary);
}

@media (max-width: 560px) {
	.smx-hero__chip {
		display: none;
	}

	.smx-hero__panel {
		position: static;
		width: 100%;
		margin-top: 14px;
		box-shadow: var(--smx-sh-2);
	}
}

/* ==========================================================================
   8. SIGNALREMSA / STATISTIK
   ========================================================================== */
.smx-signalbar {
	border-block: 1px solid var(--smx-line);
	background: var(--smx-mist);
	padding-block: clamp(26px, 3vw, 38px);
}

.smx-signalbar__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--smx-line);
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-l);
	overflow: hidden;
}

@media (min-width: 900px) {
	.smx-signalbar__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.smx-signalbar__cell {
	background: #fff;
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.smx-signalbar__value {
	font-family: var(--smx-font-head);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	color: var(--smx-ink);
	letter-spacing: -.03em;
	line-height: 1;
	display: flex;
	align-items: baseline;
	gap: 3px;
}

.smx-signalbar__value sup {
	font-size: .5em;
	color: var(--smx-signal-d);
	top: -.55em;
}

.smx-signalbar__label {
	font-size: .89rem;
	color: var(--smx-body);
	line-height: 1.45;
}

.smx-signalbar__note {
	margin-top: 14px;
	font-size: .82rem;
	color: var(--smx-muted);
	text-align: center;
}

/* ==========================================================================
   9. KORT & RUTNÄT
   ========================================================================== */
.smx-grid {
	display: grid;
	gap: 20px;
}

.smx-grid--2 {
	grid-template-columns: 1fr;
}

.smx-grid--3 {
	grid-template-columns: 1fr;
}

.smx-grid--4 {
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.smx-grid--2,
	.smx-grid--3,
	.smx-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 940px) {
	.smx-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.smx-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Baskort med hårfin toppaccent */
.smx-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	padding: 26px 24px;
	transition: border-color var(--smx-t), box-shadow var(--smx-t), transform var(--smx-t);
	overflow: hidden;
}

.smx-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 2px;
	background: linear-gradient(90deg, var(--smx-signal), rgba(0, 169, 143, 0));
	opacity: 0;
	transition: opacity var(--smx-t);
}

.smx-card:hover {
	border-color: var(--smx-line-2);
	box-shadow: var(--smx-sh-2);
	transform: translateY(-2px);
}

.smx-card:hover::before {
	opacity: 1;
}

.smx-card__title {
	font-size: 1.1rem;
	margin: 16px 0 8px;
}

.smx-card__text {
	font-size: .96rem;
	margin: 0;
}

.smx-card--flat:hover {
	transform: none;
	box-shadow: var(--smx-sh-1);
}

.smx-card--mist {
	background: var(--smx-mist);
	border-color: transparent;
}

.smx-card--dark {
	background: rgba(255, 255, 255, .045);
	border-color: rgba(255, 255, 255, .1);
	color: #b9c8de;
}

.smx-card--dark:hover {
	border-color: rgba(255, 255, 255, .22);
	box-shadow: none;
}

.smx-card--dark .smx-card__title {
	color: #fff;
}

/* ==========================================================================
   10. STEG-RAIL
   ========================================================================== */
.smx-rail {
	position: relative;
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.smx-rail {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
	}

	.smx-rail::before {
		content: "";
		position: absolute;
		top: 25px;
		left: 12%;
		right: 12%;
		height: 1px;
		background: repeating-linear-gradient(90deg, var(--smx-line-2) 0 7px, transparent 7px 15px);
		z-index: 0;
	}
}

.smx-rail__step {
	position: relative;
	z-index: 1;
	background: #fff;
	padding-top: 0;
}

.smx-rail__num {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--smx-white);
	border: 1px solid var(--smx-line-2);
	box-shadow: 0 0 0 5px #fff, var(--smx-sh-1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--smx-font-head);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--smx-primary);
	margin-bottom: 18px;
}

.smx-rail__step h3 {
	font-size: 1.16rem;
	margin-bottom: 10px;
}

.smx-rail__step p {
	font-size: .97rem;
}

.smx-rail__meta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: .84rem;
	font-weight: 600;
	color: var(--smx-signal-d);
	font-family: var(--smx-font-head);
}

.smx-rail__meta svg {
	width: 15px;
	height: 15px;
}

/* Vertikal variant (sidmallar) */
.smx-vrail {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.smx-vrail::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background: var(--smx-line-2);
}

.smx-vrail li {
	position: relative;
	padding: 0 0 26px 58px;
}

.smx-vrail li:last-child {
	padding-bottom: 0;
}

.smx-vrail__dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 39px;
	height: 39px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--smx-line-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--smx-font-head);
	font-weight: 700;
	font-size: .92rem;
	color: var(--smx-primary);
	box-shadow: 0 0 0 4px #fff;
}

.smx-vrail h3 {
	font-size: 1.08rem;
	margin-bottom: 7px;
	padding-top: 6px;
}

.smx-vrail p {
	font-size: .96rem;
	margin: 0;
}

/* ==========================================================================
   11. EDITORIELLA SPLIT-SEKTIONER
   ========================================================================== */
.smx-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(30px, 4vw, 60px);
	align-items: center;
}

@media (min-width: 940px) {
	.smx-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.smx-split--reverse .smx-split__media {
		order: -1;
	}

	.smx-split--wide-text {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	}
}

.smx-split__media {
	position: relative;
}

.smx-split__img {
	border-radius: var(--smx-r-l);
	overflow: hidden;
	border: 1px solid var(--smx-line);
	box-shadow: var(--smx-sh-3);
	background: var(--smx-mist);
}

.smx-split__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.smx-split__img--wide img {
	aspect-ratio: 16 / 10;
}

/* Liten flytande faktabricka på bilden */
.smx-split__fact {
	position: absolute;
	right: -14px;
	bottom: -18px;
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	box-shadow: var(--smx-sh-3);
	padding: 14px 18px;
	max-width: 230px;
}

.smx-split__fact strong {
	display: block;
	font-family: var(--smx-font-head);
	font-size: 1.28rem;
	color: var(--smx-ink);
	line-height: 1.1;
	letter-spacing: -.02em;
}

.smx-split__fact span {
	font-size: .83rem;
	color: var(--smx-body);
	line-height: 1.4;
	display: block;
	margin-top: 3px;
}

@media (max-width: 620px) {
	.smx-split__fact {
		position: static;
		max-width: none;
		margin-top: 14px;
		box-shadow: var(--smx-sh-1);
	}
}

/* Funktionslista i split */
.smx-featlist {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.smx-featlist li {
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

.smx-featlist h4 {
	margin: 0 0 4px;
	font-size: 1.02rem;
}

.smx-featlist p {
	margin: 0;
	font-size: .94rem;
}

/* ==========================================================================
   12. MÖRK NÄTVERKSSEKTION
   ========================================================================== */
.smx-network {
	position: relative;
	background: var(--smx-deep);
	color: #b9c8de;
	overflow: hidden;
}

.smx-network::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(720px 420px at 82% 12%, rgba(0, 169, 143, .18), transparent 62%),
		radial-gradient(620px 380px at 8% 88%, rgba(14, 79, 209, .22), transparent 62%);
	pointer-events: none;
}

.smx-network__inner {
	position: relative;
}

.smx-network__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
}

@media (min-width: 980px) {
	.smx-network__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	}
}

.smx-network__img {
	border-radius: var(--smx-r-l);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9);
}

.smx-network__img img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.smx-network__metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 30px;
}

.smx-metric {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: var(--smx-r);
	padding: 18px;
}

.smx-metric__top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8ba3c2;
	font-family: var(--smx-font-head);
	font-weight: 600;
}

.smx-metric__value {
	font-family: var(--smx-font-head);
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: -.03em;
	line-height: 1;
}

.smx-metric__desc {
	font-size: .85rem;
	color: #93a8c6;
	margin-top: 7px;
}

/* Enkel signalstapel-illustration */
.smx-bars {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 26px;
	margin-top: 12px;
}

.smx-bars span {
	flex: 1;
	background: linear-gradient(180deg, #4fd6bb, rgba(79, 214, 187, .25));
	border-radius: 2px;
}

/* ==========================================================================
   13. ENHETER
   ========================================================================== */
.smx-devices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (min-width: 780px) {
	.smx-devices {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1040px) {
	.smx-devices {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.smx-device {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	padding: 20px 18px;
	text-decoration: none;
	color: inherit;
	transition: border-color var(--smx-t), box-shadow var(--smx-t), transform var(--smx-t);
}

.smx-device:hover {
	text-decoration: none;
	color: inherit;
	border-color: var(--smx-primary-l2);
	box-shadow: var(--smx-sh-2);
	transform: translateY(-2px);
}

.smx-device__name {
	font-family: var(--smx-font-head);
	font-weight: 600;
	font-size: 1rem;
	color: var(--smx-ink);
}

.smx-device__meta {
	font-size: .86rem;
	color: var(--smx-muted);
	margin-top: -6px;
}

.smx-device__status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .8rem;
	font-weight: 600;
	color: var(--smx-signal-d);
	margin-top: auto;
	padding-top: 8px;
}

/* ==========================================================================
   14. PRISER — PLAN-RAIL
   ========================================================================== */
.smx-plans {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 720px) {
	.smx-plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1060px) {
	.smx-plans {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		border: 1px solid var(--smx-line);
		border-radius: var(--smx-r-l);
		background: var(--smx-line);
		overflow: hidden;
	}
}

.smx-plan {
	position: relative;
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	padding: 28px 24px 26px;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--smx-t), border-color var(--smx-t);
}

@media (min-width: 1060px) {
	.smx-plan {
		border: 0;
		border-radius: 0;
		margin-right: 1px;
	}

	.smx-plan:last-child {
		margin-right: 0;
	}
}

.smx-plan:hover {
	border-color: var(--smx-line-2);
	box-shadow: var(--smx-sh-2);
	z-index: 2;
}

.smx-plan--featured {
	border-color: var(--smx-primary);
	box-shadow: var(--smx-sh-3);
	z-index: 3;
}

@media (min-width: 1060px) {
	.smx-plan--featured {
		box-shadow: 0 0 0 2px var(--smx-primary) inset;
	}
}

.smx-plan__flag {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--smx-primary);
	color: #fff;
	font-family: var(--smx-font-head);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-bottom-left-radius: var(--smx-r-s);
}

.smx-plan__term {
	font-family: var(--smx-font-head);
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--smx-ink);
	margin-bottom: 4px;
}

.smx-plan__sub {
	font-size: .85rem;
	color: var(--smx-muted);
	margin-bottom: 18px;
}

.smx-plan__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-family: var(--smx-font-head);
	color: var(--smx-ink);
	letter-spacing: -.035em;
	line-height: 1;
}

.smx-plan__amount {
	font-size: 2.35rem;
	font-weight: 700;
}

.smx-plan__cur {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--smx-body);
}

.smx-plan__unit {
	margin-top: 8px;
	font-size: .86rem;
	color: var(--smx-signal-d);
	font-weight: 600;
}

.smx-plan__alt {
	font-size: .8rem;
	color: var(--smx-muted);
	margin-top: 3px;
}

.smx-plan__list {
	list-style: none;
	margin: 20px 0 24px;
	padding: 20px 0 0;
	border-top: 1px solid var(--smx-line);
	display: grid;
	gap: 9px;
	font-size: .91rem;
}

.smx-plan__list li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.smx-plan__list svg {
	width: 17px;
	height: 17px;
	margin-top: 3px;
	color: var(--smx-signal-d);
	flex-shrink: 0;
}

.smx-plan .smx-btn {
	margin-top: auto;
	width: 100%;
}

.smx-plans__note {
	margin-top: 20px;
	font-size: .87rem;
	color: var(--smx-muted);
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}

/* Prisgaranti-remsa under planerna */
.smx-guarantee {
	margin-top: 26px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--smx-line);
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	overflow: hidden;
}

@media (min-width: 780px) {
	.smx-guarantee {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.smx-guarantee__cell {
	background: #fff;
	padding: 18px 20px;
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.smx-guarantee__cell h4 {
	margin: 0 0 3px;
	font-size: .99rem;
}

.smx-guarantee__cell p {
	margin: 0;
	font-size: .88rem;
}

/* ==========================================================================
   15. INNEHÅLL / KATEGORIER
   ========================================================================== */
.smx-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (min-width: 780px) {
	.smx-cats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.smx-cat {
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--smx-font-head);
	font-weight: 600;
	font-size: .95rem;
	color: var(--smx-ink);
	transition: border-color var(--smx-t), background-color var(--smx-t);
}

.smx-cat:hover {
	border-color: var(--smx-primary-l2);
	background: var(--smx-primary-l);
	text-decoration: none;
	color: var(--smx-ink);
}

.smx-cat span {
	display: block;
	font-family: var(--smx-font-body);
	font-weight: 400;
	font-size: .82rem;
	color: var(--smx-muted);
	margin-top: 1px;
}

/* ==========================================================================
   16. SUPPORT & TIDSLINJE
   ========================================================================== */
.smx-support {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 780px) {
	.smx-support {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.smx-support__card {
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.smx-support__card h3 {
	font-size: 1.06rem;
	margin: 0;
}

.smx-support__card p {
	font-size: .93rem;
	margin: 0;
}

.smx-support__card--wa {
	border-color: rgba(37, 211, 102, .38);
	background: linear-gradient(180deg, #f4fdf7, #fff 62%);
}

.smx-support__value {
	font-family: var(--smx-font-head);
	font-weight: 600;
	color: var(--smx-ink);
	font-size: 1rem;
	word-break: break-word;
}

.smx-support__hours {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--smx-line);
	font-size: .85rem;
	color: var(--smx-muted);
}

/* ==========================================================================
   17. SCENARIOKORT (ersätter påhittade recensioner)
   ========================================================================== */
.smx-scenarios {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

@media (min-width: 800px) {
	.smx-scenarios {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.smx-scenario {
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.smx-scenario__tag {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 7px;
	font-family: var(--smx-font-head);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--smx-muted);
	margin-bottom: 14px;
}

.smx-scenario__tag::before {
	content: "";
	width: 16px;
	height: 2px;
	background: var(--smx-amber);
	border-radius: 2px;
}

.smx-scenario h3 {
	font-size: 1.1rem;
	margin-bottom: 10px;
}

.smx-scenario p {
	font-size: .95rem;
}

.smx-scenario__answer {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--smx-line-2);
	font-size: .92rem;
	color: var(--smx-ink-2);
}

.smx-scenario__answer strong {
	display: block;
	font-family: var(--smx-font-head);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--smx-signal-d);
	margin-bottom: 5px;
}

.smx-disclosure {
	margin-top: 18px;
	font-size: .84rem;
	color: var(--smx-muted);
	text-align: center;
}

/* ==========================================================================
   18. FAQ
   ========================================================================== */
.smx-faq {
	border-top: 1px solid var(--smx-line);
}

.smx-faq__item {
	border-bottom: 1px solid var(--smx-line);
}

.smx-faq__q {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	background: none;
	border: 0;
	padding: 22px 4px;
	text-align: left;
	cursor: pointer;
	font-family: var(--smx-font-head);
	font-size: 1.04rem;
	font-weight: 600;
	color: var(--smx-ink);
	line-height: 1.4;
	transition: color var(--smx-t);
}

.smx-faq__q:hover {
	color: var(--smx-primary);
}

.smx-faq__icon {
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--smx-line-2);
	flex-shrink: 0;
	margin-top: 2px;
	transition: background-color var(--smx-t), border-color var(--smx-t), transform var(--smx-t);
}

.smx-faq__icon::before,
.smx-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: opacity var(--smx-t), transform var(--smx-t);
}

.smx-faq__icon::before {
	width: 11px;
	height: 1.8px;
}

.smx-faq__icon::after {
	width: 1.8px;
	height: 11px;
}

.smx-faq__q[aria-expanded="true"] .smx-faq__icon {
	background: var(--smx-primary);
	border-color: var(--smx-primary);
	color: #fff;
}

.smx-faq__q[aria-expanded="true"] .smx-faq__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.smx-faq__a {
	overflow: hidden;
	max-height: 0;
	transition: max-height 300ms var(--smx-ease);
}

.smx-faq__a-inner {
	padding: 0 56px 24px 4px;
	font-size: .99rem;
	color: var(--smx-body);
}

.smx-faq__a-inner p:last-child {
	margin-bottom: 0;
}

@media (max-width: 620px) {
	.smx-faq__a-inner {
		padding-right: 8px;
	}
}

/* Kategoriserad FAQ (FAQ-sidan) */
.smx-faqcat {
	margin-bottom: 44px;
}

.smx-faqcat__head {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 6px;
}

.smx-faqcat__head h2 {
	font-size: 1.35rem;
	margin: 0;
}

/* ==========================================================================
   19. JÄMFÖRELSETABELL
   ========================================================================== */
.smx-tablewrap {
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-l);
	overflow: hidden;
	background: #fff;
}

.smx-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.smx-table caption {
	caption-side: top;
	text-align: left;
	padding: 18px 22px;
	font-size: .88rem;
	color: var(--smx-muted);
	border-bottom: 1px solid var(--smx-line);
	background: var(--smx-mist);
}

.smx-table th,
.smx-table td {
	padding: 15px 20px;
	text-align: left;
	border-bottom: 1px solid var(--smx-line);
	vertical-align: top;
}

.smx-table thead th {
	background: var(--smx-mist);
	font-family: var(--smx-font-head);
	font-size: .86rem;
	font-weight: 600;
	color: var(--smx-ink);
	letter-spacing: .01em;
	white-space: nowrap;
}

.smx-table tbody tr:last-child th,
.smx-table tbody tr:last-child td {
	border-bottom: 0;
}

.smx-table tbody th {
	font-family: var(--smx-font-head);
	font-weight: 600;
	color: var(--smx-ink);
	font-size: .93rem;
}

.smx-table__yes {
	color: var(--smx-success);
	font-weight: 600;
}

.smx-table__no {
	color: var(--smx-muted);
}

/* Mobil: tabell blir kort */
@media (max-width: 780px) {
	.smx-tablewrap--cards .smx-table,
	.smx-tablewrap--cards .smx-table tbody,
	.smx-tablewrap--cards .smx-table tr,
	.smx-tablewrap--cards .smx-table td,
	.smx-tablewrap--cards .smx-table th {
		display: block;
		width: 100%;
	}

	.smx-tablewrap--cards .smx-table thead {
		display: none;
	}

	.smx-tablewrap--cards .smx-table tbody tr {
		border-bottom: 1px solid var(--smx-line);
		padding: 6px 0 10px;
	}

	.smx-tablewrap--cards .smx-table tbody tr:last-child {
		border-bottom: 0;
	}

	.smx-tablewrap--cards .smx-table td,
	.smx-tablewrap--cards .smx-table tbody th {
		border-bottom: 0;
		padding: 7px 20px;
	}

	.smx-tablewrap--cards .smx-table tbody th {
		padding-top: 14px;
		font-size: 1.02rem;
	}

	.smx-tablewrap--cards .smx-table td::before {
		content: attr(data-label);
		display: block;
		font-family: var(--smx-font-head);
		font-size: .76rem;
		font-weight: 600;
		letter-spacing: .07em;
		text-transform: uppercase;
		color: var(--smx-muted);
		margin-bottom: 2px;
	}
}

/* Horisontell scroll för breda tabeller */
.smx-tablescroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   20. CTA-BAND
   ========================================================================== */
.smx-ctaband {
	position: relative;
	background: var(--smx-deep);
	border-radius: var(--smx-r-xl);
	padding: clamp(34px, 5vw, 62px);
	overflow: hidden;
	color: #b9c8de;
}

.smx-ctaband::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(620px 340px at 88% 8%, rgba(0, 169, 143, .22), transparent 60%),
		radial-gradient(560px 320px at 6% 96%, rgba(14, 79, 209, .28), transparent 62%);
	pointer-events: none;
}

.smx-ctaband__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

@media (min-width: 900px) {
	.smx-ctaband__inner {
		grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
		gap: 46px;
	}
}

.smx-ctaband h2 {
	color: #fff;
	margin-bottom: 12px;
}

.smx-ctaband p {
	color: #a9bcd6;
	margin: 0;
	font-size: 1.03rem;
}

.smx-ctaband__actions {
	display: grid;
	gap: 11px;
}

.smx-ctaband__note {
	font-size: .84rem;
	color: #8ba3c2;
	text-align: center;
}

/* Ljus CTA-variant */
.smx-ctalight {
	background: var(--smx-mist);
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-l);
	padding: clamp(28px, 4vw, 46px);
	text-align: center;
}

.smx-ctalight h2 {
	margin-bottom: 12px;
}

.smx-ctalight p {
	max-width: 60ch;
	margin: 0 auto 24px;
}

.smx-ctalight .smx-btn-row {
	justify-content: center;
}

/* ==========================================================================
   21. BLOGG
   ========================================================================== */
.smx-posts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 640px) {
	.smx-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.smx-posts--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.smx-post {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-l);
	overflow: hidden;
	transition: border-color var(--smx-t), box-shadow var(--smx-t), transform var(--smx-t);
}

.smx-post:hover {
	border-color: var(--smx-line-2);
	box-shadow: var(--smx-sh-2);
	transform: translateY(-3px);
}

.smx-post__thumb {
	display: block;
	background: var(--smx-mist-2);
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.smx-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--smx-ease);
}

.smx-post:hover .smx-post__thumb img {
	transform: scale(1.035);
}

.smx-post__body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.smx-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-size: .81rem;
	color: var(--smx-muted);
	margin-bottom: 11px;
}

.smx-post__meta a {
	color: var(--smx-signal-d);
	font-weight: 600;
}

.smx-post__title {
	font-size: 1.14rem;
	line-height: 1.32;
	margin-bottom: 10px;
}

.smx-post__title a {
	color: var(--smx-ink);
}

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

.smx-post__excerpt {
	font-size: .94rem;
	margin-bottom: 18px;
}

.smx-post__more {
	margin-top: auto;
}

/* Enskilt inlägg */
.smx-article {
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px;
	align-items: start;
}

@media (min-width: 1000px) {
	.smx-article {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 56px;
	}
}

.smx-article__head {
	margin-bottom: 28px;
}

.smx-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	font-size: .88rem;
	color: var(--smx-muted);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--smx-line);
	margin-bottom: 26px;
}

.smx-article__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.smx-article__meta-item svg {
	width: 15px;
	height: 15px;
	color: var(--smx-signal-d);
}

.smx-article__thumb {
	border-radius: var(--smx-r-l);
	overflow: hidden;
	border: 1px solid var(--smx-line);
	margin-bottom: 30px;
}

.smx-article__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Redaktionell brödtext */
.smx-prose {
	font-size: 1.05rem;
	color: var(--smx-body);
}

.smx-prose > * + * {
	margin-top: 1.15em;
}

.smx-prose h2 {
	font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
	margin-top: 1.9em;
	margin-bottom: .55em;
	padding-top: .35em;
	border-top: 1px solid var(--smx-line);
}

.smx-prose h2:first-child {
	margin-top: 0;
	border-top: 0;
	padding-top: 0;
}

.smx-prose h3 {
	font-size: 1.25rem;
	margin-top: 1.7em;
	margin-bottom: .5em;
}

.smx-prose h4 {
	margin-top: 1.5em;
	margin-bottom: .4em;
}

.smx-prose ul,
.smx-prose ol {
	padding-left: 1.35em;
	margin-block: 1.1em;
}

.smx-prose li {
	margin-bottom: .55em;
}

.smx-prose li::marker {
	color: var(--smx-signal-d);
}

.smx-prose img {
	border-radius: var(--smx-r);
	border: 1px solid var(--smx-line);
}

.smx-prose figure {
	margin: 1.8em 0;
}

.smx-prose figcaption {
	font-size: .85rem;
	color: var(--smx-muted);
	margin-top: 9px;
	text-align: center;
}

.smx-prose table {
	font-size: .94rem;
	margin-block: 1.6em;
}

.smx-prose th,
.smx-prose td {
	border: 1px solid var(--smx-line);
	padding: 11px 14px;
	text-align: left;
}

.smx-prose th {
	background: var(--smx-mist);
	font-family: var(--smx-font-head);
	color: var(--smx-ink);
}

/* Infobox i brödtext */
.smx-note {
	display: flex;
	gap: 14px;
	background: var(--smx-primary-l);
	border: 1px solid var(--smx-primary-l2);
	border-radius: var(--smx-r);
	padding: 18px 20px;
	font-size: .96rem;
	color: var(--smx-ink-2);
}

.smx-note svg {
	width: 20px;
	height: 20px;
	color: var(--smx-primary);
	margin-top: 3px;
	flex-shrink: 0;
}

.smx-note--signal {
	background: var(--smx-signal-l);
	border-color: rgba(0, 169, 143, .26);
}

.smx-note--signal svg {
	color: var(--smx-signal-d);
}

.smx-note--amber {
	background: var(--smx-amber-l);
	border-color: rgba(255, 183, 3, .4);
}

.smx-note--amber svg {
	color: var(--smx-amber-d);
}

.smx-note p {
	margin: 0;
}

.smx-note p + p {
	margin-top: .6em;
}

/* Sidokolumn */
.smx-sidebar {
	display: grid;
	gap: 20px;
	position: sticky;
	top: calc(var(--smx-header-h) + 20px);
}

@media (max-width: 999px) {
	.smx-sidebar {
		position: static;
	}
}

.smx-widget {
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	padding: 22px;
}

.smx-widget__title {
	font-size: 1rem;
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--smx-line);
}

.smx-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
	font-size: .94rem;
}

.smx-widget ul li a {
	color: var(--smx-ink-2);
}

.smx-widget ul li a:hover {
	color: var(--smx-primary);
}

.smx-widget--cta {
	background: var(--smx-deep);
	border-color: transparent;
	color: #b9c8de;
}

.smx-widget--cta .smx-widget__title {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .14);
}

.smx-widget--cta p {
	font-size: .93rem;
	color: #a9bcd6;
}

/* Författarruta */
.smx-author {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--smx-mist);
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-l);
	padding: 24px;
	margin-top: 40px;
}

.smx-author__avatar img,
.smx-author__avatar {
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.smx-author__name {
	font-size: 1.08rem;
	margin: 0 0 6px;
}

.smx-author__bio {
	font-size: .94rem;
	margin: 0;
}

@media (max-width: 560px) {
	.smx-author {
		flex-direction: column;
	}
}

/* Relaterade */
.smx-related {
	margin-top: 52px;
	padding-top: 40px;
	border-top: 1px solid var(--smx-line);
}

/* Delning */
.smx-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--smx-line);
}

.smx-share__label {
	font-family: var(--smx-font-head);
	font-size: .86rem;
	font-weight: 600;
	color: var(--smx-ink);
	margin-right: 4px;
}

/* ==========================================================================
   22. FORMULÄR
   ========================================================================== */
.smx-form {
	display: grid;
	gap: 18px;
}

.smx-field {
	display: grid;
	gap: 7px;
}

.smx-field label {
	font-family: var(--smx-font-head);
	font-size: .91rem;
	font-weight: 600;
	color: var(--smx-ink);
}

.smx-field .smx-req {
	color: var(--smx-warn);
}

.smx-field__hint {
	font-size: .83rem;
	color: var(--smx-muted);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--smx-line-2);
	border-radius: var(--smx-r-s);
	padding: 14px 16px;
	font-size: 1rem;
	min-height: 52px;
	color: var(--smx-ink);
	transition: border-color var(--smx-t), box-shadow var(--smx-t);
	-webkit-appearance: none;
	appearance: none;
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c5d77' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	padding-right: 42px;
}

textarea {
	min-height: 148px;
	resize: vertical;
	line-height: 1.6;
}

input::placeholder,
textarea::placeholder {
	color: #9aa9bd;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--smx-primary);
	box-shadow: var(--smx-sh-focus);
	outline: none;
}

.smx-consent {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: .88rem;
	color: var(--smx-body);
}

.smx-consent input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin-top: 2px;
	accent-color: var(--smx-primary);
	flex-shrink: 0;
}

.smx-formcard {
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-l);
	padding: clamp(24px, 3vw, 36px);
	box-shadow: var(--smx-sh-2);
}

.smx-formcard__head {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--smx-line);
}

.smx-formcard__head h2 {
	font-size: 1.42rem;
	margin-bottom: 8px;
}

.smx-formcard__head p {
	margin: 0;
	font-size: .95rem;
}

/* Sökformulär */
.smx-searchform {
	display: flex;
	gap: 9px;
}

.smx-searchform input[type="search"] {
	flex: 1;
	min-width: 0;
}

/* ==========================================================================
   23. SIDHUVUD FÖR UNDERSIDOR & BRÖDSMULOR
   ========================================================================== */
.smx-pagehead {
	position: relative;
	background:
		radial-gradient(800px 380px at 82% -20%, rgba(14, 79, 209, .07), transparent 60%),
		var(--smx-mist);
	border-bottom: 1px solid var(--smx-line);
	padding-block: clamp(30px, 4vw, 54px) clamp(34px, 4.5vw, 62px);
}

.smx-pagehead__inner {
	max-width: 760px;
}

.smx-pagehead--center .smx-pagehead__inner {
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.smx-pagehead__title {
	margin-bottom: 14px;
}

.smx-pagehead__lead {
	font-size: 1.06rem;
	margin: 0;
	max-width: 62ch;
}

.smx-pagehead--center .smx-pagehead__lead {
	margin-inline: auto;
}

.smx-pagehead__actions {
	margin-top: 26px;
}

/* Sidhuvud med bild */
.smx-pagehead--media {
	background: var(--smx-white);
	padding-bottom: 0;
	border-bottom: 0;
}

.smx-pagehead__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

@media (min-width: 940px) {
	.smx-pagehead__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 50px;
	}
}

.smx-pagehead__img {
	border-radius: var(--smx-r-l);
	overflow: hidden;
	border: 1px solid var(--smx-line);
	box-shadow: var(--smx-sh-3);
}

.smx-pagehead__img img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Stadssidor: bild med överlägg */
.smx-cityhead {
	position: relative;
	min-height: clamp(320px, 42vw, 460px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--smx-deep);
}

.smx-cityhead__bg {
	position: absolute;
	inset: 0;
}

.smx-cityhead__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.smx-cityhead__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 18, 41, .28) 0%, rgba(6, 18, 41, .72) 62%, rgba(6, 18, 41, .92) 100%);
}

.smx-cityhead__inner {
	position: relative;
	width: 100%;
	padding-block: clamp(34px, 5vw, 58px);
	color: #cfdcee;
}

.smx-cityhead h1 {
	color: #fff;
	margin-bottom: 12px;
}

.smx-cityhead p {
	color: #bccddf;
	max-width: 58ch;
	margin: 0;
}

/* Brödsmulor */
.smx-crumbs {
	padding-block: 13px;
	border-bottom: 1px solid var(--smx-line);
	background: #fff;
	font-size: .84rem;
}

.smx-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--smx-muted);
}

.smx-crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.smx-crumbs li:not(:last-child)::after {
	content: "/";
	color: var(--smx-line-2);
	margin-left: 2px;
}

.smx-crumbs a {
	color: var(--smx-body);
}

.smx-crumbs a:hover {
	color: var(--smx-primary);
}

.smx-crumbs [aria-current="page"] {
	color: var(--smx-ink);
	font-weight: 500;
}

/* Innehållsförteckning (långa sidor) */
.smx-toc {
	background: var(--smx-mist);
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	padding: 22px 24px;
	margin-bottom: 34px;
}

.smx-toc h2 {
	font-size: .88rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--smx-muted);
	margin-bottom: 12px;
}

.smx-toc ol {
	margin: 0;
	padding-left: 1.2em;
	display: grid;
	gap: 7px;
	font-size: .95rem;
}

.smx-toc ol li::marker {
	color: var(--smx-muted);
	font-family: var(--smx-font-head);
}

/* ==========================================================================
   24. JURIDISKA / EDITORIELLA SIDOR
   ========================================================================== */
.smx-legal {
	max-width: 800px;
}

.smx-legal__updated {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	background: var(--smx-mist);
	border: 1px solid var(--smx-line);
	border-left: 3px solid var(--smx-signal);
	border-radius: 0 var(--smx-r) var(--smx-r) 0;
	padding: 15px 20px;
	font-size: .89rem;
	color: var(--smx-body);
	margin-bottom: 34px;
}

.smx-legal__updated strong {
	font-family: var(--smx-font-head);
	color: var(--smx-ink);
}

.smx-legal h2 {
	font-size: 1.3rem;
	margin-top: 2.2em;
	margin-bottom: .6em;
	padding-top: .8em;
	border-top: 1px solid var(--smx-line);
}

.smx-legal h2:first-of-type {
	margin-top: 0;
	border-top: 0;
	padding-top: 0;
}

.smx-legal h3 {
	font-size: 1.09rem;
	margin-top: 1.6em;
	margin-bottom: .45em;
}

.smx-legal ul,
.smx-legal ol {
	padding-left: 1.35em;
	margin-block: 1em;
}

.smx-legal li {
	margin-bottom: .5em;
}

.smx-legal dl {
	margin: 1.2em 0;
}

.smx-legal dt {
	font-family: var(--smx-font-head);
	font-weight: 600;
	color: var(--smx-ink);
	margin-top: 1em;
}

.smx-legal dd {
	margin: .25em 0 0;
}

/* ==========================================================================
   25. FOOTER
   ========================================================================== */
.smx-footer {
	position: relative;
	background: var(--smx-deep);
	color: #98acc7;
	margin-top: 0;
	padding-top: 90px;
}

/* Supportkort som överlappar footern */
.smx-footer__lift {
	position: relative;
	margin-top: calc(var(--smx-section-y) * -1);
	z-index: 3;
}

.smx-footer__support {
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-xl);
	box-shadow: var(--smx-sh-4);
	padding: clamp(26px, 3.4vw, 42px);
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
}

@media (min-width: 860px) {
	.smx-footer__support {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 40px;
	}
}

.smx-footer__support h2 {
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
	margin-bottom: 10px;
}

.smx-footer__support p {
	margin: 0;
	font-size: .98rem;
	color: var(--smx-body);
}

.smx-footer__support-actions {
	display: grid;
	gap: 10px;
}

.smx-footer__main {
	padding-block: clamp(40px, 5vw, 66px) 34px;
}

.smx-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
}

@media (min-width: 620px) {
	.smx-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.smx-footer__grid {
		grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
		gap: 44px;
	}
}

.smx-footer__brand-img {
	height: 44px;
	width: auto;
	max-width: 210px;
	object-fit: contain;
	margin-bottom: 18px;
	filter: brightness(0) invert(1);
	opacity: .95;
}

.smx-footer__about {
	font-size: .94rem;
	color: #93a8c6;
	max-width: 44ch;
	margin-bottom: 20px;
}

.smx-footer__contact {
	display: grid;
	gap: 11px;
	font-size: .92rem;
}

.smx-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.smx-footer__contact-item svg {
	width: 17px;
	height: 17px;
	color: #4fd6bb;
	margin-top: 4px;
	flex-shrink: 0;
}

.smx-footer__contact a {
	color: #d6e2f1;
	word-break: break-word;
}

.smx-footer__contact a:hover {
	color: #fff;
}

.smx-footer__title {
	font-family: var(--smx-font-head);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #6f88ab;
	margin-bottom: 16px;
}

.smx-footer__list,
.smx-footer ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: .93rem;
}

.smx-footer__list a,
.smx-footer ul.menu a {
	color: #a9bdd7;
}

.smx-footer__list a:hover,
.smx-footer ul.menu a:hover {
	color: #fff;
	text-decoration: none;
}

.smx-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: 22px 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	font-size: .86rem;
	color: #7b91b2;
}

.smx-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.smx-footer__legal-links a {
	color: #8fa6c5;
}

.smx-footer__legal-links a:hover {
	color: #fff;
}

.smx-footer__disclaimer {
	background: rgba(0, 0, 0, .22);
	padding-block: 18px;
	font-size: .82rem;
	line-height: 1.6;
	color: #718aad;
}

/* Utrymme så flytknappen aldrig täcker sista innehållet */
.smx-footer__bottom {
	padding-bottom: calc(26px + env(safe-area-inset-bottom));
}

@media (max-width: 860px) {
	.smx-footer__disclaimer {
		padding-bottom: calc(18px + 76px + env(safe-area-inset-bottom));
	}
}

/* ==========================================================================
   26. WHATSAPP-FLYTKNAPP
   ========================================================================== */
.smx-wa-float {
	position: fixed;
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom));
	z-index: 250;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	background: var(--smx-wa);
	color: #05301a;
	font-family: var(--smx-font-head);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
	padding: 15px 22px 15px 18px;
	border-radius: var(--smx-r-pill);
	box-shadow: 0 10px 28px -8px rgba(6, 78, 42, .55), 0 0 0 4px rgba(255, 255, 255, .9);
	text-decoration: none;
	transition: transform var(--smx-t), background-color var(--smx-t), box-shadow var(--smx-t);
}

.smx-wa-float:hover {
	background: #1fbf5c;
	color: #05301a;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -10px rgba(6, 78, 42, .6), 0 0 0 4px rgba(255, 255, 255, .95);
}

.smx-wa-float:focus-visible {
	outline: 3px solid var(--smx-ink);
	outline-offset: 3px;
}

.smx-wa-float__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.smx-wa-float__label {
	white-space: nowrap;
}

/* Göm när meny/modal är öppen */
body.smx-no-scroll .smx-wa-float,
.smx-wa-float.is-hidden {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	pointer-events: none;
}

/* Admin-bar */
body.admin-bar .smx-wa-float {
	bottom: calc(24px + env(safe-area-inset-bottom));
}

@media (max-width: 860px) {
	.smx-wa-float {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom));
		width: 56px;
		height: 56px;
		padding: 0;
		justify-content: center;
		gap: 0;
	}

	.smx-wa-float__label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.smx-wa-float__icon {
		width: 27px;
		height: 27px;
	}
}

/* Vid 200 % zoom / smala skärmar behåll läsbarhet */
@media (max-width: 380px) {
	.smx-wa-float {
		width: 52px;
		height: 52px;
	}
}

/* ==========================================================================
   27. KOMMENTARER
   ========================================================================== */
.smx-comments {
	margin-top: 52px;
	padding-top: 40px;
	border-top: 1px solid var(--smx-line);
}

.smx-comments__title {
	font-size: 1.35rem;
	margin-bottom: 26px;
}

.smx-commentlist {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: grid;
	gap: 20px;
}

.smx-commentlist .children {
	list-style: none;
	margin: 20px 0 0;
	padding-left: clamp(14px, 3vw, 34px);
	display: grid;
	gap: 20px;
	border-left: 1px solid var(--smx-line);
}

.smx-comment {
	background: var(--smx-mist);
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	padding: 20px 22px;
}

.smx-comment__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.smx-comment__head img {
	border-radius: 50%;
}

.smx-comment__author {
	font-family: var(--smx-font-head);
	font-weight: 600;
	color: var(--smx-ink);
	font-size: .97rem;
}

.smx-comment__date {
	font-size: .82rem;
	color: var(--smx-muted);
}

.smx-comment__body {
	font-size: .95rem;
}

.smx-comment__body p:last-child {
	margin-bottom: 0;
}

.comment-reply-link {
	font-size: .86rem;
	font-weight: 600;
}

.comment-respond {
	background: #fff;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-l);
	padding: clamp(22px, 3vw, 32px);
}

.comment-reply-title {
	font-size: 1.2rem;
	margin-bottom: 8px;
}

.comment-form {
	display: grid;
	gap: 16px;
}

.comment-form label {
	display: block;
	font-family: var(--smx-font-head);
	font-size: .9rem;
	font-weight: 600;
	color: var(--smx-ink);
	margin-bottom: 6px;
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: .88rem;
}

.comment-form .comment-form-cookies-consent input {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin-top: 2px;
	accent-color: var(--smx-primary);
}

.comment-form .submit,
.comment-form input[type="submit"] {
	justify-self: start;
	background: var(--smx-primary);
	color: #fff;
	border: 0;
	border-radius: var(--smx-r-s);
	padding: 15px 28px;
	font-family: var(--smx-font-head);
	font-weight: 600;
	cursor: pointer;
	min-height: 50px;
	transition: background-color var(--smx-t);
}

.comment-form .submit:hover,
.comment-form input[type="submit"]:hover {
	background: var(--smx-primary-d);
}

.smx-comments__closed {
	font-size: .93rem;
	color: var(--smx-muted);
	font-style: italic;
}

/* ==========================================================================
   28. SIDNAVIGERING & 404
   ========================================================================== */
.smx-pagination {
	margin-top: 46px;
	display: flex;
	justify-content: center;
}

.smx-pagination .nav-links,
.smx-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.smx-pagination a.page-numbers,
.smx-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-s);
	background: #fff;
	font-family: var(--smx-font-head);
	font-weight: 600;
	font-size: .94rem;
	color: var(--smx-ink-2);
	transition: border-color var(--smx-t), background-color var(--smx-t), color var(--smx-t);
}

.smx-pagination a.page-numbers:hover {
	border-color: var(--smx-primary);
	color: var(--smx-primary);
	text-decoration: none;
}

.smx-pagination span.current {
	background: var(--smx-primary);
	border-color: var(--smx-primary);
	color: #fff;
}

.smx-pagination .dots {
	border-color: transparent;
	background: transparent;
}

.smx-postnav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid var(--smx-line);
}

@media (min-width: 720px) {
	.smx-postnav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.smx-postnav__item {
	display: block;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r);
	padding: 18px 20px;
	color: inherit;
}

.smx-postnav__item:hover {
	border-color: var(--smx-line-2);
	background: var(--smx-mist);
	text-decoration: none;
	color: inherit;
}

.smx-postnav__label {
	display: block;
	font-size: .78rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--smx-muted);
	font-family: var(--smx-font-head);
	font-weight: 600;
	margin-bottom: 6px;
}

.smx-postnav__title {
	font-family: var(--smx-font-head);
	font-weight: 600;
	color: var(--smx-ink);
	font-size: 1rem;
	line-height: 1.35;
}

.smx-postnav__item--next {
	text-align: right;
}

/* 404 */
.smx-404 {
	text-align: center;
	max-width: 680px;
	margin-inline: auto;
}

.smx-404__code {
	font-family: var(--smx-font-head);
	font-size: clamp(4rem, 3rem + 8vw, 8rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.05em;
	color: var(--smx-primary-l2);
	margin-bottom: 8px;
}

.smx-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
}

.smx-404__links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-r-pill);
	padding: 9px 18px;
	font-size: .92rem;
	font-family: var(--smx-font-head);
	font-weight: 500;
	color: var(--smx-ink-2);
	background: #fff;
}

.smx-404__links a:hover {
	border-color: var(--smx-primary);
	color: var(--smx-primary);
	text-decoration: none;
}

/* Sökresultat */
.smx-result {
	padding: 24px 0;
	border-bottom: 1px solid var(--smx-line);
}

.smx-result:first-child {
	padding-top: 0;
}

.smx-result__title {
	font-size: 1.15rem;
	margin-bottom: 8px;
}

.smx-result__url {
	font-size: .82rem;
	color: var(--smx-signal-d);
	margin-bottom: 6px;
	word-break: break-word;
}

/* ==========================================================================
   29. WORDPRESS-STANDARDKLASSER
   ========================================================================== */
.alignleft {
	float: left;
	margin: .4em 1.6em 1.2em 0;
}

.alignright {
	float: right;
	margin: .4em 0 1.2em 1.6em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	max-width: min(1100px, 100%);
	margin-inline: auto;
}

.alignfull {
	width: 100%;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	font-size: .85rem;
	color: var(--smx-muted);
	text-align: center;
	margin-top: 8px;
}

.sticky .smx-post__title::after {
	content: "★";
	margin-left: 8px;
	color: var(--smx-amber);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bypostauthor > .smx-comment {
	border-color: var(--smx-primary-l2);
}

@media (max-width: 640px) {
	.alignleft,
	.alignright {
		float: none;
		margin: 1.2em 0;
	}
}

/* ==========================================================================
   30. HJÄLPKLASSER
   ========================================================================== */
.smx-mt-0 { margin-top: 0 !important; }
.smx-mt-s { margin-top: 14px; }
.smx-mt-m { margin-top: 26px; }
.smx-mt-l { margin-top: 42px; }
.smx-mb-0 { margin-bottom: 0 !important; }
.smx-text-center { text-align: center; }
.smx-narrow { max-width: 720px; }
.smx-narrow-center { max-width: 720px; margin-inline: auto; }
.smx-muted { color: var(--smx-muted); font-size: .88rem; }
.smx-nowrap { white-space: nowrap; }

/* ==========================================================================
   31. RÖRELSE & TILLGÄNGLIGHET
   ========================================================================== */
.smx-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 520ms var(--smx-ease), transform 520ms var(--smx-ease);
	will-change: opacity, transform;
}

.smx-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Fallback när JS är avstängt */
.no-js .smx-reveal {
	opacity: 1;
	transform: none;
}

.no-js .smx-faq__a {
	max-height: none;
}

.no-js .smx-faq__icon {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.smx-reveal {
		opacity: 1;
		transform: none;
	}

	.smx-post:hover .smx-post__thumb img,
	.smx-card:hover,
	.smx-device:hover,
	.smx-btn:hover,
	.smx-wa-float:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.smx-btn,
	.smx-card,
	.smx-plan,
	.smx-device {
		border: 1px solid;
	}
}

/* Utskrift */
@media print {
	.smx-header,
	.smx-topbar,
	.smx-footer,
	.smx-wa-float,
	.smx-mobile,
	.smx-ctaband,
	.smx-ctalight {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 12pt;
	}

	.smx-faq__a {
		max-height: none !important;
	}
}