/*
 * The theme's patterns (patterns/*.php), from the agreed redesign. A pattern section is a full-width group; what
 * sits in it is a wide group, so text can stay narrower than the row and still start at its left edge.
 * Grids are plain groups with a class (atomi-split, atomi-fgrid, ...), so they stack at the theme's breakpoints.
 */

:root {
	--atomi-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px -14px rgba(16, 24, 40, 0.12);
	--atomi-fs-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--atomi-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e3f4ec'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' stroke='%2312805c' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--atomi-check-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ebf4fd'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' stroke='%230074d6' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Shared parts ---------- */

.atomi-lede {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	text-wrap: balance;
}
.atomi-sub {
	color: var(--wp--preset--color--contrast);
	font-size: var(--atomi-fs-xl);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
}
/* Short facts under the buttons, one per paragraph. The space under them keeps a hero's text a little above the
   picture's centre. */
.wp-block-group.atomi-note {
	gap: 0.4rem 1.25rem;
	margin-block: 1rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
}
.wp-block-group.atomi-note > * {
	margin: 0;
}
/* Big buttons in heads and calls to action. */
.wp-block-buttons.atomi-lg > .wp-block-button > .wp-block-button__link {
	padding: 1rem 1.4rem;
	font-size: 1rem;
	line-height: 1;
}
/* Links that lead on carry an arrow. */
.atomi-more a {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.atomi-more a::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.35em;
	transition: transform 0.15s;
}
.atomi-more a:hover::after {
	transform: translateX(3px);
}
p.atomi-more {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}
p.atomi-more.has-text-align-center {
	justify-content: center;
}

/* Section heading: title and one line, centred or not. Sections are padded 40 px (phones) to 56 px (wide screens),
   the Section preset; a heading sits 32 to 40 px over its content. */
.wp-block-group.atomi-head {
	margin-bottom: clamp(2rem, 1.75rem + 1vw, 2.5rem);
}
.atomi-head > * {
	max-width: 40rem;
}
.atomi-head > .has-text-align-center {
	margin-inline: auto;
}
.atomi-head > p {
	margin-block-start: 1rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	text-wrap: balance;
}

/* Tags in titles (formats in the editor's text toolbar). */
.atomi-tag,
.atomi-tag-enh {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.28rem 0.42rem;
	border-radius: 5px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
	font-size: 0.66rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	vertical-align: 2px;
}
.atomi-tag-enh {
	background: #e8f5ef;
	color: var(--atomi-ok);
}
h2 > :is(.atomi-tag, .atomi-tag-enh) {
	margin-left: 0.5rem;
	padding: 0.35rem 0.5rem;
	border-radius: 6px;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

/* A picture or video in a rounded frame. */
figure.atomi-media {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--atomi-radius);
	background: #fff;
	box-shadow: var(--wp--preset--shadow--raised);
}
.atomi-media :is(img, video) {
	display: block;
	width: 100%;
	height: auto;
}

/* A picture linked to a YouTube video: site.js plays the video in its place. The caption is the play button and lets
   clicks through to the link. */
.wp-block-image.atomi-play figcaption {
	position: absolute;
	left: clamp(0.75rem, 2.5%, 1.25rem);
	bottom: clamp(0.75rem, 2.5%, 1.25rem);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.4rem 1.1rem 0.4rem 0.4rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
	pointer-events: none;
	transition: transform 0.2s;
}
.wp-block-image.atomi-play figcaption::before {
	content: "";
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23fff'/%3E%3C/svg%3E") 58% 50% / 16px no-repeat;
}
.wp-block-image.atomi-play:hover figcaption {
	transform: scale(1.04);
}
.wp-block-image.atomi-play iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}
.wp-block-image.atomi-play.is-playing figcaption {
	display: none;
}

/* Ticked list. */
ul.atomi-ticks {
	display: grid;
	gap: 0.7rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
.atomi-ticks > li {
	position: relative;
	padding-left: 1.75rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.atomi-ticks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--atomi-check-blue) center / contain no-repeat;
}

/* ---------- Page head ---------- */
/* The tint fades out above the bottom edge, so a short head never ends on a hard line. */
.wp-block-group.atomi-ph {
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
	background: linear-gradient(rgba(255, 255, 255, 0) calc(100% - 3rem), #fff), radial-gradient(1100px 380px at 70% -10%, #e8f2fd 0%, rgba(232, 242, 253, 0) 70%);
}
.atomi-ph h1 {
	max-width: 22em;
	font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
}
.atomi-ph h1 + * {
	margin-block-start: 1rem;
}
.atomi-ph .atomi-lede {
	max-width: 42rem;
	margin-bottom: 0;
}
.atomi-ph .has-text-align-center {
	margin-inline: auto;
}
.atomi-ph .wp-block-buttons {
	margin-block-start: 2rem;
}
/* A download or pricing head opens with the product switcher. */
.atomi-ph .atomi-seg + h1 {
	margin-block-start: 2rem;
	font-size: var(--wp--preset--font-size--large);
}

/* ---------- Product hero ---------- */
.wp-block-group.atomi-prod-hero {
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--wp--preset--spacing--section);
	background: linear-gradient(rgba(255, 255, 255, 0) calc(100% - 3rem), #fff), radial-gradient(1100px 420px at 70% -10%, #e8f2fd 0%, rgba(232, 242, 253, 0) 70%);
}
.wp-block-group.atomi-split {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
}
.wp-block-group.atomi-split > * {
	margin-block: 0;
}
.atomi-prod-hero h1 {
	margin-bottom: 0;
}
.atomi-prod-hero .atomi-sub {
	margin-block: 1rem 1.25rem;
}
.atomi-prod-hero .atomi-lede {
	margin-block: 0 2rem;
	font-size: 1rem;
}
.atomi-prod-hero .wp-block-buttons {
	margin-block-start: 0;
}
/* With atomi-flip the picture comes first and takes the wider column. */
.wp-block-group.atomi-split.atomi-flip {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.wp-block-group.atomi-split.atomi-flip > :first-child {
	order: 2;
}

/* ---------- Product bands (home) ---------- */
/* A product on a photo backdrop: atomi-band-ap, atomi-band-up or atomi-band-sl. The ActivePresenter backdrop is cropped
   so its wall corner sits at the exact centre, so the plain band and the mirrored uPresenter band both keep it
   behind the laptop at any width. */
.wp-block-group.atomi-band {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
	background: var(--wp--preset--color--subtle) center / cover no-repeat;
}
.wp-block-group.atomi-band-ap,
.wp-block-group.atomi-band-up::before {
	background-image: url("../images/home-ap-bg.jpg");
}
.wp-block-group.atomi-band-up::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transform: scaleX(-1);
}
.wp-block-group.atomi-band-sl {
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.31) 0%, rgba(210, 233, 186, 0.61) 51%, rgba(255, 255, 255, 0.72) 100%), url("../images/home-sl-bg.jpg");
}
.wp-block-image.atomi-band-ic {
	margin-block: 0 1.5rem;
}
.wp-block-image.atomi-band-ic img {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 13px;
	box-shadow: 0 6px 18px -6px rgba(16, 24, 40, 0.35);
}
.atomi-band :is(h1, h2) {
	margin-block: 0 1rem;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.03em;
	line-height: 1.1;
}
.atomi-band .atomi-sub {
	margin-block: -0.25rem 1rem;
	color: var(--wp--preset--color--heading);
}
.atomi-band .atomi-lede {
	margin-block: 0 2rem;
	color: var(--wp--preset--color--heading);
	font-size: 1rem;
	opacity: 0.82;
}
.atomi-band .wp-block-buttons {
	margin-block: 0;
}
.atomi-band .wp-block-group.atomi-note {
	color: var(--wp--preset--color--heading);
	opacity: 0.7;
}
:is(.atomi-band, .atomi-ph, .atomi-cta-box) .wp-block-button__link[target="_blank"]::after {
	content: "\2197";
	margin-left: 0.4em;
	font-size: 0.85em;
	opacity: 0.6;
}
.atomi-band .wp-block-button.is-style-outline > .wp-block-button__link:not(:hover) {
	border-color: rgba(16, 24, 40, 0.14);
	background-color: rgba(255, 255, 255, 0.88);
}

/* ---------- Feature rows ---------- */
.wp-block-group.atomi-feat {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
}
.wp-block-group.atomi-feat.atomi-flip {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
.wp-block-group.atomi-feat.atomi-flip > :first-child {
	order: 2;
}
.wp-block-group.atomi-feat > * {
	margin-block: 0;
}
.wp-block-group.atomi-feat + .wp-block-group.atomi-feat {
	margin-block-start: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
}
.atomi-feat h2 {
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
}
.atomi-feat h2 + p {
	text-wrap: balance;
}
.atomi-feat p {
	color: var(--wp--preset--color--contrast);
}
.wp-block-group.atomi-feat-media {
	padding: clamp(1rem, 0.5rem + 2vw, 2rem);
	border-radius: calc(var(--atomi-radius) + 6px);
	background: var(--wp--preset--color--subtle);
}
.atomi-feat-media .atomi-media {
	box-shadow: var(--wp--preset--shadow--card);
}
/* Each feature row pattern is a section; rows that follow each other on the page background share the space
   between them. */
.wp-block-group.atomi-feat-sec {
	padding-block: var(--wp--preset--spacing--section);
}
.wp-block-group.atomi-feat-sec:not(.has-background) + .wp-block-group.atomi-feat-sec:not(.has-background) {
	padding-top: 0;
}

/* ---------- Feature cards ---------- */
/* Section head with the title and its line on the left (and room for a link on the right). */
.wp-block-group.atomi-fsec-head {
	margin-bottom: 2rem;
}
.atomi-fsec-head h2 {
	margin-bottom: 0.35rem;
}
.atomi-fsec-head p {
	max-width: 46rem;
	margin-block-start: 0;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}
/* A group inside a feature section: name, short line, edition label. */
.wp-block-group.atomi-fsub {
	align-items: baseline;
	gap: 0.25rem 1rem;
	margin-block: 0 1.25rem;
}
.wp-block-group.atomi-fsub > * {
	margin: 0;
}
.wp-block-group.atomi-fgrid + .wp-block-group.atomi-fsub {
	margin-block-start: 2.75rem;
}
.atomi-fsub h3 {
	font-size: var(--wp--preset--font-size--medium);
}
.atomi-fsub p {
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-group.atomi-fsub > p.atomi-ed {
	align-self: center;
	margin-left: auto;
}
p.atomi-ed {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--atomi-line-2);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.wp-block-group.atomi-fgrid {
	--fg-gap: 1.5rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fg-gap);
}
.wp-block-group.atomi-fgrid.atomi-c4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wp-block-group.atomi-fgrid > * {
	margin: 0;
}
/* Icon, title, and a one-line blurb that may end in an edition note (the text toolbar's Edition note format). A
   New/Enhanced tag sits in the icon row, so titles line up across a row. */
.wp-block-group.atomi-fcard {
	position: relative;
	overflow: hidden;
	padding: 1.35rem 1.5rem 1.5rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	background: #fff;
}
.wp-block-group.atomi-fcard > * {
	margin: 0;
}
.atomi-fcard > .wp-block-image {
	width: 44px;
	margin-bottom: 1.1rem;
}
.atomi-fcard > .wp-block-image img {
	display: block;
	width: 44px;
	height: 44px;
}
.wp-block-group.atomi-fcard > :is(h3, h4) {
	margin-bottom: 0.4rem;
	font-size: 1rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
}
.atomi-fcard > p {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-wrap: balance;
}
.atomi-fcard > :is(h3, h4) > :is(.atomi-tag, .atomi-tag-enh) {
	position: absolute;
	top: 1.35rem;
	right: 1.25rem;
	margin: 0;
}
.atomi-fcard > p .atomi-fcard__ed {
	display: block;
	margin-top: 0.6rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}
/* Above phone width each card is a subgrid of its row, so blurbs line up when a title wraps. Rows get no gap of their
   own: each card carries it as margin and the grid takes the last one back. */
@media (width >= 641px) {
	.wp-block-group.atomi-fgrid {
		row-gap: 0;
		margin-bottom: calc(-1 * var(--fg-gap));
	}
	.wp-block-group.atomi-fgrid > .atomi-fcard {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		align-content: start;
		margin-bottom: var(--fg-gap);
	}
}
/* Five-up is compact; on tablets it drops to two-up in the normal card size. */
@media (width >= 961px) {
	.wp-block-group.atomi-fgrid.atomi-c5 {
		--fg-gap: 1rem;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.atomi-c5 > .wp-block-group.atomi-fcard {
		padding: 1.1rem 1.15rem 1.25rem;
	}
	.atomi-c5 > .atomi-fcard > :is(h3, h4) {
		font-size: var(--wp--preset--font-size--small);
	}
	.atomi-c5 > .atomi-fcard > p {
		font-size: var(--wp--preset--font-size--x-small);
		line-height: 1.5;
	}
	.atomi-c5 > .atomi-fcard > :is(h3, h4) > :is(.atomi-tag, .atomi-tag-enh) {
		top: 1.1rem;
		right: 1.05rem;
	}
}

/* ---------- Jump links ---------- */
.wp-block-group.atomi-jump {
	position: sticky;
	top: calc(var(--atomi-admin) + var(--atomi-header-h));
	z-index: 40;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	background: rgba(255, 255, 255, 0.95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
html:has(.atomi-pb) .wp-block-group.atomi-jump {
	top: calc(var(--atomi-admin) + var(--atomi-header-h) + var(--atomi-bar-h));
}
/* In the editor the bar stays in place, so it never covers the block being edited. */
.is-root-container .wp-block-group.atomi-jump {
	position: relative;
}
html:has(.atomi-jump) {
	scroll-padding-top: calc(var(--atomi-admin) + var(--atomi-header-h) + 80px);
}
html:has(.atomi-pb):has(.atomi-jump) {
	scroll-padding-top: calc(var(--atomi-admin) + var(--atomi-header-h) + var(--atomi-bar-h) + 80px);
}
.wp-block-buttons.atomi-chips {
	flex-wrap: nowrap;
	gap: 0.5rem;
	overflow-x: auto;
	padding-block: 0.7rem;
	scrollbar-width: none;
}
.wp-block-buttons.atomi-chips::-webkit-scrollbar {
	display: none;
}
.atomi-chips > .wp-block-button {
	flex: none;
}
.atomi-chips > .wp-block-button > .wp-block-button__link {
	padding: 0.4rem 0.95rem;
	border: 1px solid var(--atomi-line-2);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
}
.atomi-chips > .wp-block-button > .wp-block-button__link:is(:hover, :focus-visible) {
	border-color: var(--atomi-ink-3);
	background: #fff;
	color: var(--wp--preset--color--heading);
}

/* ---------- Product switcher (pricing and download heads) ---------- */
.wp-block-buttons.atomi-seg {
	flex-wrap: nowrap;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
	padding: 5px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.65);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.atomi-ph .wp-block-buttons.atomi-seg {
	margin-inline: auto;
}
.atomi-seg > .wp-block-button > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.2rem;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
}
.atomi-seg > .wp-block-button > .wp-block-button__link:is(:hover, :focus-visible) {
	background: none;
	color: var(--wp--preset--color--heading);
}
.atomi-seg > .wp-block-button > .wp-block-button__link[aria-current] {
	background: #fff;
	color: var(--wp--preset--color--heading);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}
.atomi-seg > .wp-block-button[class*="atomi-ic-"] > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	background: var(--atomi-icon) center / contain no-repeat;
}
.atomi-seg > .wp-block-button > .wp-block-button__link[target="_blank"]::after {
	content: "\2197";
	margin-left: -0.2em;
	font-size: 0.85em;
	opacity: 0.6;
}

/* ---------- Pricing ---------- */
/* Switcher, heading and plan cards share one tinted stage so the white cards stand out. */
.wp-block-group.atomi-pr-top {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--wp--preset--spacing--section);
	background: radial-gradient(1000px 380px at 50% -60px, #dcebfc 0%, rgba(220, 235, 252, 0) 70%), linear-gradient(180deg, #f0f6fe 0%, #f6f9fe 560px, #fff 980px);
}
.wp-block-group.atomi-pr-head {
	max-width: 56rem;
	margin-inline: auto;
	margin-bottom: clamp(3rem, 2.25rem + 2vw, 4rem);
}
.atomi-pr-head h1 {
	margin-block: 2rem 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}
.atomi-pr-head .atomi-lede {
	max-width: 37rem;
	margin: 0 auto;
}
.atomi-pr-head .wp-block-buttons.atomi-seg {
	margin-inline: auto;
}
ul.atomi-assure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.atomi-assure > li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.atomi-assure > li::before {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--atomi-check) center / contain no-repeat;
}

.wp-block-group.atomi-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: stretch;
}
.wp-block-group.atomi-plans.atomi-c2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 880px;
	margin-inline: auto;
}
/* Two plans: the education row under them is as wide as they are. Two cards across a tablet leave it room for the
   price beside the text, with the button under the text. */
.wp-block-group.atomi-plans.atomi-c2 + .wp-block-group.atomi-edu {
	max-width: 880px;
	margin-inline: auto;
}
@media (641px <= width < 961px) {
	.wp-block-group.atomi-plans.atomi-c2 + .wp-block-group.atomi-edu > .wp-block-group {
		grid-column: 2;
	}
	.wp-block-group.atomi-plans.atomi-c2 + .wp-block-group.atomi-edu > .atomi-price {
		grid-column: 3;
	}
	.wp-block-group.atomi-plans.atomi-c2 + .wp-block-group.atomi-edu > .wp-block-buttons {
		grid-column: 2 / -1;
		justify-self: start;
	}
}
/* One edition (atomi-c1): one card as wide as two, its list beside the price from 641px. */
.wp-block-group.atomi-plans.atomi-c1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 880px;
	margin-inline: auto;
}
.wp-block-group.atomi-plans > * {
	margin: 0;
}
.wp-block-group.atomi-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--atomi-shadow-card);
}
.wp-block-group.atomi-plan > * {
	margin: 0;
}
.wp-block-group.atomi-plan.atomi-best {
	padding: calc(2rem - 1px);
	border: 2px solid var(--wp--preset--color--primary);
	background: linear-gradient(180deg, #f2f8fe 0, #fff 15rem);
	box-shadow: 0 2px 4px rgba(0, 116, 214, 0.06), 0 28px 56px -24px rgba(0, 116, 214, 0.38);
}
.atomi-plan > p.atomi-plan__flag {
	position: absolute;
	top: 0;
	left: 50%;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 6px 14px -6px rgba(0, 116, 214, 0.7);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}
.wp-block-group.atomi-plan__top {
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}
.atomi-plan__top > * {
	margin: 0;
}
.atomi-plan__top img,
.atomi-edu > .wp-block-image img {
	display: block;
	width: 40px;
	height: 40px;
}
.atomi-plan__top h3 {
	font-size: var(--atomi-fs-xl);
}
.atomi-plan > p.atomi-plan__who {
	margin-bottom: 1.5rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-wrap: balance;
}
/* Price: the amount in bold (with a superscript currency sign), then what it buys. */
p.atomi-price {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin-bottom: 0.35rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--small);
}
.atomi-price strong {
	color: var(--wp--preset--color--heading);
	font-size: 3.25rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.04em;
}
.atomi-price sup {
	position: relative;
	top: 0.38em;
	margin-right: 0.08em;
	font-size: 0.42em;
	letter-spacing: 0;
	vertical-align: top;
}
.wp-block-group.atomi-plan > p.atomi-price {
	margin-bottom: 0.35rem;
}
.atomi-plan > p.atomi-plan__fine {
	margin-bottom: 1.5rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	text-wrap: balance;
}
.atomi-plan .wp-block-button {
	width: 100%;
}
.atomi-plan .wp-block-button__link {
	width: 100%;
}
/* What a plan includes: a lead line, then a group with the list, whose items' details in italics show as a small
   second line. A second list with the atomi-try class holds what can only be tried. */
.wp-block-group.atomi-plan > p.atomi-plan__lead {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-wrap: balance;
}
.atomi-best > p.atomi-plan__lead {
	border-top-color: #cfe2f7;
}
.wp-block-group.atomi-plan > .atomi-plan__list {
	margin-top: 0.7rem;
}
.wp-block-group.atomi-plan__list > * {
	margin: 0;
}
.wp-block-group.atomi-plan__list > * + * {
	margin-top: 0.7rem;
}
ul.atomi-flist {
	display: grid;
	gap: 0.7rem;
	align-content: start;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}
.atomi-flist > li {
	position: relative;
	padding-left: 1.8rem;
	color: var(--wp--preset--color--heading);
	text-wrap: balance;
}
.atomi-flist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.14rem;
	width: 1.15rem;
	height: 1.15rem;
	background: var(--atomi-check) center / contain no-repeat;
}
.atomi-best .atomi-flist > li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23dcebfb'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' stroke='%230074d6' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.atomi-flist > li em {
	display: block;
	margin-top: 0.1rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	line-height: 1.45;
}
.atomi-flist.atomi-try > li {
	color: var(--wp--preset--color--contrast);
}
.atomi-flist.atomi-try > li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='none' stroke='%23667085' stroke-width='1.6'/%3E%3Cpath d='M10 6.5v4M10 13v.5' stroke='%23667085' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Side by side, the cards share one row grid (subgrid): top, text, price, fine print, button, lead line and list line
   up across cards whatever wraps. The flag is positioned, so it is not a grid item. */
@media (width >= 961px) {
	.wp-block-group.atomi-plans {
		row-gap: 0;
	}
	.wp-block-group.atomi-plans > .atomi-plan {
		display: grid;
		grid-row: span 7;
		grid-template-rows: subgrid;
	}
}
@media (641px <= width < 961px) {
	.wp-block-group.atomi-plans.atomi-c2 {
		row-gap: 0;
	}
	.wp-block-group.atomi-plans.atomi-c2 > .atomi-plan {
		display: grid;
		grid-row: span 7;
		grid-template-rows: subgrid;
	}
}
@media (width >= 641px) {
	.wp-block-group.atomi-plans.atomi-c1 > .atomi-plan {
		display: grid;
		grid-row: auto;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: repeat(4, auto) 1fr;
		column-gap: 2.5rem;
	}
	.wp-block-group.atomi-plans.atomi-c1 > .atomi-plan > * {
		grid-column: 1;
	}
	.wp-block-group.atomi-plans.atomi-c1 > .atomi-plan > .wp-block-buttons {
		align-self: start;
	}
	/* The lead and the list share the second column from the top, so the list follows the lead line, not the
	   height of the first row; the list draws the rule down the column. */
	.wp-block-group.atomi-plans.atomi-c1 > .atomi-plan > :is(p.atomi-plan__lead, .atomi-plan__list) {
		grid-column: 2;
		grid-row: 1 / -1;
		margin: 0;
		border-top: 0;
	}
	.wp-block-group.atomi-plans.atomi-c1 > .atomi-plan > p.atomi-plan__lead {
		align-self: start;
		padding: 0 0 0 calc(2.5rem + 1px);
		line-height: 1.6;
	}
	.wp-block-group.atomi-plans.atomi-c1 > .atomi-plan > .atomi-plan__list {
		padding: calc(var(--wp--preset--font-size--x-small) * 1.6 + 0.7rem) 0 0 2.5rem;
		border-left: 1px solid var(--wp--preset--color--rule);
	}
	.wp-block-group.atomi-plans.atomi-c1 > .atomi-best > .atomi-plan__list {
		border-left-color: #cfe2f7;
	}
}
/* Education row on the pricing stage: icon, text, price and button, on the same card surface as the plans. */
.wp-block-group.atomi-edu {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	gap: 1rem 1.5rem;
	align-items: center;
	margin-top: 1.5rem;
	padding: 1.5rem 2rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--atomi-shadow-card);
}
.wp-block-group.atomi-edu > * {
	margin: 0;
}
.atomi-edu > .wp-block-image {
	align-self: start;
}
.atomi-edu h3 {
	margin-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--medium);
}
.atomi-edu h3 .atomi-tag-enh {
	margin-left: 0.5rem;
	padding: 0.35rem 0.55rem;
	border-radius: 999px;
	background: #e3f4ec;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0;
	text-transform: none;
	vertical-align: middle;
}
.atomi-edu p {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-wrap: balance;
}
.atomi-edu p.atomi-edu__who {
	margin-top: 0.35rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
}
.atomi-edu p.atomi-price {
	margin: 0;
}
.atomi-edu .atomi-price strong {
	font-size: 2rem;
}
.atomi-edu .atomi-price {
	white-space: nowrap;
}
/* Prices in dong (atomi-vnd) are long numbers: a smaller figure, with the words after it free to wrap under it. Three
   cards side by side are too narrow for both on one line, so there the words go under the figure in every card alike. */
p.atomi-price.atomi-vnd {
	flex-wrap: wrap;
}
.atomi-price.atomi-vnd strong {
	font-size: 2.5rem;
}
.atomi-edu .atomi-price.atomi-vnd strong {
	font-size: 1.75rem;
}
@media (width >= 961px) {
	.atomi-plans:not(.atomi-c2, .atomi-c1) > .atomi-plan > p.atomi-price.atomi-vnd {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}
}
@media (641px <= width < 961px) {
	.atomi-plans:is(.atomi-c2, .atomi-c1) > .atomi-plan > p.atomi-price.atomi-vnd {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}
}
.atomi-plan__fine strong {
	color: var(--wp--preset--color--heading);
	font-weight: 600;
	white-space: nowrap;
}
.wp-block-group.atomi-pr-top p.atomi-more {
	margin-block: 1.5rem 1rem;
}
/* Ways to pay, right under the plans. */
.atomi-pr-top .wp-block-group.atomi-pay {
	margin-top: 2rem;
	padding-top: 0;
	border-top: 0;
}
/* Who buys (atomi-buyer, such as business or personal): a small switcher under the promises. site.js hides the blocks
   with the atomi-for- class of the other choice; the editor shows them all. */
.atomi-pr-head .wp-block-buttons.atomi-buyer {
	margin: 1.75rem auto 0;
}
[class*="atomi-for-"][hidden] {
	display: none;
}

/* Volume pricing: discount steps and a price calculator (site.js builds its form from the plan list). */
.wp-block-group.atomi-volume {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}
.wp-block-group.atomi-volume > * {
	margin: 0;
}
.atomi-volume .atomi-lede {
	margin-block-start: 1rem;
}
/* Steps rise with the discount (--p, set by site.js from each step's percentage). */
.wp-block-group.atomi-tiers {
	--p: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	align-items: end;
	margin-top: 2.25rem;
}
/* Step heights follow each discount, which the page sets from the text; the editor shows these even steps. */
.wp-block-group.atomi-tiers > p {
	--p: 20;
}
.wp-block-group.atomi-tiers > p:nth-child(2) {
	--p: 25;
}
.wp-block-group.atomi-tiers > p:nth-child(3) {
	--p: 30;
}
.wp-block-group.atomi-tiers > p:nth-child(4) {
	--p: 35;
}
.wp-block-group.atomi-tiers > p:nth-child(5) {
	--p: 40;
}
.wp-block-group.atomi-tiers > p:nth-child(n + 6) {
	--p: 45;
}
.wp-block-group.atomi-tiers > p {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: calc(4.6rem + var(--p) * 2.2px);
	margin: 0;
	padding: 0.9rem 0.25rem;
	border-radius: 10px 10px 4px 4px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--p) * 0.3%), #fff);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--p) * 0.4%), var(--wp--preset--color--rule));
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	transition: background-color 0.15s, box-shadow 0.15s;
}
.atomi-tiers > p strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.atomi-tiers > p[role="button"] {
	cursor: pointer;
}
.atomi-tiers > p[role="button"]:hover {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary);
}
.atomi-tiers > p.is-on {
	background: var(--wp--preset--color--primary);
	box-shadow: 0 10px 20px -10px rgba(0, 116, 214, 0.7);
}
.atomi-tiers > p.is-on,
.atomi-tiers > p.is-on strong {
	color: #fff;
}
.wp-block-group.atomi-tiers-cap {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.6rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
}
.wp-block-group.atomi-tiers-cap > * {
	margin: 0;
}
.atomi-volume p.atomi-volume__fine {
	margin-top: 1.5rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
}
.wp-block-group.atomi-calc {
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	background: #fff;
	box-shadow: var(--wp--preset--shadow--card);
}
.wp-block-group.atomi-calc > * {
	margin: 0;
}
.wp-block-group.atomi-calc > h3 {
	margin-bottom: 1.25rem;
}
.atomi-calc ul {
	padding-left: 1.2em;
}
.atomi-calc p.atomi-calc__fine {
	margin-top: 0.75rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: center;
	text-wrap: balance;
}
.wp-block-group.atomi-calc > .atomi-calc__field {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}
.atomi-calc__field > :first-child {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}
/* Buyer and edition pickers: one bordered box per choice, as tall as the quantity field, the row as wide as the card;
   the chosen box is tinted and ringed in the brand blue, like the small switchers (atomi-seg-sm). */
.atomi-calc__seg {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 0.5rem;
}
.atomi-calc__seg button {
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--atomi-line-2);
	border-radius: var(--atomi-radius-sm);
	background: #fff;
	color: var(--wp--preset--color--heading);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}
.atomi-calc__seg button:not([aria-pressed="true"]):hover {
	border-color: var(--atomi-ink-3);
}
.atomi-calc__seg button[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary);
}
.atomi-calc__qty {
	display: inline-flex;
	width: max-content;
	overflow: hidden;
	border: 1px solid var(--atomi-line-2);
	border-radius: var(--atomi-radius-sm);
}
.atomi-calc__qty button {
	width: 44px;
	height: 44px;
	border: 0;
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--heading);
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}
.atomi-calc__qty button:hover {
	background: var(--atomi-soft-2);
}
.atomi-calc__qty input {
	width: 72px;
	border: 0;
	border-inline: 1px solid var(--atomi-line-2);
	border-radius: 0;
	color: var(--wp--preset--color--heading);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.atomi-calc__qty input::-webkit-inner-spin-button,
.atomi-calc__qty input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}
.wp-block-group.atomi-calc > .atomi-calc__sum {
	display: grid;
	gap: 0.45rem;
	margin: 0.25rem 0 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}
.atomi-calc__sum > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
/* A figure too long for its row drops under its label, on the right; a struck-out price can wrap above the new one. */
.atomi-calc__sum > div {
	flex-wrap: wrap;
}
.atomi-calc__sum > div > :first-child {
	flex: none;
}
.atomi-calc__sum > div > :last-child {
	flex: 1 1 0;
	text-align: right;
}
.atomi-calc__sum :is([data-o="unit"] > *, [data-o="tier"], [data-o="tot"], [data-o="save"]) {
	white-space: nowrap;
}
.atomi-calc__sum s {
	color: var(--atomi-ink-3);
}
.atomi-calc__tot {
	color: var(--wp--preset--color--heading);
	font-size: var(--atomi-fs-xl);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.atomi-calc__save {
	color: var(--atomi-ok);
	font-weight: 600;
}
.atomi-calc .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

/* ---------- Call to action ---------- */
.wp-block-group.atomi-cta-box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4.5rem);
	border-radius: calc(var(--atomi-radius) + 6px);
	background: var(--wp--preset--color--footer);
	color: #c6cfdc;
	text-align: center;
}
.wp-block-group.atomi-cta-box::before {
	content: "";
	position: absolute;
	inset: auto -10% -70% -10%;
	z-index: -1;
	height: 120%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(0, 116, 214, 0.5), transparent 70%);
}
.wp-block-group.atomi-cta-box > * {
	margin-block: 0;
}
.wp-block-group.atomi-cta-box > h2 {
	margin-bottom: 0.75rem;
	color: #fff;
}
.atomi-cta-box p {
	max-width: 34rem;
	margin-inline: auto;
	text-wrap: balance;
}
.atomi-cta-box .wp-block-buttons {
	justify-content: center;
	margin-top: 2rem;
}
.atomi-cta-box .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.3);
	background: transparent;
	color: #fff;
}
.atomi-cta-box .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	border-color: #fff;
	background: transparent;
	color: #fff;
}

/* ---------- FAQ ---------- */
.wp-block-group.atomi-faq {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}
.wp-block-group.atomi-faq > * {
	margin: 0;
}
.atomi-faq > :first-child > p {
	margin-bottom: 1rem;
	color: var(--wp--preset--color--contrast);
}
.atomi-faq .wp-block-details > summary {
	font-size: 1rem;
}

/* ---------- Download ---------- */
.wp-block-group.atomi-dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	max-width: 880px;
	margin-inline: auto;
}
.wp-block-group.atomi-dl > * {
	margin: 0;
}
.wp-block-group.atomi-dl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 2rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	background: #fff;
}
.wp-block-group.atomi-dl-card > * {
	margin: 0;
}
/* site.js marks the card for the visitor's system (atomi-os-win, atomi-os-mac) and puts it first. */
.wp-block-group.atomi-dl-card.is-rec {
	order: -1;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary), var(--wp--preset--shadow--card);
}
.atomi-dl-card > p.atomi-dl-card__flag {
	position: absolute;
	top: 2rem;
	right: 2rem;
	display: none;
	padding: 0.45rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1;
}
.atomi-dl-card.is-rec > p.atomi-dl-card__flag {
	display: block;
}
.atomi-dl-card > .wp-block-image {
	margin-bottom: 1.25rem;
}
.atomi-dl-card > .wp-block-image img {
	display: block;
	width: 44px;
	height: 44px;
}
.wp-block-group.atomi-dl-card > h2 {
	margin-bottom: 0.25rem;
	font-size: var(--atomi-fs-xl);
}
.atomi-dl-card > p {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.atomi-dl-card > p.atomi-dl-card__rel {
	margin: 0.2rem 0 1.5rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
}
.atomi-dl-card > .wp-block-buttons {
	align-self: stretch;
	margin-top: auto;
}
.atomi-dl-card .wp-block-button,
.atomi-dl-card .wp-block-button__link {
	width: 100%;
}
.wp-block-group.atomi-dl ~ p.atomi-more {
	margin-top: 2rem;
}
.wp-block-group.atomi-dl ~ p.atomi-more a::after {
	content: none;
}
/* Previous version: a closed box with a table. */
.wp-block-details.atomi-older {
	max-width: 880px;
	margin: 2.5rem auto 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	background: #fff;
}
.wp-block-details.atomi-older > summary {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	text-wrap: balance;
}
.wp-block-details.atomi-older > summary::after {
	content: "+";
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	color: var(--atomi-ink-3);
	font-size: 1.2em;
	line-height: 1;
	transform: none;
}
.wp-block-details.atomi-older[open] > summary::after {
	content: "\2212";
	margin: 0;
	transform: none;
}
.wp-block-details.atomi-older > :not(summary) {
	margin: 0;
	padding: 0 1.5rem 1.25rem;
}
.atomi-older table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}
.atomi-older :is(th, td) {
	padding: 0.75rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	text-align: left;
}
.atomi-older tbody tr:last-child td {
	border-bottom: 0;
}
.atomi-older td:last-child {
	text-align: right;
}
.atomi-older td a {
	font-weight: 600;
	white-space: nowrap;
}
/* Several previous versions (atomi-versions): a row per version, its name then its release date, then a row per
   installer with the systems it runs on. The date drops under the name when they no longer fit on one line. */
.atomi-versions tbody th {
	padding: 1.25rem 1rem 0.4rem;
	color: var(--wp--preset--color--heading);
	font-weight: 600;
}
.atomi-versions tbody tr:first-child th {
	padding-top: 0.5rem;
}
.atomi-versions th span {
	color: var(--atomi-ink-3);
	font-weight: 500;
	white-space: nowrap;
}
.atomi-versions th span::before {
	content: "· ";
}

/* ---------- Info cards ---------- */
/* A label, a title and a line, with the link held at the card's foot so links line up across a row. */
.wp-block-group.atomi-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}
.wp-block-group.atomi-cards > * {
	margin: 0;
}
.wp-block-group.atomi-icard {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	background: #fff;
}
.wp-block-group.atomi-icard > * {
	margin: 0;
}
.atomi-icard > p {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
/* Leading of 1.3 so a kicker that wraps (Vietnamese on phones) keeps its marks clear; the negative margins put a
   one-line kicker exactly where leading 1 would. */
.wp-block-group.atomi-icard > p.atomi-kicker {
	margin-block: -0.15em calc(0.75rem - 0.15em);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.wp-block-group.atomi-icard > h3 {
	margin-bottom: 0.35rem;
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.wp-block-group.atomi-icard > p.atomi-more {
	margin-top: auto;
	padding-top: 1rem;
	line-height: 1.2;
}
/* Two cards in a row (atomi-c2 on the cards group); below 961px they stack like the others. */
@media (width >= 961px) {
	.wp-block-group.atomi-cards.atomi-c2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* Cards that carry a small table (prices, contacts) between the line and the link: a little roomier, and above tablet
   width they share one row grid so tables and links line up across the row. */
.wp-block-group.atomi-icard:has(> .wp-block-table) {
	padding: 1.75rem;
}
.wp-block-group.atomi-icard:has(> .wp-block-table) > h3 {
	font-size: var(--wp--preset--font-size--medium);
}
.atomi-icard > .wp-block-table {
	margin-top: 1.25rem;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius-sm);
	background: #fff;
}
.atomi-icard > .wp-block-table table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}
.atomi-icard > .wp-block-table :is(th, td) {
	padding: 0.75rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	text-align: left;
}
.atomi-icard > .wp-block-table tr:last-child td {
	border-bottom: 0;
}
.atomi-icard > .wp-block-table:not(.atomi-stack) td:last-child:not(:first-child) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
/* Contacts: the label above its value, so a long address never runs out of the card. */
.atomi-icard > .wp-block-table.atomi-stack tr {
	display: grid;
	gap: 0.1rem;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.atomi-icard > .wp-block-table.atomi-stack tr:last-child {
	border-bottom: 0;
}
.atomi-icard > .wp-block-table.atomi-stack td {
	padding: 0;
	border: 0;
	text-align: left;
}
.atomi-icard > .wp-block-table.atomi-stack td:first-child {
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
}
.atomi-icard > .wp-block-table.atomi-stack td:last-child {
	color: var(--wp--preset--color--heading);
	font-weight: 600;
	overflow-wrap: anywhere;
}
.wp-block-group.atomi-icard:has(> .wp-block-table) > p.atomi-more {
	padding-top: 1.25rem;
}
@media (width >= 961px) {
	.wp-block-group.atomi-cards:has(> .atomi-icard > .wp-block-table) {
		row-gap: 0;
	}
	.wp-block-group.atomi-cards > .atomi-icard:has(> .wp-block-table) {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		align-content: start;
	}
	.atomi-cards > .atomi-icard > .wp-block-table {
		align-self: start;
	}
}

/* ---------- Comparison table ---------- */
/*
 * A table block with the atomi-cmp class: the feature column, then one column per edition; the last is the
 * recommended one. Head cells hold the edition, its price in italics and a link drawn as a small button. A row whose
 * one cell spans the table is a group heading. In feature cells the italic part is a note under the name. Marks are
 * text formats from the editor's toolbar (Mark: Included, Not included, Trial).
 * overflow: clip rounds the corners without making a scroll box, so the head row can stick under the site header.
 */
.wp-block-table.atomi-cmp {
	overflow: clip;
	margin: 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	background: #fff;
	box-shadow: var(--atomi-shadow-card);
}
.wp-block-table.atomi-cmp table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-table.atomi-cmp thead {
	border-bottom: 0;
}
/* A feature name keeps its words whole on the narrowest phones; a word a pixel too long runs into the padding instead
   of leaving a lone letter on its own line. */
.wp-block-table.atomi-cmp :is(th, td) {
	padding: 0.85rem 1.1rem;
	border: 0;
	overflow-wrap: normal;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	text-align: left;
	vertical-align: middle;
}
.wp-block-table.atomi-cmp tbody tr:last-child td {
	border-bottom: 0;
}
.wp-block-table.atomi-cmp thead th {
	position: sticky;
	top: calc(var(--atomi-admin) + var(--atomi-header-h));
	z-index: 2;
	padding-block: 1.1rem;
	background: #fff;
	color: var(--wp--preset--color--heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	vertical-align: top;
}
html:has(.atomi-pb) .wp-block-table.atomi-cmp :is(thead, thead th) {
	top: calc(var(--atomi-admin) + var(--atomi-header-h) + var(--atomi-bar-h));
}
.wp-block-table.atomi-cmp thead th:first-child {
	vertical-align: middle;
}
.wp-block-table.atomi-cmp :is(th, td):not(:first-child) {
	width: 17%;
	text-align: center;
}
.wp-block-table.atomi-cmp :is(th, td):last-child:not(:first-child) {
	background: #f6faff;
}
.wp-block-table.atomi-cmp thead th:last-child:not(:first-child) {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
}
.atomi-cmp thead th em {
	display: block;
	margin-top: 0.25rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}
.atomi-cmp thead th:last-child em {
	color: var(--wp--preset--color--primary);
	opacity: 0.8;
}
.atomi-cmp thead th a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 7.5rem;
	height: 36px;
	margin-top: 0.75rem;
	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: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, border-color 0.15s;
}
.atomi-cmp thead th a:is(:hover, :focus-visible) {
	border-color: var(--atomi-ink-3);
}
.atomi-cmp thead th:last-child a {
	border-color: transparent;
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.atomi-cmp thead th:last-child a:is(:hover, :focus-visible) {
	border-color: transparent;
	background: var(--wp--preset--color--accent);
}
.wp-block-table.atomi-cmp td[colspan] {
	padding-block: 0.7rem;
	background: var(--wp--preset--color--subtle);
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.07em;
	text-align: left;
	text-transform: uppercase;
}
.atomi-cmp td:first-child {
	color: var(--wp--preset--color--heading);
	font-weight: 500;
}
.atomi-cmp td em {
	display: block;
	max-width: 34rem;
	margin-top: 0.15rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	font-weight: 400;
	line-height: 1.45;
	text-wrap: balance;
}
/* Marks: a tick, a dash, or a dashed Trial pill. The tick and the dash keep their word for screen readers. */
.atomi-yes,
.atomi-no {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	overflow: hidden;
	background: center / contain no-repeat;
	text-indent: 1.5rem;
	white-space: nowrap;
	vertical-align: middle;
}
.atomi-yes {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' stroke='%2312805c' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.atomi-no {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 10h7' stroke='%23b4bdc9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.atomi-trial {
	display: inline-block;
	padding: 0.3rem 0.5rem;
	border: 1px dashed var(--atomi-line-2);
	border-radius: 999px;
	color: var(--atomi-ink-3);
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	vertical-align: middle;
}
/* What the marks mean, one item each, under the table. */
ul.atomi-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
}
.atomi-legend > li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.atomi-fsec-head p.atomi-more {
	margin: 0;
}

/* ---------- What every license includes ---------- */
/* Five promises, each an icon, a title and a line, then the ways to pay as chips on a rule. */
.wp-block-group.atomi-incl {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2rem 1.5rem;
}
.wp-block-group.atomi-incl > *,
.wp-block-group.atomi-incl > .wp-block-group > * {
	margin: 0;
}
.wp-block-group.atomi-incl > .wp-block-group > .wp-block-image {
	margin-bottom: 1rem;
}
.atomi-incl .wp-block-image img {
	display: block;
	width: 40px;
	height: 40px;
}
.wp-block-group.atomi-incl > .wp-block-group > h3 {
	margin-bottom: 0.35rem;
	font-size: 1rem;
}
.atomi-incl p {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.atomi-incl p a {
	white-space: nowrap;
}
.wp-block-group.atomi-pay {
	gap: 0.75rem 1.25rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-group.atomi-pay > * {
	margin: 0;
}
.atomi-pay strong {
	color: var(--wp--preset--color--heading);
}
ul.atomi-pay__ways {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}
.atomi-pay__ways > li {
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.6;
}

/* ---------- Link columns (home: learn, share and get support) ---------- */
/* Centred items of a picture, a title, a line and a link; the whole item answers to the link, which sits on one
   line across the row however long the text above it runs. */
.wp-block-group.atomi-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem 1.5rem;
}
.wp-block-group.atomi-links > .wp-block-group {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	text-align: center;
}
.atomi-links .wp-block-image {
	margin-block: 0 1.25rem;
}
.atomi-links .wp-block-image img {
	display: block;
	width: auto;
	height: 96px;
}
.atomi-links .wp-block-heading {
	margin-block: 0 0.4rem;
	transition: color 0.15s;
}
.atomi-links p:not(.atomi-more) {
	margin-block: 0 0.75rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.atomi-links p.atomi-more {
	margin-block: auto 0;
}
.atomi-links .atomi-more a {
	color: var(--wp--preset--color--heading);
	line-height: 1.2;
}
.atomi-links .atomi-more a::before {
	content: "";
	position: absolute;
	inset: 0;
}
.atomi-links > .wp-block-group:hover .wp-block-heading {
	color: var(--wp--preset--color--brand-text);
}
.atomi-links > .wp-block-group:hover .atomi-more a::after {
	transform: translateX(3px);
}
.atomi-more a[target="_blank"]::after {
	content: "\2197";
	margin-left: 0.3em;
	font-size: 0.85em;
	opacity: 0.6;
}

/* ---------- Latest posts (home) ---------- */
/* Title and topic tabs share a row. In a group with atomi-tabs, the tabs (links to #anchors of the groups that hold
   the queries) show one query at a time (site.js); without the script every query shows. */
.wp-block-group.atomi-head-row {
	align-items: last baseline;
	gap: 1rem;
	margin-bottom: 2rem;
}
.atomi-head-row > .wp-block-heading {
	margin: 0;
}
/* A title with its line under it (compare editions). */
.atomi-head-row > .wp-block-group > * {
	margin-block: 0;
}
.atomi-head-row > .wp-block-group > p {
	max-width: 46rem;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}
.atomi-tabs [hidden] {
	display: none !important;
}
/* Small switchers (atomi-seg-sm) choose in place, such as who buys or a blog topic: one bordered box per choice, all
   as wide as the widest, the chosen one tinted and ringed in the brand blue, like the calculator's pickers. Product
   switchers, which go to other pages, keep their track. */
.wp-block-buttons.atomi-seg.atomi-seg-sm {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	align-items: stretch;
	gap: 0.5rem;
	overflow: visible;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.atomi-seg-sm > .wp-block-button > .wp-block-button__link {
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 44px;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--atomi-line-2);
	border-radius: var(--atomi-radius-sm);
	background: #fff;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25;
	text-align: center;
	transition: border-color 0.15s, background-color 0.15s;
}
.atomi-seg-sm > .wp-block-button > .wp-block-button__link:not([aria-current]):is(:hover, :focus-visible) {
	border-color: var(--atomi-ink-3);
	background: #fff;
}
.atomi-seg-sm > .wp-block-button > .wp-block-button__link[aria-current] {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary);
}
/* Cards: picture, category and date, title; the whole card answers to the title's link. */
.wp-block-query.atomi-posts .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.atomi-posts .wp-block-post {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
}
.atomi-posts .wp-block-post > * {
	margin: 0;
}
.atomi-posts .wp-block-post-featured-image {
	position: relative;
	overflow: hidden;
	border-radius: var(--atomi-radius-sm);
	background: var(--atomi-soft-2);
}
.atomi-posts .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
	pointer-events: none;
}
.atomi-posts .wp-block-post-featured-image img {
	transition: transform 0.35s;
}
.atomi-posts .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}
.wp-block-group.atomi-posts__meta {
	gap: 0.5rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
}
.wp-block-group.atomi-posts__meta > * {
	margin: 0;
	color: inherit;
	font-size: inherit;
}
.atomi-posts .wp-block-post-terms a {
	position: relative;
	z-index: 1;
	color: var(--wp--preset--color--brand-text);
	font-weight: 600;
	text-decoration: none;
}
.atomi-posts .wp-block-post-terms a:hover,
.atomi-lead .wp-block-post-terms a:hover,
.atomi-results .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--accent);
}
.atomi-posts .wp-block-post-title {
	font-size: 1rem;
	line-height: 1.4;
}
.atomi-posts .wp-block-post-title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
	transition: color 0.15s;
}
.atomi-posts .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.atomi-posts .wp-block-post:hover .wp-block-post-title a {
	color: var(--wp--preset--color--brand-text);
}
.wp-block-group.atomi-latest > .wp-block-buttons {
	margin-block-start: 3rem;
}

/* ---------- Trust strip (product overviews) ---------- */
/* Customer logos, greyed so no brand outshines the page, beside big numbers: one paragraph per number, the figure
   in bold. */
.wp-block-group.atomi-trust {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2rem 4rem;
	align-items: center;
}
.wp-block-group.atomi-trust > *,
.atomi-trust > .wp-block-group > * {
	margin: 0;
}
.atomi-trust p.atomi-trust__label {
	margin-bottom: 1.25rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-group.atomi-logos {
	gap: 1.5rem 2.75rem;
}
.atomi-logos img {
	display: block;
	width: auto;
	height: 28px;
	filter: grayscale(1);
	opacity: 0.55;
	mix-blend-mode: multiply;
}
.wp-block-group.atomi-stats {
	gap: 3rem;
}
.atomi-stats > p {
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--small);
}
.atomi-stats strong {
	display: block;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

/* ---------- Use cases (product overviews) ---------- */
/* Centred pictures with a title that links to its feature row further down; the whole item answers to the link. */
.wp-block-group.atomi-uses {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem 1.5rem;
}
.wp-block-group.atomi-uses > .wp-block-group {
	position: relative;
	margin: 0;
	text-align: center;
}
.atomi-uses > .wp-block-group > * {
	margin: 0;
}
.atomi-uses > .wp-block-group > .wp-block-image {
	margin-bottom: 1rem;
}
.atomi-uses > .wp-block-group > .wp-block-heading {
	margin-bottom: 0.4em;
}
.atomi-uses .wp-block-image img {
	display: block;
	width: auto;
	height: 88px;
	margin-inline: auto;
}
.atomi-uses .wp-block-heading a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
	transition: color 0.15s;
}
.atomi-uses .wp-block-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.atomi-uses > .wp-block-group:hover .wp-block-heading a {
	color: var(--wp--preset--color--brand-text);
}

/* Feature rows in one section end with a link to all features. */
.wp-block-group.atomi-feat-sec > .wp-block-buttons {
	margin-block-start: 4rem;
}

/* A picture on a white ground that takes the section's colour. */
.wp-block-image.atomi-blend img {
	width: 100%;
	mix-blend-mode: multiply;
}

/* ---------- Demos ---------- */
/* Pictures with a title, four across: a project query, or a group of picked items (a picture and a linked title).
   The whole item answers to the title's link. */
.wp-block-group.atomi-demos,
.wp-block-query.atomi-demos .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wp-block-group.atomi-demos > .wp-block-group,
.atomi-demos .wp-block-post {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
}
.atomi-demos > .wp-block-group > *,
.atomi-demos .wp-block-post > * {
	margin: 0;
}
.atomi-demos :is(.wp-block-image, .wp-block-post-featured-image) {
	position: relative;
	overflow: hidden;
	border-radius: var(--atomi-radius-sm);
	background: var(--atomi-soft-2);
}
.atomi-demos :is(.wp-block-image, .wp-block-post-featured-image)::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
	pointer-events: none;
}
.atomi-demos :is(.wp-block-image, .wp-block-post-featured-image) img {
	display: block;
	width: 100%;
	transition: transform 0.35s;
}
.atomi-demos > .wp-block-group:hover img,
.atomi-demos .wp-block-post:hover img {
	transform: scale(1.03);
}
.atomi-demos :is(h3, .wp-block-post-title) {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}
.atomi-demos :is(h3, .wp-block-post-title) a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
	transition: color 0.15s;
}
.atomi-demos :is(h3, .wp-block-post-title) a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.atomi-demos > .wp-block-group:hover h3 a,
.atomi-demos .wp-block-post:hover .wp-block-post-title a {
	color: var(--wp--preset--color--brand-text);
}
.atomi-head-row > p.atomi-more {
	margin: 0;
}

/* ---------- Testimonials ---------- */
/* Quote cards three across. Side by side they share rows, so the names line up however long each quote runs; the
   stars are drawn by the stylesheet. In the citation the name is in bold, the company or role after it. */
.wp-block-group.atomi-quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}
.wp-block-quote.atomi-quote {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	row-gap: 1.25rem;
	margin: 0;
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	background: #fff;
}
.wp-block-quote.atomi-quote::before {
	content: "\2605\2605\2605\2605\2605" / "";
	color: #f5a524;
	font-size: 0.95rem;
	letter-spacing: 2px;
}
.atomi-quote > p {
	color: var(--wp--preset--color--heading);
	font-size: 1rem;
	line-height: 1.65;
	text-wrap: pretty;
}
.wp-block-quote.atomi-quote > cite {
	margin: 0;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
}
.atomi-quote > cite strong {
	display: block;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.wp-block-group.atomi-badges {
	gap: 1.5rem;
	margin-block-start: 3rem;
}
.atomi-badges > .wp-block-image {
	margin: 0;
}
.atomi-badges img {
	display: block;
	width: auto;
	height: 72px;
}

/* ---------- Screenshot tabs ---------- */
/* Tabs down the left: links to the anchors of the pictures beside them, which site.js shows one at a time. On
   narrower screens the tabs make one row above the picture that scrolls sideways. */
.wp-block-group.atomi-shots {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}
.wp-block-group.atomi-shots > *,
.atomi-shots .atomi-feat-media > * {
	margin: 0;
}
.wp-block-buttons.atomi-vtabs {
	display: grid;
	gap: 0.25rem;
}
.atomi-vtabs > .wp-block-button > .wp-block-button__link {
	display: block;
	width: 100%;
	padding: 0.7rem 1rem;
	border: 0;
	border-radius: var(--atomi-radius-sm);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.6;
	text-align: left;
}
.atomi-vtabs > .wp-block-button > .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--atomi-soft-2);
	color: var(--wp--preset--color--heading);
}
.atomi-vtabs > .wp-block-button > .wp-block-button__link[aria-current] {
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
	color: var(--wp--preset--color--heading);
	font-weight: 600;
}

/* ---------- Platforms ---------- */
ul.atomi-formats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.atomi-formats > li {
	margin: 0;
	padding: 0.55rem 1rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* Short plan cards (product overviews): name, line, price and button, the buttons level across the row. */
.wp-block-group.atomi-plan > h3 {
	margin-bottom: 0.35rem;
	font-size: var(--atomi-fs-xl);
}
.wp-block-group.atomi-plan:not(:has(.atomi-plan__list)) > p.atomi-price {
	margin-top: auto;
}
.wp-block-group.atomi-plan > p.atomi-price + .wp-block-buttons {
	margin-top: 1.15rem;
}
.wp-block-group.atomi-plans + p.atomi-more {
	margin-block: 1.5rem 1rem;
}

/* ---------- Help: search, resources and contact ---------- */
/* Help search in a centred page head: the field and its button in one raised box. Popular topics follow as chips that
   wrap. */
.atomi-ph .wp-block-search.atomi-find {
	max-width: 36rem;
	margin: 2rem auto 0;
}
.atomi-find .wp-block-search__inside-wrapper {
	box-sizing: border-box;
	padding: 5px;
	border: 1px solid var(--atomi-line-2);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--wp--preset--shadow--card);
}
.atomi-find .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--tint);
}
.atomi-find .wp-block-search__input {
	min-width: 0;
	padding: 0 0.9rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--heading);
	font-size: 1rem;
	text-overflow: ellipsis;
}
.atomi-find .wp-block-search__input:focus {
	outline: none;
}
.atomi-find .wp-block-search__button {
	margin-left: 0;
	white-space: nowrap;
}
.atomi-ph .wp-block-buttons.atomi-chips {
	flex-wrap: wrap;
	margin-block-start: 2rem;
	padding-block: 0;
	overflow: visible;
}
.atomi-ph .atomi-chips > .wp-block-button > .wp-block-button__link {
	padding: 0.5rem 0.95rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
/* Boxes: a bordered panel, two in a row (atomi-boxes), such as a product's help resources. */
.wp-block-group.atomi-boxes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}
.wp-block-group.atomi-boxes > * {
	margin: 0;
}
.wp-block-group.atomi-box {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	background: #fff;
}
.wp-block-group.atomi-box > * {
	margin: 0;
}
.wp-block-group.atomi-box > :is(h2, h3) {
	margin-bottom: 0.35rem;
	font-size: 1rem;
}
/* Three boxes in a row with atomi-c3. */
@media (width >= 961px) {
	.wp-block-group.atomi-boxes.atomi-c3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.atomi-box > p {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-group.atomi-box > p.atomi-more {
	margin-top: auto;
	padding-top: 1.25rem;
}
/* A product's head in a box: its icon beside its name. */
.wp-block-group.atomi-prod-h {
	gap: 0.75rem;
}
.atomi-prod-h .wp-block-image {
	flex: none;
	margin: 0;
}
.atomi-prod-h .wp-block-image img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 10px;
}
.atomi-prod-h :is(h2, h3) {
	margin: 0;
	font-size: var(--atomi-fs-xl);
}
/* Links that lead on, one per row with a rule between: a title, then in italics a small line under it. */
ul.atomi-go,
.wp-block-group.atomi-box > ul.atomi-go {
	margin: 1.25rem 0 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	list-style: none;
}
.atomi-go > li > a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	text-decoration: none;
}
.atomi-go > li:last-child > a {
	padding-bottom: 0;
	border-bottom: 0;
}
.atomi-go a em {
	grid-column: 1;
	margin-top: 0.15rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
}
.atomi-go a::after {
	content: "\2192";
	grid-column: 2;
	grid-row: 1 / span 2;
	color: var(--atomi-ink-3);
	transition: transform 0.15s;
}
.atomi-go a[target="_blank"]::after {
	content: "\2197";
}
.atomi-go a:hover,
.atomi-go a:hover::after {
	color: var(--wp--preset--color--brand-text);
}
.atomi-go a:hover::after {
	transform: translateX(3px);
}
/* Four link cards in a row (atomi-c4 on the cards group), two on tablets. */
@media (width >= 961px) {
	.wp-block-group.atomi-cards.atomi-c4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
/* Plain links in a row under a section's content (atomi-quiet on the paragraph): no arrows. */
p.atomi-more.atomi-quiet {
	gap: 0.5rem 1.75rem;
	margin-top: 3rem;
}
p.atomi-more.atomi-quiet a {
	font-weight: 400;
	text-decoration: underline 1px;
	text-underline-offset: 3px;
}
p.atomi-more.atomi-quiet a::after {
	content: none;
}
/* Contact: the form and the contact boxes beside it (atomi-form on a split). Labels and values in a box are a table
   with atomi-pairs, each label small above its value. */
.wp-block-group.atomi-split.atomi-form {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}
.wp-block-group.atomi-info {
	display: grid;
	gap: 1.25rem;
}
.wp-block-group.atomi-info > * {
	margin: 0;
}
.atomi-pairs :is(table, tbody, tr, td) {
	display: block;
}
.atomi-pairs tbody {
	display: grid;
	gap: 0.9rem;
}
.atomi-pairs :is(th, td) {
	padding: 0;
	border: 0;
	text-align: left;
}
.atomi-pairs td:first-child {
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}
.atomi-pairs td + td {
	margin-top: 0.1rem;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}
/* The contact form (Contact Form 7). Its template wraps each field in a div and a paragraph; those give way, so the
   fields line up in one grid with the name and email side by side. The spam check comes after the message, then the
   consent and the button. */
.wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem;
}
.wpcf7-form > *,
.wpcf7-form-control-wrap {
	grid-column: 1 / -1;
	margin: 0;
}
.wpcf7-form .form-style-6,
.wpcf7-form .form-style-6 > div,
.wpcf7-form .form-style-6 > div > p {
	display: contents;
}
.wpcf7-form-control-wrap:is([data-name="contact-name"], [data-name="contact-email"]) {
	grid-column: auto;
}
.wpcf7-form .wpcf7-turnstile {
	order: 1;
}
.wpcf7-form .form-style-6 > p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 0;
	grid-column: 1 / -1;
	order: 2;
	margin: 0;
}
.wpcf7-form .form-style-6 > p > .wpcf7-form-control-wrap {
	flex-basis: 100%;
}
.wpcf7-form br {
	display: none;
}
.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea) {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--atomi-line-2);
	border-radius: var(--atomi-radius-sm);
	background: #fff;
	color: var(--wp--preset--color--heading);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}
.wpcf7-form textarea {
	display: block;
	height: 9rem;
	resize: vertical;
}
.wpcf7-form :is(input, textarea)::placeholder {
	color: var(--atomi-ink-3);
	opacity: 1;
}
.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--tint);
}
.wpcf7-form .wpcf7-list-item {
	margin: 0;
}
.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.wpcf7-form .wpcf7-acceptance input {
	margin: 0.3rem 0 0;
}
.wpcf7-form .wpcf7-submit {
	padding: 0.75rem 1.15rem;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.wpcf7-form .wpcf7-submit:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--accent);
}
.wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: default;
}
.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
}
.wpcf7 form .wpcf7-response-output {
	order: 3;
	margin: 0;
	padding: 0.85rem 1rem;
	border-width: 1px;
	border-radius: var(--atomi-radius-sm);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Programs: steps, tabs, eligibility and price (education, affiliates) ---------- */
/* A small label over a page head's title. */
.atomi-ph p.atomi-kicker {
	margin-block: 0 0.75rem;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.atomi-ph p.atomi-kicker + h1 {
	margin-top: 0;
}
/* Numbered steps (atomi-steps): one card per step, numbered in order. */
.wp-block-group.atomi-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	counter-reset: atomi-step;
}
.wp-block-group.atomi-steps > * {
	margin: 0;
}
.wp-block-group.atomi-step {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	background: #fff;
	counter-increment: atomi-step;
}
.wp-block-group.atomi-step::before {
	content: counter(atomi-step);
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1;
}
.wp-block-group.atomi-step > * {
	margin: 0;
}
.wp-block-group.atomi-step > h3 {
	margin-bottom: 0.35rem;
	font-size: 1rem;
}
.atomi-step > p {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-group.atomi-step > p.atomi-more {
	margin-top: auto;
	padding-top: 1rem;
}
/* Lists in steps and boxes: small, with the text's colour. */
.wp-block-group:is(.atomi-step, .atomi-box) > ul {
	display: grid;
	gap: 0.35rem;
	margin-top: 0.75rem;
	padding-left: 1.2rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-wrap: pretty;
}
.wp-block-group:is(.atomi-step, .atomi-box) > ul:first-child {
	margin-top: 0;
}
.wp-block-group.atomi-box > p + p {
	margin-top: 0.75rem;
}
.wp-block-group.atomi-box > ul + p {
	margin-top: 1rem;
}
.wp-block-group.atomi-box > p.atomi-note {
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
}
/* Tabs with an underline (atomi-htabs), over panels that site.js shows one at a time (atomi-tabs). */
.wp-block-buttons.atomi-htabs {
	flex-wrap: nowrap;
	gap: 0.25rem;
	margin-bottom: 2rem;
	overflow-x: auto;
	box-shadow: inset 0 -1px var(--wp--preset--color--rule);
	scrollbar-width: none;
}
.wp-block-buttons.atomi-htabs::-webkit-scrollbar {
	display: none;
}
.atomi-htabs > .wp-block-button {
	flex: none;
}
.atomi-htabs > .wp-block-button > .wp-block-button__link {
	padding: 0.8rem 1rem;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	white-space: nowrap;
}
.atomi-htabs > .wp-block-button > .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--heading);
}
.atomi-htabs > .wp-block-button > .wp-block-button__link[aria-current] {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--heading);
	font-weight: 600;
}
/* The price row on its own page, without the pricing stage's icon: text, price and button on a plain card. */
.wp-block-group.atomi-edu:not(:has(> .wp-block-image)) {
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 1rem 2rem;
	margin-top: 0;
	box-shadow: none;
}
.wp-block-group.atomi-edu + .wp-block-group.atomi-boxes {
	margin-top: 1.5rem;
}
/* Discount steps as even tiles (atomi-flat), in a box beside other ways to buy. */
.wp-block-group.atomi-tiers.atomi-flat {
	gap: 6px;
	margin-top: 1rem;
}
.wp-block-group.atomi-tiers.atomi-flat > p {
	height: auto;
	padding: 0.8rem 0.4rem;
	border-radius: var(--atomi-radius-sm);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--rule);
}
/* Three columns of lists in one box (what a product does, makes and is for). */
.wp-block-group.atomi-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem 2rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}
.wp-block-group.atomi-cols > * {
	margin: 0;
}
.atomi-cols h4 {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-group.atomi-cols ul {
	display: grid;
	gap: 0.35rem;
	margin: 0.6rem 0 0;
	padding-left: 1.2rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
@media (width < 961px) {
	.wp-block-group.atomi-steps,
	.wp-block-group.atomi-cols {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (641px <= width < 961px) {
	.wp-block-group.atomi-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wp-block-group.atomi-edu:not(:has(> .wp-block-image)) > .wp-block-group {
		grid-column: auto;
	}
}
/* Phones: the text over the price, with the button at the price's right. */
@media (width < 641px) {
	.wp-block-buttons.atomi-htabs {
		margin-inline: calc(-1 * var(--wp--style--root--padding-left));
		padding-inline: var(--wp--style--root--padding-left);
	}
	.atomi-htabs > .wp-block-button > .wp-block-button__link {
		padding-inline: 0.75rem;
	}
	.wp-block-group.atomi-edu:not(:has(> .wp-block-image)) {
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 1.5rem;
	}
	.wp-block-group.atomi-edu:not(:has(> .wp-block-image)) > .wp-block-group {
		grid-column: 1 / -1;
	}
	.wp-block-group.atomi-edu:not(:has(> .wp-block-image)) > .atomi-price {
		grid-column: 1;
	}
	.wp-block-group.atomi-edu:not(:has(> .wp-block-image)) > .wp-block-buttons {
		grid-column: 2;
		justify-self: end;
	}
	.wp-block-group.atomi-tiers.atomi-flat {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Narrower screens ---------- */
@media (width < 961px) {
	.wp-block-group:is(.atomi-split, .atomi-feat, .atomi-feat.atomi-flip, .atomi-faq, .atomi-volume, .atomi-trust, .atomi-shots) {
		grid-template-columns: minmax(0, 1fr);
	}
	.wp-block-group.atomi-uses,
	.wp-block-group.atomi-demos,
	.wp-block-query.atomi-demos .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Three quotes never fill two columns: one column, kept to a readable width. */
	.wp-block-group.atomi-quotes {
		grid-template-columns: minmax(0, 1fr);
		max-width: 40rem;
		margin-inline: auto;
	}
	.wp-block-buttons.atomi-vtabs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 0.25rem 2rem 0.25rem 0;
		scrollbar-width: none;
	}
	.wp-block-buttons.atomi-vtabs::-webkit-scrollbar {
		display: none;
	}
	.atomi-vtabs > .wp-block-button {
		flex: none;
	}
	.atomi-vtabs > .wp-block-button > .wp-block-button__link {
		white-space: nowrap;
	}
	.wp-block-group:is(.atomi-feat, .atomi-split).atomi-flip > :first-child {
		order: 0;
	}
	/* Stacked, a row's text sits closer to its own picture than to the next row. */
	.wp-block-group.atomi-feat {
		gap: 1.5rem;
	}
	/* Two-column layouts that stack keep the space between their parts below a section's padding. */
	.wp-block-group:is(.atomi-split, .atomi-faq, .atomi-volume) {
		row-gap: 2rem;
	}
	.wp-block-group.atomi-split.atomi-form {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2rem;
	}
	.wp-block-group.atomi-boxes {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Stacked bands show the plain left part of the backdrop, so the wall corner never runs through the text. */
	.wp-block-group.atomi-band-ap,
	.wp-block-group.atomi-band-up::before {
		background-position: 15% center;
	}
	.wp-block-group.atomi-fgrid:is(.atomi-c4, .atomi-c5) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wp-block-group.atomi-plans:not(.atomi-c2, .atomi-c1) {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
		margin-inline: auto;
	}
	.wp-block-group.atomi-pr-top .wp-block-group.atomi-edu {
		max-width: 560px;
		margin-inline: auto;
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
	/* Education row: the text takes the full width beside the icon, the price and button share the row under it. */
	.wp-block-group.atomi-edu > .wp-block-group {
		grid-column: 2 / -1;
	}
	.wp-block-group.atomi-edu > .atomi-price {
		grid-column: 2;
	}
	.wp-block-group.atomi-edu > .wp-block-buttons {
		justify-self: end;
	}
	.wp-block-table.atomi-cmp :is(th, td) {
		padding-inline: 0.75rem;
	}
	.atomi-cmp thead th a {
		min-width: 0;
	}
	/* Five items never fill an even grid: one column, icon beside the text. */
	.wp-block-group.atomi-incl {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
		max-width: 40rem;
	}
	.wp-block-group.atomi-incl > .wp-block-group {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 1rem;
		align-content: start;
	}
	.atomi-incl > .wp-block-group > * {
		grid-column: 2;
	}
	.wp-block-group.atomi-incl > .wp-block-group > .wp-block-image {
		grid-column: 1;
		grid-row: span 2;
		margin: 0;
	}
	.wp-block-group.atomi-incl > .wp-block-group > h3 {
		margin: 0.45rem 0 0.25rem;
	}
}
/* Tablet: three-up feature cards stay three-up in the compact size. */
@media (641px <= width < 961px) {
	.wp-block-group.atomi-fgrid:not(.atomi-c4, .atomi-c5) {
		--fg-gap: 1rem;
	}
	.atomi-fgrid:not(.atomi-c4, .atomi-c5) > .wp-block-group.atomi-fcard {
		padding: 1.1rem 1.15rem 1.25rem;
	}
	.atomi-fgrid:not(.atomi-c4, .atomi-c5) > .atomi-fcard > :is(h3, h4) {
		font-size: var(--wp--preset--font-size--small);
	}
	.atomi-fgrid:not(.atomi-c4, .atomi-c5) > .atomi-fcard > p {
		font-size: var(--wp--preset--font-size--x-small);
		line-height: 1.5;
	}
	.atomi-fgrid:not(.atomi-c4, .atomi-c5) > .atomi-fcard > :is(h3, h4) > :is(.atomi-tag, .atomi-tag-enh) {
		top: 1.1rem;
		right: 1.05rem;
	}
	/* Info cards: one per row, label and title on the left, the line and its link on the right. Cards with a table
	   (ways to buy) just stack. */
	.wp-block-group.atomi-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}
	.wp-block-group.atomi-cards:has(> .atomi-icard > .wp-block-table) {
		gap: 1.5rem;
	}
	.wp-block-group.atomi-icard:not(:has(> .wp-block-table)) {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 2rem;
	}
	.atomi-icard:not(:has(> .wp-block-table)) > * {
		grid-column: 1;
	}
	.wp-block-group.atomi-icard:not(:has(> .wp-block-table)) > h3 {
		grid-row: 2;
		margin: 0;
	}
	.atomi-icard:not(:has(> .wp-block-table)) > p:not(.atomi-kicker, .atomi-more) {
		grid-column: 2;
		grid-row: 1 / -1;
	}
	.wp-block-group.atomi-icard:not(:has(> .wp-block-table)) > p.atomi-more {
		grid-column: 2;
		grid-row: 4;
		padding-top: 0.6rem;
	}
	/* Four link cards: two in a row, each card upright. */
	.wp-block-group.atomi-cards.atomi-c4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
	.wp-block-group.atomi-cards.atomi-c4 > .wp-block-group.atomi-icard {
		display: flex;
	}
	.wp-block-group.atomi-c4 > .atomi-icard > h3 {
		margin-bottom: 0.35rem;
	}
}
@media (width < 641px) {
	/* Hero buttons fill the row, so a pair that wraps stacks at one width. */
	:is(.atomi-ph, .atomi-prod-hero, .atomi-band) .wp-block-buttons > .wp-block-button {
		flex: 1 0 auto;
	}
	:is(.atomi-ph, .atomi-prod-hero, .atomi-band) .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}
	/* Topic chips keep their own width. */
	.atomi-ph .wp-block-buttons.atomi-chips > .wp-block-button {
		flex: none;
	}
	.atomi-ph .wp-block-buttons.atomi-chips > .wp-block-button > .wp-block-button__link {
		width: auto;
	}
	.wpcf7-form-control-wrap:is([data-name="contact-name"], [data-name="contact-email"]) {
		grid-column: 1 / -1;
	}
	.wp-block-group.atomi-cards {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Phones: one row per feature, icon on the left. */
	.wp-block-group.atomi-fgrid,
	.wp-block-group.atomi-fgrid:is(.atomi-c4, .atomi-c5) {
		--fg-gap: 0.75rem;
		grid-template-columns: minmax(0, 1fr);
	}
	.atomi-fgrid > .wp-block-group.atomi-fcard {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 1rem;
		align-content: start;
		padding: 1rem 1.1rem 1.1rem;
	}
	.atomi-fcard > .wp-block-image {
		grid-row: span 2;
		width: 40px;
		margin: 0;
	}
	.atomi-fcard > .wp-block-image img {
		width: 40px;
		height: 40px;
	}
	.atomi-fcard > :not(.wp-block-image) {
		grid-column: 2;
	}
	.wp-block-group.atomi-fcard > :is(h3, h4) {
		margin-bottom: 0.2rem;
	}
	.atomi-fcard > :is(h3, h4) > :is(.atomi-tag, .atomi-tag-enh) {
		position: static;
		margin-left: 0.35rem;
	}
	.atomi-fcard > p .atomi-fcard__ed {
		margin-top: 0.35rem;
	}
	.wp-block-group.atomi-fsub {
		display: block;
	}
	.wp-block-group.atomi-fsub > p {
		margin-top: 0.2rem;
	}
	.wp-block-group.atomi-fsub > p.atomi-ed {
		margin-top: 0.75rem;
	}
	.wp-block-group.atomi-fgrid + .wp-block-group.atomi-fsub {
		margin-block-start: 2.25rem;
	}
	.wp-block-group.atomi-jump {
		position: static;
	}
	html:has(.atomi-jump) {
		scroll-padding-top: calc(var(--atomi-admin) + var(--atomi-header-h) + 24px);
	}
	html:has(.atomi-pb):has(.atomi-jump) {
		scroll-padding-top: calc(var(--atomi-admin) + var(--atomi-header-h) + var(--atomi-bar-h) + 24px);
	}
	/* Product switcher: equal cells, icon above the name, so every product stays in view. */
	.wp-block-buttons.atomi-seg {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		width: 100%;
	}
	.atomi-seg > .wp-block-button > .wp-block-button__link {
		flex-direction: column;
		justify-content: center;
		gap: 0.3rem;
		width: 100%;
		height: 100%;
		padding: 0.6rem 0.2rem;
		font-size: 0.75rem;
		line-height: 1.25;
		text-align: center;
		white-space: normal;
	}
	.atomi-seg > .wp-block-button > .wp-block-button__link[target="_blank"]::after {
		display: none;
	}
	/* Small switchers span the width, their boxes equal; a long label wraps inside its box. */
	.wp-block-buttons.atomi-seg.atomi-seg-sm {
		grid-auto-columns: minmax(0, 1fr);
	}
	.wp-block-buttons.atomi-seg-sm > .wp-block-button > .wp-block-button__link {
		flex-direction: row;
		padding: 0.5rem 0.75rem;
		font-size: var(--wp--preset--font-size--small);
		text-wrap: balance;
	}
	.wp-block-group.atomi-links,
	.wp-block-query.atomi-posts .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Use cases are short enough to stay two across. */
	.wp-block-group.atomi-uses {
		column-gap: 1rem;
	}
	.atomi-uses .wp-block-heading {
		font-size: 1rem;
	}
	.wp-block-group.atomi-stats {
		gap: 1.5rem;
	}
	.atomi-formats > li {
		padding: 0.45rem 0.8rem;
		font-size: var(--wp--preset--font-size--x-small);
	}
	/* Browsers on one row, systems on the next, so no chip is left alone on a row. */
	ul.atomi-formats::after {
		content: "";
		flex-basis: 100%;
		order: 1;
		height: 0;
		margin-top: -0.6rem;
	}
	.atomi-formats > li:nth-child(n + 5) {
		order: 2;
	}
	.atomi-pr-head h1 {
		margin-top: 1.5rem;
	}
	.wp-block-group.atomi-plans.atomi-c2 {
		grid-template-columns: minmax(0, 1fr);
	}
	.wp-block-group.atomi-plans {
		gap: 2rem;
	}
	.wp-block-group.atomi-plan {
		padding: 1.5rem;
	}
	.wp-block-group.atomi-plan.atomi-best {
		padding: calc(1.5rem - 1px);
	}
	.wp-block-group.atomi-pr-top .wp-block-group.atomi-edu {
		grid-template-columns: auto minmax(0, 1fr);
		padding: 1.5rem;
	}
	.wp-block-group.atomi-edu > :is(.atomi-price, .wp-block-buttons) {
		grid-column: 2;
		justify-self: start;
	}
	/* Volume steps: all six in one row, smaller type. */
	.wp-block-group.atomi-tiers {
		gap: 4px;
	}
	.wp-block-group.atomi-tiers > p {
		height: calc(3.6rem + var(--p) * 1.7px);
		padding: 0.7rem 0;
		font-size: 0.6875rem;
	}
	.atomi-tiers > p strong {
		font-size: var(--wp--preset--font-size--small);
	}
	.wp-block-group.atomi-tiers-cap > * + * {
		display: none;
	}
	.wp-block-group.atomi-calc {
		padding: 1.25rem;
	}
	/*
	 * Comparison table fits the screen: the head keeps only the edition names. Each row is a grid of the feature and
	 * three narrow mark columns; the feature cell spans the row, so its name sits beside the marks and its note runs
	 * the full width under them. The head sticks as one block, since a sticky cell would stay inside its grid row.
	 */
	.wp-block-table.atomi-cmp :is(table, tbody) {
		display: block;
	}
	.wp-block-table.atomi-cmp thead {
		display: block;
		position: sticky;
		top: calc(var(--atomi-admin) + var(--atomi-header-h));
		z-index: 2;
	}
	.atomi-cmp tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) repeat(3, 3.6rem);
	}
	.wp-block-table.atomi-cmp thead th {
		position: static;
		padding: 0.7rem 0;
		font-size: 0.75rem;
	}
	.wp-block-table.atomi-cmp thead th:first-child {
		padding-left: 0.85rem;
	}
	.atomi-cmp thead th :is(em, a) {
		display: none;
	}
	.wp-block-table.atomi-cmp td[colspan] {
		grid-column: 1 / -1;
	}
	.wp-block-table.atomi-cmp td:first-child:not([colspan]) {
		grid-row: 1;
		grid-column: 1 / -1;
		padding: 0.7rem calc(3 * 3.6rem + 0.5rem) 0.7rem 0.85rem;
		font-size: 0.875rem;
		line-height: 1.4;
	}
	.atomi-cmp td:first-child em {
		max-width: none;
		margin-right: calc(-3 * 3.6rem - 0.5rem + 0.85rem);
	}
	.wp-block-table.atomi-cmp :is(th, td):not(:first-child) {
		width: auto;
	}
	/* Marks line up with the first line of the feature name; the note runs under them, so the Pro tint stays in the head. */
	.wp-block-table.atomi-cmp tbody td:not(:first-child):not([colspan]) {
		display: flex;
		grid-row: 1;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		height: calc(1.4 * 0.875rem + 1.4rem);
		padding: 0;
		border-bottom: 0;
		background: none;
	}
	.atomi-cmp td:nth-child(2) {
		grid-column: 2;
	}
	.atomi-cmp td:nth-child(3) {
		grid-column: 3;
	}
	.atomi-cmp td:nth-child(4) {
		grid-column: 4;
	}
	.atomi-cmp .atomi-trial {
		padding: 0.25rem 0.35rem;
		font-size: 0.625rem;
		letter-spacing: 0;
	}
	/* Small card tables: a value too long for its row drops under its label instead of running out. */
	.atomi-icard > .wp-block-table:not(.atomi-stack) tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		column-gap: 1rem;
		padding: 0.75rem 1rem;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}
	.atomi-icard > .wp-block-table:not(.atomi-stack) tr:last-child {
		border-bottom: 0;
	}
	.atomi-icard > .wp-block-table:not(.atomi-stack) td {
		padding: 0;
		border: 0;
	}
	/* Call-to-action buttons stack at one shared width instead of wrapping to two widths. */
	.wp-block-group.atomi-cta-box {
		padding-inline: 1.25rem;
	}
	.atomi-cta-box h2 {
		font-size: 1.625rem;
	}
	.atomi-cta-box .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		width: min(100%, 17rem);
		margin-inline: auto;
	}
	.wp-block-group.atomi-dl {
		grid-template-columns: minmax(0, 1fr);
	}
	.wp-block-group.atomi-dl-card {
		padding: 1.5rem;
	}
	.atomi-dl-card > p.atomi-dl-card__flag {
		top: 1.5rem;
		right: 1.5rem;
	}
	.wp-block-details.atomi-older > summary {
		padding-inline: 1rem;
	}
	.wp-block-details.atomi-older > :not(summary) {
		padding: 0 1rem 1rem;
	}
	.atomi-older :is(th, td),
	.atomi-versions tbody th {
		padding-inline: 0.5rem;
	}
}
@media (width < 401px) {
	.atomi-seg > .wp-block-button > .wp-block-button__link {
		padding-inline: 0.1rem;
		font-size: 0.6875rem;
	}
	/* Upgrade prices: every row puts its label above its value, like the contact card beside it, instead of only
	   the rows that run out of room. */
	.atomi-icard > .wp-block-table.atomi-stack-sm tr {
		display: grid;
		gap: 0.1rem;
		padding-block: 0.7rem;
	}
	.atomi-icard > .wp-block-table.atomi-stack-sm td:first-child {
		color: var(--atomi-ink-3);
		font-size: var(--wp--preset--font-size--x-small);
	}
	.atomi-icard > .wp-block-table.atomi-stack-sm td:last-child:not(:first-child) {
		color: var(--wp--preset--color--heading);
		font-weight: 600;
		text-align: left;
	}
	/* A link longer than the line ("Volume discounts and buying options") breaks into two even lines. */
	p.atomi-more a {
		white-space: normal;
		text-wrap: balance;
	}
	.atomi-cta-box h2 {
		font-size: 1.5rem;
	}
	/* Several previous versions: the dates go under the version names. */
	.atomi-versions th span {
		display: block;
	}
	.atomi-versions th span::before {
		content: none;
	}
}
/* Narrowest phones: equal cells are too narrow for "ActivePresenter", so each cell takes its name's width and the
   spare room is shared. */
@media (width < 350px) {
	.wp-block-buttons.atomi-seg {
		grid-auto-columns: auto;
	}
	/* Calculator pickers: "Doanh nghiệp" stays on one line in its box. */
	.atomi-calc__seg button {
		padding-inline: 0.5rem;
		font-size: var(--wp--preset--font-size--x-small);
	}
	/* Room for a whole email address in a card's contact table. */
	.wp-block-group.atomi-icard:has(> .wp-block-table) {
		padding-inline: 1.25rem;
	}
	.atomi-icard > .wp-block-table.atomi-stack tr {
		padding-inline: 0.75rem;
	}
	/* The Turnstile widget is a fixed 300 px frame, wider than the form here. */
	.wpcf7-form .wpcf7-turnstile {
		zoom: 0.9;
	}
}

/* ---------- Blog index ---------- */
.wp-block-group.atomi-blog-head {
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 3rem;
}
.atomi-blog-head h1 {
	max-width: 24em;
	font-size: var(--wp--preset--font-size--large);
}
.atomi-blog-head .atomi-lede {
	max-width: 42rem;
	margin-block: 1rem 0;
}
.wp-block-group.atomi-blog-head + .wp-block-query {
	margin-block-start: 0;
}
/* Category tabs under the title: one row of links that scrolls sideways when narrow, the current one underlined. */
.wp-block-group.atomi-cats {
	position: relative;
	isolation: isolate;
	margin-block: 2.25rem 0;
}
/* The rule under the row stays whole while the row itself fades at a scrolled edge. */
.wp-block-group.atomi-cats::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: -1;
	height: 1px;
	background: var(--wp--preset--color--rule);
}
.atomi-cats > ul {
	display: flex;
	gap: 0.25rem 1.75rem;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	list-style: none;
}
.atomi-cats > ul::-webkit-scrollbar {
	display: none;
}
.atomi-cats li {
	flex: none;
	margin: 0;
}
.atomi-cats a {
	display: block;
	padding-block: 0.9rem;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.atomi-cats a:hover {
	color: var(--wp--preset--color--heading);
}
.atomi-cats a[aria-current] {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--heading);
	font-weight: 600;
}
/* The latest post, large: picture beside meta, title and excerpt. Shown above the first page only. */
.wp-block-query.atomi-lead .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}
.atomi-lead .wp-block-post {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	align-items: center;
	margin: 0;
}
.atomi-lead .wp-block-post > *,
.atomi-lead .wp-block-post > .wp-block-group > * {
	margin: 0;
}
.atomi-lead .wp-block-post-featured-image {
	position: relative;
	overflow: hidden;
	border-radius: var(--atomi-radius);
	background: var(--atomi-soft-2);
}
.atomi-lead .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
	pointer-events: none;
}
.atomi-lead .wp-block-post-featured-image img {
	transition: transform 0.35s;
}
.atomi-lead .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}
.atomi-lead .wp-block-post-terms a {
	position: relative;
	z-index: 1;
	color: var(--wp--preset--color--brand-text);
	font-weight: 600;
	text-decoration: none;
}
.atomi-lead .wp-block-group > .wp-block-post-title {
	margin-block: 0.75rem 1rem;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	line-height: 1.25;
	text-wrap: balance;
}
.atomi-lead .wp-block-post-title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
	transition: color 0.15s;
}
.atomi-lead .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.atomi-lead .wp-block-post:hover .wp-block-post-title a {
	color: var(--wp--preset--color--brand-text);
}
.atomi-lead .wp-block-post-excerpt {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
}
.atomi-lead .wp-block-post-excerpt__excerpt {
	margin: 0;
}
.wp-block-query.atomi-lead + .wp-block-query.atomi-posts {
	margin-block-start: 4rem;
}
/* Pages: numbered boxes, the current one dark, Previous and Next outlined. */
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination {
	justify-content: center;
	align-items: center;
	gap: 0.25rem;
	margin-block-start: 4rem;
}
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination > *,
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination-numbers {
	margin: 0;
}
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.25rem;
}
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75rem;
	border-radius: var(--atomi-radius-sm);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination a:hover {
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--heading);
}
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--heading);
	color: #fff;
}
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 0.25rem;
}
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	border: 1px solid var(--atomi-line-2);
}
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination-previous {
	margin-inline-end: 0.5rem;
}
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination-next {
	margin-inline-start: 0.5rem;
}
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination .wp-block-query-pagination-previous-arrow {
	margin: 0 0.4em 0 0;
}
:is(.atomi-posts, .atomi-results) .wp-block-query-pagination .wp-block-query-pagination-next-arrow {
	margin: 0 0 0 0.4em;
}
@media (width < 961px) {
	.atomi-lead .wp-block-post {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}
/* Phones: the numbers on a row of their own, Previous and Next under them. */
@media (width < 641px) {
	:is(.atomi-posts, .atomi-results) .wp-block-query-pagination {
		row-gap: 1rem;
	}
	:is(.atomi-posts, .atomi-results) .wp-block-query-pagination-numbers {
		order: -1;
		flex-basis: 100%;
		justify-content: center;
	}
	:is(.atomi-posts, .atomi-results) .wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
		margin-inline: 0.25rem;
	}
}

/* ---------- Article ---------- */
/* Contents, text and sidebar in three columns that fit the wide width; the title and byline sit over the text. Without
   contents (short posts), text and sidebar stay centred. */
.wp-block-group.atomi-article {
	padding-bottom: var(--wp--preset--spacing--section);
}
.wp-block-group.atomi-art {
	display: grid;
	grid-template-columns: 180px minmax(0, 700px) 220px;
	grid-template-areas: ". head ." "toc body side" "toc adj side";
	column-gap: 2.5rem;
	justify-content: center;
	align-items: start;
}
.wp-block-group.atomi-art:not(:has(> .atomi-toc)) {
	grid-template-columns: minmax(0, 700px) 220px;
	grid-template-areas: "head ." "body side" "adj side";
}
.wp-block-group.atomi-art--wide {
	grid-template-columns: 180px minmax(0, 1fr);
	grid-template-areas: ". head" "toc body" "toc adj";
}
.wp-block-group.atomi-art--wide:not(:has(> .atomi-toc)) {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "head" "body" "adj";
}
.wp-block-group.atomi-art > * {
	margin: 0;
}
.atomi-art > .atomi-art__head {
	grid-area: head;
	padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 2.5rem;
}
.atomi-art > .atomi-toc {
	grid-area: toc;
}
.atomi-art > .atomi-prose {
	grid-area: body;
}
.atomi-art > .atomi-art__side {
	grid-area: side;
}
/* Breadcrumb over the title: Home, the blog and the post's category, with slashes between. */
:is(.atomi-art__head, .atomi-project__head) > .atomi-crumbs {
	margin-bottom: 1.25rem;
}
.atomi-crumbs > span {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
}
.atomi-crumbs a {
	color: inherit;
	text-decoration: none;
}
.atomi-crumbs a:hover {
	color: var(--wp--preset--color--brand-text);
}
.atomi-crumbs i {
	font-style: normal;
	opacity: 0.5;
}
/* Previous and next posts under the text, in the same category: a card each, the next one on the right. */
.wp-block-group.atomi-art > .atomi-adj {
	grid-area: adj;
}
.wp-block-group:is(.atomi-art, .atomi-project) > .atomi-adj {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2.5rem;
}
.wp-block-group.atomi-adj > * {
	display: flex;
	margin: 0;
}
.wp-block-group.atomi-adj > :empty {
	display: none;
}
.atomi-adj > .post-navigation-link-next {
	grid-column: 2;
	text-align: right;
}
.atomi-adj a {
	flex: 1;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius-sm);
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	text-wrap: balance;
}
.atomi-adj a:hover {
	border-color: var(--atomi-line-2);
	color: var(--wp--preset--color--heading);
}
.atomi-adj .post-navigation-link__label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}
.atomi-adj .post-navigation-link__title {
	display: block;
}
.atomi-adj > .post-navigation-link-previous .post-navigation-link__label::before {
	content: "← " / "";
}
.atomi-adj > .post-navigation-link-next .post-navigation-link__label::after {
	content: " →" / "";
}
.atomi-art__head > * {
	margin: 0;
}
.atomi-art__head h1 {
	font-size: var(--wp--preset--font-size--large);
	text-wrap: balance;
}
/* Byline: by Author, date, categories, with dots between. The categories take the rest of the line and wrap inside
   it, so a dot never starts a line. */
.wp-block-group.atomi-byline {
	align-items: flex-start;
	gap: 0.35rem 0.75rem;
	margin-top: 1.25rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-group.atomi-byline > *,
.wp-block-group.atomi-byline__by > * {
	margin: 0;
	color: inherit;
	font-size: inherit;
}
.wp-block-group.atomi-byline__by {
	gap: 0.3em;
}
.atomi-byline .wp-block-post-author-name {
	color: var(--wp--preset--color--heading);
	font-weight: 600;
}
.atomi-byline .wp-block-post-author-name a {
	color: inherit;
	text-decoration: none;
}
.atomi-byline .wp-block-post-terms {
	flex: 1 1 0%;
}
.atomi-byline .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}
.atomi-byline .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--brand-text);
}
.atomi-byline > :is(.wp-block-post-date, .wp-block-post-terms)::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-inline-end: 0.75rem;
	border-radius: 50%;
	background: var(--atomi-line-2);
	vertical-align: middle;
}
/* Phones: the name on a line of its own, the date and categories under it. */
@media (width < 641px) {
	.wp-block-group.atomi-byline__by {
		flex-basis: 100%;
	}
	.atomi-byline > .wp-block-post-date::before {
		display: none;
	}
}
/* Contents: the headings of the post, the one being read marked by site.js. */
.atomi-toc {
	position: sticky;
	top: calc(var(--atomi-admin) + var(--atomi-header-h) + 2rem);
	max-height: calc(100vh - var(--atomi-admin) - var(--atomi-header-h) - 4rem);
	overflow-y: auto;
	scrollbar-width: thin;
	font-size: var(--wp--preset--font-size--small);
}
.atomi-toc > .atomi-toc__label {
	margin: 0 0 0.75rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.atomi-toc ol {
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--wp--preset--color--rule);
	list-style: none;
}
.atomi-toc li {
	margin: 0;
}
.atomi-toc a {
	display: block;
	margin-left: -1px;
	padding: 0.35rem 0 0.35rem 1rem;
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--contrast);
	line-height: 1.4;
	text-decoration: none;
}
.atomi-toc a:hover {
	color: var(--wp--preset--color--heading);
}
.atomi-toc a[aria-current] {
	border-left-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--brand-text);
	font-weight: 500;
}
.wp-block-post-content.atomi-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
}
.atomi-prose h2 {
	font-size: var(--atomi-fs-xl);
}
/* The date line the Last Updated plugin puts first: a quiet line, without the empty line it adds after it. */
.atomi-prose > span:first-child {
	display: block;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal !important;
	font-weight: 500 !important;
	text-align: left !important;
}
.atomi-prose > span:first-child + div:has(> br:only-child) {
	display: none;
}
.atomi-art__side .atomi-sidebar {
	padding: 1rem 1.5rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	font-size: var(--wp--preset--font-size--small);
}
.atomi-art__side .wp-block-categories {
	margin: 0;
}
.atomi-art__side .wp-block-categories li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	color: var(--atomi-ink-3);
}
.atomi-art__side .wp-block-categories li + li {
	border-top: 1px solid var(--wp--preset--color--rule);
}
.atomi-art__side .wp-block-categories a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}
.atomi-art__side .wp-block-categories a:hover {
	color: var(--wp--preset--color--brand-text);
}
/* One column below 1100px: no contents, the sidebar under the text. */
@media (width < 1100px) {
	.wp-block-group.atomi-art,
	.wp-block-group.atomi-art:not(:has(> .atomi-toc)) {
		grid-template-columns: minmax(0, 700px);
		grid-template-areas: "head" "body" "adj" "side";
	}
	.wp-block-group.atomi-art--wide,
	.wp-block-group.atomi-art--wide:not(:has(> .atomi-toc)) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "body" "adj";
	}
	.atomi-art > .atomi-toc {
		display: none;
	}
	.wp-block-group.atomi-art > .atomi-art__side {
		margin-top: 3rem;
	}
}
/* Phones: previous over next, both on the left. */
@media (width < 641px) {
	.wp-block-group:is(.atomi-art, .atomi-project) > .atomi-adj {
		grid-template-columns: minmax(0, 1fr);
	}
	.atomi-adj > .post-navigation-link-next {
		grid-column: auto;
		text-align: left;
	}
}

/* ---------- Library (tutorials) ---------- */
/* Topics on the left, kept in view, the one being read marked by site.js; on tablets and phones they become a row of
   chips under the header. Each topic: heading, line and a list of links in two columns, the long ones folded after
   eight. */
.wp-block-search.atomi-lib-search {
	max-width: 36rem;
	margin-block-start: 2rem;
}
.atomi-lib-search .wp-block-search__inside-wrapper {
	padding: 5px;
	border: 1px solid var(--atomi-line-2);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--wp--preset--shadow--card);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.atomi-lib-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--tint);
}
.atomi-lib-search .wp-block-search__input {
	min-width: 0;
	padding: 0 0.9rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--heading);
	font: inherit;
	font-size: 1rem;
}
.atomi-lib-search .wp-block-search__input:focus {
	outline: none;
}
.atomi-lib-search .wp-block-search__button {
	margin: 0;
}
.wp-block-group.atomi-lib {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	align-items: start;
}
.wp-block-group.atomi-lib > * {
	margin: 0;
}
.wp-block-group.atomi-lib__nav {
	position: sticky;
	top: calc(var(--atomi-admin) + var(--atomi-header-h) + 1.5rem);
	max-height: calc(100vh - var(--atomi-admin) - var(--atomi-header-h) - 3rem);
	overflow-y: auto;
	scrollbar-width: thin;
	font-size: var(--wp--preset--font-size--small);
}
html:has(.atomi-pb) .wp-block-group.atomi-lib__nav {
	top: calc(var(--atomi-admin) + var(--atomi-header-h) + var(--atomi-bar-h) + 1.5rem);
	max-height: calc(100vh - var(--atomi-admin) - var(--atomi-header-h) - var(--atomi-bar-h) - 3rem);
}
.atomi-lib__nav > p {
	margin: 0 0 0.75rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.atomi-lib__nav ul {
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--wp--preset--color--rule);
	list-style: none;
}
.atomi-lib__nav li {
	margin: 0;
}
.atomi-lib__nav li a {
	display: block;
	margin-left: -1px;
	padding: 0.4rem 0 0.4rem 1rem;
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--contrast);
	line-height: 1.4;
	text-decoration: none;
}
.atomi-lib__nav li a:hover {
	color: var(--wp--preset--color--heading);
}
.atomi-lib__nav li a[aria-current] {
	border-left-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--brand-text);
	font-weight: 600;
}
.wp-block-group.atomi-lib__sec {
	margin: 0;
}
.wp-block-group.atomi-lib__sec + .wp-block-group.atomi-lib__sec {
	margin-top: 3.5rem;
}
.wp-block-group.atomi-lib__sec > * {
	margin: 0;
}
.wp-block-group.atomi-lib__sec > h2 {
	margin-bottom: 0.35rem;
	font-size: var(--atomi-fs-xl);
}
.wp-block-group.atomi-lib__sec > p {
	margin-bottom: 1.25rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-wrap: pretty;
}
.wp-block-group.atomi-lib__sec > h3 {
	margin: 2.25rem 0 0.35rem;
	font-size: var(--wp--preset--font-size--medium);
}
.wp-block-group.atomi-lib__sec > h3 + .wp-block-list {
	margin-top: 1rem;
}
.wp-block-group.atomi-lib__sec > .atomi-demos {
	margin-top: 1.5rem;
}
/* Link lists: rows between rules with an arrow; a title with no page yet is a plain row. */
.wp-block-list.atomi-tl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 2rem;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	list-style: none;
}
.atomi-tl li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
.atomi-tl li:has(> a) {
	padding: 0;
}
.atomi-tl li > a {
	display: flex;
	flex: 1;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	gap: 1rem;
	padding: 0.85rem 0;
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}
.atomi-tl li > a::after {
	content: "\2192";
	color: var(--atomi-ink-3);
	transition: transform 0.15s;
}
.atomi-tl li > a:hover {
	color: var(--wp--preset--color--brand-text);
}
.atomi-tl li > a:hover::after {
	color: var(--wp--preset--color--brand-text);
	transform: translateX(3px);
}
.atomi-tl li > a[target="_blank"]::after {
	content: "\2197";
}
/* The rest of a long list: a "Show all" link that opens it in place. */
.wp-block-details.atomi-tl-more {
	border: 0;
}
.wp-block-details.atomi-tl-more > summary {
	display: inline-flex;
	gap: 0.4rem;
	margin-top: 1rem;
	padding: 0;
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.wp-block-details.atomi-tl-more > summary::after {
	content: "\2193";
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	transform: none;
}
.atomi-lib__videos + .wp-block-details.atomi-tl-more > summary {
	margin-top: 1.5rem;
}
.wp-block-details.atomi-tl-more[open] > summary {
	display: none;
}
.wp-block-details.atomi-tl-more > :not(summary) {
	margin: 0;
	padding: 0;
}
.wp-block-details.atomi-tl-more > .wp-block-list.atomi-tl {
	border-top: 0;
}
.wp-block-details.atomi-tl-more > .atomi-demos {
	margin-top: 2rem;
}
/* Search: rows, folds and topics without a match are hidden; with none at all, this line shows. */
.atomi-lib [data-miss] {
	display: none !important;
}
.atomi-lib p.atomi-lib__empty {
	display: none;
	color: var(--wp--preset--color--contrast);
}
.atomi-lib.is-empty p.atomi-lib__empty {
	display: block;
}
/* Start cards whose title is a link: the whole card answers to it. */
.wp-block-group.atomi-icard:has(> h3 a) {
	position: relative;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.atomi-icard > h3 a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}
.atomi-icard > h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.wp-block-group.atomi-icard:has(> h3 a):hover {
	border-color: var(--atomi-line-2);
	box-shadow: var(--wp--preset--shadow--card);
}
.atomi-icard:has(> h3 a):hover > h3 a {
	color: var(--wp--preset--color--brand-text);
}
/* A card that opens another site says so after its title (the link's own ::after spans the card). */
.atomi-icard > h3:has(> a[target="_blank"])::after {
	content: "\2197";
	margin-left: 0.3em;
	font-size: 0.85em;
	opacity: 0.6;
}
.wp-block-group.atomi-demos.atomi-lib__videos {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Start cards of a library: three pictures, each with a linked title and a line under it. */
.wp-block-group.atomi-demos.atomi-start {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.atomi-demos.atomi-start h3 {
	font-size: var(--wp--preset--font-size--medium);
}
.atomi-demos.atomi-start > .wp-block-group > p {
	margin-top: -0.5rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-group.atomi-start + .wp-block-group.atomi-lib {
	margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
/* A topic written out (a guide rather than a list): text at reading size and measure, pictures centred. */
.wp-block-group.atomi-lib__sec.atomi-lib__text {
	max-width: 46rem;
}
.wp-block-group.atomi-lib__sec.atomi-lib__text > h2 {
	margin-bottom: 1rem;
}
.wp-block-group.atomi-lib__sec.atomi-lib__text > :is(p, ul) {
	margin-bottom: 1rem;
	color: var(--wp--preset--color--contrast);
	font-size: 1.0625rem;
	line-height: 1.75;
}
.atomi-lib__sec.atomi-lib__text > ul {
	padding-left: 1.25rem;
}
.atomi-lib__sec.atomi-lib__text > ul li + li {
	margin-top: 0.4rem;
}
.wp-block-group.atomi-lib__sec.atomi-lib__text > .wp-block-image {
	margin-block: 1.5rem;
}
.wp-block-group.atomi-lib__sec.atomi-lib__text > :last-child {
	margin-bottom: 0;
}
@media (width < 961px) {
	.wp-block-group.atomi-lib {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}
	/* Topics: a row of chips under the header that scrolls sideways. */
	.wp-block-group.atomi-lib__nav {
		z-index: 40;
		top: calc(var(--atomi-admin) + var(--atomi-header-h));
		max-height: none;
		overflow: visible;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1.5rem));
		padding-inline: var(--wp--style--root--padding-left, 1.5rem);
		border-bottom: 1px solid var(--wp--preset--color--rule);
		background: rgba(255, 255, 255, 0.95);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}
	html:has(.atomi-pb) .wp-block-group.atomi-lib__nav {
		top: calc(var(--atomi-admin) + var(--atomi-header-h) + var(--atomi-bar-h));
		max-height: none;
	}
	html:has(.atomi-lib__nav) {
		scroll-padding-top: calc(var(--atomi-admin) + var(--atomi-header-h) + 80px);
	}
	html:has(.atomi-pb):has(.atomi-lib__nav) {
		scroll-padding-top: calc(var(--atomi-admin) + var(--atomi-header-h) + var(--atomi-bar-h) + 80px);
	}
	.atomi-lib__nav > p {
		display: none;
	}
	.atomi-lib__nav ul {
		display: flex;
		gap: 0.5rem;
		overflow-x: auto;
		padding-block: 0.7rem;
		border: 0;
		scrollbar-width: none;
	}
	.atomi-lib__nav ul::-webkit-scrollbar {
		display: none;
	}
	.atomi-lib__nav li {
		flex: none;
	}
	.atomi-lib__nav li a {
		margin: 0;
		padding: 0.4rem 0.95rem;
		border: 1px solid var(--atomi-line-2);
		border-radius: 999px;
		background: #fff;
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 500;
		line-height: 1.6;
		white-space: nowrap;
	}
	.atomi-lib__nav li a:hover {
		border-color: var(--atomi-ink-3);
	}
	.atomi-lib__nav li a[aria-current] {
		border-color: var(--wp--preset--color--heading);
		background: var(--wp--preset--color--heading);
		color: #fff;
		font-weight: 500;
	}
	.wp-block-group.atomi-demos.atomi-lib__videos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (width < 641px) {
	.wp-block-list.atomi-tl,
	.wp-block-group.atomi-demos.atomi-start {
		grid-template-columns: minmax(0, 1fr);
	}
	.wp-block-search.atomi-lib-search {
		margin-block-start: 1.5rem;
	}
}

/* ---------- Filterable demos ---------- */
/* The categories of each demo under its title; chips with counts above the grid (built by site.js), and a button
   that shows the next twenty. */
.atomi-demos.atomi-portfolio-filterable .atomi-item-terms {
	display: block;
	margin-top: -0.5rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
}
.atomi-demos.atomi-portfolio-filterable .atomi-filter {
	justify-content: flex-start;
	margin-bottom: 2.5rem;
}
.atomi-filter button small {
	margin-inline-start: 0.4rem;
	font-size: var(--wp--preset--font-size--x-small);
	opacity: 0.6;
}
.atomi-demos-more {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}
/* Chips that wrap are balanced across their lines, so none is left alone on the last. */
@media (width >= 641px) {
	.atomi-demos.atomi-portfolio-filterable .atomi-filter {
		display: block;
		margin-bottom: 2rem;
		text-wrap: balance;
	}
	.atomi-demos.atomi-portfolio-filterable .atomi-filter button {
		margin: 0 0.5rem 0.5rem 0;
		vertical-align: top;
	}
}
.atomi-portfolio-filterable .wp-block-post[hidden],
.atomi-demos-more[hidden] {
	display: none;
}
@media (width < 641px) {
	.atomi-demos.atomi-portfolio-filterable .atomi-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1.5rem));
		padding-inline: var(--wp--style--root--padding-left, 1.5rem);
		scrollbar-width: none;
	}
	.atomi-demos.atomi-portfolio-filterable .atomi-filter::-webkit-scrollbar {
		display: none;
	}
	.atomi-demos.atomi-portfolio-filterable .atomi-filter button {
		flex: none;
		white-space: nowrap;
	}
}

/* ---------- Policies: the policy menu beside the text, a summary box, then the text at reading size ---------- */
.atomi-ph p.atomi-updated {
	margin-block: 1rem 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
/* The menu is a template part; its wrapper steps aside so the menu itself is the grid column and stays in view. */
.wp-block-group.atomi-lib > .wp-block-template-part {
	display: contents;
}
.wp-block-group.atomi-legal__body {
	max-width: 46rem;
}
.wp-block-group.atomi-legal__body > * {
	margin: 0;
}
.wp-block-group.atomi-legal__body > * + * {
	margin-top: 2.5rem;
}
.wp-block-group.atomi-legal__body > .wp-block-template-part {
	margin-top: 3rem;
}
.wp-block-group.atomi-short {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--atomi-radius);
	background: var(--wp--preset--color--subtle);
}
.wp-block-group.atomi-short > p {
	margin: 0 0 0.6rem;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.wp-block-group.atomi-short > ul {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding-left: 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	text-wrap: pretty;
}
.atomi-short li {
	margin: 0;
}
.wp-block-group.atomi-legal__text {
	font-size: 1.0625rem;
	line-height: 1.75;
}
.wp-block-group.atomi-legal__text > * {
	margin: 0;
}
.wp-block-group.atomi-legal__text > * + * {
	margin-top: 1.2em;
}
.wp-block-group.atomi-legal__text > * + :is(h2, h3, h4) {
	margin-top: 2.25em;
}
.wp-block-group.atomi-legal__text > * + :is(h3, h4) {
	margin-top: 1.75em;
}
.wp-block-group.atomi-legal__text > :is(h2, h3, h4) + * {
	margin-top: 0.75em;
}
.atomi-legal__text h2 {
	font-size: var(--wp--preset--font-size--medium);
}
/* A long policy with sub-sections (the privacy policy) needs its sections to stand out from them. */
.wp-block-group.atomi-legal__text:has(> h3) > h2 {
	font-size: var(--atomi-fs-xl);
}
.wp-block-group.atomi-legal__text:has(> h3) > * + h2 {
	margin-top: 2.5em;
}
.atomi-legal__text h3 {
	font-size: var(--wp--preset--font-size--medium);
}
.atomi-legal__text h4 {
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
}
.atomi-legal__text :is(ul, ol) {
	padding-left: 1.25rem;
}
.atomi-legal__text li + li,
.atomi-legal__text li > :is(ul, ol) {
	margin-top: 0.35em;
}
.atomi-legal__text .wp-block-table {
	overflow-x: auto;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
.atomi-legal__text .wp-block-table :is(th, td) {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--preset--color--rule);
	vertical-align: top;
}
/* A list of documents: one column of link rows, a group of documents as an indented list under its name. */
.atomi-legal__text .wp-block-list.atomi-tl {
	grid-template-columns: minmax(0, 1fr);
}
.atomi-legal__text .atomi-tl li {
	margin: 0;
	font-size: 1rem;
}
.atomi-legal__text .atomi-tl li:has(> ul) {
	display: block;
	padding-bottom: 0;
}
.atomi-legal__text .atomi-tl li > ul {
	margin: 0.85rem 0 0;
	padding: 0 0 0 1.25rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	list-style: none;
}
.atomi-legal__text .atomi-tl li > ul > li:last-child {
	border-bottom: 0;
}
@media (width < 961px) {
	/* Four policies: chips that wrap under their label, in the page rather than stuck under the header. */
	.atomi-legal .wp-block-group.atomi-lib__nav {
		position: static;
		margin-inline: 0;
		padding-inline: 0;
		border: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.atomi-legal .atomi-lib__nav > p {
		display: block;
	}
	.atomi-legal .atomi-lib__nav ul {
		flex-wrap: wrap;
		overflow: visible;
		padding-block: 0;
	}
	html:has(.atomi-legal) {
		scroll-padding-top: calc(var(--atomi-admin) + var(--atomi-header-h) + 24px);
	}
}
@media (width < 641px) {
	/* Tables keep readable columns and scroll sideways. */
	.atomi-legal__text .wp-block-table table {
		min-width: 36rem;
	}
}

/* ---------- Project ---------- */
/* A demo: breadcrumb, title and line over the demo's stage, then the previous and next demos of the same product. The
   title and line come from the Project's content, whose own groups (the Vietnamese demos have one) add nothing here. */
.wp-block-group.atomi-project {
	padding-bottom: var(--wp--preset--spacing--section);
}
.wp-block-group.atomi-project > * {
	margin-block: 0;
}
.wp-block-group.atomi-project > .atomi-project__head {
	padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.atomi-project__head > * {
	margin: 0;
}
.atomi-project :is(.atomi-project__head, .atomi-project__body) h1 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	text-wrap: balance;
}
.atomi-project__head > .atomi-byline {
	margin-top: 0.75rem;
}
.atomi-project__head:has(> .atomi-byline) + .atomi-project__body {
	margin-top: 1.5rem;
}
.atomi-project__body h2 {
	font-size: var(--atomi-fs-xl);
	text-wrap: balance;
}
.atomi-project__head .atomi-byline > .wp-block-post-date::before {
	display: none;
}
.atomi-project__body .wp-block-group {
	display: contents;
}
:is(.atomi-project__body, .atomi-project__body .wp-block-group) > * {
	max-width: 46rem;
	margin-block: 1rem 0;
	margin-inline: 0 !important;
}
:is(.atomi-project__body, .atomi-project__body .wp-block-group) > :first-child {
	margin-top: 0;
}
.atomi-project__body p:empty {
	display: none;
}
/* Demos of fixed size (several banner sizes on one page) scroll sideways inside their paragraph on narrow screens. */
:is(.atomi-project__body, .atomi-project__body .wp-block-group) > p:has(> iframe) {
	max-width: none;
	overflow-x: auto;
}
/* The line under the title. */
.atomi-project__body h1 + p,
.atomi-project__head:has(> h1) + .atomi-project__body > p:first-child {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	text-wrap: pretty;
}
/* The Last Updated plugin's date line, where the Project has no stage for it: a quiet line. */
.atomi-project__body > span:first-child {
	display: block;
	color: var(--atomi-ink-3);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal !important;
	font-weight: 500 !important;
	text-align: left !important;
	margin-bottom: 1.5rem;
}
.atomi-project__body > span:first-child + div:has(> br:only-child) {
	display: none;
}
/* The stage: the demo's picture in a navy frame, in the demo's shape and short enough to fit the screen under the
   header, with Play over it; the bar under it has the date and the link to the demo on its own. */
:is(.atomi-project__body, .atomi-project__body .wp-block-group) > .atomi-stage {
	max-width: none;
	margin-top: 2rem;
}
.atomi-stage {
	padding: clamp(0.5rem, 0.25rem + 1vw, 1rem);
	border-radius: calc(var(--atomi-radius) + 4px);
	background: var(--wp--preset--color--footer);
}
.atomi-stage__frame {
	position: relative;
	width: min(100%, (100svh - var(--atomi-admin) - var(--atomi-header-h) - 7rem) * var(--atomi-ratio));
	aspect-ratio: var(--atomi-ratio);
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--atomi-radius-sm);
	background: #1a2539;
}
.atomi-stage__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.atomi-stage__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: linear-gradient(0deg, rgba(11, 26, 48, 0.5), rgba(11, 26, 48, 0.05));
	text-decoration: none;
}
.atomi-stage__play:focus-visible {
	outline-offset: -4px;
}
.atomi-stage__play > span {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 1.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	color: var(--wp--preset--color--heading);
	font-weight: 600;
	line-height: 1.2;
	transition: transform 0.15s;
}
.atomi-stage__play:hover > span {
	transform: scale(1.04);
}
.atomi-stage__play svg {
	width: 18px;
	height: 18px;
	color: var(--wp--preset--color--primary);
}
.atomi-stage__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 0.75rem 0.5rem 0.25rem;
	color: #93a1b6;
	font-size: var(--wp--preset--font-size--x-small);
}
.atomi-stage__bar > a {
	margin-left: auto;
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
}
.atomi-stage__bar > a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}
.wp-block-group.atomi-project > .atomi-adj {
	margin-top: 2.5rem;
}

/* ---------- Archives, search and 404 ---------- */
/* The blog index's head and cards: the category, tag or author name with the category's description and the
   category tabs, then the posts; search results are a list of title, excerpt and date under a search box. */
.wp-block-group.atomi-archive {
	padding-bottom: var(--wp--preset--spacing--section);
}
.atomi-blog-head .wp-block-term-description {
	max-width: 42rem;
	margin-block: 1rem 0;
}
.atomi-blog-head .wp-block-term-description > p {
	margin: 0;
}
.atomi-blog-head > .wp-block-template-part {
	display: contents;
}
.atomi-blog-head .wp-block-search.atomi-find {
	max-width: 36rem;
	margin-block: 2rem 0;
}
.atomi-posts h2.wp-block-post-title {
	font-size: 1rem;
	letter-spacing: -0.01em;
}
.wp-block-query.atomi-results {
	max-width: 46rem;
}
.wp-block-query.atomi-results .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}
.atomi-results .wp-block-post {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding-block: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}
.atomi-results .wp-block-post:first-child {
	padding-top: 0;
	border-top: 0;
}
.atomi-results .wp-block-post > * {
	margin: 0;
}
.atomi-results .wp-block-post-terms a {
	color: var(--wp--preset--color--brand-text);
	font-weight: 600;
	text-decoration: none;
}
.atomi-results .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
	text-wrap: balance;
}
.atomi-results .wp-block-post-title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}
.atomi-results .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand-text);
}
.atomi-results .wp-block-post-excerpt {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.atomi-results .wp-block-post-excerpt__excerpt {
	margin: 0;
}
p.atomi-none {
	max-width: 42rem;
	color: var(--wp--preset--color--contrast);
}