/*! focalx-design-system.css — bundled: tokens, typography, global-landing, buttons, cta, gates-video, focalx-gates-video, how-it-works. Rebuild: see comment in functions.php */

/* ========== tokens.css ========== */
/**
 * FocalX — Design tokens (farver, skygger, radii, typografi, layout).
 *
 * Matcher Elementor kit (post-2194) så custom templates ser identiske ud
 * med eksisterende (Elementor-byggede) sider under migrationen.
 *
 * Loader globalt. Alle komponenter bør bruge disse variabler.
 */

/* =============================================================
 * Self-hosted Ubuntu (fonts ligger i /assets/fonts/)
 *
 * Vægt-mapping:
 *   400 → Ubuntu-Light   (site bruger Light som default "regular")
 *   500 → Ubuntu-Medium
 *   600 → Ubuntu-Medium  (Ubuntu har ingen SemiBold — genbrug Medium)
 *   700 → Ubuntu-Bold
 *
 * font-display: swap sikrer tekst er læsbar under font-load (ingen FOIT).
 * ============================================================= */

@font-face {
	font-family: "Ubuntu";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../assets/fonts/Ubuntu-Light.woff2") format("woff2");
}

@font-face {
	font-family: "Ubuntu";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../assets/fonts/Ubuntu-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "Ubuntu";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../assets/fonts/Ubuntu-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "Ubuntu";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../assets/fonts/Ubuntu-Bold.woff2") format("woff2");
}

/* =============================================================
 * Animation: gør det muligt at animere til/fra `auto`/`fit-content`
 * på fx. height/block-size. Bruges af vores accordions
 * (::details-content transition).
 *
 * Graceful degrade: browsers uden support snapper bare open/close
 * uden animation — indhold forbliver tilgængeligt.
 * ============================================================= */
html {
	interpolate-size: allow-keywords;
	scroll-behavior: smooth;
}

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

:root {
	/* -------- Brand / accent farver (Elementor kit) -------- */
	--fx-blue:          #163b6b;  /* Primary blue (--e-global-color-secondary/accent) */
	--fx-blue-hover:    #0f2d54;
	--fx-blue-light:    #2d5a9e;

	--fx-mint:          #e0f8de;  /* Hero checkmark background */
	--fx-dark-green:    #004642;  /* Hero checkmark icon */
	--fx-yellow:        #ffd978;
	--fx-peach:         #fea25f;
	--fx-sky:           #93e7fe;
	--fx-pink:          #faa9e4;
	--fx-lilac:         #d5cdec;  /* Feature-grid tone (Elementor icon bg) */

	/* -------- Tekstfarver (Elementor kit) -------- */
	--fx-text:          #2d2f31;          /* H1-H6 + strong body (--e-global-color-primary) */
	--fx-text-body:     rgba(45, 47, 49, 0.8);  /* #2d2f31CC — standard body */
	--fx-text-muted:    #5f6770;          /* Meta, captions (--e-global-color-248826f) */
	--fx-text-subtle:   #babfc3;          /* Disabled, placeholder (--e-global-color-3119dab) */

	/* -------- Baggrunde -------- */
	--fx-bg:            #ffffff;
	/* Lidt mere luft fra hvid — sektioner der skifter til “soft” føles tydeligere */
	--fx-bg-soft:       #f2f0f6;
	--fx-bg-muted:      #e9e6ef;

	/* -------- Grænser (lidt skarpere end før — stadig neutrale) -------- */
	--fx-border:        #dde1e7;
	--fx-border-soft:   #e8eaef;

	/* -------- Feedback -------- */
	--fx-link:          var(--fx-blue);
	--fx-link-hover:    var(--fx-blue-hover);
	--fx-success:       #1e7e34;
	--fx-warning:       #b85c00;
	--fx-danger:        #dc2626;

	/* -------- Radii --------
	 *
	 * Generelle radii (kasser, billeder, kort, paneler).
	 *
	 * --fx-btn-radius er specifikt til CTA-knapper på sitet — defaulter
	 * til 50px ("kraftigt afrundet pill-stil"). Alle knapper i .fx-btn-
	 * systemet arver denne radius automatisk. Ønsker du en specifik
	 * knap med anden radius (fx fuld 999px pill, eller skarpere 12px)
	 * skal du eksplicit override border-radius på den enkelte knap-
	 * variant — fx .fx-btn--pill, .fx-header__cta osv.
	 */
	--fx-radius-sm:     6px;
	--fx-radius:        12px;
	--fx-radius-lg:     16px;
	--fx-radius-xl:     24px;
	--fx-btn-radius:    50px;

	/* -------- Skygger -------- */
	--fx-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.05);
	--fx-shadow:        0 4px 20px rgba(22, 59, 107, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
	--fx-shadow-lg:     0 12px 40px rgba(22, 59, 107, 0.09), 0 2px 10px rgba(0, 0, 0, 0.05);

	/* -------- Typografi (Elementor kit) -------- */
	--fx-font-heading:  "Ubuntu", sans-serif;
	--fx-font-body:     "Ubuntu", sans-serif;

	/* -------- Heading scale --------
	 *
	 * KONVENTION — overskrifter (h1–h6):
	 * Sitet bruger ÉN samlet skala for alle overskrifter på tværs af
	 * sektioner. Tokenset her definerer både size, line-height og
	 * letter-spacing pr. niveau, og selve `h1…h6` tags får defaults
	 * applied længere nede i filen (se "Default heading styles").
	 *
	 * Størrelser justeres pr. breakpoint (desktop → tablet → mobile)
	 * via @media-blokkene længere nede. Line-height og letter-spacing
	 * holdes derimod KONSTANT på tværs af breakpoints — typografiske
	 * ratioer ændrer sig ikke når størrelsen skaleres ned, kun det
	 * absolutte tal. Det giver et ensartet rytmisk look uanset device.
	 *
	 * Letter-spacing er let negativ på de største display-headings
	 * (h1/h2) for at modvirke visuel "luftighed" som store fonts har
	 * — moderne web-konvention. Mindre headings (h4–h6) har 0 så
	 * brødtekst-nært typografisk look bevares.
	 *
	 * Komponent-specifik override er stadig ok hvis en sektion har
	 * brug for fx en kæmpe hero-h1 eller en speciel feature-h3 —
	 * men brug ALTID disse tokens som baseline før du afviger.
	 */

	/* Sizes: desktop → tablet (≤1024) → mobile (≤767) — samme værdier
	   som Elementor-kittet bruger, så frontend matcher kit-vinduerne. */
	--fx-text-base:     18px;
	--fx-h1:            48px;
	--fx-h2:            40px;
	--fx-h3:            32px;
	--fx-h4:            26px;
	--fx-h5:            22px;
	--fx-h6:            18px;

	/* Line-heights — strammere på store display-headings, mere
	   åbne på små for læsbarhed. Konstante på tværs af breakpoints. */
	--fx-h1-lh:         1.1;
	--fx-h2-lh:         1.15;
	--fx-h3-lh:         1.2;
	--fx-h4-lh:         1.25;
	--fx-h5-lh:         1.35;
	--fx-h6-lh:         1.4;

	/* Letter-spacing — subtil negativ tracking på display-headings,
	   neutral fra h4 og ned. */
	--fx-h1-ls:         -0.02em;
	--fx-h2-ls:         -0.015em;
	--fx-h3-ls:         -0.01em;
	--fx-h4-ls:         0;
	--fx-h5-ls:         0;
	--fx-h6-ls:         0;

	/* -------- Layout --------
	 *
	 * KONVENTION — sektion-bredde (1140px på desktop):
	 *
	 * ALLE sektioner på sitet skal som UDGANGSPUNKT have max-bredde
	 * 1140px på desktop. Det er en bevidst designbeslutning der
	 * matcher Elementor-kittets "boxed" container, så frontend-
	 * sektioner føles ensartet bredde uanset hvilken side de står
	 * på. Hvis du laver en ny sektion: følg konventionen — undlad
	 * IKKE at sætte max-width.
	 *
	 * KORREKT brug — vælg én af to:
	 *   1. Brug utility-klassen .fx-section__container (defineret
	 *      længere nede i denne fil) som wrapper inde i sektionen:
	 *
	 *         <section class="fx-min-feature">
	 *             <div class="fx-section__container">
	 *                 …content…
	 *             </div>
	 *         </section>
	 *
	 *   2. Eller brug tokenet eksplicit på din egen container-
	 *      klasse (anbefales hvis du allerede har en BEM-wrapper
	 *      med ekstra layout-styles):
	 *
	 *         .fx-min-feature__container {
	 *             max-width: var(--fx-max-content);
	 *             margin:    0 auto;
	 *             padding:   0 var(--fx-gutter);
	 *         }
	 *
	 * UNDGÅ hardcoded `max-width: 1140px;` — brug ALTID tokenet, så
	 * hele sitet kan ændres ét sted hvis vi senere skifter til fx
	 * 1200px eller 1080px.
	 *
	 * UNDTAGELSER (kun hvis eksplicit ønsket):
	 *   • Full-bleed sektioner (logo-carousel, video-baggrunde) må
	 *     fylde 100% — set max-width: none + indre 1140px-wrapper.
	 *   • Smallere INDRE wrappers er ok og har egne tokens:
	 *       --fx-max-narrow (820px)  — centreret intro/header-tekst
	 *       --fx-max-prose  (720px)  — læsbar artikel-tekst
	 *     Disse bruges INDE I 1140px-containeren — IKKE i stedet for.
	 *   • Modaler/lightboxes har deres egne max-widths.
	 *
	 * Skal en specifik sektion afvige (fx en bevidst bredere
	 * compare-tabel, eller en smal compare-archive hero), override
	 * eksplicit på den enkelte komponent — men kommentér HVORFOR
	 * så det er tydeligt at det er bevidst.
	 */
	--fx-max-content:   1140px;   /* Default sektion-bredde (desktop) */
	--fx-max-narrow:    820px;    /* Centreret tekst (header/intro) */
	--fx-max-prose:     720px;    /* Læsbar artikel-tekst */
	/* Side-padding: mærkbart mere luft til kant end 24px, uden at klemme indhold */
	--fx-gutter:        28px;
	/* Vertikal padding mellem sektioner — øget vs. tidligere kit-værdier
	   (96/72/48) for et mere moderne, “premium” luftigt layout. */
	--fx-section-py:    112px;
	--fx-col-gap:       104px;    /* KONVENTION — gap mellem kolonner i 2-kolonne
	                                 content-sektioner (hero, opshub, image-
	                                 accordion, partnership, example-flow,
	                                 system-of-record osv.).
	                                 Desktop: 104px · Tablet: 56px · Mobil: 28px.
	                                 Brug ALTID var(--fx-col-gap) på 2-kolonne
	                                 grid'en — undgå hard-codede værdier så hele
	                                 sitet rytmisk holder samme afstand mellem
	                                 venstre og højre kolonne. */
}

/* Tablet */
@media (max-width: 1024px) {
	:root {
		--fx-text-base: 17px;
		--fx-h1: 40px;
		--fx-h2: 34px;
		--fx-h3: 28px;
		--fx-h4: 24px;
		--fx-h5: 19px;
		--fx-h6: 17px;
		--fx-section-py: 88px;
		--fx-col-gap: 56px;
		--fx-gutter: 26px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	:root {
		--fx-text-base: 16px;
		--fx-h1: 32px;
		--fx-h2: 28px;
		--fx-h3: 24px;
		--fx-h4: 21px;
		--fx-h5: 18px;
		--fx-h6: 16px;
		--fx-section-py: 56px;
		--fx-col-gap: 28px;
		/* Horisontal luft til kant — samme som header/footer på mobil (20px + safe-area via max() der hvor det bruges) */
		--fx-gutter: 20px;
	}
}

/* -------------------------------------------------------------
 * Default heading styles (site-wide)
 *
 * KONVENTION — én skala, alle sektioner:
 * Native h1–h6 tags får automatisk size + line-height + letter-
 * spacing fra tokens-skalaen. Det betyder:
 *
 *   • Et nøgent <h2 class="fx-section__title">Foo</h2> behøver
 *     IKKE selv at sætte font-size — det matcher resten af sitet.
 *   • Komponenter der allerede sætter font-size: var(--fx-h2) på
 *     en wrapper-klasse arver line-height fra h2-default'en, så
 *     vertikal rytme er konsistent overalt.
 *   • Skift af heading-tag (h2 → h3) ændrer både størrelse OG
 *     line-height korrekt automatisk.
 *
 * Hvis en specifik sektion behøver afvigelse (fx ekstra-stor hero-
 * h1 eller specialiseret feature-h3), så override eksplicit på den
 * pågældende klasse — men brug ALTID --fx-h*-tokens som baseline.
 *
 * Astra-parent / WP-core forsøger at injicere -apple-system /
 * system-ui på iOS/macOS — derfor sætter vi font-family eksplicit
 * på alle form-elementer her.
 * ------------------------------------------------------------- */

html, body, input, select, textarea, button {
	font-family: var(--fx-font-body);
}

/* -------------------------------------------------------------
 * Sektion-container utility (site-wide)
 *
 * Default-wrapper for ALLE sektion-content. Sætter automatisk:
 *   • max-width 1140px (--fx-max-content)
 *   • horisontal centrering
 *   • side-gutter (28px desktop → 20px mobil via --fx-gutter)
 *
 * Brug INDE I sektioner hvor du ikke har en sektion-specifik
 * BEM-container med egne layout-styles:
 *
 *   <section class="fx-min-feature">
 *       <div class="fx-section__container">
 *           …content…
 *       </div>
 *   </section>
 *
 * Hvis du allerede har en BEM-wrapper med ekstra layout (grid,
 * flexbox osv.), så brug var(--fx-max-content) på den i stedet
 * for at lægge denne klasse oveni — undgå unødig DOM/klasse-støj.
 * ------------------------------------------------------------- */

.fx-section__container {
	max-width: var(--fx-max-content);
	margin:    0 auto;
	padding:   0 var(--fx-gutter);
}

h1, h2, h3, h4, h5, h6 {
	font-family:   var(--fx-font-heading);
	font-weight:   700;
	color:         var(--fx-text);
	/* Bevidst INGEN margin-reset her — post-body, Gutenberg-blokke
	 * og andre flow-content kontekster relyer på browser-default
	 * margin for vertikal rytme mellem heading + næste afsnit.
	 * Sektion-komponenter (.fx-*__title osv.) sætter margin: 0
	 * lokalt hvor det er ønsket. */
}

h1 {
	font-size:      var(--fx-h1);
	line-height:    var(--fx-h1-lh);
	letter-spacing: var(--fx-h1-ls);
}

h2 {
	font-size:      var(--fx-h2);
	line-height:    var(--fx-h2-lh);
	letter-spacing: var(--fx-h2-ls);
}

h3 {
	font-size:      var(--fx-h3);
	line-height:    var(--fx-h3-lh);
	letter-spacing: var(--fx-h3-ls);
}

h4 {
	font-size:      var(--fx-h4);
	line-height:    var(--fx-h4-lh);
	letter-spacing: var(--fx-h4-ls);
}

h5 {
	font-size:      var(--fx-h5);
	line-height:    var(--fx-h5-lh);
	letter-spacing: var(--fx-h5-ls);
}

h6 {
	font-size:      var(--fx-h6);
	line-height:    var(--fx-h6-lh);
	letter-spacing: var(--fx-h6-ls);
}

/* -------------------------------------------------------------
 * Fælles eyebrow-pill (site-wide)
 *
 * Grøn pill-label der bruges over overskrifter som hint-badge i
 * fx. hero-sektioner, operations-hub, image-accordion, system-of-record
 * osv. Én fælles visuel identitet → samme farve/font/padding overalt.
 * Marginen sættes pr. komponent da layout-afstanden varierer.
 * ------------------------------------------------------------- */

.fx-eyebrow,
.fx-about-hero__eyebrow,
.fx-sor__eyebrow,
.fx-opshub__eyebrow,
.fx-image-accordion__eyebrow,
.fx-feature-grid__eyebrow,
.fx-example-flow__eyebrow,
.fx-securement__eyebrow,
.fx-industry-xlinks__eyebrow,
.fx-partnership__eyebrow,
.fx-dashboards__eyebrow,
.fx-height-detection__eyebrow {
	display:         inline-block;
	padding:         6px 16px;
	border-radius:   999px;
	background:      var(--fx-mint, #E0F8DE);
	color:           var(--fx-dark-green, #004642);
	font-family:     var(--fx-font-body);
	font-size:       14px;
	font-weight:     600;
	line-height:     1.4;
	letter-spacing:  0.06em;
	text-transform:  uppercase;
}

/* -------------------------------------------------------------
 * KONVENTION — checklist-ikon (site-wide)
 *
 * Standard "check"-ikon der bruges på checkpunkt-lister på tværs af
 * sitet (fx "Inspections directly on the railcars" → bullet-liste,
 * feature-bullets osv.). Mint-grøn cirkel-baggrund (#E0F8DE) med
 * mørk grøn checkmark (#004642) — matcher eyebrow-pill-paletten,
 * så lister visuelt kobles til brand-identiteten.
 *
 * BRUG (anbefalet — utility-klasser):
 *   <ul class="fx-checklist" role="list">
 *       <li class="fx-checklist__item">Vehicle damage</li>
 *       <li class="fx-checklist__item">Vehicle spacing …</li>
 *   </ul>
 *
 * Sektion-specifikke lister kan fortsat have egne klasser, men bør
 * genbruge samme check-SVG som ::before-baggrund, så ikonet er ens
 * overalt. Hvis du har behov for et HELT andet check-look (fx solid
 * filled, eller en cirkulær tick uden baggrund), så override
 * eksplicit på den enkelte komponent.
 * ------------------------------------------------------------- */

.fx-checklist {
	margin:         0;
	padding:        0;
	list-style:     none;
	display:        flex;
	flex-direction: column;
	gap:            12px;
}

.fx-checklist__item {
	position:    relative;
	padding-left: 32px; /* 22px ikon + 10px luft */
	min-height:  22px;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size:   16px;
	line-height: 1.5;
	color:       var(--fx-text, #2d2f31);
}

.fx-checklist__item::before {
	content:           "";
	position:          absolute;
	left:              0;
	top:               0.15em; /* aligner med første tekst-linje */
	width:             22px;
	height:            22px;
	background-image:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><circle cx='8' cy='8' r='8' fill='%23E0F8DE'/><path fill='%23004642' fill-rule='evenodd' d='M10.72 5.22a.75.75 0 011.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06L6.75 9.19l3.97-3.97z' clip-rule='evenodd'/></svg>");
	background-repeat: no-repeat;
	background-size:   contain;
	background-position: center;
}

/* -------------------------------------------------------------
 * Global polish (site-wide, moderne defaults)
 *
 * Supplerer Astra uden at hardcode konkurrent-layout. Typografi-skala
 * for overskrifter styres stadig af h1–h6-blokkene ovenfor —
 * typography.css overskriver ikke længere line-height på headings.
 * ------------------------------------------------------------- */

body {
	color:                   var(--fx-text-body);
	line-height:             1.55;
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: rgba(22, 59, 107, 0.2);
	/* Bevar elementets tekstfarve (muted vs. heading); undgå tvungen sort + WebKit-hvid
	   når kun background er sat. */
	color: inherit;
	-webkit-text-fill-color: inherit;
}

::-moz-selection {
	background: rgba(22, 59, 107, 0.2);
	color: inherit;
}

/* Diskret focus-ring for tastatur (matcher brand-blå). */
:focus-visible {
	outline:        2px solid var(--fx-blue, #163b6b);
	outline-offset: 2px;
}

/* Museklik: undgå dobbelt-ring på links når browseren stadig viser :focus */
a:focus:not(:focus-visible) {
	outline: none;
}

/* ========== typography.css ========== */
/**
 * FocalX — Typography base styles.
 *
 * Globale defaults for overskrifter og body text: konsistent margin-bottom
 * + line-height. Komponent-klasser (fx .fx-cta__title) overrider frit.
 *
 * Loader globalt efter tokens.css så alle sider og templates picker det op.
 */

h1, h2, h3, h4, h5, h6 {
	margin:      0 0 16px;
	font-weight: 700;
	color:       var(--fx-text, #2d2f31);
	/* font-size, line-height, letter-spacing: tokens.css (skala pr. niveau) */
}

h1 { margin-bottom: 28px; }
h2 { margin-bottom: 24px; }
h3 { margin-bottom: 18px; }
h4 { margin-bottom: 16px; }
h5 { margin-bottom: 14px; }
h6 { margin-bottom: 14px; }

/* Body text: konsistent margin-bottom mellem paragraffer */
p {
	margin:      0 0 24px;
	line-height: 1.65;
}

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

/* Strong: altid primær text-color site-wide, så fremhævninger står klart
   også i prose med muted body-color (fx .fx-vi-prose, .fx-ai-prose). */
strong, b {
	color: var(--fx-text, #2d2f31);
	font-weight: 700;
}

/* Fjern den globale margin på overskrifter der står som sidste barn i
   en container (fx. kun-heading sektioner) — undgår visuel "luft" nedad. */
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
	margin-bottom: 0;
}

/* ========== global-landing.css ========== */
/**
 * FocalX — fælles polish for alle custom landingssider og PHP-skabeloner.
 *
 * Scopet til #fx-main så Astra-header/footer, widgets og evt. Elementor-
 * sider uden #fx-main ikke påvirkes.
 *
 * Loader globalt efter typography.css (via functions.php).
 */

#fx-main.fx-main {
	color: var(--fx-text-body);
}

/* Ingen global border mellem #fx-main-sektioner — hårgrænser på hvert skift
   føltes tunge; rytme kommer fra hver sektions padding/background (logo-
   carousel har stadig egen diskret top-border i logo-carousel.css). */

/* Lidt pænere linjeskift i løbende brødtekst (Chrome 117+, Safari 17.5+). */
@supports (text-wrap: pretty) {
	#fx-main.fx-main p {
		text-wrap: pretty;
	}
}

/* Diskret typografi for citater i migreret indhold / WYSIWYG. */
#fx-main.fx-main blockquote {
	margin: 1.25em 0;
	padding: 0.35em 0 0.35em 1.15em;
	border-left: 4px solid rgba(22, 59, 107, 0.28);
	color: var(--fx-text-body);
	font-style: italic;
}

#fx-main.fx-main blockquote p:last-child {
	margin-bottom: 0;
}

/* Horisontal skillelinje: brug design tokens i stedet for browser-default grå. */
#fx-main.fx-main hr {
	border: 0;
	border-top: 1px solid var(--fx-border, #e5e7eb);
	margin: 2em 0;
}

/* Lister uden egen BEM-klasse (fx. WYSIWYG) — luft og læsbarhed.
   Undtag `.pill-track` (hero-ToC): `li + li`-margin er tænkt til vertikale
   brødtekst-lister; i en horisontal flex-række giver det “første pill højere”. */
#fx-main.fx-main :is(ul, ol):not([class*="fx-"]):not([class*="wp-block"]):not(.pill-track) {
	line-height: 1.65;
}

#fx-main.fx-main :is(ul, ol):not([class*="fx-"]):not([class*="wp-block"]):not(.pill-track) li + li {
	margin-top: 0.35em;
}

/* ========== buttons.css ========== */
/**
 * FocalX — Button utilities.
 *
 * Genbrugelige CTA-knapper på tværs af sitet. Bruges som:
 *   <a class="fx-btn fx-btn--primary">Text</a>
 *   <button class="fx-btn fx-btn--secondary">Text</button>
 *
 * Afhænger af design tokens (css/tokens.css).
 *
 * KONVENTION — knap-radius:
 * Alle knapper på sitet defaulter til border-radius: 50px (via
 * --fx-btn-radius i tokens.css). Det er et bevidst design-valg så
 * CTA'er er tydeligt afrundede og signalerer "klik". Hvis en specifik
 * knap skal have en anden radius (fuld 999px pill, skarpere 12px,
 * osv.), override da border-radius eksplicit på den enkelte knap-
 * variant — fx .fx-btn--pill (999px) nedenfor.
 */

.fx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	min-height: 48px;
	font-family: var(--fx-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--fx-btn-radius, 50px);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
}

.fx-btn__label {
	font-size: 16px;
}

.fx-btn:focus-visible {
	outline: 2px solid var(--fx-blue);
	outline-offset: 3px;
}

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

/* -- Primary: filled brand blue -- */
.fx-btn--primary {
	background: var(--fx-blue);
	color: #ffffff;
	border-color: var(--fx-blue);
}

.fx-btn--primary:hover,
.fx-btn--primary:focus {
	background: var(--fx-blue-hover);
	border-color: var(--fx-blue-hover);
	color: #ffffff;
	text-decoration: none;
}

/* -- Secondary: ghost / outline -- */
.fx-btn--secondary {
	background: transparent;
	color: var(--fx-text);
	border-color: var(--fx-border);
}

.fx-btn--secondary:hover,
.fx-btn--secondary:focus {
	background: var(--fx-bg-muted);
	border-color: var(--fx-text);
	color: var(--fx-text);
	text-decoration: none;
}

/* -- Tertiary: text-only link-like button -- */
.fx-btn--link {
	padding: 8px 4px;
	min-height: auto;
	background: transparent;
	border-color: transparent;
	color: var(--fx-link);
}

.fx-btn--link:hover,
.fx-btn--link:focus {
	color: var(--fx-link-hover);
	text-decoration: underline;
}

/* -- Size variants -- */
.fx-btn--sm {
	padding: 8px 16px;
	min-height: 36px;
	font-size: 14px;
}

.fx-btn--lg {
	padding: 16px 32px;
	min-height: 56px;
	font-size: 16px;
}

/* -- Full width (useful on mobile) -- */
.fx-btn--block {
	width: 100%;
}

/*
 * -- Pill: stærkt afrundet, subtil blå shadow --
 *
 * KONVENTION — knap-højde:
 * Pill-knapper er sitets primære "store" CTA og deler højde med
 * `.whiw-trigger` (Watch how it works) så de matcher pixel-perfekt
 * når de står side-om-side i hero / CTA-rækker. Effective rendered
 * height = 52px (arrow-bobblen `.fx-btn__arrow` er 24px + padding-y
 * 12+12 + border 2+2). Vi sætter `min-height: 52px` så pills _uden_
 * arrow også bliver 52px — så højden er ens uanset variant.
 * Hvis du ændrer arrow-størrelsen eller padding, skal `.whiw-trigger`
 * (css/watch-how-it-works-btn-popup.css) opdateres i samme ombæring.
 */
.fx-btn--pill {
	border-radius: 999px;
	padding: 12px 24px;
	min-height: 52px;
	font-size: 15px;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(22, 59, 107, 0.25);
	transition:
		background-color 0.2s ease,
		box-shadow 0.25s ease,
		transform 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.fx-btn--pill:hover,
.fx-btn--pill:focus-visible {
	box-shadow: 0 8px 24px rgba(22, 59, 107, 0.38);
	transform: translateY(-1px);
}

/* -- Arrow: pil der slider til højre on hover -- */
.fx-btn--arrow {
	gap: 12px;
	padding-right: 24px;
}

.fx-btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: currentColor;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
	flex-shrink: 0;
}

.fx-btn__arrow svg {
	width: 12px;
	height: 12px;
	display: block;
}

.fx-btn--arrow:hover .fx-btn__arrow,
.fx-btn--arrow:focus-visible .fx-btn__arrow {
	transform: translateX(4px);
	background: rgba(255, 255, 255, 0.24);
}

/* Secondary-variant: mørk arrow-bobble på lys baggrund */
.fx-btn--secondary .fx-btn__arrow {
	background: rgba(45, 47, 49, 0.08);
}

.fx-btn--secondary:hover .fx-btn__arrow,
.fx-btn--secondary:focus-visible .fx-btn__arrow {
	background: rgba(45, 47, 49, 0.14);
}

/* ========== cta.css ========== */
/**
 * CTA section (.fx-cta)
 *
 * Reusable call-to-action sektion brugt på landingssider på tværs af sitet.
 * Mørk baggrund (#2d2f31), hvid pill-knap, ét samlet vandret layout på desktop.
 * Stables vertikalt på mobil med fuld-bredde knap.
 *
 * Bruger globale tokens fra tokens.css (--fx-*) og .fx-btn utility.
 */

.fx-cta {
	padding: var(--fx-section-py) var(--fx-gutter);
	background: #2d2f31;
}

.fx-cta__container {
	max-width: var(--fx-max-content);
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	/* Afstand tekst ↔ knap: PC 96px / tablet 48px / mobil 24px
	 * (matcher sitewide 2-kolonne gap-konvention). */
	gap: 96px;
}

.fx-cta__text {
	text-align: left;
	/* Bredde: PC 60% / tablet 50% / mobil 100% (se media queries). */
	flex: 0 0 60%;
	max-width: 60%;
	min-width: 0;
}

/* Samme skala som øvrige sektioners h2 (tokens.css — var(--fx-h2) m.fl.). */
.fx-cta .fx-cta__title {
	color: #fff;
	font-size: var(--fx-h2);
	line-height: var(--fx-h2-lh);
	letter-spacing: var(--fx-h2-ls);
	font-weight: 700;
	margin: 0 0 10px;
}

.fx-cta__subtitle {
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
	max-width: 640px;
}

.fx-cta__actions {
	/* Fylder resten af rækken efter .fx-cta__text (60%/50%). */
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: 12px;
	align-self: flex-start;
	justify-content: flex-end;
}

.fx-cta .fx-cta__button {
	background: #fff;
	color: var(--fx-text);
	border: 0;
	border-radius: 999px;
	padding: 18px 60px;
	min-height: auto;
	font-size: 16px;
	font-weight: 600;
}

/* Tablet: mindre horisontal padding + container-gap */
@media (max-width: 1024px) {
	.fx-cta__container {
		gap: 48px;
	}
	.fx-cta__text {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

.fx-cta .fx-cta__button:hover,
.fx-cta .fx-cta__button:focus {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

/* Mobil: tekst øverst, knap fuld-bredde i bunden */
@media (max-width: 767px) {
	.fx-cta__container {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}
	.fx-cta__text {
		text-align: left;
		flex: 1 1 100%;
		max-width: 100%;
		width: 100%;
	}
	.fx-cta__actions {
		flex: 1 1 100%;
		width: 100%;
		align-self: stretch;
		justify-content: stretch;
	}
	.fx-cta__actions .fx-cta__button {
		width: 100%;
		justify-content: center;
		padding: 18px 30px;
	}
	.fx-cta__subtitle { font-size: 16px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.fx-cta__subtitle {
		font-size: 17px;
	}

	.fx-cta .fx-btn.fx-cta__button {
		padding: 18px 36px;
	}
}

/* ========== gates-video.css ========== */
/**
 * Gates-video section (.fx-gates)
 *
 * Reusable 2-kolonne sektion brugt på flere landingssider.
 * Venstre: heading + beskrivelse + CTA. Højre: video-player (.fx-video).
 * Stables vertikalt på tablet/mobil (video først — matcher live-designet).
 *
 * Bruger globale tokens fra tokens.css (--fx-*) og .fx-btn utility.
 * Video-player markup leveres af [focalx-gates-video]-shortcoden og har
 * sine egne styles i focalx-gates-video.css.
 */

.fx-gates {
	padding: var(--fx-section-py, 96px) var(--fx-gutter);
	background: var(--fx-bg-soft, #f5f7fa);
	display: grid;
	justify-items: center;
}

.fx-gates__container {
	box-sizing: border-box;
	width: min(100%, var(--fx-max-content, 1140px));
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--fx-col-gap);
	align-items: center;
}

.fx-gates--reverse .fx-gates__container {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.fx-gates--reverse .fx-gates__text  { order: 2; }
.fx-gates--reverse .fx-gates__media { order: 1; }

/* Stacked variant — titel centreret ovenfor, videoen centreret nedenfor.
 * Bruges fx på /gate-operations/ hvor vi kun viser video + heading, fordi
 * kontekst og beskrivelse allerede er givet af de omkringliggende sektioner.
 */
.fx-gates--stacked .fx-gates__container {
	grid-template-columns: minmax(0, 1fr);
	gap:                   clamp(24px, 3vw, 40px);
	text-align:            center;
}
.fx-gates--stacked .fx-gates__text {
	max-width: 720px;
	margin:    0 auto;
}
.fx-gates--stacked .fx-gates__media {
	max-width: 860px;
	margin:    0 auto;
	width:     100%;
}
.fx-gates--stacked .fx-gates__actions {
	justify-content: center;
}

/* Tekstkolonne */
.fx-gates__text {
	max-width: 440px;
}

.fx-gates .fx-gates__title {
	color: var(--fx-text, #2d2f31);
	font-size: clamp(26px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 16px;
}

.fx-gates__description {
	color: var(--fx-text-body, rgba(45, 47, 49, 0.8));
	font-size: var(--fx-text-base);
	line-height: 1.6;
	margin: 0 0 28px;
}

.fx-gates__actions {
	display: flex;
	gap: 12px;
}

.fx-gates .fx-gates__button {
	border-radius: 999px;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
}

/* Media-kolonne */
.fx-gates__media {
	width: 100%;
	min-width: 0;
}

/* Video arver styles fra focalx-gates-video.css — vi sikrer bare at wrapperen
 * ikke tilføjer ekstra margin i denne kontekst. */
.fx-gates__media .fx-video-wrap {
	margin: 0;
}

.fx-gates__media .fx-video,
.fx-gates__media .fx-video-thumb {
	border-radius: 20px;
}

/* Tablet: stack (tekst øverst). Gap kommer fra --fx-col-gap. */
@media (max-width: 1023px) {
	.fx-gates__container {
		grid-template-columns: 1fr;
	}
	.fx-gates__text {
		max-width: 640px;
	}
	.fx-gates--reverse .fx-gates__text,
	.fx-gates--reverse .fx-gates__media {
		order: initial;
	}
}

@media (max-width: 767px) {
	.fx-gates .fx-gates__title {
		font-size: 24px;
	}
	/* .fx-gates__description arver nu fra --fx-text-base på mobil
	   (16px via tokens.css' media-query) — ingen override nødvendig. */
	.fx-gates__actions,
	.fx-gates .fx-gates__button {
		width: 100%;
	}
	.fx-gates .fx-gates__button {
		justify-content: center;
		padding: 14px 22px;
	}
}

/* ========== focalx-gates-video.css ========== */
.fx-video-wrap {
    width: 100%;
    display: block;
    margin: 0 0 24px;
    clear: both;
}

.fx-video {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    line-height: 0;
}

.fx-video-thumb {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 24px;
}

.fx-video-embed {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.fx-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.fx-video-play {
    all: unset;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    cursor: pointer;
    box-sizing: border-box;
}

.fx-video-play:hover {
    background: rgba(0, 0, 0, 0.45);
}

.fx-video-play svg {
    width: 36px;
    height: 36px;
    display: block;
    fill: #fff;
    margin-left: 4px;
    flex: 0 0 auto;
}

.fx-video.is-loaded .fx-video-thumb {
    visibility: hidden;
}

.fx-video.is-loaded .fx-video-play {
    display: none;
}

@media (max-width: 767px) {
    .fx-video-wrap {
        margin-bottom: 24px;
    }

    .fx-video-play {
        width: 52px;
        height: 52px;
    }

    .fx-video-play svg {
        width: 30px;
        height: 30px;
        margin-left: 3px;
    }
}
/* ========== how-it-works.css ========== */
/**
 * How it works (.fx-hiw)
 *
 * Reusable sektion brugt på tværs af landingssider.
 * Design: centreret heading → nummererede pill-tabs → dark-panel med farvet
 * icon-pill + titel + beskrivelse (venstre) · hvidt billedkort (højre).
 *
 * Bruger globale tokens fra tokens.css.
 */

/* ============================================================
 * Section frame
 * ============================================================ */
.fx-hiw {
	padding: var(--fx-section-py, 96px) var(--fx-gutter);
	background: var(--fx-bg, #fff);
}

.fx-hiw__container {
	max-width: var(--fx-max-content, 1140px);
	margin: 0 auto;
}

.fx-hiw__header {
	text-align: center;
	max-width: var(--fx-max-narrow, 820px);
	margin: 0 auto clamp(28px, 3.5vw, 40px);
}

.fx-hiw .fx-hiw__title {
	color: var(--fx-text, #2d2f31);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
}

.fx-hiw__subtitle {
	font-size: var(--fx-text-base, 16px);
	line-height: 1.6;
	color: var(--fx-text-body, rgba(45, 47, 49, 0.7));
	margin: 12px 0 0;
}

/* ============================================================
 * Tabs — nummererede pills
 * ============================================================ */
.fx-hiw__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 clamp(28px, 3.5vw, 40px);
}

.fx-hiw__tab {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Asymmetrisk padding: number-bubble fylder venstre side visuelt,
	 * så vi reducerer venstre padding og giver ekstra luft til højre
	 * for at balancere knappen optisk (label-tekst skal ikke ligge
	 * klemt op af pillen). */
	padding: 10px 20px 10px 10px;
	background: var(--fx-bg-soft, #f5f7fa);
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--fx-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--fx-text-body, #555);
	transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
	user-select: none;
}

.fx-hiw__tab:hover {
	background: var(--fx-bg-muted, #eeecf2);
	border-color: var(--fx-text, #2d2f31);
	color: var(--fx-text, #2d2f31);
}

.fx-hiw__tab:focus {
	outline: none;
}

.fx-hiw__tab:focus-visible {
	outline: 2px solid var(--fx-text, #2d2f31);
	outline-offset: 3px;
}

.fx-hiw__tab.is-active {
	background: var(--fx-text, #2d2f31);
	color: var(--fx-bg, #fff);
	box-shadow: 0 6px 18px -8px rgba(45, 47, 49, 0.55);
	transform: translateY(-1px);
}

/* Number-bubble — lille cirkel */
.fx-hiw__tab-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0;
	line-height: 1;
	transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
	flex-shrink: 0;
}

.fx-hiw__tab:not(.is-active) .fx-hiw__tab-num {
	background: var(--fx-bg, #fff);
	color: var(--fx-text, #2d2f31);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.fx-hiw__tab.is-active .fx-hiw__tab-num {
	background: rgba(255, 255, 255, 0.22);
	color: var(--fx-bg, #fff);
	transform: scale(1.05);
}

.fx-hiw__tab-label {
	font-size: 14px;
	line-height: 1.2;
}

/* ============================================================
 * Panels — dark card
 * ============================================================ */
.fx-hiw__panels {
	position: relative;
}

.fx-hiw__panel {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.fx-hiw__panel.is-active {
	opacity: 1;
	transform: translateY(0);
}

.fx-hiw__panel[hidden] {
	display: none;
}

.fx-hiw__panel-card {
	background: var(--fx-text, #2d2f31);
	border-radius: 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	padding: 24px;
	align-items: stretch;
	height: 420px;
}

/* Text-kolonne — topaligning, egen interior padding for luftig typografi */
.fx-hiw__panel-text {
	padding: clamp(24px, 3vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-width: 0;
}

.fx-hiw__panel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 18px;
	border-radius: 12px;
	color: var(--fx-text, #2d2f31);
	margin: 0 0 12px;
	box-sizing: border-box;
}

.fx-hiw__panel-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fx-hiw__panel-icon--yellow  { background: var(--fx-yellow, #ffd978); }
.fx-hiw__panel-icon--sky     { background: var(--fx-sky, #93e7fe); }
.fx-hiw__panel-icon--pink    { background: var(--fx-pink, #faa9e4); }
.fx-hiw__panel-icon--lime    { background: #c9ee6b; }
.fx-hiw__panel-icon--violet  { background: #c9bdfb; }

.fx-hiw .fx-hiw__panel-title {
	color: var(--fx-bg, #fff);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 14px;
}

.fx-hiw__panel-desc {
	color: rgba(255, 255, 255, 0.65);
	font-size: 18px;
	line-height: 1.55;
	margin: 0;
	max-width: 420px;
}

/* Media-kolonne (hvidt kort med billede — fylder fuld højde) */
.fx-hiw__panel-media {
	background: var(--fx-bg, #fff);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}

.fx-hiw__panel-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Matcher den øvrige sitewide image-radius-konvention på panel-
	 * billeder (12px = lidt mindre end card'ets 24px så der opstår
	 * en synlig "kant" mellem media-frame og selve billedet). */
	border-radius: 12px;
}

/* ============================================================
 * Responsive
 * ============================================================ */
/* Stack panel-card til 1 kolonne først ved mobil — tablet (≥768px)
   beholder 2-kolonne kortlayoutet (tekst venstre + billede højre). */
@media (max-width: 767px) {
	.fx-hiw__panel-card {
		grid-template-columns: 1fr;
		gap: 20px;
		align-items: start;
		height: auto;
	}
	.fx-hiw__panel-text {
		padding: clamp(20px, 4vw, 32px);
		order: 1;
	}
	.fx-hiw__panel-media {
		order: 2;
		min-height: 260px;
		max-height: 360px;
	}
	.fx-hiw__panel-desc {
		max-width: 100%;
	}
}

/* ============================================================
 * "Original"-variant (.fx-hiw--original) — bruges på industries-
 * archives via [how_it_works_original] shortcode.
 *
 * Adskiller sig fra standard how-it-works KUN ved at Tab 3 har et
 * brugerdefineret 2x2 stat-grid i panel-media i stedet for et
 * enkelt billede (4 KPI-kort med tal + label + chart).
 *
 * Tab-styling (numbered pills, dark active state) genbruges fra
 * standard-stylingen ovenfor — vi overrider intet på .fx-hiw__tab.
 * ============================================================ */

/* Tab 3 stat-grid — 2 kolonner med ASYMMETRISKE højder.
 *
 * Layout-fingerprint (matcher live-site dimensioner via Elementor):
 *   Venstre kolonne (~55% bredde): 1 kort top + 1 tall bund
 *     - Top: 68% donut "Correct adjudication" (~115px høj)
 *     - Bund: "Actual vs. planned" line-chart (~225px høj — flex-grow)
 *   Højre kolonne (~45% bredde): 1 tall top + 1 kort bund
 *     - Top: 67k+ "Damages detected" bar-chart (~180px høj — flex-grow)
 *     - Bund: 17,254 "Inspections completed" sparkline (~160px høj)
 *
 * Vi kan IKKE bruge en almindelig 2x2 CSS-grid fordi rækkerne ikke
 * deler højde på tværs af kolonnerne — derfor er hver kolonne sin
 * egen flex-container hvor "tall"-kortet får flex:1 og "short"-kortet
 * sizes to content (flex:0).
 *
 * Panel-media wrapperen "neutraliseres" (transparent bg, ingen shadow)
 * så hver hvide stat-card flyder for sig på den mørke panel-bg. */
.fx-hiw__panel-media--stats {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	overflow: visible;
	min-height: 0;
	display: block;
}

.fx-hiw__stat-grid {
	display: grid;
	/* 55/45 ratio — venstre kolonne er ~291px, højre ~243px når panel-
	 * media er 535px bred (matcher Elementor-mål fra live-site). */
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: 8px;
	width: 100%;
	height: 100%;
}

.fx-hiw__stat-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
}

.fx-hiw__stat-card {
	background: var(--fx-bg, #fff);
	/* 12px padding matcher live-site. Større padding klemmer chart-
	 * billederne unødvendigt på mindre cards (spec. donut-kortet). */
	padding: 12px;
	border-radius: 14px;
	display: flex;
	gap: 10px;
	min-width: 0;
	box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.25);
}

/* Size-modifiers — styrer flex-fordeling inden for kolonnen.
 *   --short : auto-højde (kun det nødvendige til indhold)
 *   --tall  : flex-grow (fylder resten af kolonnen)
 * Kombineret giver det den asymmetriske rytme fra live-site. */
.fx-hiw__stat-card--short { flex: 0 0 auto; }
.fx-hiw__stat-card--tall  { flex: 1 1 auto; }

/* Stack-layout: tal+label øverst, chart nedenunder (default for de
 * fleste KPI-kort — fx "67k+ Damages detected" + bar chart). */
.fx-hiw__stat-card--stack {
	flex-direction: column;
	justify-content: space-between;
}

/* Inline-layout: chart venstre, tal+label højre (fx "68% Correct
 * adjudication" hvor donut'en er det dominerende visuelle element). */
.fx-hiw__stat-card--inline {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.fx-hiw__stat-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fx-hiw__stat-num {
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 700;
	color: var(--fx-text, #2d2f31);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* Label-typografi matcher live-site Elementor-værdier:
 *   font: 18px Ubuntu (arvet fra body), color: rgba(45,47,49,0.8). */
.fx-hiw__stat-label {
	font-size: 18px;
	line-height: 1.3;
	color: rgba(45, 47, 49, 0.8);
	font-weight: 500;
}

.fx-hiw__stat-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

/* Donut/inline-billedet er FAST størrelse (~64px) så det visuelt
 * matcher tal+label i højre side uden at skubbe layoutet. */
.fx-hiw__stat-card--inline .fx-hiw__stat-visual {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
}

.fx-hiw__stat-image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Stack-layout's chart-billede må fylde hele kortets bredde — det
 * giver en proper "dashboard data-viz"-fornemmelse (bar chart,
 * line chart, sparkline strækker sig fra kant til kant inden for
 * card-padding). */
.fx-hiw__stat-card--stack .fx-hiw__stat-image {
	width: 100%;
}

@media (max-width: 767px) {
	/* Tabs scrollable horisontalt på mobil — holder deres naturlige
	   størrelse og kan swipes hvis de ikke fylder én linje.
	   Lodret padding på containeren skaber plads til shadow + focus ring
	   uden at blive klippet af overflow-x. */
	.fx-hiw__tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		/* Negativ margin + padding så tabs kan scrolle helt ud til
		   sektionens kanter uden at skære padding af i indholdet. */
		margin-left: calc(var(--fx-gutter) * -1);
		margin-right: calc(var(--fx-gutter) * -1);
		padding: 6px var(--fx-gutter) 14px;
	}
	.fx-hiw__tabs::-webkit-scrollbar {
		display: none;
	}
	.fx-hiw__tab {
		flex: 0 0 auto;
		min-height: 44px;
		padding: 10px 18px 10px 10px;
		font-size: 14px;
	}
	.fx-hiw__tab-num {
		width: 22px;
		height: 22px;
		font-size: 11px;
		flex-shrink: 0;
	}
	.fx-hiw__tab-label {
		white-space: nowrap;
	}
	.fx-hiw__panel-text {
		padding: 0;
	}
	.fx-hiw__panel-icon {
		width: 52px;
		height: 52px;
		padding: 14px;
		border-radius: 10px;
	}
	.fx-hiw__panel-desc {
		font-size: 16px;
	}

	/* Stat-grid på mobil: behold 2-kolonne layout (kortene skifter
	 * ikke til single column — det ville gøre panelet alt for langt
	 * på små skærme og dræbe data-viz-overblikket). Gap og typografi
	 * strammes en lille smule så det stadig er læseligt. */
	.fx-hiw__stat-grid {
		gap: 8px;
	}
	.fx-hiw__stat-col {
		gap: 8px;
	}
	.fx-hiw__stat-card {
		padding: 10px;
	}
	.fx-hiw__stat-num {
		font-size: 20px;
	}
	.fx-hiw__stat-label {
		font-size: 14px;
	}
	.fx-hiw__stat-card--inline {
		gap: 8px;
	}
	.fx-hiw__stat-card--inline .fx-hiw__stat-visual {
		width: 44px;
		height: 44px;
	}
}