/* Only what theme.json cannot express. */

/* Tokens theme.json has no preset for. */
:root {
	--atomi-ink-3: #667085;
	--atomi-line-2: #cfd6e0;
	--atomi-soft-2: #edf1f6;
	--atomi-ok: #12805c;
	--atomi-radius: 14px;
	--atomi-radius-sm: 8px;
	--atomi-header-h: 64px;
	--atomi-bar-h: 52px;
	--atomi-admin: 0px;
}
/* The header sticks below the admin bar, which scrolls away on phones. */
.admin-bar {
	--atomi-admin: var(--wp-admin--admin-bar--height, 32px);
}
@media (max-width: 600px) {
	.admin-bar {
		--atomi-admin: 0px;
	}
}

html {
	scroll-padding-top: calc(var(--atomi-admin) + var(--atomi-header-h) + 24px);
}
html:has(.atomi-pb) {
	scroll-padding-top: calc(var(--atomi-admin) + var(--atomi-header-h) + var(--atomi-bar-h) + 24px);
}
body {
	-webkit-font-smoothing: antialiased;
}
/* Body text never ends a paragraph on one short word; headings break into even lines. */
:where(p, li, dd, blockquote, td, th, figcaption) {
	text-wrap: pretty;
}
:where(h1, h2, h3, h4) {
	text-wrap: balance;
}
:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
/* Template parts sit edge to edge: a gap would show as a white strip above coloured sections. On short pages the
   main part grows so the footer reaches the bottom of the window. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--atomi-admin));
}
.wp-site-blocks > * {
	margin-block-start: 0;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* ---------- Site header ---------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--atomi-admin);
	z-index: 100;
}
/* The frosted background sits on a pseudo-element: a backdrop filter on an ancestor of the menu overlay would make
   the overlay's fixed position relative to the header. */
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(14px) saturate(1.5);
	backdrop-filter: blur(14px) saturate(1.5);
}
.atomi-gh,
.atomi-pb {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.wp-block-group:is(.atomi-gh__in, .atomi-pb__in, .atomi-gf__in) {
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--wide-size) + 3rem);
	margin-inline: auto;
	padding-inline: 1.5rem;
}
.wp-block-group.atomi-gh__in {
	position: relative;
	height: var(--atomi-header-h);
	gap: 2rem;
}
.atomi-gh__in > .atomi-logo {
	flex: none;
	margin: 0;
}
.atomi-logo a,
.atomi-logo img {
	display: block;
}

/* Icon buttons: search, menu, close. Core's icons give way to the design's line icons. */
.atomi-search .wp-block-search__button,
nav.atomi-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--atomi-radius-sm);
	background: none;
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.atomi-search .wp-block-search__button:hover,
nav.atomi-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):hover {
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--heading);
}
.atomi-search .wp-block-search__button svg,
nav.atomi-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) svg {
	display: none;
}
.atomi-search .wp-block-search__button::before,
nav.atomi-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close)::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--atomi-glyph) center / contain no-repeat;
	mask: var(--atomi-glyph) center / contain no-repeat;
}
.atomi-search .wp-block-search__button {
	--atomi-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
nav.atomi-nav .wp-block-navigation__responsive-container-open {
	--atomi-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}
nav.atomi-nav .wp-block-navigation__responsive-container-close {
	--atomi-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

/* Search: the field opens beside the icon, over the menu, so nothing in the bar moves. */
.atomi-search .wp-block-search__button {
	display: flex;
}
.wp-block-search.atomi-search {
	position: relative;
	flex: none;
	margin: 0;
}
.atomi-search .wp-block-search__input {
	position: absolute;
	top: 50%;
	right: calc(100% + 0.25rem);
	box-sizing: border-box;
	width: min(18rem, calc(100vw - 10rem));
	height: 40px;
	margin: 0;
	padding: 0 0.9rem;
	border: 1px solid var(--atomi-line-2);
	border-radius: var(--atomi-radius-sm);
	background: #fff;
	color: var(--wp--preset--color--heading);
	font-size: 0.9375rem;
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-50%);
}
.atomi-search .wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--tint), var(--wp--preset--shadow--card);
}
/* Hidden by opacity, not visibility: the search block focuses the field in the same moment it shows it. */
.atomi-search.wp-block-search__searchfield-hidden .wp-block-search__input {
	opacity: 0;
	pointer-events: none;
}

/* Product icons for menu entries (atomi-ic-*). */
.atomi-ic-ap {
	--atomi-icon: url("../images/icon_ap.svg");
}
.atomi-ic-sl {
	--atomi-icon: url("../images/icon_sl.svg");
}
.atomi-ic-up {
	--atomi-icon: url("../images/icon_up.svg");
}
/* Links to other sites carry an arrow. */
nav.atomi-nav .wp-block-navigation__submenu-container a[target="_blank"] .wp-block-navigation-item__label::after {
	content: "\2197";
	margin-left: 0.3em;
	font-size: 0.85em;
	opacity: 0.6;
}
nav.atomi-nav .wp-block-navigation-item__description {
	display: block;
}

/* Menu across the bar (wide screens). */
@media (width >= 961px) {
	nav.atomi-nav {
		flex: 1;
		align-self: stretch;
		min-width: 0;
	}
	/* The Products panel spans the header, so only the bar positions it. */
	nav.atomi-nav,
	nav.atomi-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
	nav.atomi-nav .wp-block-navigation__responsive-dialog,
	nav.atomi-nav ul.wp-block-navigation__container,
	nav.atomi-nav li.atomi-mega {
		position: static;
	}
	nav.atomi-nav :is(.wp-block-navigation__responsive-container, .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog) {
		height: 100%;
	}
	nav.atomi-nav .wp-block-navigation__responsive-container-content {
		display: flex;
		height: 100%;
		align-items: stretch;
		gap: 0.15rem;
	}
	nav.atomi-nav ul.wp-block-navigation__container {
		align-items: stretch;
		gap: 0.15rem;
	}
	nav.atomi-nav .atomi-search {
		margin-left: auto;
		align-self: center;
	}
	.atomi-gh__in > .atomi-search--bar {
		display: none;
	}

	/* Top-level items: label and arrow share one rounded hover area. The arrow button lies over the label's right
	   end; items without a page of their own (Products, the language menu) open from anywhere on the label. */
	nav.atomi-nav li.atomi-top {
		display: grid;
		align-items: center;
	}
	nav.atomi-nav li.atomi-top > :is(.wp-block-navigation-item__content, .wp-block-navigation__submenu-icon) {
		grid-area: 1 / 1;
	}
	nav.atomi-nav li.atomi-top > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		height: 40px;
		padding: 0 0.8rem;
		border-radius: var(--atomi-radius-sm);
		color: var(--wp--preset--color--contrast);
		font-size: 0.9375rem;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		transition: background-color 0.15s, color 0.15s;
	}
	/* Room for the arrow: the design's .4rem gap and 6px chevron box before the item's own padding. */
	nav.atomi-nav li.atomi-top.has-child > .wp-block-navigation-item__content {
		padding-right: calc(1.2rem + 6px);
	}
	nav.atomi-nav li.atomi-top:is(:hover, :has(> [aria-expanded="true"])) > .wp-block-navigation-item__content,
	nav.atomi-nav li.atomi-top > .wp-block-navigation-item__content:focus-visible {
		background: var(--wp--preset--color--subtle);
		color: var(--wp--preset--color--heading);
	}
	nav.atomi-nav li.atomi-top.is-current > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--heading);
		font-weight: 600;
	}
	nav.atomi-nav li.atomi-top.is-current {
		background: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) 50% 100% / calc(100% - 1.2rem) 2px no-repeat;
	}
	/* Under a product bar its tabs mark the page instead. */
	header:has(.atomi-pb) nav.atomi-nav li.atomi-top.is-current {
		background: none;
	}
	nav.atomi-nav li.atomi-top > .wp-block-navigation__submenu-icon {
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		justify-self: end;
		width: calc(1.2rem + 8px);
		height: 40px;
		margin: 0;
		padding: 0 calc(0.8rem - 2px) 0 0;
		border-radius: var(--atomi-radius-sm);
		color: var(--wp--preset--color--contrast);
	}
	nav.atomi-nav li.atomi-top:not(:has(> a[href])) > .wp-block-navigation__submenu-icon {
		justify-self: stretch;
		width: auto;
	}
	nav.atomi-nav li.atomi-top:is(:hover, :has(> [aria-expanded="true"])) > .wp-block-navigation__submenu-icon {
		color: var(--wp--preset--color--heading);
	}
	nav.atomi-nav li.atomi-top > .wp-block-navigation__submenu-icon svg {
		width: 10px;
		height: 10px;
		margin: 0;
		opacity: 0.55;
		transition: transform 0.2s;
	}

	/* Panels. */
	nav.atomi-nav li.atomi-top > .wp-block-navigation__submenu-container {
		top: calc(100% - 4px);
		left: 0;
		z-index: 70;
		padding: 0.5rem;
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: var(--atomi-radius);
		background: #fff;
		color: var(--wp--preset--color--heading);
		box-shadow: var(--wp--preset--shadow--raised);
		transform: translateY(6px);
		transition: opacity 0.16s, transform 0.16s;
	}
	nav.atomi-nav li.atomi-top > [aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		transform: none;
	}
	nav.atomi-nav li.atomi-top > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 0.6rem 0.75rem;
		border-radius: var(--atomi-radius-sm);
		color: var(--wp--preset--color--heading);
		font-size: 0.9375rem;
		font-weight: 500;
		line-height: 1.35;
	}
	nav.atomi-nav li.atomi-top > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background: var(--wp--preset--color--subtle);
	}

	/* Submenus inside a panel (product columns, link groups) are always open with it. */
	nav.atomi-nav li.atomi-top .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static;
		visibility: inherit;
		opacity: 1;
		width: auto;
		height: auto;
		min-width: 0;
		overflow: visible;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		transform: none;
	}
	nav.atomi-nav li.atomi-top .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
		content: none;
	}
	nav.atomi-nav li.atomi-top .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		display: none;
	}

	/* Products: one column per product. */
	nav.atomi-nav li.atomi-mega > .wp-block-navigation__submenu-container {
		top: calc(var(--atomi-header-h) - 4px);
		left: 0.5rem;
		right: 0.5rem;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 0;
	}
	nav.atomi-nav li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 1.5rem 1.5rem 1.25rem;
		border-right: 1px solid var(--wp--preset--color--rule);
	}
	nav.atomi-nav li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child {
		padding-left: 1rem;
	}
	nav.atomi-nav li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
		padding-right: 1rem;
		border-right: 0;
	}
	nav.atomi-nav li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: grid;
		flex-grow: 0;
		grid-template-columns: 42px minmax(0, 1fr);
		column-gap: 0.85rem;
		align-items: center;
		padding: 0;
		border-radius: 0;
		background: none;
	}
	nav.atomi-nav li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
		content: "";
		grid-row: 1 / span 2;
		width: 42px;
		height: 42px;
		border-radius: 10px;
		background: var(--atomi-icon) center / cover no-repeat;
	}
	nav.atomi-nav li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
		grid-column: 2;
		align-self: end;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.2;
		transition: color 0.15s;
	}
	nav.atomi-nav li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
		color: var(--wp--preset--color--brand-text);
	}
	/* The platforms, from the item's title. */
	nav.atomi-nav li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		content: attr(title);
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		color: var(--atomi-ink-3);
		font-size: 0.8125rem;
		font-weight: 400;
		line-height: 1.6;
	}
	nav.atomi-nav li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__description {
		grid-column: 1 / -1;
		grid-row: 3;
		margin: 0.85rem 0 1rem;
		color: var(--wp--preset--color--contrast);
		font-size: 0.9375rem;
		font-weight: 400;
		line-height: 1.6;
		text-wrap: pretty;
	}
	nav.atomi-nav li.atomi-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 0.75rem;
		margin-top: auto;
		padding-top: 1rem;
		border-top: 1px solid var(--wp--preset--color--rule);
	}
	nav.atomi-nav li.atomi-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 0.35rem 0;
		color: var(--wp--preset--color--contrast);
		font-size: 0.9375rem;
		line-height: 1.6;
	}
	nav.atomi-nav li.atomi-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--brand-text);
	}

	/* Pricing and Download: one row per product. */
	nav.atomi-nav li.atomi-list > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr);
		column-gap: 0.75rem;
		align-items: center;
		min-width: 262px;
		box-sizing: border-box;
	}
	nav.atomi-nav li.atomi-list > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
		content: "";
		grid-row: 1 / span 2;
		width: 30px;
		height: 30px;
		border-radius: var(--atomi-radius-sm);
		background: var(--atomi-icon) center / cover no-repeat;
	}
	nav.atomi-nav li.atomi-list .wp-block-navigation-item__label,
	nav.atomi-nav li.atomi-list .wp-block-navigation-item__description {
		grid-column: 2;
	}
	nav.atomi-nav li.atomi-list .wp-block-navigation-item__description {
		margin-top: 2px;
		color: var(--atomi-ink-3);
		font-size: 0.8125rem;
		font-weight: 400;
	}

	/* Support: link groups in two columns, the first one down the left. */
	nav.atomi-nav li.atomi-cols > .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: repeat(2, 231px);
		grid-template-rows: auto 1fr;
		gap: 0 0.75rem;
		padding: 0.75rem;
	}
	nav.atomi-nav li.atomi-cols > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: block;
	}
	nav.atomi-nav li.atomi-cols > .wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child {
		grid-row: 1 / span 2;
	}
	nav.atomi-nav li.atomi-cols > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block;
		margin: 0.6rem 0.75rem 0.5rem;
		padding: 0;
		background: none;
		color: var(--atomi-ink-3);
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
	nav.atomi-nav li.atomi-cols > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(3) > .wp-block-navigation-item__content {
		margin-top: 1.6rem;
	}
	nav.atomi-nav li.atomi-cols .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 0.5rem 0.75rem;
		border-radius: var(--atomi-radius-sm);
		color: var(--wp--preset--color--heading);
		font-size: 0.9375rem;
		line-height: 1.6;
	}
	nav.atomi-nav li.atomi-cols .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background: var(--wp--preset--color--subtle);
	}

	/* Language menu: globe before the code, a tick on the current language. */
	nav.atomi-nav li.atomi-lang > .wp-block-navigation-item__content {
		padding-left: 0.65rem;
	}
	nav.atomi-nav li.atomi-lang > .wp-block-navigation-item__content::before {
		content: "";
		width: 18px;
		height: 18px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	nav.atomi-nav li.atomi-lang > .wp-block-navigation__submenu-container {
		left: auto;
		right: 0;
	}
	nav.atomi-nav li.atomi-lang > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		justify-content: space-between;
		min-width: 172px;
		box-sizing: border-box;
	}
	nav.atomi-nav li.atomi-lang .is-current-lang > .wp-block-navigation-item__content::after {
		content: "\2713";
		color: var(--wp--preset--color--primary);
		font-weight: 700;
	}
}
@media (width >= 961px) and (hover: hover) {
	nav.atomi-nav li.atomi-top:hover > .wp-block-navigation__submenu-container {
		transform: none;
	}
	nav.atomi-nav li.atomi-top:hover > .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}
}
@media (961px <= width < 1101px) {
	.wp-block-group.atomi-gh__in {
		gap: 1rem;
	}
	nav.atomi-nav li.atomi-top > .wp-block-navigation-item__content {
		padding-left: 0.6rem;
	}
	nav.atomi-nav li.atomi-top.has-child > .wp-block-navigation-item__content {
		padding-right: calc(1rem + 6px);
	}
	nav.atomi-nav li.atomi-top > .wp-block-navigation__submenu-icon {
		width: calc(1rem + 8px);
		padding-right: calc(0.6rem - 2px);
	}
	/* Too little room on its right: the Support panel opens leftward from the item's right edge. */
	nav.atomi-nav li.atomi-cols > .wp-block-navigation__submenu-container {
		left: auto;
		right: 0;
	}
}

/* Menu in an overlay below the bar (narrow screens; the navigation block's own breakpoint is 600px). Breakpoints use
   range syntax so a fractional window width such as 960.5px falls on one side. */
@media (width < 961px) {
	.atomi-gh__in > .atomi-logo {
		margin-right: auto;
	}
	.wp-block-group.atomi-gh__in {
		gap: 0.15rem;
	}
	nav.atomi-nav {
		flex: none;
	}
	nav.atomi-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	nav.atomi-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	/* The close button covers it while the overlay is open. */
	nav.atomi-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}
	nav.atomi-nav .atomi-search {
		display: none;
	}
	/* The search in the bar opens over the bar, from the menu button back to the gutter at most. */
	.atomi-gh__in > .atomi-search--bar {
		position: static;
	}
	.atomi-search--bar .wp-block-search__input {
		left: max(1.5rem, calc(100% - 1.5rem - 80px - 0.4rem - 18rem));
		right: calc(1.5rem + 80px + 0.4rem);
		width: auto;
	}
	/* Fades in without a transform: a transform would make the close button's fixed position relative to it. */
	nav.atomi-nav .wp-block-navigation__responsive-container.is-menu-open {
		top: calc(var(--atomi-admin) + var(--atomi-header-h) + 1px);
		padding: 0.5rem 1.5rem 2.5rem;
		background: #fff;
		color: var(--wp--preset--color--heading);
		animation: atomi-fade 0.15s ease-out;
	}
	.has-modal-open .admin-bar nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-dialog {
		margin-top: 0;
	}
	/* The close button takes the place of the menu button. */
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
		position: fixed;
		top: calc(var(--atomi-admin) + (var(--atomi-header-h) - 40px) / 2);
		right: 1.5rem;
	}
	nav.atomi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 0;
		align-items: stretch;
		gap: 0;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container {
		align-items: stretch;
		gap: 0.15rem;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.wp-block-navigation-item {
		align-items: stretch;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-top {
		position: relative;
	}
	/* The rule sits under each row's name, so an open panel hangs below it. */
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-top > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		height: 50px;
		border-bottom: 1px solid var(--wp--preset--color--rule);
		font-size: 1rem;
		font-weight: 500;
	}
	/* Each top-level item opens and closes its panel from the whole row (site.js keeps one open at a time). */
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-top > .wp-block-navigation__submenu-icon {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: auto;
		height: 49px;
		margin: 0;
		padding: 0 0.25rem 0 0;
		color: var(--atomi-ink-3);
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-top > .wp-block-navigation__submenu-icon svg {
		width: 12px;
		height: 12px;
		margin: 0;
		transition: transform 0.2s;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-top.atomi-open > .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-top > .wp-block-navigation__submenu-container {
		display: none;
		min-width: 0;
		padding: 0.25rem 0 0.75rem;
		gap: 0;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-top.atomi-open > .wp-block-navigation__submenu-container {
		display: flex;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-top .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		min-width: 0;
		padding: 0;
		gap: 0;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-top .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.5rem 0;
		color: var(--wp--preset--color--heading);
		font-size: 0.9375rem;
		line-height: 1.6;
	}

	/* Products: name and platforms beside the icon, the links indented under the name. */
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		padding: 0.75rem 0;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr);
		column-gap: 0.85rem;
		align-items: center;
		margin-bottom: 0.25rem;
		padding: 0;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
		content: "";
		grid-row: 1 / span 2;
		width: 42px;
		height: 42px;
		border-radius: 10px;
		background: var(--atomi-icon) center / cover no-repeat;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
		align-self: end;
		font-size: 1rem;
		font-weight: 600;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		content: attr(title);
		grid-column: 2;
		align-self: start;
		color: var(--atomi-ink-3);
		font-size: 0.8125rem;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-mega .wp-block-navigation-item__description {
		display: none;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0.75rem;
		max-width: 20rem;
		margin-left: calc(42px + 0.85rem);
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.35rem 0;
		color: var(--wp--preset--color--contrast);
	}

	/* Pricing and Download: icon, name and what it covers. */
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-list > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr);
		column-gap: 0.75rem;
		align-items: center;
		padding: 0.6rem 0;
		font-weight: 500;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-list > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
		content: "";
		grid-row: 1 / span 2;
		width: 30px;
		height: 30px;
		border-radius: var(--atomi-radius-sm);
		background: var(--atomi-icon) center / cover no-repeat;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-list :is(.wp-block-navigation-item__label, .wp-block-navigation-item__description) {
		grid-column: 2;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-list .wp-block-navigation-item__description {
		margin-top: 2px;
		color: var(--atomi-ink-3);
		font-size: 0.8125rem;
		font-weight: 400;
	}

	/* Support: group names as small headings. */
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-cols > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		margin: 0.75rem 0 0.25rem;
		padding: 0;
		color: var(--atomi-ink-3);
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	/* The language menu ends the overlay as a two-way switch. */
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-lang {
		padding-top: 1.25rem;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-lang > :is(.wp-block-navigation-item__content, .wp-block-navigation__submenu-icon) {
		display: none;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-lang > .wp-block-navigation__submenu-container {
		display: flex;
		flex-direction: row;
		align-self: flex-start;
		padding: 0;
		border: 1px solid var(--atomi-line-2);
		border-radius: var(--atomi-radius-sm);
		overflow: hidden;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-lang .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.65rem 1.1rem;
		color: var(--wp--preset--color--contrast);
		font-weight: 600;
		line-height: 1;
	}
	nav.atomi-nav .is-menu-open .wp-block-navigation__responsive-container-content li.atomi-lang .is-current-lang > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--heading);
		color: #fff;
	}
}
@media (width < 600px) {
	.atomi-gh__in:has(> .atomi-search--bar:not(.wp-block-search__searchfield-hidden)) > .atomi-logo {
		visibility: hidden;
	}
}
@keyframes atomi-fade {
	from {
		opacity: 0;
	}
}

/* ---------- Product bar ---------- */

.wp-block-group.atomi-pb__in {
	height: var(--atomi-bar-h);
	gap: 2rem;
}
.atomi-pb__in > * {
	margin: 0;
}
p.atomi-pb__name {
	flex: none;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
}
.atomi-pb__name a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--heading);
}
.atomi-pb__name a:hover {
	color: var(--wp--preset--color--heading);
}
.atomi-pb__name img {
	width: 26px;
	height: 26px;
	border-radius: 7px;
}
nav.atomi-pb__tabs {
	flex: 1;
	align-self: stretch;
	min-width: 0;
}
/* Positioned so site.js measures tabs from the row's own edge. */
nav.atomi-pb__tabs > ul.wp-block-navigation__container {
	position: relative;
	height: 100%;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 1.6rem;
	overflow-x: auto;
	scrollbar-width: none;
}
nav.atomi-pb__tabs > ul::-webkit-scrollbar {
	display: none;
}
nav.atomi-pb__tabs li.wp-block-navigation-item {
	flex: none;
}
/* The doubled class outranks core's `color: inherit` on navigation links. */
nav.atomi-pb__tabs .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 100%;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	white-space: nowrap;
	transition: color 0.15s;
}
nav.atomi-pb__tabs .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--heading);
}
nav.atomi-pb__tabs .wp-block-navigation-item__content[aria-current] {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--heading);
	font-weight: 600;
}
/* Rows that scroll sideways fade at an edge while more items lie past it (classes set by site.js). */
.fade-r {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
}
.fade-l {
	-webkit-mask-image: linear-gradient(90deg, transparent var(--fade-cut, 0px), #000 calc(var(--fade-cut, 0px) + 1.1rem));
	mask-image: linear-gradient(90deg, transparent var(--fade-cut, 0px), #000 calc(var(--fade-cut, 0px) + 1.1rem));
}
.fade-l.fade-r {
	-webkit-mask-image: linear-gradient(90deg, transparent var(--fade-cut, 0px), #000 calc(var(--fade-cut, 0px) + 1.1rem), #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(90deg, transparent var(--fade-cut, 0px), #000 calc(var(--fade-cut, 0px) + 1.1rem), #000 calc(100% - 2rem), transparent);
}
p.atomi-pb__buy {
	flex: none;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
}
.atomi-pb__buy a {
	color: var(--wp--preset--color--contrast);
}
.atomi-pb__buy a:hover {
	color: var(--wp--preset--color--heading);
}
/* Buy and Download sit closer to each other than to the tabs (narrower screens hide Buy). */
@media (width >= 961px) {
	.wp-block-group.atomi-pb__in > .atomi-pb__buy + .atomi-pb__cta {
		margin-left: -0.9rem;
	}
}
.wp-block-buttons.atomi-pb__cta {
	flex: none;
}
.atomi-pb__cta .wp-block-button__link {
	padding: 8px 0.9rem;
	font-size: 0.8125rem;
	line-height: 18px;
}
@media (width < 961px) {
	p.atomi-pb__buy {
		display: none;
	}
}
@media (width < 641px) {
	.wp-block-group.atomi-pb__in {
		gap: 1.1rem;
	}
	/* Phones: the icon stands for the product name. */
	.atomi-pb__name a {
		gap: 0;
		font-size: 0;
	}
	nav.atomi-pb__tabs > ul.wp-block-navigation__container {
		gap: 1.1rem;
	}
	.atomi-pb__cta .wp-block-button__link {
		padding-inline: 0.75rem;
	}
}

/* ---------- Site footer ---------- */

.atomi-gf {
	padding-block: var(--wp--preset--spacing--section) 2rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--heading);
	font-size: 0.9375rem;
}
.wp-block-group.atomi-gf__grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(4, 1fr);
	gap: 2rem;
}
.wp-block-group.atomi-gf__grid > *,
.wp-block-group.atomi-gf__grid > * > *,
.wp-block-group.atomi-gf__in > * {
	margin-block: 0;
}
.atomi-gf__brand .wp-block-image {
	margin-bottom: 1rem;
}
.atomi-gf__brand a,
.atomi-gf__brand img {
	display: block;
}
.wp-block-group.atomi-gf__brand > p {
	max-width: 20rem;
	color: var(--wp--preset--color--contrast);
}
.wp-block-group.atomi-gf__grid h4 {
	margin-bottom: 1rem;
	font-size: 0.9375rem;
	line-height: 1;
	letter-spacing: 0;
}
.atomi-gf__links {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.atomi-gf__links a {
	color: var(--wp--preset--color--contrast);
}
.atomi-gf__links a:hover {
	color: var(--wp--preset--color--heading);
}
.atomi-gf__links a[target="_blank"]::after {
	content: "\2197";
	margin-left: 0.3em;
	font-size: 0.85em;
	opacity: 0.6;
}
/* Company details (Vietnamese footer), required by law. */
.wp-block-group.atomi-gf__in > .atomi-gf__company {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
	gap: 1rem 2rem;
	align-items: start;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--atomi-ink-3);
	font-size: 0.8125rem;
	line-height: 1.6;
}
.atomi-gf__company > * {
	margin: 0;
}
.atomi-gf__company strong {
	color: var(--wp--preset--color--heading);
	font-weight: 600;
}
.atomi-gf__company img {
	display: block;
}
.wp-block-group.atomi-gf__in > .atomi-gf__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--atomi-ink-3);
	font-size: 0.8125rem;
}
.wp-block-group.atomi-gf__in > .atomi-gf__company + .atomi-gf__bottom {
	margin-top: 1.5rem;
}
.atomi-gf__bottom > *,
.atomi-gf__end > * {
	margin: 0;
}
.wp-block-group.atomi-gf__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}
.atomi-lang-sw {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--atomi-line-2);
	border-radius: var(--atomi-radius-sm);
	background: #fff;
}
.atomi-lang-sw a {
	padding: 0.45rem 0.8rem;
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
}
.atomi-lang-sw a:hover {
	color: var(--wp--preset--color--heading);
}
.atomi-lang-sw a[aria-current] {
	background: var(--wp--preset--color--heading);
	color: #fff;
}
.wp-block-social-links.atomi-social {
	gap: 0.5rem;
}
.wp-block-social-links.is-style-logos-only.atomi-social .wp-social-link {
	display: block;
	width: 34px;
	height: 34px;
	margin: 0;
	border: 1px solid var(--atomi-line-2);
	border-radius: var(--atomi-radius-sm);
	background: #fff;
	color: var(--atomi-ink-3);
	transition: color 0.15s, border-color 0.15s;
}
.wp-block-social-links.is-style-logos-only.atomi-social .wp-social-link:hover {
	border-color: var(--atomi-ink-3);
	color: var(--wp--preset--color--heading);
	transform: none;
}
.wp-block-social-links.atomi-social .wp-social-link a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
}
.wp-block-social-links.atomi-social .wp-social-link svg {
	width: 16px;
	height: 16px;
}
@media (width < 1101px) {
	.wp-block-group.atomi-gf__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.atomi-gf__brand {
		grid-column: 1 / -1;
	}
}
@media (width < 961px) {
	/* Columns take their own width and share the spare room, so long links stay on one line. */
	.wp-block-group.atomi-gf__grid {
		grid-template-columns: repeat(4, auto);
		justify-content: space-between;
	}
	.wp-block-group.atomi-gf__in > .atomi-gf__company {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
@media (width < 641px) {
	.wp-block-group.atomi-gf__grid {
		grid-template-columns: repeat(2, auto);
	}
	.wp-block-group.atomi-gf__in > .atomi-gf__company {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Buttons ---------- */

.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
}
.wp-block-button__link:hover {
	text-decoration: none;
}
/* Buttons with their own fill (converted from Divi, or a preset chosen in the editor) darken slightly. */
.wp-block-button__link:is(.has-background, [style*="background"]):is(:hover, :focus-visible) {
	filter: brightness(0.93);
}
/* Converted Divi buttons filled with the old site's blue (now the hover shade) take the brand fill and turn to the
   hover shade, like the theme's own buttons. The block's Fill style marks them, so an Accent chosen in the editor
   stays. */
.wp-block-button.is-style-fill > .wp-block-button__link.has-accent-background-color {
	background-color: var(--wp--preset--color--primary) !important;
}
.wp-block-button.is-style-fill > .wp-block-button__link:is(.has-accent-background-color, .has-primary-background-color):is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--accent) !important;
	filter: none;
}
/* Converted Divi buttons that set only a text colour were outline buttons: no fill, a border in the text colour, and
   a fill in that colour on hover (the text is painted white with text-fill-color, which leaves currentColor alone). */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:is(.has-text-color, [style*="color:"]):not(.has-background, [style*="background"]) {
	background-color: transparent;
	border-color: currentColor;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:is(.has-text-color, [style*="color:"]):not(.has-background, [style*="background"], [style*="border-width:0px"]):is(:hover, :focus-visible) {
	--atomi-icon-color: #fff;
	background-color: currentColor;
	-webkit-text-fill-color: #fff;
}
/* So do the glass buttons on header images (a translucent white background set inline). */
.wp-block-button__link[style*="background-color:rgba(255,255,255"]:is(:hover, :focus-visible) {
	--atomi-icon-color: #fff;
	background-color: currentColor !important;
	-webkit-text-fill-color: #fff;
	filter: none;
}
/* Text buttons (no border, no background) stay text: hover turns them the link hover colour and moves the icon. */
.wp-block-button > .wp-block-button__link[style*="border-width:0px"]:not(.has-background):is(:hover, :focus-visible) {
	--atomi-icon-color: var(--wp--preset--color--accent);
	background-color: transparent;
	-webkit-text-fill-color: var(--wp--preset--color--accent);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--atomi-ink-3);
	background-color: #fff;
	color: var(--wp--preset--color--heading);
}

/*
 * Converted Divi buttons take the design's button shape. Their pill radii, thick borders, wide padding and large
 * labels were the old design, so those inline values give way to the theme's: 8px corners, a 1px border, 0.75rem
 * padding and a 1rem label (the design's large button). The theme's patterns set none of them and are untouched.
 */
.wp-block-button__link[style*="border-radius"] {
	border-radius: 8px !important;
}
.wp-block-button__link[style*="border-width"]:not([style*="border-width:0px"]),
.wp-block-button__link:is(.has-background, [style*="background"])[style*="border-width:0px"] {
	border-width: 1px !important;
}
.wp-block-button__link[style*="padding"] {
	padding: 0.75rem 1.4rem !important;
}
.wp-block-button[class*="has-icon-"] > .wp-block-button__link[style*="padding"] {
	padding-right: 2.2em !important;
}
.wp-block-button__link[class*="-font-size"] {
	font-size: 1rem !important;
}
/* Blue outline buttons, plain, white or glass, become the design's outline button: white, dark label, grey border. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:is(.has-primary-color, .has-accent-color):not(.has-background, [style*="background"], [style*="border-width:0px"]),
.wp-block-button > .wp-block-button__link:is(.has-primary-color, .has-accent-color):is(.has-base-background-color, .has-white-background-color) {
	border-color: var(--atomi-line-2) !important;
	background-color: #fff !important;
	color: var(--wp--preset--color--heading) !important;
}
.wp-block-button > .wp-block-button__link:is(.has-primary-color, .has-accent-color)[style*="background-color:rgba(255,255,255"] {
	border-color: rgba(16, 24, 40, 0.14) !important;
	background-color: rgba(255, 255, 255, 0.88) !important;
	color: var(--wp--preset--color--heading) !important;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:is(.has-primary-color, .has-accent-color):not(.has-background, [style*="background"], [style*="border-width:0px"]):is(:hover, :focus-visible),
.wp-block-button > .wp-block-button__link:is(.has-primary-color, .has-accent-color):is(.has-base-background-color, .has-white-background-color, [style*="background-color:rgba(255,255,255"]):is(:hover, :focus-visible) {
	--atomi-icon-color: currentColor;
	border-color: var(--atomi-ink-3) !important;
	background-color: #fff !important;
	-webkit-text-fill-color: currentColor;
	filter: none;
}

/*
 * Button icons (has-icon-<name> on the button block), drawn in the text colour right after the label like
 * Divi's: the icon sits in the button's right padding, which is widened when the button has none of its own.
 */
.wp-block-button[class*="has-icon-"] > .wp-block-button__link {
	position: relative;
	padding-right: 2.2em;
}
.wp-block-button[class*="has-icon-"] > .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 1em;
	height: 1em;
	margin-left: 0.3em;
	background-color: var(--atomi-icon-color, currentColor);
	-webkit-mask: var(--atomi-icon-image) center / contain no-repeat;
	mask: var(--atomi-icon-image) center / contain no-repeat;
	transform: translateY(-50%);
	transition: transform 0.2s;
}
.wp-block-button[class*="has-icon-"] > .wp-block-button__link:is(:hover, :focus-visible)::after {
	transform: translate(3px, -50%);
}
.wp-block-button.has-icon-chevron {
	--atomi-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.wp-block-button.has-icon-arrow {
	--atomi-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.wp-block-button.has-icon-circle-chevron {
	--atomi-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M10.5 8l4 4-4 4'/%3E%3C/svg%3E");
}
.wp-block-button.has-icon-circle-play {
	--atomi-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 8.3v7.4l5.8-3.7z'/%3E%3C/svg%3E");
}
.wp-block-button.has-icon-play {
	--atomi-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E");
}

/* Block editor buttons with a background and no text colour get white text, as WordPress's default style gave them. */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button__link.has-background {
	border-color: transparent;
}
.wp-block-button__link.has-background:not(.has-text-color) {
	color: #fff;
}

/* ---------- Content ---------- */

/*
 * 58 posts carry Divi's `div { text-align: justify }` in a style element in their text. The text stays justified;
 * the header, title, byline, contents, sidebar, previous/next and footer align as usual (their class rules still win).
 */
html:where(:has(.wp-block-post-content style)) div:where(:not(.wp-block-post-content, .wp-block-post-content div)) {
	text-align: inherit;
}

/* Divi's list indentation and image spacing inside post content. */
.wp-block-post-content :where(ul, ol) {
	padding-left: 1.5em;
}
.wp-block-post-content li > p {
	margin: 0;
}
.wp-block-post-content :where(.wp-block-image) {
	margin-block: 1em;
}
/* A linked picture's link is an inline block on the text baseline, which leaves a gap under the picture. */
.wp-block-image > a {
	vertical-align: bottom;
}

/* Keyboard input (the text toolbar's format) also names what to click in the app: a small key-like label. */
kbd {
	padding: 0.2em 0.45em;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 5px;
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--heading);
	font-family: inherit;
	font-size: 0.86em;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

/* Keep together (the text toolbar's format): a few words, such as "on-click", that a line never breaks inside. */
.atomi-nw {
	white-space: nowrap;
}

.atomi-sidebar .wp-block-categories {
	list-style: none;
	padding-left: 0;
}

/* The promo bar parts sit right under the header, as the Divi Theme Builder bars did. */
.wp-site-blocks > .atomi-promo {
	margin-block-start: 0;
}

/* Note block style on groups and paragraphs: a tinted box with a brand rule. */
:is(.wp-block-group, p).is-style-note {
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 var(--atomi-radius-sm) var(--atomi-radius-sm) 0;
	background-color: var(--wp--preset--color--tint);
}

/* Content and sidebar stack at Divi's breakpoint, not at the columns block's 782px. */
@media (width < 981px) {
	.wp-block-columns.atomi-layout {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.atomi-layout > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Details blocks (Divi toggles): rows between rules, an arrow that turns when open. */
.wp-block-details {
	margin-block: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
:not(.wp-block-details) + .wp-block-details,
.wp-block-details:first-child {
	border-top: 1px solid var(--wp--preset--color--rule);
}
.wp-block-details + :not(.wp-block-details) {
	margin-top: 1.5rem;
}
.wp-block-details > summary {
	position: relative;
	padding: 1.25rem 2.5rem 1.25rem 0;
	font-weight: 600;
	line-height: 1.45;
	list-style: none;
	cursor: pointer;
	text-wrap: balance;
}
.wp-block-details > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details > summary::after {
	content: "";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 1.6px solid var(--atomi-ink-3);
	border-bottom: 1.6px solid var(--atomi-ink-3);
	transform: rotate(45deg);
	transition: transform 0.2s;
}
.wp-block-details[open] > summary::after {
	margin-top: -2px;
	transform: rotate(225deg);
}
/* The answer keeps clear of the arrow's column, like the question. */
.wp-block-details > :not(summary) {
	padding-right: 2.5rem;
	color: var(--wp--preset--color--contrast);
}
.wp-block-details > summary + * {
	margin-block-start: 0;
}
.wp-block-details > :not(summary):last-child {
	padding-bottom: 1.4rem;
}

/* Groups converted from Divi call-to-action modules. */
.atomi-cta {
	text-align: center;
}
.atomi-cta .wp-block-buttons {
	justify-content: center;
}
.atomi-cta .wp-block-button__link {
	color: #fff;
	border-color: #fff;
	font-size: 1rem;
}

/* Pages converted from Divi: full-width sections with Divi's default spacing. */
main:has(> .wp-block-post-content > .alignfull:first-child) {
	padding-top: 0 !important;
}
main:has(> .wp-block-post-content > .alignfull:last-child) {
	padding-bottom: 0 !important;
}
.wp-block-post-content > .alignfull {
	margin-block: 0;
}
/* Sections and rows space out like the Divi site: the child theme fixed section padding at 10px,
   rows add Divi's 2% padding plus their own margins. */
.atomi-section:not(.atomi-section-fullwidth) {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}
.atomi-section.atomi-section-fullwidth {
	padding-block: 0;
}
.atomi-row {
	padding-block: 2%;
}
.atomi-section > .atomi-row {
	margin-block-start: 0;
}

/* Divi's per-device visibility (phone up to 767px, tablet up to 980px). */
@media (width < 768px) {
	.atomi-hide-phone {
		display: none !important;
	}
}
@media (768px <= width < 981px) {
	.atomi-hide-tablet {
		display: none !important;
	}
}
@media (width >= 981px) {
	.atomi-hide-desktop {
		display: none !important;
	}
}

/* Fullwidth headers. */
.atomi-hero {
	padding-block: 50px;
}
.atomi-hero .wp-block-buttons {
	margin-top: 1.5em;
}

/* Blog and portfolio modules, now query loops. */
.atomi-blog-grid .wp-block-post {
	overflow: hidden;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	background: #fff;
}
.atomi-blog-grid .wp-block-post-featured-image {
	margin: -1.25rem -1.25rem 1.25rem;
}
.atomi-blog .wp-block-post-title {
	font-size: 1.125rem;
	line-height: 1.4;
}
.atomi-blog .wp-block-post-title a,
.atomi-portfolio .wp-block-post-title a {
	color: var(--wp--preset--color--heading);
}
.atomi-blog .wp-block-post-title a:hover,
.atomi-portfolio .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand-text);
}
.atomi-blog .wp-block-post-excerpt__more-text {
	display: none;
}
/* Gallery titles below the images rather than over them, as Divi's gallery showed them. */
.atomi-gallery-titles.wp-block-gallery.has-nested-images figure.wp-block-image {
	justify-content: flex-start;
}
.atomi-gallery-titles.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
	flex: none;
	height: auto;
	aspect-ratio: 400 / 284;
}
.atomi-gallery-titles.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	content: none;
}
.atomi-gallery-titles.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	padding: 10px 0 0;
	background: none;
	color: var(--wp--preset--color--heading);
	font-size: 1rem;
	font-weight: 600;
	text-align: left;
	text-shadow: none;
}
.atomi-portfolio .wp-block-post-title {
	font-size: 1rem;
	line-height: 1.4;
	margin-top: 0.75em;
}
.atomi-portfolio .wp-block-post-featured-image img {
	border-radius: var(--atomi-radius-sm);
	transition: transform 0.3s, box-shadow 0.3s;
}
.atomi-portfolio .wp-block-post-featured-image a:hover img {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--card);
}
.atomi-item-terms {
	display: none;
}
/* Category filters above a portfolio: chips. */
.atomi-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 2rem;
}
.atomi-filter button {
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--atomi-line-2);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.atomi-filter button:not([aria-pressed="true"]):hover {
	border-color: var(--atomi-ink-3);
	color: var(--wp--preset--color--heading);
}
.atomi-filter button[aria-pressed="true"] {
	border-color: var(--wp--preset--color--heading);
	background: var(--wp--preset--color--heading);
	color: #fff;
}
.atomi-blog .wp-block-query-pagination,
.atomi-portfolio .wp-block-query-pagination {
	justify-content: flex-end;
	margin-top: 1em;
}

/* Pricing tables. */
.atomi-pricing {
	height: 100%;
	overflow: hidden;
	padding-bottom: 2rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 16px;
	background: #fff;
	text-align: center;
}
.atomi-pricing.is-featured {
	border: 2px solid var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--raised);
}
.atomi-pricing-header {
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--subtle);
}
.atomi-pricing-header > * {
	margin: 0;
}
.atomi-pricing > p sup {
	font-size: 0.42em;
	vertical-align: super;
	color: var(--atomi-ink-3);
}
.atomi-pricing > p sub {
	font-size: 0.875rem;
	vertical-align: baseline;
	color: var(--atomi-ink-3);
}
.atomi-pricing > p {
	margin: 0;
	padding: 1.1rem 0 1.9rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.03em;
}
.atomi-pricing > p s {
	font-size: 0.5em;
	margin-left: 10px;
}
.atomi-pricing > ul {
	list-style: none;
	text-align: left;
	padding: 0 2.5rem;
	margin-block: 1.9rem;
}
.atomi-pricing > ul li {
	position: relative;
	padding-left: 14px;
	margin-bottom: 0.9em;
}
.atomi-pricing > ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}
.atomi-pricing > ul s {
	text-decoration: none;
	opacity: 0.5;
}

/* Cards and flip boxes from the Divi add-ons. */
.atomi-card {
	height: 100%;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
}

/* Countdown timers (filled in by site.js). */
.atomi-countdown {
	text-align: center;
	margin-bottom: 30px;
}
.atomi-countdown-title {
	font-size: 30px;
	margin: 0;
}
.atomi-countdown-timer {
	display: flex;
	justify-content: center;
	gap: 0.5em;
	font-size: var(--atomi-count-size, 60px);
	font-weight: 700;
	line-height: 1.2;
}
.atomi-countdown-timer span {
	display: inline-block;
	min-width: 1.6em;
}
.atomi-countdown-timer small {
	display: block;
	font-size: 16px;
	font-weight: 400;
}

/* Tables in post text: full width, ruled rows. */
.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.wp-block-post-content :where(td, th) {
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--rule);
	text-align: left;
}
.wp-block-post-content :where(thead th) {
	background: var(--wp--preset--color--subtle);
}

/* Quotes: a brand bar on the left, upright text. */
.wp-block-quote {
	margin: 20px 0 30px;
	padding-left: 20px;
	border-left: 3px solid var(--wp--preset--color--primary);
}
.wp-block-quote p {
	margin: 0;
}

/* Long words in big headings and long links in post text must not push the page sideways on phones. */
:where(h1, h2, h3),
.wp-block-post-content {
	overflow-wrap: break-word;
}
/* Images and videos pasted into post text shrink to fit, as Divi's base styles had them. */
.wp-block-post-content :where(img, video) {
	max-width: 100%;
	height: auto;
}
/* Divi's reset also took the browser's inset border off embedded frames. */
.wp-block-post-content :where(iframe, embed, object) {
	max-width: 100%;
	border: 0;
}

/* What the old site's custom CSS still applies to. */
@media (max-width: 840px) {
	table.responsive {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}
.atomi-feature {
	padding: 10px;
	border-radius: var(--atomi-radius-sm);
}
.atomi-feature a {
	color: var(--wp--preset--color--contrast) !important;
}
.atomi-feature:hover {
	background-color: var(--wp--preset--color--tint);
	cursor: pointer;
}
.atomi-fixed-toc {
	position: fixed;
}
.atomi-sticky-toc {
	position: sticky;
	top: calc(var(--atomi-admin) + var(--atomi-header-h) + 2rem);
}
img.atomi-styled-image,
.atomi-styled-image > img {
	border-radius: var(--atomi-radius-sm);
	box-shadow: var(--wp--preset--shadow--card);
}
/* A heading split over two headings reads as one: Divi spaced them by its 10px heading padding, not a block gap. */
.wp-block-heading + .wp-block-heading {
	margin-block-start: 10px;
}