:root {
	--kp-blue: #0994d4;
	--kp-navy: #204a68;
	--kp-dark: #12354c;
}

body {
	background: #fff;
	color: #666;
}

/* ── Menu ──────────────────────────────────────────────────────────────────
   Rebuilt on arenim.com's header, measured there at 1440px:
     bar     72px tall, sticky, #f5f7fa ground, 0 1px 4px rgb(0 0 0 / 8%)
     links   17.6px / 500 / #204a68, Roboto Condensed, no tracking or caps
     button  2px outline, 5px radius, 6px 18px, 16px / 500
     rail    1080px, 24px side padding
   The whole header is pinned to Roboto Condensed for the same reason the footer
   was: nothing here declared a family, so it inherited the legacy sheets'
   `font-family: 'Roboto'`, a face this site never loads, and rendered in
   whatever the system substituted. */
.fidelity-header,
.fidelity-header :where(a, span, button) {
	font-family:
		'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif !important;
}

.fidelity-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #f5f7fa !important;
	color: #204a68 !important;
	box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}

.fidelity-topbar {
	min-height: 31px;
	background: var(--kp-navy) !important;
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.5;
}

.fidelity-topbar-inner {
	display: flex;
	width: min(calc(100% - 2 * var(--gutter)), 1080px);
	min-height: 31px;
	align-items: center;
	gap: 8px;
}

.fidelity-topbar a {
	color: #fff;
}

.topbar-contact {
	margin-left: auto;
}

/* The one call to action in the info bar, at the client's request
   (2026-08-20). Weight alone — the bar's own colour is the whole palette it
   has, so a second colour would compete with the navy rather than mark the
   link. */
.topbar-admin {
	font-weight: 700;
}

.fidelity-header .header-inner {
	width: min(calc(100% - 2 * var(--gutter)), 1080px);
	min-height: 72px;
}

.fidelity-logo {
	width: 160px;
	margin-right: auto;
}

.fidelity-logo img {
	width: 160px;
	height: auto;
}

/* This menu carries five items and a call to action where arenim's carries
   three, so the 77px arenim leaves between links is spent on the extra items
   instead. The gap and type scale together and `nowrap` holds the row: at the
   old 14.4px with 10px of padding per link the row still broke onto two lines
   between 900px and about 1100px, which is where the menu looked broken. */
/* Confined to the widths that show a horizontal menu: below 901px the nav is a
   drop-down panel that global.css hides with a bare `.site-nav { display: none }`,
   and an unscoped `display: flex` here outranks it and leaves the panel open. */
@media (min-width: 901px) {
	.fidelity-header .site-nav {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: clamp(14px, 2.2vw, 30px);
	}
}

.fidelity-header .site-nav > a:not(.button) {
	padding-inline: 0;
	color: #204a68;
	font-size: clamp(0.95rem, 1.25vw, 1.1rem);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.fidelity-header .site-nav > a:hover,
.fidelity-header .site-nav > a[aria-current='page'] {
	color: var(--kp-blue);
}

/* arenim's button geometry: 2px rule, 5px radius, 7px/18px. The pill it
   replaces (999px radius, 1px hairline) is the one shape on the page that
   appears nowhere in the design language. Colour comes from the ground-aware
   button rules in global.css, which load after this file. */
.fidelity-header .fidelity-request {
	min-width: 0;
	min-height: 0 !important;
	margin-right: 0;
	padding: 7px 18px !important;
	border-width: 2px !important;
	border-style: solid !important;
	border-radius: 5px !important;
	font-size: clamp(0.9rem, 1.15vw, 1rem) !important;
	font-weight: 500 !important;
	line-height: 1.3;
	white-space: nowrap;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}

.legacy-page {
	position: relative;
	width: 100%;
	margin-top: 0 !important;
	/* `clip`, not `hidden`. An `overflow: hidden` box is still a scroll
	   container — it just has no scrollbar — so when a link jumps to an anchor
	   inside it, the browser scrolls *it* to bring the target into view instead
	   of scrolling the page. Nothing can scroll it back: there is no scrollbar,
	   the wheel does not reach it, and `scrollTo` on the window does not touch
	   it. /kvantphone-deployment-types/ ends up 136px down its own inner
	   scroll after "Compare alternatives", and the top of the hero is then
	   unreachable at any page scroll position.
	   `overflow: clip` clips identically and still establishes a block
	   formatting context, but is not scrollable, so the anchor jump falls
	   through to the page where it belongs. `hidden` stays as the line above
	   for browsers that do not know `clip`. */
	overflow: hidden;
	overflow: clip;
	background: #fff;
	font-size: 14px;
	line-height: 1.5;
}

.legacy-page .et_parallax_bg_wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.legacy-page .et_parallax_bg {
	position: absolute;
	inset: -10% 0;
	display: block;
	width: 100%;
	height: 120%;
	background-position: center;
	background-size: cover;
}

.legacy-page > :is(p:where(:not([data-visual-tag])),:where([data-visual-tag="p"])) {
	margin: 0;
}

.legacy-page article,
.legacy-page .entry-content {
	margin: 0 !important;
}

:where(.legacy-page) :where(.et_pb_section) {
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.legacy-page :where(.et_pb_row) {
	position: relative;
	width: calc(100% - 2rem);
	max-width: 1080px;
	margin-right: auto;
	margin-left: auto;
}

:where(.legacy-page) :where(.et_pb_row)::after {
	display: table;
	clear: both;
	content: '';
}

:where(.legacy-page) :where([class*='et_pb_column_']) {
	position: relative;
	min-width: 0;
}

.legacy-page :where(img) {
	display: inline;
}

.legacy-page .et_pb_text {
	max-width: 100%;
}

:where(.legacy-page) :where(.et_pb_image img) {
	margin: 0 auto;
}

/* Keep the site-wide Astro typography from leaking into preserved Divi pages. */
.legacy-page :where(:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"])), :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])), :is(h3:where(:not([data-visual-tag])),:where([data-visual-tag="h3"])), :is(h4:where(:not([data-visual-tag])),:where([data-visual-tag="h4"])), :is(h5:where(:not([data-visual-tag])),:where([data-visual-tag="h5"])), :is(h6:where(:not([data-visual-tag])),:where([data-visual-tag="h6"]))) {
	max-width: none;
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	word-break: normal;
	overflow-wrap: normal;
}

.legacy-page :where(:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"])), :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])), :is(h3:where(:not([data-visual-tag])),:where([data-visual-tag="h3"])), :is(h4:where(:not([data-visual-tag])),:where([data-visual-tag="h4"])), :is(h5:where(:not([data-visual-tag])),:where([data-visual-tag="h5"])), :is(h6:where(:not([data-visual-tag])),:where([data-visual-tag="h6"])), :is(p:where(:not([data-visual-tag])),:where([data-visual-tag="p"])), li) {
	font-size: 100%;
	line-height: inherit;
}

.legacy-page :where(:is(p:where(:not([data-visual-tag])),:where([data-visual-tag="p"])), li) {
	overflow-wrap: anywhere;
}

/* Roboto is never loaded by this site, so these two rules were the reason every
   legacy route rendered in a substituted system face at weight 300 with -0.05rem
   tracking. Character now comes from the arenim heading rules in global.css;
   what stays here is the colour and the family fallback. */
.legacy-page :where(:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"])), :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])), :is(h3:where(:not([data-visual-tag])),:where([data-visual-tag="h3"])), :is(h4:where(:not([data-visual-tag])),:where([data-visual-tag="h4"])), :is(h5:where(:not([data-visual-tag])),:where([data-visual-tag="h5"])), :is(h6:where(:not([data-visual-tag])),:where([data-visual-tag="h6"]))) {
	color: #204a68;
	font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
}

.legacy-page
	:where(:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"])), :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])), :is(h3:where(:not([data-visual-tag])),:where([data-visual-tag="h3"])), :is(h4:where(:not([data-visual-tag])),:where([data-visual-tag="h4"])), :is(h5:where(:not([data-visual-tag])),:where([data-visual-tag="h5"])), :is(h6:where(:not([data-visual-tag])),:where([data-visual-tag="h6"])))
	+ :where(:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"])), :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])), :is(h3:where(:not([data-visual-tag])),:where([data-visual-tag="h3"])), :is(h4:where(:not([data-visual-tag])),:where([data-visual-tag="h4"])), :is(h5:where(:not([data-visual-tag])),:where([data-visual-tag="h5"])), :is(h6:where(:not([data-visual-tag])),:where([data-visual-tag="h6"])), :is(p:where(:not([data-visual-tag])),:where([data-visual-tag="p"])), ul, div) {
	margin-top: 1rem;
}

.legacy-page :where(:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"]))) {
	font-size: 2.333rem;
}

.legacy-page :where(:is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"]))) {
	font-size: 2rem;
}

.legacy-page :where(:is(h3:where(:not([data-visual-tag])),:where([data-visual-tag="h3"]))) {
	font-size: 1.666rem;
}

.legacy-page :where(:is(h4:where(:not([data-visual-tag])),:where([data-visual-tag="h4"]))) {
	font-size: 1.333rem;
}

.legacy-page :where(:is(h5:where(:not([data-visual-tag])),:where([data-visual-tag="h5"]))) {
	font-size: 1.1rem;
}

.legacy-page
	:where(
		.et_pb_column_1_3,
		.et_pb_column_1_4,
		.et_pb_column_1_5,
		.et_pb_column_1_6,
		.et_pb_column_2_5
	)
	:where(:is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"]))) {
	font-size: 23px;
}

.legacy-page:not(.legacy-home) .entry-content > .et_pb_section:first-child :is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"])) {
	font-size: clamp(2.25rem, 5vw, 5rem) !important;
	line-height: 1.08 !important;
	text-wrap: balance;
}

.legacy-page .migrated-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-video-toggle {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 5;
	min-height: 36px;
	padding: 7px 13px;
	border: 1px solid rgb(255 255 255 / 70%);
	border-radius: 999px;
	background: rgb(8 31 47 / 72%);
	color: #fff;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	backdrop-filter: blur(6px);
}

@media (min-width: 981px) {
	.legacy-home .et_pb_section:has(.hi-pic-vertical-middle) {
		padding-block: 54px;
	}

	.legacy-home .et_pb_section:has(.hi-pic-vertical-middle) > .et_pb_row {
		padding-block: 27px;
	}

	.legacy-home
		.et_pb_section:has(.hi-pic-vertical-middle)
		.et_pb_column
		> .et_pb_module:last-child {
		margin-bottom: 0;
	}
}

.legacy-home
	.et_pb_section:has(.hi-pic-vertical-middle)
	> .et_pb_row:first-child
	:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"])) {
	line-height: 1.15 !important;
}

.legacy-home
	.et_pb_section:has(.hi-pic-vertical-middle)
	> .et_pb_row:first-child
	:is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])) {
	line-height: 1.3 !important;
}

.legacy-home .hi-2cols-left-vcenter :where(:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"])), :is(h3:where(:not([data-visual-tag])),:where([data-visual-tag="h3"]))) {
	line-height: 1.2 !important;
}

.legacy-home
	.et_pb_section:has(img[src*='biztonsagos-telefonos-kommunikacio-mobil'])
	:where(:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"])), :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"]))) {
	line-height: 1.15 !important;
}

.legacy-home
	.et_pb_section:has(img[src*='enterprise-hollow-dblue'])
	:where(:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"])), :is(h3:where(:not([data-visual-tag])),:where([data-visual-tag="h3"]))) {
	line-height: 1.2 !important;
}

@media (min-width: 1200px) {
	.legacy-page :where(:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"]))) {
		font-size: 2.666rem;
	}

	.legacy-page :where(:is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"]))) {
		font-size: 2.333rem;
	}

	.legacy-page :where(:is(h3:where(:not([data-visual-tag])),:where([data-visual-tag="h3"]))) {
		font-size: 2rem;
	}

	.legacy-page :where(:is(h4:where(:not([data-visual-tag])),:where([data-visual-tag="h4"]))) {
		font-size: 1.5rem;
	}

	.legacy-page :where(:is(h5:where(:not([data-visual-tag])),:where([data-visual-tag="h5"]))) {
		font-size: 1.25rem;
	}

	.legacy-page
		:where(
			.et_pb_column_1_3,
			.et_pb_column_1_4,
			.et_pb_column_1_5,
			.et_pb_column_1_6,
			.et_pb_column_2_5
		)
		:where(:is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"]))) {
		font-size: 23px;
	}
}

@media (max-width: 670px) {
	.legacy-page :where(:is(h1:where(:not([data-visual-tag])),:where([data-visual-tag="h1"]))) {
		font-size: 8vw;
	}

	.legacy-page :where(:is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"]))) {
		font-size: 7vw;
	}

	.legacy-page :where(:is(h3:where(:not([data-visual-tag])),:where([data-visual-tag="h3"]))) {
		font-size: 6.25vw;
	}

	.legacy-page :where(:is(h4:where(:not([data-visual-tag])),:where([data-visual-tag="h4"]))) {
		font-size: 5.333vw;
	}
}

.legacy-page .dipi-at-container {
	display: flex;
	align-items: stretch;
}

.legacy-page .dipi-at-tabs-container {
	display: flex;
	flex: 1 1 0%;
	min-width: 0;
	width: 30%;
}

.legacy-page .dipi-at-tabs {
	display: flex;
	flex: 1 1 0%;
	min-width: 0;
	max-width: 100%;
	flex-direction: column;
	justify-content: center;
	overflow: visible !important;
}

.legacy-page .dipi-at-tab {
	display: flex;
	width: 100%;
	cursor: pointer;
}

.legacy-page .dipi-at-tab:focus-visible {
	outline: 3px solid var(--kp-blue);
	outline-offset: 3px;
}

.legacy-page .dipi-at-panels {
	display: flex;
	min-width: 0;
	width: 70%;
}

.legacy-page .dipi-at-panels > .dipi_advanced_tabs_item {
	display: none !important;
	width: 100%;
	margin: 0;
	opacity: 0;
}

.legacy-page .dipi-at-panels > .dipi-at-panel--active {
	display: block !important;
	position: relative;
	opacity: 1;
}

.legacy-page .dipi-at-panel-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.legacy-home .dipi_advanced_tabs_0 .dipi-at-panels {
	aspect-ratio: 1920 / 1229;
}

.legacy-home .dipi_advanced_tabs_0 .dipi-at-panels > .dipi_advanced_tabs_item {
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.legacy-home
	.dipi_advanced_tabs_0
	.dipi-at-panels
	.dipi_advanced_tabs_item
	> .et_pb_module_inner,
.legacy-home .dipi_advanced_tabs_0 .dipi-at-panels .dipi-at-panel,
.legacy-home .dipi_advanced_tabs_0 .dipi-at-panels .dipi-at-panel-content {
	height: 100% !important;
}

.legacy-page .hi-overflowx {
	overflow-x: auto !important;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

.legacy-page a.et_pb_button {
	max-width: 100%;
	height: auto !important;
	min-height: 48px;
	white-space: normal !important;
	text-align: center;
	overflow-wrap: anywhere;
}

/* The footer never set a family of its own, so it inherited the legacy
   stylesheets' `font-family: 'Roboto'` — a face this site does not load. Every
   word down here was rendering in whatever the system substituted, which is why
   it read wider and rounder than the rest of the page. The whole footer is
   pinned to Roboto Condensed, and its type is put on the same scale the rebuilt
   sections use: 700 weight and tight tracking on labels, 1.4 line height on
   copy. */
/* `!important` because the legacy sheets pin headings to Roboto the same way;
   without it the four column labels stay on the substituted face while
   everything around them switches. */
/* The mobile drawer is the same story: its social labels sit in <span>s, which
   the legacy sheets reach, so they alone rendered in the substituted face while
   the contact details above them were Roboto Condensed. */
.site-footer.fidelity-footer,
.site-footer.fidelity-footer :where(:is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])), :is(p:where(:not([data-visual-tag])),:where([data-visual-tag="p"])), li, a, strong, span),
.mobile-drawer,
.mobile-drawer :where(:is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])), :is(p:where(:not([data-visual-tag])),:where([data-visual-tag="p"])), li, a, strong, span, summary) {
	font-family:
		'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif !important;
}

.site-footer.fidelity-footer {
	padding: 0;
	background: #fff;
	color: #506678;
}

.fidelity-footer-links {
	/* 48px, matching the closing CTA band's own padding — the section directly
	   above the footer — so the two read as one rhythm. It was the snapshot's
	   67px. */
	padding: var(--kv-section-py) 0;
	background: #fff;
}

.fidelity-footer .container {
	width: min(calc(100% - 2 * var(--gutter)), 1080px);
}

/* arenim's `.footer-top`: the four link columns and the contact pair on one
   five-track grid, closing on a hairline. Read from arenim-git
   (src/styles/global.css, .footer-top / .footer-column / .footer-about). Its
   own gap is 14px against a 5-track grid; here the tracks are wider, so the
   gutter is kept nearer the local 59.4px to stop the labels colliding. */
.fidelity-footer .footer-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 0.9fr);
	/* Column gap only. The badge row is the grid's second row, and it owns the
	   space above it through its own padding — a row gap here would stack on top
	   of that. */
	column-gap: 40px;
	row-gap: 0;
}

/* Client's rearrangement (screenshot, 2026-09-15): the four link columns
   read as one row of equal weight, not sized to their own longest line —
   the base rule's `minmax(0, 1fr)` tracks above already do this, so the
   previous ≥1040px override that switched to `max-content` tracks (to stop
   "About our services and security" wrapping) is gone. A label can wrap
   again at narrower widths, same as it already did below 1040px. */

/* Column labels take the page's heading treatment at label scale — the same
   700 weight and negative tracking the rebuilt section headings use, in the
   heading navy rather than the muted body grey. */
.fidelity-footer .footer-grid :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])) {
	margin-bottom: 22px;
	color: #204a68;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: none;
}

/* The four link columns are <details> so a phone can collapse them into
   tappable groups, the way arenim's mobile footer does (arenim-git,
   .mobile-drawer-group, ≤640px — here the site's own ≤580px phone breakpoint).
   They ship `open`, and the inline script in BaseLayout closes them only below
   that width, so without JS the footer is the one it has always been. On every
   wider viewport the summary has to read as the plain <h2> it replaced: no
   marker, no pointer. */
.fidelity-footer .footer-column > summary {
	display: block;
	list-style: none;
	cursor: default;
}

.fidelity-footer .footer-column > summary::-webkit-details-marker {
	display: none;
}

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

.fidelity-footer .footer-grid li {
	margin: 7px 0;
}

/* Navy rather than the cyan the snapshot used, at the client's request
   (2026-08-17). arenim's own footer links are `--primary`, the same colour. */
.fidelity-footer .footer-grid a {
	color: #204a68;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	transition: color 160ms ease;
}
.fidelity-footer .footer-grid a:hover,
.fidelity-footer .footer-grid a:focus-visible {
	color: #0994d4;
}

/* "Resources" is the one column title that is also a link (the client's
   request, 2026-09-15). `.footer-grid a` above is written for the list
   links below each title — 1rem/400 — and matches this <a> too at the same
   specificity, so without this it wins on source order and the title reads
   as a small regular link instead of the bold heading its three siblings
   are. `inherit` from the <h2> restores that, so the only thing that ever
   changes here is the hover colour. */
.fidelity-footer .footer-column :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])) a {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}
.fidelity-footer .footer-column :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])) a:hover,
.fidelity-footer .footer-column :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])) a:focus-visible {
	color: #0994d4;
}

/* The contact pair, in arenim's `.footer-about` position: the fifth column,
   Sales above Support, each with the address as its own line and the phone
   number under it. */
.fidelity-footer .footer-about {
	display: grid;
	align-content: start;
	gap: 2.5em;
}

/* A rule down the gap between "Other" and the contact pair, centred in it.
   Centring is why the line is a real element inside a flex wrapper rather than
   a pseudo-element hanging off the contact column: the gap is not the 40px
   gutter but that plus the track's leftover width, which changes with the
   viewport, so no fixed offset can sit in the middle of it. As a flex item with
   `margin-inline: auto` it centres itself in whatever space is left, at every
   width — and the wrapper's -40px left margin pulls its own edge back to
   "Other"'s, so the space being halved is the one the eye sees.

   Height comes from `align-items: stretch`: the wrapper is only as tall as the
   contact block, so the line runs from the top of "Sales team" to the bottom of
   the last phone number without being told either position. */
.fidelity-footer .footer-contact-wrap {
	display: flex;
	align-items: stretch;
}

.fidelity-footer .footer-divider {
	display: none;
	flex: none;
	width: 1px;
	/* The last phone number's line box hangs 8px below its baseline; without
	   this the rule would end in the leading under the digits. */
	margin: 0 auto 8px;
	background: rgba(20, 46, 65, 0.15);
}

/* Trust and store badges, in arenim's position: the foot of the column row,
   below the links (arenim hangs each one off its own column with
   `margin-top: auto`; here they read better as one row). GDPR and the European
   Team mark are arenim's `.footer-badge` / `.footer-badge-labelled`; the two
   store badges are the pair the snapshot's own footer carried. */
/* The badges are a second grid row under the four link columns, not a strip
   below the whole grid — which is how arenim carries them, hanging off the
   columns themselves. The contact column spans both rows beside them, so the
   badges sit level with Sales/Support rather than waiting for that column to
   end; without this they were pushed a further 90px down the page by a column
   they have nothing to do with.

   Distance above is measured to "Post quantum communication", the lowest line
   in the four link columns. `padding-top` is 18 rather than 32 because the two
   ends are not measured from the same thing: below the row the gap starts at
   the badge's own edge, while above it the column's box hangs ~14px past that
   last baseline. 18 + 14 is what makes both read as 32. */
.footer-badges {
	grid-column: 1 / span 4;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	padding-top: 18px;
}

/* Client's rearrangement (screenshot, 2026-09-15): each badge sits under its
   own column instead of bunched together under the first — GDPR under
   "Services", the EU mark under "Technical & Security", the App Store badge
   under "Resources", Google Play under "Other". `.footer-badges` hands its
   grid area to its four children instead of laying them out itself, so each
   can take its own column; the flex row above stays as the ≤900px fallback,
   where the columns themselves no longer align one-to-one with the badges. */
@media (min-width: 901px) {
	.footer-badges {
		display: contents;
	}

	.footer-badges > * {
		grid-row: 2;
		align-self: center;
		justify-self: start;
		/* `margin`, not `padding`: the border-box reset makes `padding-top`
		   eat into a fixed-height child's own content box instead of adding
		   above it — `.footer-badge-gdpr` rendered squashed to 22px tall,
		   18px of it blank padding, before this was caught. */
		margin-top: 18px;
	}

	.footer-badges > :nth-child(1) {
		grid-column: 1;
	}

	.footer-badges > :nth-child(2) {
		grid-column: 2;
	}

	.footer-badges > :nth-child(3) {
		grid-column: 3;
	}

	.footer-badges > :nth-child(4) {
		grid-column: 4;
	}
}

.fidelity-footer .footer-contact-wrap {
	grid-column: 5;
	grid-row: 1 / span 2;
}

@media (min-width: 901px) {
	.fidelity-footer .footer-contact-wrap {
		align-self: start;
	}
}

/* The rule appears from 1100px: the gap either side of it only opens up as
   the container grows past the columns' equal tracks, and a line with only a
   few px of air reads as touching the text. Below 901 the columns stack and
   there is no gap at all. */
@media (min-width: 1100px) {
	.fidelity-footer .footer-contact-wrap {
		margin-left: -40px;
	}

	.fidelity-footer .footer-divider {
		display: block;
	}
}

/* Client's rearrangement (screenshot, 2026-09-15): every badge reads as the
   same weight — the EU mark comes down from 53px to the store badges' own
   40px, keeping its own aspect ratio on `width: auto`.

   GDPR is matched by width instead: at Google Play's own 300×89 ratio, its
   40px-tall box renders 134.83px wide (12000/89), so GDPR is set to that
   same width with `height: auto` carrying its own 836×350 ratio down from
   it — 56.45px tall. Matching GDPR's height to the other badges' 40px reads
   too small, since gdpr-amazely.png carries ~28px of transparent margin
   above and below the shield (276px of the 350px-tall canvas is actual
   artwork) that a height match doesn't account for. */
.footer-badge-gdpr {
	width: 134.83px;
	height: auto;
}

/* gdpr-amazely.png also carries transparent margin before the shield
   starts on the left — about 4.7px of it at this width — so left-aligned by
   its own box the row reads indented against "Services" above it. The
   nudge is on the image, not `.footer-badges` itself, so it doesn't disturb
   the badge's own grid placement. Scoped to the row layout (≥901px, where
   each badge sits in its own column) rather than the artwork's fixed
   fraction, since the phone grid centres each badge in its own track
   instead of lining it up against text. */
@media (min-width: 901px) {
	.footer-badge-gdpr {
		transform: translateX(-4.7px);
	}
}

.footer-badges .footer-badge-labelled {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

/* arenim's own star mark, copied in: identical artwork to the hero's ring but
   filled `#204A68` rather than white, so it needs no filter on this ground. */
.footer-badges .footer-badge-labelled img {
	height: 40px;
	width: auto;
	flex: none;
}

.footer-badge-label {
	color: #204a68;
	font-size: 1.03rem;
	font-weight: 500;
	line-height: 1.25;
}

.footer-store-badge {
	display: inline-flex;
}

.footer-store-badge img {
	height: 40px;
	width: auto;
	display: block;
}

/* arenim's `.footer-bottom` — brand and copyright left, social links right —
   kept on the snapshot's navy band rather than arenim's light ground, at the
   client's request (2026-08-17), with everything in it painted white. Equal
   32px top and bottom, so the 24px brand sits on the band's centre line. */
.fidelity-footer-bottom {
	/* Equal 32px, so the 24px brand sits on the band's centre line. Tried at the
	   white section's 67px and put back: it made the band as tall as a section
	   rather than a closing strip. */
	padding: 32px 0;
	background: #204a68;
	color: #ffffff;
}

.footer-bottom-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-size: 0.95rem;
}

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

.footer-brand {
	display: block;
	width: auto;
	height: 24px;
	/* The logo file is full colour; on the navy band it is painted flat white.
	   `brightness(0)` takes every channel to black first, so `invert(1)` lands
	   on pure white whatever the source pixel was. */
	filter: brightness(0) invert(1);
}

.footer-copyright {
	color: #ffffff;
	font-size: 0.95rem;
	line-height: 1.4;
}

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

.footer-bottom-socials a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #ffffff;
	font-size: 1rem;
	text-decoration: none;
	transition: color 160ms ease;
}

.footer-bottom-socials a:hover,
.footer-bottom-socials a:focus-visible {
	color: #2ea3f2;
}

.footer-bottom-socials .social-icon {
	flex: none;
	width: 18px;
	height: 18px;
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE MENU — arenim's drawer (arenim-git, .mobile-drawer / ≤960px)
   A full sitemap rather than a short nav: the primary links, the footer's four
   groups collapsed, the contact pair and the socials. It replaces the white
   drop-down panel the snapshot carried, which showed five links and left the
   page visible under them.
   ════════════════════════════════════════════════════════════════════════ */
.mobile-drawer {
	display: none;
}

@media (max-width: 900px) {
	.fidelity-header {
		position: relative;
	}

	.fidelity-topbar {
		display: none;
	}

	.fidelity-header .header-inner {
		width: 100%;
		min-height: 47px;
		padding-inline: 12px;
	}

	.fidelity-logo,
	.fidelity-logo img {
		width: 140px;
	}

	.fidelity-header .site-nav {
		top: 47px;
		padding: 20px;
		background: #fff;
		box-shadow: 0 14px 24px rgb(0 0 0 / 15%);
	}

	.fidelity-header .site-nav > a:not(.button) {
		font-size: 16px;
	}

	.fidelity-header .nav-toggle {
		width: 48px;
		min-width: 48px;
		height: 48px;
		min-height: 48px;
		padding: 0;
		/* The glyph alone, no box: global.css draws every .nav-toggle with a
		   hairline and a 5px radius, which on a phone reads as a button around
		   a button. The 48px tap target stays. */
		border: 0;
		background: transparent;
		color: var(--kp-navy);
		font-size: 0;
	}

	.fidelity-header .nav-toggle::before {
		content: '\2630';
		font-size: 24px;
		line-height: 1;
	}

	.fidelity-header .nav-toggle[aria-expanded='true']::before {
		content: '\00d7';
	}

	.legacy-page .dipi-at-container {
		display: block;
	}

	.legacy-page .dipi-at-tabs-container,
	.legacy-page .dipi-at-panels {
		width: 100%;
	}

	.hero-video-toggle {
		display: none;
	}

	.legacy-home .et_pb_section:has(.hi-pic-vertical-middle) :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])).no-margin.medium {
		line-height: 1.15 !important;
	}

	.legacy-page .et_pb_image.hi-overflowx {
		margin-block: 12px !important;
	}

	.legacy-page .et_pb_section_parallax .et_pb_text {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.fidelity-footer .footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Both spans are written for the five-column desktop grid; left in place
	   they conjure implicit columns here and push the footer wider than the
	   viewport. */
	.footer-badges,
	.fidelity-footer .footer-contact-wrap {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@media (min-width: 671px) and (max-width: 1199px) {
	.legacy-page
		:where(
			.et_pb_column_1_3,
			.et_pb_column_1_4,
			.et_pb_column_1_5,
			.et_pb_column_1_6,
			.et_pb_column_2_5
		)
		:where(:is(h4:where(:not([data-visual-tag])),:where([data-visual-tag="h4"]))) {
		font-size: 18px;
	}
}

@media (min-width: 581px) and (max-width: 900px) {
	.fidelity-header .header-inner {
		min-height: 73px;
	}

	.fidelity-header .site-nav {
		top: 73px;
	}
}
@media (max-width: 900px) {
	/* Below the header (z-index 20), not over it: the logo and the ✕ stay
	   tappable, which is how arenim's drawer behaves. The top padding clears
	   the 47px header; 581–900px has a 73px header and adds its own. */
	.mobile-drawer.is-open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 15;
		padding: 67px 20px 48px;
		background: #fff;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.drawer-open {
		overflow: hidden;
	}

	.mobile-drawer-nav {
		display: flex;
		flex-direction: column;
		max-width: 480px;
		margin: 0 auto;
	}

	/* Primary links: the menu the header used to carry, at arenim's 48px tap
	   target and heading weight. */
	.mobile-drawer-primary {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mobile-drawer-primary a {
		display: flex;
		align-items: center;
		min-height: 48px;
		color: #204a68;
		font-size: 1.2rem;
		font-weight: 700;
		letter-spacing: -0.01em;
		text-decoration: none;
	}

	.mobile-drawer-primary a[aria-current='page'],
	.mobile-drawer a:active,
	.mobile-drawer a:focus-visible {
		color: #0994d4;
	}

	/* The header's own call to action, which the drop-down carried — same
	   button, given the drawer's width. */
	.mobile-drawer-cta {
		margin: 16px 0 4px;
		text-align: center;
	}

	/* The footer's four groups, collapsed — the same summary and ± affordance
	   the phone footer uses, so the two read as one menu. */
	.mobile-drawer-group > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 48px;
		list-style: none;
		cursor: pointer;
	}

	.mobile-drawer-group > summary::-webkit-details-marker {
		display: none;
	}

	.mobile-drawer-group > summary :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])) {
		margin: 0;
		color: #204a68;
		font-size: 1.15rem;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.01em;
		text-transform: none;
	}

	.mobile-drawer-group > summary::after {
		content: '+';
		flex: none;
		color: #0994d4;
		font-size: 1.5rem;
		font-weight: 400;
		line-height: 1;
	}

	.mobile-drawer-group[open] > summary::after {
		content: '\2212';
	}

	.mobile-drawer-group ul {
		margin: 0;
		padding: 0 0 8px;
		list-style: none;
	}

	.mobile-drawer-group a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding-left: 16px;
		color: #204a68;
		font-size: 1.05rem;
		text-decoration: none;
	}

	/* Sales and Support, side by side as they are in the phone footer. */
	.mobile-drawer-contact {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		padding-top: 28px;
	}

	.mobile-drawer-contact :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])) {
		margin-bottom: 12px;
		color: #204a68;
		font-size: 1.15rem;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.01em;
	}

	.mobile-drawer-contact .footer-contact-email,
	.mobile-drawer-contact li a {
		display: flex;
		align-items: center;
		min-height: 40px;
		color: #204a68;
		text-decoration: none;
	}

	.mobile-drawer-contact ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mobile-drawer-socials {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 20px;
		padding-top: 20px;
	}

	.mobile-drawer-socials a {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		color: #204a68;
		/* 1.05rem, the size the phone numbers and the group links above them
		   carry, so the drawer runs on one type scale from top to bottom. */
		font-size: 1.05rem;
		text-decoration: none;
	}

	.mobile-drawer-socials .social-icon {
		flex: none;
		width: 18px;
		height: 18px;
	}

	/* Two hairlines, where the drawer changes register: menu → sitemap, and
	   sitemap → contact. arenim rules every group; the footer next to this one
	   carries a single rule, and matching it keeps the pair consistent. */
	.mobile-drawer-primary,
	.mobile-drawer-group:last-of-type {
		border-bottom: 1px solid rgba(20, 46, 65, 0.15);
	}

	.mobile-drawer-group:first-of-type {
		margin-top: 20px;
	}

	.mobile-drawer-contact {
		margin-top: 4px;
	}
}

/* 581–900px has a 73px header rather than 47px, so the drawer starts lower.
   After the block above, not inside the earlier tablet query: both selectors
   carry two classes, so source order is what decides, and the `padding`
   shorthand there would otherwise put the top link behind the header. */
@media (min-width: 581px) and (max-width: 900px) {
	.mobile-drawer.is-open {
		padding-top: 93px;
	}
}

@media (min-width: 901px) and (max-width: 1100px) {
	.legacy-page .et_pb_section:has(> .hi-cards-not) > .et_pb_row > .et_pb_column,
	.legacy-page
		.et_pb_section:has(> .hi-cards-not)
		> .et_pb_row
		> .et_pb_column
		> .et_pb_module {
		height: auto !important;
		min-height: 100%;
	}
}

@media (max-width: 580px) {
	/* ── The header bar ───────────────────────────────────────────────────
	   12px taller on a phone — 48px to 60px (the client's call, 2026-09-17),
	   arenim's own bar being 72. Added as space above and below rather than as
	   a height: nothing inside changes size, the logo stays 30px and the
	   hamburger keeps its 48px tap target, and the bar is still the height of
	   what it holds. The 47px `min-height` set at 900 is left alone — the
	   toggle is taller than it either way, so it never decides. */
	.fidelity-header .header-inner {
		padding-block: 6px;
	}

	/* The drawer opens under the header rather than over it, and clears it with
	   top padding — 67px against a 48px bar. The bar moved, so this does too,
	   keeping the same 19px between it and the first link. Written here rather
	   than edited at 900, where the same 67px is the tablet band's starting
	   point before its own 93px override. */
	.mobile-drawer.is-open {
		padding-top: 79px;
	}

	/* ── The icon list beside the device montage ───────────────────────────
	   /features/ "Some of KvantPhone's enterprise features" and the same module
	   on /business/ and /government-defense-users/.

	   The montage carries an authored `margin: 0 -80px` so it can bleed past its
	   column on a desktop. On a phone that makes the module 160px wider than the
	   column it sits in, and the row — which carries `hi-overflowx` — turns into
	   a horizontal scroller: 408px of content in a 328px row. The bleed is
	   dropped here rather than the scroller, which stays as the safety net it
	   was added to be.

	   The labels are `<h2 class="cf">` with a 36px icon and the caption as plain
	   inline content, so a caption that wrapped ran back under the icon instead
	   of staying in its own column. Flex puts the icon and the caption side by
	   side and centres the caption's whole block — one line or two — on the
	   icon's own middle. Two of the eight close on an authored <br>, which added
	   an empty second line and pushed the text above that centre. */
	.legacy-page .et_pb_row.hi-overflowx .et_pb_image {
		margin-inline: 0 !important;
	}

	.legacy-page .et_pb_row.hi-overflowx :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])).cf {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	/* `h2.cf > img.icon` is pushed down by a legacy `position: relative;
	   bottom: -10px` — an offset that lined the glyph up with the caption's
	   baseline while both were inline. Centred as flex items they need no such
	   nudge, and left in it the glyph sits 10px below the caption's middle. */
	.legacy-page .et_pb_row.hi-overflowx :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])).cf > :is(img, svg) {
		flex: none;
		margin: 0 !important;
		bottom: 0 !important;
	}

	.legacy-page .et_pb_row.hi-overflowx :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])).cf > span {
		flex: 1;
		min-width: 0;
	}

	.legacy-page .et_pb_row.hi-overflowx :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])).cf br {
		display: none;
	}

	/* /business/ centres its captions where /features/ starts them all on one
	   left edge, so on a phone the same module read as a ragged column there —
	   every caption began at a different x inside its flex track. Left on both,
	   at the client's request (2026-08-19). Desktop is untouched: /business/
	   splits these labels across three real columns up there, where centred is
	   what they are meant to be. */
	.legacy-page .et_pb_row.hi-overflowx :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])).cf,
	.legacy-page .et_pb_row.hi-overflowx :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])).cf span {
		text-align: left !important;
	}

	/* The button under the list sat 12px below the last icon while it has 42
	   below itself, to the section's edge. It takes that 42 above it too
	   (client, 2026-08-19). 22, not 30: the row it sits in carries an authored
	   -8px top margin, which this replaces rather than adds to. Scoped to
	   /features/ — /business/ carries the same module with a figure of its
	   own. */
	#main-content.legacy-features .et_pb_row.hi-overflowx + .et_pb_row {
		margin-top: 22px !important;
	}

	.site-header.fidelity-header {
		border-bottom: 0;
	}

	/* ── phone footer, on arenim's layout ──────────────────────────────────
	   arenim-git's own ≤640px footer: the four link columns collapse into
	   tappable groups, the contact pair sits side by side, the badges fall into
	   a 2×2 grid and the navy strip centres. Full width and flush left — what
	   this replaced was a 243px centred column 1368px tall, which put the
	   contact details and both store badges a screen and a half below the fold.
	   arenim's hairline separators are left out at the client's standing "no
	   horizontal rules in the footer" request; the blocks are spaced instead.
	   ──────────────────────────────────────────────────────────────────────── */
	.fidelity-footer .footer-grid {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.fidelity-footer .footer-column > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		/* arenim's 48px tap target. */
		min-height: 48px;
		cursor: pointer;
	}

	.fidelity-footer .footer-column > summary :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])) {
		margin-bottom: 0;
	}

	/* "Resources" is a real link on desktop (the client's request,
	   2026-09-15). Two things below undo it at this width, both because a more
	   generic selector reaches this <a> as a side effect rather than by
	   intent:
	   `pointer-events: none` — this whole row is also the tap target that
	   opens and closes the group, which the other three column titles rely
	   on. Without it, tapping the word "Resources" would navigate away
	   instead of expanding the group. The link stays reachable by keyboard
	   and by tapping the +/− mark; only the label's own hit area gives up
	   the click.
	   `display: inline` and `padding-left: 0` — `.footer-column a` below (in
	   the list-link rules for this width) gives every link a 40px tap target
	   with 16px of left padding, meant for the rows under a title, and it was
	   indenting "Resources" against its three siblings. Undone here rather
	   than narrowing that rule's own selector, which still needs to reach the
	   actual list links it was written for. Left as `display: inline` rather
	   than dropping the declaration: once it isn't flex, `min-height` no
	   longer applies to it either, needing no separate reset. */
	.fidelity-footer .footer-column > summary :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])) a {
		display: inline;
		padding-left: 0;
		pointer-events: none;
	}

	/* arenim's `+` / `−` affordance, in the site's own cyan. */
	.fidelity-footer .footer-column > summary::after {
		content: '+';
		flex: none;
		color: #0994d4;
		font-size: 1.5rem;
		font-weight: 400;
		line-height: 1;
	}

	.fidelity-footer .footer-column[open] > summary::after {
		content: '\2212';
	}

	.fidelity-footer .footer-column ul {
		padding-bottom: 8px;
	}

	.fidelity-footer .footer-column li {
		margin: 0;
	}

	/* Tap targets under their own heading (arenim: 44px tall, indented 16px). */
	.fidelity-footer .footer-column a {
		display: flex;
		align-items: center;
		min-height: 40px;
		padding-left: 16px;
	}

	/* Sales and Support side by side (arenim's `.footer-contact-block`);
	   stacked they cost a further 90px of scroll. minmax(0,1fr) rather than
	   1fr: on a plain 1fr the longer address held its own track open and the
	   pair ran 20px past the container into the gutter at 360px. */
	.fidelity-footer .footer-about {
		/* A flex item inside `.footer-contact-wrap`, so left alone it takes its
		   content's width — 315px, which on anything wider than a 360px phone
		   left the pair short of the container's right edge. */
		flex: 1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	/* "support@kvantphone.com" measures 166px at body size, against the 152px
	   track the narrowest phone (360px) leaves it — so the addresses, and only
	   the addresses, come down a step. arenim keeps its pair at full size
	   because "sales@arenim.com" is six characters shorter. */
	.fidelity-footer .footer-grid .footer-contact-email {
		font-size: 0.9rem;
	}

	/* One hairline, between the last link group and the contact pair — arenim's
	   own separator above `.footer-about`, in the weight the vertical rule in
	   this footer already uses. The gaps either side are not the same number:
	   "Other" sits in a 48px tap target whose box hangs ~13px below the text,
	   so 16px of margin above reads level with 28px of padding below. */
	.fidelity-footer .footer-contact-wrap {
		margin-top: 16px;
		padding-top: 28px;
		border-top: 1px solid rgba(20, 46, 65, 0.15);
	}

	.fidelity-footer .footer-contact-group :is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])) {
		white-space: normal;
	}

	/* Trust marks on the first row, the two stores on the second — arenim's
	   `.footer-about-badges`, which is also two rows of two. */
	.footer-badges {
		display: grid;
		/* The same two tracks the contact pair above uses — equal halves of the
		   container, 16px apart — so the badge columns sit on the Sales team /
		   Customer service axes and the whole footer reads as one two-column
		   grid. Ranged left in their tracks rather than centred (the client's
		   call, 2026-09-17): every badge's left edge then lands on the same
		   axis as the copy above it — 20px and 203px at 390 — instead of each
		   one floating at its own inset. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: start;
		align-items: center;
		gap: 24px 16px;
		padding-top: 32px;
	}

	/* No height here. The base rule sizes this badge by width — 134.83px with
	   `height: auto` — so the 836x350 file keeps its own ratio and lands at
	   56.45px tall. A `height: 48px` sat here from an earlier arrangement that
	   sized both trust marks by height; once the width rule arrived
	   (2026-09-15) the two fought, and width winning on one axis with height
	   forced on the other squashed the shield by 15% (the client spotted it,
	   2026-09-17). 134.83 clears even the narrowest track in use — 152px at
	   360 — so there is nothing for a phone override to solve. */
	.footer-badge-gdpr {
		/* Its own file has a transparent gutter down the left — ink starts at
		   column 29 of 836, or 3.469% in — so ranged left the box lands on the
		   axis but the badge reads ~5px inset against "Sales team" above it and
		   the App Store mark below. Pulled back by exactly that share, read off
		   the pixels rather than judged by eye, so the visible edge is what
		   sits on the axis. A percentage, so it holds at any rendered size; a
		   transform, so the track keeps its geometry. The other three files
		   have no gutter and need nothing. */
		transform: translateX(-3.469%);
	}

	/* The 3px optical nudge that used to sit here went with the centring it
	   corrected: the mark's ring touches x=0 of its own viewBox, so ranged
	   left its ink starts exactly on the track edge and any offset would now
	   read as a misalignment against "Customer service" above it. */
	.footer-badges .footer-badge-labelled {
		gap: 10px;
	}

	.footer-badges .footer-badge-labelled img {
		height: 44px;
	}

	.footer-badge-label {
		font-size: 0.9rem;
	}

	/* Brand, copyright and socials stack and centre, since side by side they
	   wrap into an uneven two-line block on a phone. */
	.footer-bottom-grid {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}

	.footer-bottom-left,
	.footer-bottom-socials {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-video-toggle {
		display: none;
	}
}