/*
Theme Name: Celestio
Theme URI: https://hbgdesignlab.se/
Author: HDL
Author URI: https://hbgdesignlab.se/
Description: Celestio Cloud, managed WordPress hosting in Sweden. FSE block theme built from the HDL blueprint. Presentation only, functionality lives in the hdl plugins.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: celestio
Update URI: https://git.hdlgroup.tech/hdl-wordpress-plugins/internal/arina-cloud
Tags: full-site-editing, block-patterns, block-styles, editor-style, translation-ready
*/

/*
 * Ported 1:1 from the design reference (celestio-home.css, theme mode: duo,
 * accent: ember, both owner-confirmed). All colors and fonts reference
 * theme.json presets/custom tokens. Tone system: .band = light tone,
 * .band.dk = dark tone. Duo mode is fixed, so no data-theme attribute.
 */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
svg {
	max-width: 100%;
}

/* ── Tone tokens ─────────────────────────────────────────────────────────── */
.band {
	--bg: var(--wp--preset--color--base);
	--bg2: var(--wp--preset--color--base-2);
	--card: var(--wp--preset--color--card);
	--ink: var(--wp--preset--color--contrast);
	--ink2: var(--wp--preset--color--contrast-2);
	--ink3: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	--rule: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	--rule2: color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	--afg: var(--wp--preset--color--accent);
	--alink: var(--wp--preset--color--accent-deep);
	--glow: var(--wp--preset--color--accent-mist);
	--chip-soft: var(--wp--preset--color--accent-soft);
	--chip-ink: var(--wp--preset--color--accent-deep);
	background: var(--bg);
	color: var(--ink);
}

html:not([data-theme]) .band.dk,
html[data-theme="duo"] .band.dk,
html[data-theme="dark"] .band {
	--bg: var(--wp--preset--color--dark);
	--bg2: var(--wp--preset--color--dark-2);
	--card: var(--wp--preset--color--dark-2);
	--ink: var(--wp--preset--color--ink-dark);
	--ink2: var(--wp--preset--color--ink-dark-2);
	--ink3: color-mix(in srgb, var(--wp--preset--color--ink-dark) 50%, transparent);
	--rule: color-mix(in srgb, var(--wp--preset--color--ink-dark) 11%, transparent);
	--rule2: color-mix(in srgb, var(--wp--preset--color--ink-dark) 22%, transparent);
	--afg: var(--wp--preset--color--accent-bright);
	--alink: var(--wp--preset--color--accent-bright);
	--glow: color-mix(in oklab, var(--wp--preset--color--accent) 16%, transparent);
	--chip-soft: color-mix(in oklab, var(--wp--preset--color--accent) 20%, transparent);
	--chip-ink: var(--wp--preset--color--accent-bright);
}

html[data-theme="dark"] .band.dk {
	--bg: var(--wp--custom--tone--deep-bg);
	--card: var(--wp--custom--tone--deep-card);
}

/* Accent variants (Site Settings → accent) override the ember presets. */
html[data-accent="aurora"] {
	--wp--preset--color--accent: var(--wp--custom--accent-aurora--base);
	--wp--preset--color--accent-deep: var(--wp--custom--accent-aurora--deep);
	--wp--preset--color--accent-bright: var(--wp--custom--accent-aurora--bright);
	--wp--preset--color--accent-soft: var(--wp--custom--accent-aurora--soft);
	--wp--preset--color--accent-mist: var(--wp--custom--accent-aurora--mist);
}

html[data-accent="polar"] {
	--wp--preset--color--accent: var(--wp--custom--accent-polar--base);
	--wp--preset--color--accent-deep: var(--wp--custom--accent-polar--deep);
	--wp--preset--color--accent-bright: var(--wp--custom--accent-polar--bright);
	--wp--preset--color--accent-soft: var(--wp--custom--accent-polar--soft);
	--wp--preset--color--accent-mist: var(--wp--custom--accent-polar--mist);
}

.band a {
	color: inherit;
	text-decoration: none;
}

.band .body-link {
	color: var(--alink);
}

.band .body-link:hover {
	text-decoration: underline;
}

/* ── Shared primitives ───────────────────────────────────────────────────── */
.wrap {
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin: 0 auto;
	padding-left: var(--wp--custom--size--side-pad);
	padding-right: var(--wp--custom--size--side-pad);
}

.grow {
	flex: 1;
}

.is-centered {
	text-align: center;
}

.band.is-bg2 {
	background: var(--bg2);
}

/* Renderer-emitted buttons (reference .btn family). */
.band .btn {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: var(--wp--custom--size--btn-h);
	padding: 0 22px;
	border-radius: var(--wp--custom--radius--btn);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--size--body-md);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.005em;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

.band .btn:hover {
	transform: translateY(-1px);
}

.band a.btn-primary,
.band button.btn-primary {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--card);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--card) 20%, transparent) inset, 0 8px 22px -10px color-mix(in oklab, var(--wp--preset--color--accent) 70%, transparent);
}

.band a.btn-primary:hover,
.band button.btn-primary:hover {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--card);
}

.band a.btn-ghost,
.band button.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--rule2);
}

.band a.btn-ghost:hover,
.band button.btn-ghost:hover {
	border-color: var(--ink);
	color: var(--ink);
}

.band .btn-lg {
	height: var(--wp--custom--size--btn-h-lg);
	padding: 0 28px;
	font-size: var(--wp--custom--size--body-lg);
	border-radius: var(--wp--custom--radius--btn-lg);
}

.band .btn-nav {
	height: 40px;
	padding: 0 18px;
	font-size: var(--wp--custom--size--body-sm);
}

section.band {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

section.band.is-flush-top {
	padding-top: 0;
}

.mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro);
	letter-spacing: var(--wp--custom--letter-spacing--mono);
	text-transform: uppercase;
	color: var(--ink3);
}

.eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro-2);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--afg);
	display: inline-block;
}

.sec-h2 {
	margin-top: 18px;
	max-width: 21ch;
	text-wrap: balance;
}

.lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--lede);
	color: var(--ink2);
	max-width: 56ch;
	margin-top: 20px;
}

.sec-head {
	margin-bottom: 56px;
}

.is-centered .sec-h2,
.is-centered .lede {
	margin-left: auto;
	margin-right: auto;
}

.is-centered .eyebrow {
	justify-content: center;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.band .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: var(--wp--custom--size--btn-h);
	letter-spacing: 0.005em;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

.band .wp-block-button__link:hover {
	transform: translateY(-1px);
}

.band .btn-primary .wp-block-button__link {
	box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--card) 20%, transparent) inset, 0 8px 22px -10px color-mix(in oklab, var(--wp--preset--color--accent) 70%, transparent);
}

.band .btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--ink);
	border-color: var(--rule2);
}

.band .btn-ghost .wp-block-button__link:hover {
	border-color: var(--ink);
	background: transparent;
	color: var(--ink);
}

.band .btn-lg .wp-block-button__link {
	height: var(--wp--custom--size--btn-h-lg);
	padding-left: 28px;
	padding-right: 28px;
	font-size: var(--wp--custom--size--body-lg);
	border-radius: var(--wp--custom--radius--btn-lg);
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
}

.site-nav {
	border-bottom: 1px solid var(--rule);
	background: color-mix(in oklab, var(--bg) 88%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-nav .nav-row {
	min-height: var(--wp--custom--size--nav-h);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 34px;
}

.site-nav .signin {
	font-size: var(--wp--custom--size--body-md);
	font-weight: 500;
	color: var(--ink2);
}

.site-nav .signin:hover {
	color: var(--ink);
}

.brand-mark {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.brand-mark svg {
	width: 26px;
	height: 26px;
	color: var(--afg);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	font-size: var(--wp--custom--size--body-md);
	font-weight: 500;
}

.nav-links p {
	margin: 0;
}

.nav-links a {
	color: var(--ink2);
}

.nav-links a:hover {
	color: var(--ink);
}

.site-nav .wp-block-button__link {
	height: 40px;
	padding-left: 18px;
	padding-right: 18px;
	font-size: var(--wp--custom--size--body-sm);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
	position: relative;
	padding-top: clamp(4.5rem, 8vw, 6.875rem);
	padding-bottom: 0;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	top: -320px;
	left: 50%;
	transform: translateX(-50%);
	width: 1400px;
	height: 800px;
	background: radial-gradient(closest-side, var(--glow), transparent 70%);
	pointer-events: none;
}

.hero > .wrap {
	position: relative;
	z-index: 2;
}

.hero-top {
	max-width: 900px;
}

.hero-h1 {
	margin-top: 26px;
	text-wrap: balance;
}

.hero-h1 em {
	font-style: normal;
	color: var(--afg);
}

.hero-lede {
	font-size: var(--wp--custom--size--lede-hero);
	max-width: 52ch;
}

.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 38px;
}

.hero-note {
	font-size: var(--wp--custom--size--body-xs);
	color: var(--ink3);
	margin-top: 16px;
}

.hero-stats {
	display: flex;
	margin-top: 64px;
	border-top: 1px solid var(--rule);
	gap: 0;
}

.hstat {
	flex: 1;
	padding: 22px 26px 0 0;
}

.hstat + .hstat {
	padding-left: 26px;
	border-left: 1px solid var(--rule);
}

.hstat .stat-v {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--size--stat-value);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
}

.hstat .stat-l {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ink3);
	margin: 5px 0 0;
	line-height: 1.45;
}

/* ── Console mock ────────────────────────────────────────────────────────── */
.mockwrap {
	margin-top: 74px;
	position: relative;
}

.mockwrap::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 180px;
	background: linear-gradient(transparent, var(--handoff, var(--wp--preset--color--base)));
	pointer-events: none;
}

html[data-theme="dark"] .mockwrap::after {
	--handoff: var(--wp--preset--color--dark);
}

.console.has-img {
	min-height: 0;
}

.console.has-img img,
.stagemock.has-img img {
	display: block;
	width: 100%;
	height: auto;
}

.console {
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--card);
	box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--wp--preset--color--dark) 45%, transparent);
	font-size: var(--wp--preset--font-size--x-small);
}

.con-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border-bottom: 1px solid var(--rule);
	color: var(--ink3);
}

.con-bar .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rule2);
}

.con-bar .url {
	margin-left: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro-2);
	letter-spacing: 0.04em;
	background: var(--bg2);
	border-radius: 3px;
	padding: 6px 14px;
}

.con-body {
	display: grid;
	grid-template-columns: 216px 1fr;
	min-height: 430px;
}

.con-side {
	border-right: 1px solid var(--rule);
	padding: 18px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.con-side .cbrand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--size--body-md);
	font-weight: 700;
	padding: 6px 10px 16px;
}

.con-side .cbrand svg {
	width: 18px;
	height: 18px;
	color: var(--afg);
}

.cnav {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border-radius: var(--wp--custom--radius--chip);
	color: var(--ink2);
	font-weight: 500;
}

.cnav.on {
	background: var(--chip-soft);
	color: var(--chip-ink);
	font-weight: 600;
}

.cnav i {
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.55;
	flex-shrink: 0;
}

.con-main {
	padding: 22px 26px;
}

.con-head {
	display: flex;
	align-items: center;
	margin-bottom: 18px;
}

.con-head .t {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 600;
}

.con-head .grow,
.envrow .grow,
.foot-base .grow {
	flex: 1;
}

.con-btn {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--chip);
	padding: 8px 14px;
	font-weight: 600;
	font-size: var(--wp--custom--size--note);
}

.kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}

.kpi {
	border: 1px solid var(--rule);
	border-radius: 4px;
	padding: 13px 16px;
	background: var(--bg);
}

.kpi .k {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink3);
}

.kpi .v {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3125rem;
	font-weight: 600;
	margin-top: 4px;
}

.kpi .v em {
	font-style: normal;
	font-size: 0.75rem;
	color: var(--afg);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	margin-left: 6px;
}

.srow {
	display: grid;
	grid-template-columns: 1.5fr 0.8fr 0.7fr 0.7fr 0.6fr;
	gap: 10px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	margin-bottom: 8px;
	background: var(--bg);
}

.srow .sname b {
	display: block;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--display);
}

.srow .sname span {
	font-size: var(--wp--custom--size--micro-2);
	color: var(--ink3);
	font-family: var(--wp--preset--font-family--mono);
}

.srow .m {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro-2);
	color: var(--ink2);
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--custom--size--micro);
	font-weight: 600;
	border-radius: var(--wp--custom--radius--pill);
	padding: 4px 10px;
	width: fit-content;
}

.pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.band .pill-ok {
	background: var(--wp--custom--status--ok-soft);
	color: var(--wp--custom--status--ok-deep);
}

.band .pill-warn {
	background: var(--wp--custom--status--warn-soft);
	color: var(--wp--custom--status--warn-deep);
}

.band.dk .pill-ok {
	background: color-mix(in srgb, var(--wp--custom--status--ok) 16%, transparent);
	color: var(--wp--custom--status--ok-bright);
}

.band.dk .pill-warn {
	background: color-mix(in srgb, var(--wp--custom--status--warn) 14%, transparent);
	color: var(--wp--custom--status--warn-bright);
}

.sact {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro);
	color: var(--ink3);
	text-align: right;
}

/* ── Logo strip (renders only with approved logos) ───────────────────────── */
.logos {
	padding-top: 54px;
	padding-bottom: 54px;
	border-top: 1px solid var(--rule);
}

.logos-row {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: space-between;
}

.plogo-img img {
	display: block;
	height: 26px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.45;
}

.logos .cap {
	flex-basis: 100%;
	text-align: center;
	margin: 0 0 26px;
}

.plogo {
	opacity: 0.45;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	filter: grayscale(1);
	margin: 0;
}

/* ── Console feature split ───────────────────────────────────────────────── */
.portal {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 70px;
	align-items: center;
}

.portal.is-flipped > div:first-child {
	order: 2;
}

.plist {
	margin-top: 36px;
}

.plist .pli {
	display: flex;
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid var(--rule);
	margin: 0;
}

.plist .chk {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--chip-soft);
	color: var(--chip-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.plist .pli-t {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.plist .pli-b {
	margin: 5px 0 0;
	font-size: var(--wp--custom--size--body-sm);
	line-height: 1.55;
	color: var(--ink2);
}

/* ── Staging mock ────────────────────────────────────────────────────────── */
.stagemock {
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--card);
	background: var(--card);
	box-shadow: 0 30px 70px -35px color-mix(in srgb, var(--wp--preset--color--dark) 40%, transparent);
	overflow: hidden;
	font-size: var(--wp--preset--font-size--x-small);
}

.stagemock .sm-head {
	padding: 18px 22px;
	border-bottom: 1px solid var(--rule);
}

.stagemock .sm-head b {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--size--body-md);
}

.stagemock .sm-head span {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro);
	color: var(--ink3);
	margin-top: 3px;
}

.sm-tabs {
	display: flex;
	gap: 2px;
	padding: 10px 16px 0;
	border-bottom: 1px solid var(--rule);
}

.sm-tabs span {
	padding: 9px 13px;
	font-weight: 500;
	color: var(--ink3);
	border-bottom: 2px solid transparent;
}

.sm-tabs .on {
	color: var(--ink);
	border-color: var(--afg);
	font-weight: 600;
}

.sm-body {
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.envrow {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--btn-lg);
	padding: 14px 16px;
	background: var(--bg);
}

.envrow .edot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--custom--status--ok);
	flex-shrink: 0;
}

.envrow .edot.stg {
	background: var(--afg);
}

.envrow b {
	font-family: var(--wp--preset--font-family--display);
}

.envrow span.env-url {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro);
	color: var(--ink3);
}

.envrow .ebtn {
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--chip);
	padding: 7px 12px;
	font-weight: 600;
	font-size: 0.75rem;
}

.envrow .ebtn.pri {
	background: var(--wp--preset--color--accent);
	border-color: transparent;
	color: var(--wp--preset--color--card);
}

.sm-log {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro-2);
	line-height: 1.9;
	color: var(--ink2);
	background: var(--bg2);
	border-radius: var(--wp--custom--radius--btn-lg);
	padding: 16px 18px;
}

.sm-log .ok {
	color: var(--wp--custom--status--ok);
}

.sm-log .tm {
	color: var(--ink3);
}

/* ── Platform grid ───────────────────────────────────────────────────────── */
.fgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.fcard {
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--card);
	padding: 28px;
	background: var(--card);
}

a.fcard-link {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

a.fcard-link:hover,
a.fcard-link:focus-visible {
	border-color: var(--chip-ink);
	transform: translateY(-2px);
}

.fcard .fic {
	width: 38px;
	height: 38px;
	border-radius: var(--wp--custom--radius--btn);
	background: var(--chip-soft);
	color: var(--chip-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.fcard .fcard-t {
	font-size: var(--wp--custom--size--card-title);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
}

.fcard .fcard-b {
	font-size: var(--wp--custom--size--body-md);
	line-height: 1.6;
	color: var(--ink2);
	margin: 10px 0 0;
}

.fcard .fm {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro);
	letter-spacing: var(--wp--custom--letter-spacing--mono-wide);
	text-transform: uppercase;
	color: var(--ink3);
	margin-top: 16px;
	display: block;
}

/* ── Sweden band ─────────────────────────────────────────────────────────── */
.sweden-split {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	align-items: start;
}

.sw-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 8px;
}

.sw-card {
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--card);
	padding: 24px;
	background: var(--card);
}

.sw-card .sw-v {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--size--stat-value-lg);
	font-weight: 600;
	letter-spacing: -0.02em;
	display: block;
	margin: 0;
}

.sw-card .sw-v small {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--ink3);
}

.sw-card .sw-b {
	display: block;
	font-size: var(--wp--custom--size--body-xs);
	color: var(--ink2);
	margin: 8px 0 0;
	line-height: 1.5;
}

.sw-card .mono {
	margin-bottom: 14px;
	display: block;
}

.sw-body p {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--lede);
	color: var(--ink2);
	max-width: 56ch;
	margin: 20px 0 0;
}

/* ── Benchmarks ──────────────────────────────────────────────────────────── */
.bench {
	max-width: 860px;
}

.bars {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 52px;
}

.bar {
	display: grid;
	grid-template-columns: 220px 1fr 90px;
	gap: 20px;
	align-items: center;
}

.bar .who {
	font-weight: 600;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--size--body-lg);
}

.bar .who span {
	display: block;
	font-weight: 400;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro);
	color: var(--ink3);
	letter-spacing: 0.06em;
	margin-top: 2px;
}

.bar .track {
	height: 34px;
	background: var(--bg2);
	border-radius: var(--wp--custom--radius--chip);
	overflow: hidden;
}

.bar .fill {
	height: 100%;
	border-radius: var(--wp--custom--radius--chip);
	background: var(--rule2);
}

.bar.hero-bar .fill {
	background: var(--wp--preset--color--accent);
}

.bar .ms {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: right;
	color: var(--ink2);
}

.bar.hero-bar .ms {
	color: var(--afg);
	font-weight: 700;
}

.bench-note {
	font-size: var(--wp--custom--size--note);
	color: var(--ink3);
	margin-top: 28px;
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.02em;
}

/* ── Comparison ──────────────────────────────────────────────────────────── */
.cmp {
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
	background: var(--card);
}

.cmp table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--custom--size--body-md);
	margin: 0;
}

.cmp th,
.cmp td {
	padding: 16px 22px;
	text-align: left;
	border-top: 1px solid var(--rule);
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}

.cmp thead th {
	border-top: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--size--body-lg);
	padding: 20px 22px;
}

.cmp thead th.us {
	color: var(--afg);
}

.cmp td.lbl {
	font-weight: 500;
	width: 38%;
}

.cmp td span {
	color: var(--ink3);
}

.cmp .yes {
	color: var(--afg);
	font-weight: 700;
}

.cmp .no {
	color: var(--ink3);
}

.cmp tbody tr td:nth-child(2),
.cmp thead th:nth-child(2) {
	background: color-mix(in oklab, var(--wp--preset--color--accent) 5%, transparent);
}

.cmp tbody tr td:nth-child(2) {
	font-weight: 500;
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.plans {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	align-items: stretch;
}

.plans.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.plans.cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.plans.cols-1 {
	grid-template-columns: minmax(0, 420px);
	justify-content: center;
}

.plan {
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--panel);
	padding: 30px 26px;
	background: var(--card);
	display: flex;
	flex-direction: column;
	margin: 0;
}

.plan.hot {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent), 0 24px 60px -30px color-mix(in oklab, var(--wp--preset--color--accent) 55%, transparent);
	position: relative;
}

.plan .tag {
	position: absolute;
	top: -12px;
	left: 26px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--card);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--wp--custom--radius--pill);
}

.plan .plan-t {
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0;
}

.plan .pdesc {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ink3);
	margin: 6px 0 0;
	line-height: 1.5;
	min-height: 40px;
}

.plan .price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--size--price);
	font-weight: 600;
	letter-spacing: -0.025em;
	margin: 18px 0 0;
}

.plan .price small {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--ink3);
	letter-spacing: 0;
}

.plan .price.tbc {
	font-size: 1.5rem;
	line-height: 1.9;
}

.plan ul.plan-list {
	list-style: none;
	margin: 22px 0 26px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: var(--wp--custom--size--body-xs);
	color: var(--ink2);
	flex: 1;
}

.plan .plan-list li {
	display: flex;
	gap: 9px;
	align-items: baseline;
}

.plan .plan-list li::before {
	content: "·";
	color: var(--afg);
	font-weight: 700;
	flex-shrink: 0;
}

.plan .wp-block-buttons,
.plan .wp-block-button,
.plan .wp-block-button__link {
	width: 100%;
}

.price-note {
	text-align: center;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ink3);
	margin-top: 26px;
}

/* ── Quote ───────────────────────────────────────────────────────────────── */
.quote-wrap {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.quote-wrap .quote-text {
	margin: 28px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--letter-spacing--display-tight);
	text-wrap: balance;
}

.quote-wrap .quote-text em {
	font-style: normal;
	color: var(--afg);
}

.quote-wrap .who {
	margin-top: 28px;
	font-size: var(--wp--custom--size--body-sm);
	color: var(--ink3);
}

.quote-wrap .who b {
	color: var(--ink);
	font-weight: 600;
}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.cta-band {
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cta-band::before {
	content: "";
	position: absolute;
	bottom: -380px;
	left: 50%;
	transform: translateX(-50%);
	width: 1200px;
	height: 640px;
	background: radial-gradient(closest-side, var(--glow), transparent 70%);
	pointer-events: none;
}

.cta-band > * {
	position: relative;
}

.cta-band .hero-ctas {
	justify-content: center;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
	border-top: 1px solid var(--rule);
	padding-top: 64px;
	padding-bottom: 40px;
	font-size: var(--wp--custom--size--body-sm);
}

.foot-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
}

.foot-grid.cols-3 {
	grid-template-columns: 2fr 1fr 1fr;
}

.foot-grid.cols-2 {
	grid-template-columns: 2fr 1fr;
}

.foot-grid .mono {
	display: block;
	margin-bottom: 16px;
}

.foot-grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--ink2);
}

.foot-grid a:hover {
	color: var(--ink);
}

.foot-tag {
	margin-top: 18px;
	color: var(--ink3);
	font-size: var(--wp--custom--size--body-xs);
	line-height: 1.6;
	max-width: 30ch;
}

.foot-base {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
	color: var(--ink3);
	font-size: var(--wp--custom--size--note);
	flex-wrap: wrap;
}

/* ── Responsive (single breakpoint per design; nav wraps instead of hiding) ─ */
@media ( max-width: 1020px ) {
	.fgrid,
	.kpis {
		grid-template-columns: 1fr 1fr;
	}

	.plans {
		grid-template-columns: 1fr 1fr;
	}

	.portal,
	.sweden-split {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.hero-stats {
		flex-wrap: wrap;
	}

	.hstat {
		flex-basis: 45%;
	}

	.con-body {
		grid-template-columns: 1fr;
	}

	.con-side {
		display: none;
	}

	.nav-links {
		display: none;
	}

	.site-nav.open .nav-links {
		display: flex;
		position: absolute;
		top: var(--wp--custom--size--nav-h);
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--rule);
		padding: 6px var(--wp--custom--size--side-pad) 20px;
		box-shadow: 0 30px 50px -20px color-mix(in srgb, var(--wp--preset--color--dark) 45%, transparent);
	}

	.site-nav.open .nav-links a {
		padding: 14px 0;
		font-size: var(--wp--preset--font-size--medium);
		border-top: 1px solid var(--rule);
	}

	.site-nav.open .nav-links a:first-child {
		border-top: 0;
	}

	.foot-grid {
		grid-template-columns: 1fr 1fr;
	}

	.bar {
		grid-template-columns: 130px 1fr 70px;
	}
}



/* ── Mobile hamburger (celestio-chrome) ─────────────────────────────────────── */
.menu-btn {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--btn);
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.menu-btn span {
	display: block;
	width: 16px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform 0.2s;
}

.site-nav.open .menu-btn span:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.site-nav.open .menu-btn span:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

@media ( max-width: 1020px ) {
	.menu-btn {
		display: flex;
		margin-left: auto;
	}

	.site-nav .nav-row {
		position: relative;
		flex-wrap: nowrap;
	}

	.site-nav .btn-nav {
		margin-left: 0;
	}
}

/* ── Subpage patterns (celestio-pages.css port) ─────────────────────────────── */
.phero {
	position: relative;
	overflow: hidden;
	padding-top: 96px;
	padding-bottom: 88px;
}

.phero::before {
	content: "";
	position: absolute;
	top: -360px;
	left: 50%;
	transform: translateX(-50%);
	width: 1300px;
	height: 760px;
	background: radial-gradient(closest-side, var(--glow), transparent 70%);
	pointer-events: none;
}

.phero > .wrap {
	position: relative;
	z-index: 2;
}

.phero .page-h1 {
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 600;
	margin: 24px 0 0;
	max-width: 20ch;
	text-wrap: balance;
}

.phero .page-h1 em {
	font-style: normal;
	color: var(--afg);
}

.phero .hero-ctas {
	margin-top: 34px;
}

.fsplit {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 70px;
	align-items: center;
}

.fsplit.rev > .fviz {
	order: -1;
}

.fviz {
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--card);
	background: var(--card);
	box-shadow: 0 30px 70px -35px color-mix(in srgb, var(--wp--preset--color--dark) 35%, transparent);
	overflow: hidden;
	font-size: var(--wp--preset--font-size--x-small);
}

.fviz .fv-head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--rule);
	display: flex;
	align-items: center;
	gap: 10px;
}

.fviz .fv-head b {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--size--body-sm);
}

.fviz .fv-head .mono {
	margin-left: auto;
}

.fviz .fv-body {
	padding: 20px;
}

.speclist {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.speclist li {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 13px 0;
	border-top: 1px solid var(--rule);
	font-size: var(--wp--custom--size--body-md);
}

.speclist li b {
	font-weight: 600;
	font-family: var(--wp--preset--font-family--display);
}

.speclist li span {
	color: var(--ink2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	text-align: right;
}

.inc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
	background: var(--card);
}

.inc {
	padding: 24px;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}

.inc:nth-child(-n+4) {
	border-top: 0;
}

.inc:nth-child(4n+1) {
	border-left: 0;
}

.inc b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--custom--size--body-lg);
}

.inc span {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ink2);
	margin-top: 6px;
	line-height: 1.5;
}

.faq {
	max-width: 820px;
	margin: 56px auto 0;
}

.faq details {
	border-top: 1px solid var(--rule);
}

.faq details:last-child {
	border-bottom: 1px solid var(--rule);
}

.faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 22px 4px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.03125rem;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.5rem;
	color: var(--afg);
}

.faq details[open] summary::after {
	content: "–";
}

.faq details p {
	margin: 0;
	padding: 0 4px 24px;
	color: var(--ink2);
	font-size: var(--wp--custom--size--body-lg);
	line-height: 1.65;
	max-width: 60ch;
}

/* Blog */
.bfeat {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 0;
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
	background: var(--card);
}

.bfeat .btxt {
	padding: 38px 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.bfeat .bfeat-t {
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-weight: 600;
	margin: 16px 0 0;
	text-wrap: balance;
}

.bfeat p {
	color: var(--ink2);
	font-size: var(--wp--custom--size--body-lg);
	line-height: 1.6;
	margin: 14px 0 0;
}

.bfeat .bmeta {
	margin-top: auto;
	padding-top: 26px;
}

.imgph {
	background: repeating-linear-gradient(-45deg, var(--bg2) 0 10px, var(--bg) 10px 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
}

.imgph span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink3);
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: 6px 10px;
}

.bcard-img img,
.bfeat-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 14px;
}

.bcard {
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--card);
	display: flex;
	flex-direction: column;
	transition: transform 0.15s, box-shadow 0.15s;
}

.bcard:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--wp--preset--color--dark) 30%, transparent);
}

.bcard .imgph {
	min-height: 160px;
}

.bcard .btxt {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.bcard .bcard-t {
	font-size: 1.09375rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 12px 0 0;
}

.bcard p {
	font-size: var(--wp--custom--size--body-xs);
	color: var(--ink2);
	line-height: 1.55;
	margin: 10px 0 0;
}

.bcard .bmeta {
	margin-top: auto;
	padding-top: 18px;
}

.bkind {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--afg);
}

.bmeta {
	font-size: 0.78125rem;
	color: var(--ink3);
	font-family: var(--wp--preset--font-family--mono);
}

.bfilter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 40px 0 22px;
}

.bfilter a {
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--pill);
	padding: 8px 16px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--ink2);
}

.bfilter a.on {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}

.bfilter a:hover {
	border-color: var(--ink);
}

.nlband {
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--card);
	padding: 44px 48px;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 40px;
	align-items: center;
}

.nlband form {
	display: flex;
	gap: 10px;
}

.nlband input {
	flex: 1;
	height: 48px;
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--btn);
	padding: 0 16px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--size--body-md);
	background: var(--bg);
	color: var(--ink);
}

.nlband input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -1px;
}

/* Tools */
.tgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.tcard {
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--card);
	padding: 28px;
	background: var(--card);
	display: flex;
	flex-direction: column;
}

.tcard .tk {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--afg);
	display: flex;
	align-items: center;
	gap: 10px;
}

.tcard .tk .free {
	background: var(--chip-soft);
	color: var(--chip-ink);
	border-radius: var(--wp--custom--radius--pill);
	padding: 3px 9px;
	letter-spacing: 0.08em;
}

.tcard .tcard-t {
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 14px 0 0;
}

.tcard p {
	font-size: var(--wp--custom--size--body-sm);
	line-height: 1.6;
	color: var(--ink2);
	margin: 10px 0 0;
	flex: 1;
}

.tcard .tgo {
	margin-top: 22px;
	font-weight: 600;
	font-size: var(--wp--custom--size--body-sm);
	color: var(--alink);
}

/* Article */
.artwrap {
	max-width: 720px;
	margin: 0 auto;
}

.artwrap .art-h1 {
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	font-weight: 600;
	margin: 20px 0 0;
	text-wrap: balance;
}

.artbody {
	margin-top: 44px;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ink2);
}

.artbody h2 {
	font-size: 1.625rem;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 44px 0 0;
}

.artbody p {
	margin: 18px 0 0;
}

.artbody strong {
	color: var(--ink);
}

.crumb {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro-2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink3);
}

.crumb a:hover {
	color: var(--ink);
}

/* Article byline (author + date under the title) */
.artby {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro-2);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink3);
}

.artby .artby-name {
	color: var(--ink);
	font-weight: 600;
}

.artby .artby-date::before {
	content: "·";
	margin-right: 10px;
	color: var(--ink3);
}

/* Author bio card at the foot of an article */
.postbio {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-top: 56px;
	padding: 22px 24px;
	border: 1px solid var(--rule2);
	border-radius: 12px;
	background: var(--card);
}

.postbio-avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--afg);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: var(--wp--custom--size--body-sm);
	letter-spacing: 0.04em;
}

.postbio-by {
	margin: 2px 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro-2);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink3);
}

.postbio-by strong {
	color: var(--ink);
	font-weight: 600;
}

.postbio-text {
	margin: 8px 0 0;
	font-size: var(--wp--custom--size--body-sm);
	line-height: 1.65;
	color: var(--ink2);
}

@media ( max-width: 1020px ) {
	.fsplit,
	.bfeat,
	.nlband {
		grid-template-columns: 1fr;
	}

	.fsplit {
		gap: 44px;
	}

	.fsplit.rev > .fviz {
		order: 0;
	}

	.bgrid,
	.tgrid {
		grid-template-columns: 1fr 1fr;
	}

	.inc-grid {
		grid-template-columns: 1fr 1fr;
	}

	.inc:nth-child(-n+4) {
		border-top: 1px solid var(--rule);
	}

	.inc:nth-child(-n+2) {
		border-top: 0;
	}

	.inc:nth-child(4n+1) {
		border-left: 1px solid var(--rule);
	}

	.inc:nth-child(2n+1) {
		border-left: 0;
	}
}

/* ── Mobile (≤680px, design's small breakpoint) ──────────────────────────── */
@media ( max-width: 680px ) {
	.wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

	section.band {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.hero {
		padding-top: 72px;
	}

	.hero-lede,
	.lede {
		font-size: 1.03125rem;
	}

	.hero-ctas {
		flex-wrap: wrap;
		gap: 10px;
	}

	.band .btn-lg {
		height: 50px;
		padding: 0 22px;
		font-size: var(--wp--custom--size--body-md);
	}

	.hero-stats {
		flex-direction: column;
		margin-top: 44px;
	}

	.hstat {
		flex-basis: auto;
		padding: 16px 0 0;
	}

	.hstat + .hstat {
		padding-left: 0;
		border-left: 0;
	}

	.hstat .stat-v {
		font-size: 1.625rem;
	}

	.mockwrap {
		margin-top: 48px;
	}

	.kpis {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.srow {
		grid-template-columns: 1.4fr auto;
		row-gap: 4px;
	}

	.srow .m,
	.srow .sact {
		display: none;
	}

	.fgrid,
	.bgrid,
	.tgrid,
	.inc-grid {
		grid-template-columns: 1fr;
	}

	.inc-grid .inc {
		border-left: 0 !important;
		border-top: 1px solid var(--rule) !important;
	}

	.inc-grid .inc:first-child {
		border-top: 0 !important;
	}

	.plans {
		grid-template-columns: 1fr !important;
	}

	.cmp {
		overflow-x: auto;
	}

	.cmp table {
		min-width: 560px;
	}

	.bar {
		grid-template-columns: 86px 1fr 58px;
		gap: 10px;
	}

	.bar .who {
		font-size: 0.78125rem;
	}

	.bar .who span {
		display: none;
	}

	.bar .ms {
		font-size: 0.6875rem;
	}

	.foot-grid {
		grid-template-columns: 1fr !important;
		gap: 30px;
	}

	.foot-base {
		flex-wrap: wrap;
		gap: 6px;
	}

	.sec-head {
		margin-bottom: 36px;
	}

	.site-nav .nav-row {
		gap: 14px;
		min-height: 64px;
	}

	.site-nav.open .nav-links {
		top: 64px;
		padding: 6px 20px 18px;
	}

	.site-nav .signin {
		display: none;
	}

	.site-nav .btn-nav {
		padding: 0 12px;
		font-size: var(--wp--preset--font-size--x-small);
		height: 36px;
	}

	.brand-mark {
		font-size: 1.125rem;
	}

	.logos-row {
		justify-content: center;
		gap: 16px 24px;
	}

	.quote-wrap .quote-text {
		font-size: 1.3125rem;
	}

	.sw-stats {
		grid-template-columns: 1fr !important;
	}

	.sweden-split {
		gap: 36px;
	}

	.phero {
		padding-top: 64px;
		padding-bottom: 56px;
	}

	.nlband {
		padding: 28px 24px;
	}

	.nlband form {
		flex-direction: column;
	}

	.bfeat .btxt {
		padding: 26px 24px;
	}

	.artbody {
		font-size: var(--wp--preset--font-size--medium);
	}
}


/* ── Steps (sign-up) ─────────────────────────────────────────────────────── */
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.step {
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--panel);
	padding: 32px 30px;
	background: var(--card);
	position: relative;
	display: flex;
	flex-direction: column;
	counter-increment: step;
}

.step .snum {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--afg);
	display: flex;
	align-items: center;
	gap: 12px;
}

.step .snum::before {
	content: counter(step);
	flex: 0 0 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--chip-soft);
	color: var(--chip-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--custom--size--body-lg);
}

.steps {
	counter-reset: step;
}

.step .step-t {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 20px 0 0;
}

.step p {
	font-size: var(--wp--custom--size--body-md);
	line-height: 1.6;
	color: var(--ink2);
	margin: 10px 0 0;
	flex: 1;
}

.step .sdetail {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ink2);
}

.step .sdetail li {
	display: flex;
	gap: 8px;
	align-items: baseline;
}

.step .sdetail li::before {
	content: "·";
	color: var(--afg);
	font-weight: 700;
	flex-shrink: 0;
}

.step .stime {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink3);
	margin-top: 22px;
}

.gopanel {
	text-align: center;
	margin-top: 64px;
}

.gopanel .hero-note {
	margin-top: 14px;
}

.sw-stats.cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.sw-stats.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

section.band.is-compact {
	padding-top: 72px;
	padding-bottom: 72px;
}

.phero.is-centered .page-h1,
.phero.is-centered .lede {
	margin-left: auto;
	margin-right: auto;
}

.phero.is-centered .hero-ctas {
	justify-content: center;
}

@media ( max-width: 1020px ) {
	.steps {
		grid-template-columns: 1fr;
	}

	.sw-stats.cols-4,
	.sw-stats.cols-3 {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── Timeline (migrations) ───────────────────────────────────────────────── */
.tline {
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.tline li {
	display: grid;
	grid-template-columns: 120px 34px 1fr;
	gap: 22px;
	padding: 26px 0;
	border-top: 1px solid var(--rule);
}

.tline .tt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--ink3);
	padding-top: 4px;
}

.tline .tdot {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--chip-soft);
	color: var(--chip-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--custom--size--body-sm);
}

.tline b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.0625rem;
}

.tline p {
	margin: 6px 0 0;
	font-size: var(--wp--custom--size--body-md);
	line-height: 1.6;
	color: var(--ink2);
	max-width: 62ch;
}

/* ── Contact split ───────────────────────────────────────────────────────── */
.cgrid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 70px;
	align-items: start;
}

.cgrid-h2 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.cform {
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--card);
	box-shadow: 0 30px 70px -35px color-mix(in srgb, var(--wp--preset--color--dark) 30%, transparent);
	padding: 36px 38px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.cform label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--custom--size--body-sm);
	color: var(--ink);
}

.cform input,
.cform select,
.cform textarea {
	box-sizing: border-box;
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--btn);
	padding: 13px 15px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: var(--wp--custom--size--body-md);
	line-height: 1.4;
	background: var(--bg);
	color: var(--ink);
	width: 100%;
}

/* Normalize the native select so it reads as a sibling of the text inputs:
   same box, and a custom chevron in place of the platform arrow. */
.cform select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23494B4F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 12px 8px;
}

.cform input:focus,
.cform select:focus,
.cform textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -1px;
}

.cform textarea {
	min-height: 130px;
	resize: vertical;
}

.cform .row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.cform .btn {
	margin-top: 4px;
}

.cform .fnote {
	font-size: 0.78125rem;
	color: var(--ink3);
	margin: 0;
}

.cways {
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.cways li {
	display: flex;
	gap: 16px;
	padding: 20px 0;
	border-top: 1px solid var(--rule);
}

.cways .cic {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: var(--wp--custom--radius--btn);
	background: var(--chip-soft);
	color: var(--chip-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display);
}

.cways b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--custom--size--body-lg);
}

.cways p {
	margin: 4px 0 0;
	font-size: var(--wp--custom--size--body-sm);
	line-height: 1.55;
	color: var(--ink2);
}

.cways .cm {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78125rem;
	color: var(--alink);
}

@media ( max-width: 1020px ) {
	.cgrid {
		grid-template-columns: 1fr;
		gap: 44px;
	}
}

@media ( max-width: 680px ) {
	.tline li {
		grid-template-columns: 34px 1fr;
		gap: 14px;
		padding: 20px 0;
	}

	.tline .tt {
		display: none;
	}

	.cform {
		padding: 26px 22px;
	}

	.cform .row2 {
		display: flex;
		flex-direction: column;
	}

	.cgrid {
		gap: 36px;
	}
}

/* ── Blog query-loop cards (bgrid renders core post-template li as bcard) ── */
ul.bgrid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.bgrid > li {
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--card);
	display: flex;
	flex-direction: column;
	transition: transform 0.15s, box-shadow 0.15s;
	margin: 0;
}

.bgrid > li:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--wp--preset--color--dark) 30%, transparent);
}

.bgrid .btxt {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
}

.bgrid .bcard-t {
	font-size: 1.09375rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 12px 0 0;
}

.bgrid .wp-block-post-excerpt p {
	font-size: var(--wp--custom--size--body-xs);
	color: var(--ink2);
	line-height: 1.55;
	margin: 10px 0 0;
}

.bgrid .bmeta {
	margin-top: auto;
	padding-top: 18px;
}

.band .wp-block-query-pagination {
	margin-top: 40px;
	font-size: var(--wp--custom--size--body-sm);
	color: var(--ink2);
}

@media ( max-width: 1020px ) {
	ul.bgrid {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 680px ) {
	ul.bgrid {
		grid-template-columns: 1fr;
	}
}

/* Native menu active state + footer menu list normalization. */
.nav-links a.current {
	color: var(--ink);
}

.foot-grid ul li {
	margin: 0;
}

/* Article code blocks. */
.artbody pre,
.artbody .wp-block-code,
.artbody .wp-block-preformatted {
	background: var(--bg2);
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--btn-lg);
	padding: 16px 18px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	line-height: 1.7;
	overflow-x: auto;
	white-space: pre;
	margin: 18px 0 0;
}

.artbody code {
	font-family: var(--wp--preset--font-family--mono);
	background: var(--bg2);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.85em;
}

.artbody pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}


/* Blog card cover image (16:9, fills card top). */
.bgrid .bcard-img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Language switcher (hdl-language) in the site header. */
.site-nav .hdl-language-switcher {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--custom--size--body-md);
	font-weight: 500;
}

.site-nav .hdl-language-switcher li {
	margin: 0;
}

.site-nav .hdl-language-switcher li + li {
	border-left: 1px solid var(--rule);
	padding-left: 10px;
}

.site-nav .hdl-language-switcher a {
	color: var(--ink2);
}

.site-nav .hdl-language-switcher a:hover,
.site-nav .hdl-language-switcher li.current a {
	color: var(--ink);
}


/* ── Language switcher: single circular flag, far right ──────────────────── */
.site-nav .hdl-language-switcher {
	list-style: none;
	margin: 0 0 0 4px;
	padding: 0;
	display: flex;
}

.site-nav .hdl-language-switcher li {
	margin: 0;
}

.site-nav .hdl-language-switcher li.current {
	display: none;
}

.site-nav .hdl-language-switcher a {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--rule2);
	overflow: hidden;
	text-indent: -9999px;
	background-size: cover;
	background-position: center;
	transition: transform 0.15s, border-color 0.15s;
}

.site-nav .hdl-language-switcher a:hover {
	transform: translateY(-1px);
	border-color: var(--ink);
}

/* Flag artwork (image content, official flag colors, not theme tokens). */
.site-nav .hdl-lang-sv a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='10' fill='%23006AA7'/%3E%3Crect x='5' width='2' height='10' fill='%23FECC02'/%3E%3Crect y='4' width='16' height='2' fill='%23FECC02'/%3E%3C/svg%3E");
}

.site-nav .hdl-lang-en a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
}

@media ( max-width: 680px ) {
	.site-nav .hdl-language-switcher a {
		width: 16px;
		height: 16px;
	}
}


/* Official logo (celestio-logo-cloud-dark.svg, inlined), size only, no restyle. */
.brand-mark svg {
	width: auto;
	height: 28px;
	display: block;
}

@media ( max-width: 680px ) {
	.brand-mark svg {
		height: 24px;
	}
}

/* ── Celestio lockup (Orbital Interlock mark + Familjen Grotesk wordmark) ─── */
.brand-mark {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
}

.brand-glyph {
	width: auto;
	height: 26px;
	display: block;
	flex: 0 0 auto;
}

.wm-t {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--ink);
	white-space: nowrap;
}

@media ( max-width: 680px ) {
	.brand-glyph {
		height: 22px;
	}

	.wm-t {
		font-size: 1.125rem;
	}
}

/* ── Header: transparent at top, solid + blur once scrolled ───────────────── */
.site-nav {
	background: transparent;
	border-bottom-color: transparent;
	transition: background 0.2s, border-color 0.2s, backdrop-filter 0.2s;
}

.site-nav.scrolled {
	background: color-mix(in oklab, var(--bg) 86%, transparent);
	border-bottom: 1px solid var(--rule);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* ── Header: transparent until scroll, only over a dark hero ─────────────── */
/* Sticky wrapper is header.wp-block-template-part; its next sibling <main>
   holds the hero as its first child. The nav goes transparent only when that
   first section is a dark .hero/.phero and the nav is neither scrolled nor
   open, so light-header pages keep a solid, legible bar. Where :has() is
   unsupported the rule is dropped and the nav stays solid (safe default). */
header.wp-block-template-part:has( + main > .hero, + main > .phero ) .site-nav:not( .scrolled ):not( .open ) {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Pull the dark hero up under the floating nav so transparency reveals lava,
   not a dark strip. Compensating top padding lives on .hero / .phero below. */
main:has( > .hero:first-child ),
main:has( > .phero:first-child ) {
	margin-top: calc( -1 * var( --wp--custom--size--nav-h ) );
}

.hero {
	padding-top: 130px;
}

.phero {
	padding-top: 170px;
}

@media ( max-width: 680px ) {
	main:has( > .hero:first-child ),
	main:has( > .phero:first-child ) {
		margin-top: -64px;
	}

	.hero {
		padding-top: 120px;
	}

	.phero {
		padding-top: 128px;
	}
}

/* ── Lava-lamp hero background ───────────────────────────────────────────── */
/* Opaque Deep-Space plate + blurred violet blobs driven through a contrast
   filter so they merge into "goo", topped with film grain and comet streaks.
   Content rides above on .wrap (z-index: 2). */
.hero,
.phero {
	overflow: clip;
}

.lava {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #0e0b18;
	filter: contrast(1.35) saturate(1.1);
	pointer-events: none;
}

.blob {
	position: absolute;
	will-change: transform;
}

.grain {
	position: absolute;
	inset: -6%;
	z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 280px;
	opacity: 0.14;
	mix-blend-mode: overlay;
	pointer-events: none;
	animation: grainJitter 1.1s steps(4) infinite;
}

.lava .c {
	position: absolute;
	width: 150px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #b399ff, rgba(179, 153, 255, 0));
	opacity: 0;
}

.lava .c::before {
	content: "";
	position: absolute;
	left: -3px;
	top: -2.5px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #b399ff;
	box-shadow: 0 0 12px 2px rgba(179, 153, 255, 0.8);
}

.lava .c1 {
	top: 22%;
	left: 58%;
	transform: rotate(160deg);
	animation: comet 13s linear infinite 2s;
}

.lava .c2 {
	top: 60%;
	left: 70%;
	width: 110px;
	transform: rotate(150deg);
	animation: comet 17s linear infinite 9s;
}

.lava .c3 {
	top: 38%;
	left: 20%;
	width: 90px;
	transform: rotate(165deg);
	animation: comet 21s linear infinite 15s;
}

@keyframes lavaA {
	0% { transform: translate(0%, 26%) scale(1, 1.05); }
	33% { transform: translate(5%, -8%) scale(1.15, 0.95); }
	66% { transform: translate(-3%, -34%) scale(0.92, 1.18); }
	100% { transform: translate(0%, 26%) scale(1, 1.05); }
}

@keyframes lavaB {
	0% { transform: translate(0%, -30%) scale(1.1); }
	40% { transform: translate(-8%, 10%) scale(0.9, 1.2); }
	70% { transform: translate(6%, 32%) scale(1.25, 0.9); }
	100% { transform: translate(0%, -30%) scale(1.1); }
}

@keyframes lavaVio {
	0% { transform: translate(0%, 34%) scale(1); opacity: 0.55; }
	45% { transform: translate(-10%, -16%) scale(1.3, 1.1); opacity: 1; }
	75% { transform: translate(6%, -40%) scale(0.9, 1.25); opacity: 0.8; }
	100% { transform: translate(0%, 34%) scale(1); opacity: 0.55; }
}

@keyframes lavaDark {
	0% { transform: translate(0%, 0%) scale(1); }
	50% { transform: translate(-12%, 14%) scale(1.28); }
	100% { transform: translate(0%, 0%) scale(1); }
}

@keyframes grainJitter {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-1.5%, 1%); }
	50% { transform: translate(1%, -1.5%); }
	75% { transform: translate(-1%, 1.5%); }
	100% { transform: translate(1.5%, -1%); }
}

@keyframes comet {
	0%, 74% { opacity: 0; }
	75% { opacity: 0; transform: translate(0, 0) rotate(160deg); }
	76% { opacity: 0.9; }
	88% { opacity: 0.35; }
	92% { opacity: 0; transform: translate(-340px, 120px) rotate(160deg); }
	100% { opacity: 0; transform: translate(-340px, 120px) rotate(160deg); }
}

@media ( prefers-reduced-motion: reduce ) {
	.blob,
	.grain,
	.lava .c {
		animation: none !important;
	}

	.lava .c {
		display: none;
	}
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.e404 {
	min-height: 100vh;
	display: flex;
	align-items: center;
	text-align: center;
}

.nf-code {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.08em;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(120px, 20vw, 240px);
	line-height: 0.95;
	letter-spacing: -0.045em;
	color: var(--ink);
}

.nf-code svg {
	width: 0.72em;
	height: 0.72em;
	flex-shrink: 0;
}

.e404 .page-h1 {
	margin-top: 6px;
}

.e404 .lede {
	max-width: 46ch;
	margin-left: auto;
	margin-right: auto;
}

.e404 .hero-ctas {
	justify-content: center;
	margin-top: 38px;
}

.nf-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 38px;
}

.nf-links a {
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--chip);
	padding: 8px 14px;
	font-size: var(--wp--custom--size--body-sm);
	font-weight: 500;
	color: var(--ink2);
}

.nf-links a:hover {
	border-color: var(--ink);
	color: var(--ink);
}

@media ( max-width: 680px ) {
	.nf-code {
		font-size: clamp(88px, 30vw, 150px);
	}
}

/* ── Add-ons grid (managed-wordpress) ──────────────────────────────────────── */
.addons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.addon {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border: 1px solid var(--rule);
	border-radius: var(--wp--custom--radius--card);
	background: var(--card);
	padding: 26px;
}

.addon-eb {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro);
	letter-spacing: var(--wp--custom--letter-spacing--mono-wide);
	text-transform: uppercase;
	color: var(--afg);
}

.addon-t {
	font-size: var(--wp--custom--size--card-title);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 14px 0 0;
}

.addon-b {
	font-size: var(--wp--custom--size--body-sm);
	line-height: 1.55;
	color: var(--ink2);
	margin: 10px 0 22px;
	flex: 1;
}

.addon-cta {
	color: var(--alink);
	font-weight: 600;
	font-size: var(--wp--custom--size--body-sm);
}

.addon-cta::after {
	content: " →";
}

.addon-cta:hover {
	text-decoration: underline;
}

/* ── Console board (managed-wordpress) ─────────────────────────────────────── */
.cboard {
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--card);
	box-shadow: 0 40px 90px -45px color-mix(in srgb, var(--wp--preset--color--dark) 55%, transparent);
}

.cboard-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--rule);
}

.cbcard {
	background: var(--card);
	padding: 22px 22px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 128px;
}

.cbcard-l {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--custom--size--body-md);
}

.cbcard-m {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro-2);
	color: var(--ink3);
	line-height: 1.55;
}

.cbcard-a {
	margin-top: auto;
	align-self: flex-start;
	background: var(--chip-soft);
	color: var(--chip-ink);
	border-radius: var(--wp--custom--radius--pill);
	padding: 5px 11px;
	font-size: var(--wp--custom--size--micro);
	font-weight: 600;
}

/* ── Tools toggle grid (managed-wordpress marquee) ─────────────────────────── */
.tools {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	margin-top: 8px;
}

.tool {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	background: var(--card);
}

.tool.is-full {
	grid-column: 1 / -1;
}

.tool-ic {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--btn);
	background: var(--chip-soft);
	color: var(--chip-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

.tool-txt {
	flex: 1;
	min-width: 0;
}

.tool-t {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--custom--size--body-lg);
}

.tool-b {
	margin: 3px 0 0;
	font-size: var(--wp--custom--size--body-sm);
	color: var(--ink2);
	line-height: 1.5;
}

.tool-ctl {
	flex-shrink: 0;
}

.tg-toggle {
	display: inline-flex;
	align-items: center;
	width: 44px;
	height: 26px;
	border-radius: 999px;
	background: var(--rule2);
	padding: 3px;
}

.tg-toggle i {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ink2);
}

.tg-toggle.is-on {
	background: var(--wp--preset--color--accent);
	justify-content: flex-end;
}

.tg-toggle.is-on i {
	background: var(--wp--preset--color--card);
}

.tg-select,
.tg-input {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--rule2);
	border-radius: var(--wp--custom--radius--chip);
	padding: 7px 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--custom--size--micro-2);
	background: var(--bg2);
	white-space: nowrap;
}

.tg-select {
	color: var(--ink);
}

.tg-input {
	color: var(--afg);
}

.tg-select b {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--ink3);
}

.tg-btn {
	display: inline-flex;
	align-items: center;
	border-radius: var(--wp--custom--radius--chip);
	padding: 8px 16px;
	font-weight: 600;
	font-size: var(--wp--custom--size--note);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--card);
	white-space: nowrap;
}

@media ( max-width: 1020px ) {
	.addons {
		grid-template-columns: 1fr 1fr;
	}

	.cboard-grid {
		grid-template-columns: 1fr 1fr;
	}

	.tools {
		grid-template-columns: 1fr;
	}

	.tool.is-full {
		grid-column: auto;
	}
}

@media ( max-width: 680px ) {
	.addons,
	.cboard-grid {
		grid-template-columns: 1fr;
	}

	.tool {
		flex-wrap: wrap;
	}
}