: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;
}

/* ── one-line labels ──────────────────────────────────────────────────────
   Tracks size to their own content instead of splitting the row equally, so no
   label wraps: three did at 188px equal tracks — "Why to secure communication"
   and "Post quantum communication" (190px each) and "About our services and
   security" (199px). The five columns need 818px of text plus 160px of gaps, so
   this only applies from 1040px up, where the container is wide enough to hold
   them; below that the equal tracks above take over and a label may wrap again
   rather than push the page sideways. The 102px left over at full width is
   spread between the columns by `space-between` rather than left at the end.

   To restore the previous footer, delete this whole block — nothing else was
   changed for it. `git revert` of this commit does the same.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1040px) {
	/* The four link columns take their content's width and the contact column
	   absorbs the slack, so every gutter is exactly the 40px `column-gap` —
	   `space-between` would spread the leftover 102px across the gutters and
	   make them variable, which the badge row below has to measure against.
	   The contact column is pushed to the far edge so it stays where it was. */
	.fidelity-footer .footer-grid {
		grid-template-columns: repeat(4, max-content) 1fr;
	}

	.fidelity-footer .footer-contact-wrap {
		justify-self: stretch;
	}

	.fidelity-footer .footer-grid :is(:is(h2:where(:not([data-visual-tag])),:where([data-visual-tag="h2"])), li, a) {
		white-space: nowrap;
	}
}

/* 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;
}

/* 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;
}

.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 columns size to their content from 1040,
   but the gap either side of the line only opens up as the container grows —
   3px at 1040, 33px at 1100, 71px once the container caps at 1080px wide — and
   a line with 3px 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;
	}
}

/* The row runs the full width of the four link columns and the badges spread
   across it, so there is no dead space left after Google Play: GDPR sits on the
   "Services" edge, Google Play ends on the "Other" edge, and the three gaps
   between them are equal. It stops there rather than running under the contact
   column, which spans both grid rows beside it.
   After the rule above rather than inside the earlier media block: both carry
   one class, so source order is what decides. */
@media (min-width: 1040px) {
	.footer-badges {
		justify-content: space-between;
	}
}

.footer-badge-gdpr {
	height: 62px;
	width: auto;
}

.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: 53px;
	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 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;
	}

	/* 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. Each badge is centred in its own track, so the two in a column
		   share a centre line. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: center;
		align-items: center;
		gap: 24px 16px;
		padding-top: 32px;
	}

	/* The narrowest phone in use (360px) leaves each badge a 148px track, and
	   at their desktop sizes the two trust marks want 148 and 166. Both are
	   taken down until the wider one clears its track with room to spare —
	   otherwise "European Team & Technology" is squeezed onto three lines and
	   the pair stops reading as a row. The stores (135px) already fit.
	   arenim pairs its own EU mark with a narrow badge instead, so it never has
	   to make this trade. */
	.footer-badge-gdpr {
		height: 48px;
	}

	.footer-badges .footer-badge-labelled {
		gap: 10px;
		/* Optical nudge, 3px left of the centre its track gives it: the mark's
		   own left edge is a ring of stars with air inside it, so measured
		   centring reads a touch right. A transform rather than a margin, so
		   the track and its neighbour keep their geometry. */
		transform: translateX(-3px);
	}

	.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;
	}
}