/* DiluxOne — block styles on top of Astra. Colors come from Astra's global
 * palette (Customizer), so a palette change restyles everything:
 * 0 brand · 1 brand hover · 2 headings · 3 text · 4 background ·
 * 5 soft background · 6 dark band · 7 lines · 8 highlight. */

@font-face {
	font-family: "Red Hat Mono";
	src: url("../fonts/RedHatMono-Variable.ttf") format("truetype");
	font-weight: 300 700;
	font-display: swap;
}

:root {
	--dxo-radius: 14px;
	--dxo-shadow: 0 1px 2px rgb(11 26 23 / 6%), 0 12px 32px -12px rgb(11 26 23 / 18%);
	--dxo-mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; }

/* ---------- Eyebrow, lede, pill ---------- */
.is-style-dxo-eyebrow {
	font-family: var(--dxo-mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ast-global-color-0);
	margin-bottom: 0.5rem;
}
.is-style-dxo-lede {
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.6;
	max-width: 46rem;
	color: var(--ast-global-color-3);
}
.has-text-align-center.is-style-dxo-lede { margin-inline: auto; }
.is-style-dxo-pill {
	display: inline-block;
	font-family: var(--dxo-mono);
	font-size: 0.75rem;
	line-height: 1;
	padding: 0.45em 0.8em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ast-global-color-0) 12%, transparent);
	color: var(--ast-global-color-0);
	margin: 0 0 0.75rem;
}

/* ---------- Bands ---------- */
.is-style-dxo-band { background: var(--ast-global-color-5); }
.is-style-dxo-band-dark {
	background: var(--ast-global-color-6);
	color: #9AA1AD;
}
.is-style-dxo-band-dark :is(h1, h2, h3, h4),
.editor-styles-wrapper .is-style-dxo-band-dark :is(h1, h2, h3, h4) { color: #fff; }
.is-style-dxo-band-dark .is-style-dxo-eyebrow,
.is-style-dxo-band-dark .is-style-dxo-pill { color: #4D8BFF; }
.is-style-dxo-band-dark .is-style-dxo-pill { background: rgb(77 139 255 / 14%); }
.is-style-dxo-band-dark a:not(.wp-block-button__link),
.editor-styles-wrapper .is-style-dxo-band-dark a:not(.wp-block-button__link) { color: #4D8BFF; }
.is-style-dxo-band-dark .is-style-dxo-lede { color: #9AA1AD; }
:is(.entry-content, .editor-styles-wrapper) .is-style-dxo-band-dark .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: #fff; }
.entry-content .is-style-dxo-band-dark .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover { color: #0A0A0A; background: #fff; }

/* ---------- Cards ---------- */
.is-style-dxo-card {
	background: var(--ast-global-color-4);
	border: 1px solid var(--ast-global-color-7);
	border-radius: var(--dxo-radius);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
/* A card whose title is a link is clickable as a whole and lights up on hover. */
.is-style-dxo-card:has(h3 a) { position: relative; cursor: pointer; }
.is-style-dxo-card:has(h3 a):is(:hover, :focus-within) {
	border-color: color-mix(in srgb, var(--ast-global-color-0) 45%, var(--ast-global-color-7));
	box-shadow: var(--dxo-shadow);
	transform: translateY(-3px);
}
.entry-content .is-style-dxo-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.entry-content .is-style-dxo-card:hover h3 a { color: var(--ast-global-color-0); }
.is-style-dxo-card > :first-child { margin-top: 0; }
.is-style-dxo-card > :last-child { margin-bottom: 0; }
.is-style-dxo-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.entry-content .is-style-dxo-card h3 a { color: inherit; text-decoration: none; }
.entry-content .is-style-dxo-card h3 a:hover { color: var(--ast-global-color-0); }
.entry-content .is-style-dxo-card p a { text-decoration: none; font-weight: 500; }
.is-style-dxo-card img { border-radius: 10px; }
.is-style-dxo-band-dark .is-style-dxo-card {
	background: rgb(255 255 255 / 4%);
	border-color: rgb(255 255 255 / 10%);
}

/* ---------- Screenshots ---------- */
.is-style-dxo-shot img {
	border-radius: 12px;
	border: 1px solid var(--ast-global-color-7);
	box-shadow: var(--dxo-shadow);
	background: var(--ast-global-color-4);
}
.is-style-dxo-shot figcaption {
	font-size: 0.85rem;
	color: var(--ast-global-color-3);
	opacity: 0.8;
}

/* ---------- Check list ---------- */
.is-style-dxo-checks { list-style: none; padding-left: 0; }
.is-style-dxo-checks li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; }
.is-style-dxo-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--ast-global-color-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ---------- Header menu: icon tiles, descriptions and the Products panel ---------- */
.main-header-menu .sub-menu .menu-link:has(.dxo-menu-text) { display: flex; align-items: flex-start; gap: 12px; }
.dxo-menu-text { display: grid; gap: 2px; min-width: 0; }
.dxo-menu-title { font-weight: 600; line-height: 1.3; }
.dxo-menu-desc {
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ast-global-color-8);
}
.dxo-menu-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--ast-global-color-0) 10%, transparent);
	color: var(--ast-global-color-0);
	transition: background-color 0.2s, color 0.2s;
}
.menu-link:is(:hover, :focus-visible) > .dxo-menu-icon { background: var(--ast-global-color-0); color: #fff; }

@media (min-width: 922px) {
	.ast-desktop .main-header-menu .sub-menu {
		width: 320px;
		padding: 8px;
		border: 1px solid var(--ast-global-color-7);
		border-radius: 16px;
		background: var(--ast-global-color-4);
		box-shadow: 0 2px 4px rgb(10 10 10 / 4%), 0 24px 48px -16px rgb(10 10 10 / 22%);
	}
	.ast-desktop .main-header-menu .sub-menu .menu-link { padding: 12px; border-radius: 10px; }
	.ast-desktop .main-header-menu .sub-menu .menu-link:is(:hover, :focus-visible) { background: var(--ast-global-color-5); }
	.ast-desktop .main-header-menu .sub-menu .menu-item:hover > .menu-link .dxo-menu-title { color: var(--ast-global-color-0); }
	/* Panels slide in a few pixels as they fade. */
	@media (prefers-reduced-motion: no-preference) {
		.ast-desktop .main-header-menu > .menu-item > .sub-menu { transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; transform: translateY(6px); }
		.ast-desktop .main-header-menu > .menu-item:is(:hover, .focus) > .sub-menu { transform: none; }
	}

	/* Products: the three families and the highlighted card, centered under the bar. */
	.ast-desktop .main-header-menu:has(> .dxo-mega),
	.ast-desktop .main-header-menu > .dxo-mega { position: static; }
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.85fr);
		align-items: start;
		gap: 12px;
		width: min(1140px, calc(100vw - 32px));
		padding: 16px;
	}
	/* The pill ends above the bar's edge, where the panel starts: an invisible
	 * bridge over that gap keeps the panel open on the way down. */
	.ast-desktop .ast-builder-menu-1 .main-header-menu > .dxo-mega > .sub-menu::before { height: 28px; }
	.ast-desktop .main-header-menu > .dxo-mega:is(:hover, .focus) > .sub-menu {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}
	@media (prefers-reduced-motion: no-preference) {
		.ast-desktop .main-header-menu > .dxo-mega > .sub-menu { transform: translate(-50%, 6px); }
	}
	/* A family: its heading, then its products. */
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .menu-item:not(.dxo-mega-feature) > .menu-link {
		padding-bottom: 14px;
		margin-bottom: 6px;
		border-bottom: 1px solid var(--ast-global-color-7);
		border-radius: 10px 10px 0 0;
	}
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .menu-item > .menu-link .dxo-menu-title {
		font-family: var(--dxo-mono);
		font-size: 0.75rem;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ast-global-color-0);
	}
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .menu-item > .menu-link .dxo-menu-icon {
		background: var(--ast-global-color-2);
		color: var(--ast-global-color-4);
	}
	/* Inside the panel every product is listed, not a flyout. */
	.ast-desktop .main-header-menu > .dxo-mega .sub-menu .sub-menu {
		position: static;
		width: auto;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
	}
	.ast-desktop .main-header-menu > .dxo-mega .sub-menu .sub-menu::before { display: none; }
	/* Astra draws the flyout arrows from #ast-desktop-header; same reach here. */
	#ast-desktop-header .main-header-menu > .dxo-mega .sub-menu .menu-item.menu-item-has-children > .menu-link :is(.ast-header-navigation-arrow, .icon-arrow),
	.ast-desktop .main-header-menu > .dxo-mega .sub-menu .ast-menu-toggle { display: none; }

	/* The highlighted card: the dark block of the mark, the blue module in its corner. */
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .dxo-mega-feature { align-self: stretch; display: flex; flex-direction: column; }
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .dxo-mega-feature > .menu-link { flex: 1; }
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .dxo-mega-feature > .menu-link {
		position: relative;
		padding: 24px 20px;
		border: 1px solid var(--ast-global-color-7);
		border-radius: 12px;
		background: var(--ast-global-color-6);
		overflow: hidden;
		flex-direction: column;
		justify-content: flex-end;
	}
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .dxo-mega-feature > .menu-link::before {
		content: "";
		position: absolute;
		top: 20px;
		right: 20px;
		width: 44px;
		height: 44px;
		border-radius: 10px 14px 10px 10px;
		background: var(--ast-global-color-0);
	}
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .dxo-mega-feature > .menu-link:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--ast-global-color-6) 88%, var(--ast-global-color-0)); }
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .dxo-mega-feature > .menu-link .dxo-menu-text { gap: 8px; }
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .dxo-mega-feature > .menu-link .dxo-menu-title {
		font-family: inherit;
		font-size: 1.125rem;
		font-weight: 700;
		letter-spacing: -0.01em;
		text-transform: none;
		color: #fff;
	}
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .dxo-mega-feature:hover > .menu-link .dxo-menu-title { color: #fff; }
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .dxo-mega-feature > .menu-link .dxo-menu-desc { font-size: 0.875rem; color: #9AA1AD; }
	.ast-desktop .main-header-menu > .dxo-mega > .sub-menu > .dxo-mega-feature > .menu-link .dxo-menu-more { color: #4D8BFF; font-size: 1.25rem; line-height: 1; }
	@media (prefers-reduced-motion: no-preference) {
		.dxo-menu-more { transition: transform 0.2s; }
		.dxo-mega-feature > .menu-link:hover .dxo-menu-more { transform: translateX(4px); }
	}
}
/* Mobile menu: icon and title on one line, no descriptions; the icon replaces
 * Astra's bullet arrow (same selector reach as Astra's rule). */
.ast-header-break-point .main-header-menu .sub-menu .menu-link:has(.dxo-menu-text) { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
/* Pricing is already in the menu; the card is for the desktop panel. */
.ast-header-break-point .main-header-menu .dxo-mega-feature { display: none; }
.ast-header-break-point .main-navigation ul .sub-menu .menu-item .menu-link:has(.dxo-menu-icon) > .icon-arrow:first-of-type { display: none; }
.ast-header-break-point .dxo-menu-desc { display: none; }
.ast-header-break-point .dxo-menu-icon { width: 30px; height: 30px; border-radius: 8px; }
.ast-header-break-point .dxo-menu-icon svg { width: 18px; height: 18px; }
.dxo-menu-more { display: none; }
.ast-desktop .dxo-menu-more { display: block; }

/* ---------- Header preferences: language and color scheme ---------- */
.dxo-prefs { position: relative; }
.dxo-prefs summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border: 1px solid var(--ast-global-color-7);
	border-radius: 999px;
	color: var(--ast-global-color-2);
	font-family: var(--dxo-mono);
	font-size: 0.75rem;
	line-height: 1;
	cursor: pointer;
	list-style: none;
}
.dxo-prefs summary::-webkit-details-marker { display: none; }
.dxo-prefs summary:hover,
.dxo-prefs[open] summary { border-color: var(--ast-global-color-0); color: var(--ast-global-color-0); }
.dxo-prefs summary:focus-visible { outline: 2px solid var(--ast-global-color-0); outline-offset: 2px; }
.dxo-prefs__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 100000;
	display: grid;
	gap: 12px;
	min-width: 230px;
	padding: 14px 16px;
	border: 1px solid var(--ast-global-color-7);
	border-radius: 12px;
	background: var(--ast-global-color-4);
	box-shadow: var(--dxo-shadow);
}
.dxo-prefs__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dxo-prefs__row > span { font-size: 0.875rem; color: var(--ast-global-color-8); }
/* In the mobile menu the panel opens in place, below the button. */
.ast-mobile-header-content .dxo-prefs__panel { position: static; margin-top: 10px; box-shadow: none; }

.dxo-lang {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--ast-global-color-7);
	border-radius: 999px;
	font-family: var(--dxo-mono);
	font-size: 0.75rem;
	line-height: 1;
}
.dxo-lang a {
	padding: 6px 9px;
	border-radius: 999px;
	color: var(--ast-global-color-8);
	text-decoration: none;
}
.dxo-lang a:hover { color: var(--ast-global-color-2); }
.dxo-lang a[aria-current="true"] { background: var(--ast-global-color-2); color: var(--ast-global-color-4); }
.dxo-lang a:focus-visible { outline: 2px solid var(--ast-global-color-0); outline-offset: 2px; }

/* ---------- Header bar: pill links, a solid Sign in, floating once scrolled ---------- */
.site-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 999; }
.site-header .ast-primary-header-bar { border-bottom: 1px solid transparent; }
@media (min-width: 922px) {
	/* Links are pills centered in the bar; the item keeps the bar's full height
	 * so its dropdown still starts right under it. Astra sets the item's line
	 * height to the bar's height, from a selector this one matches. */
	.ast-desktop .site-header .ast-primary-header-bar .ast-builder-menu-1 .main-navigation .main-header-menu > .menu-item {
		display: flex;
		align-items: center;
		align-self: stretch;
		line-height: 1;
	}
	/* The bar shows through the menu: Astra paints the list with the submenus' background. */
	.ast-desktop .ast-builder-menu-1 .main-header-menu { gap: 4px; align-items: stretch; background: none; }
	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
		padding: 10px 16px;
		border-radius: 999px;
		letter-spacing: -0.01em;
		transition: background-color 0.15s, color 0.15s;
	}
	.ast-builder-menu-1 .main-header-menu > .menu-item:is(:hover, .focus) > .menu-link,
	.ast-builder-menu-1 .main-header-menu > :is(.current-menu-item, .current-menu-ancestor) > .menu-link {
		background: color-mix(in srgb, var(--ast-global-color-2) 8%, transparent);
	}
	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link .ast-arrow-svg { transition: transform 0.2s; }
	.ast-builder-menu-1 .main-header-menu > .menu-item:is(:hover, .focus) > .menu-link .ast-arrow-svg { transform: rotate(180deg); }
	/* Users+'s entry: Sign in as the bar's one solid button. */
	.ast-builder-menu-1 .main-header-menu > .diluxone-users-menu--sign-in { margin-left: 10px; }
	.ast-builder-menu-1 .main-header-menu > .diluxone-users-menu--sign-in > .menu-link,
	.ast-builder-menu-1 .main-header-menu > .diluxone-users-menu--sign-in:hover > .menu-link {
		padding-inline: 18px;
		background: var(--ast-global-color-2);
		color: var(--ast-global-color-4);
	}
	.ast-builder-menu-1 .main-header-menu > .diluxone-users-menu--sign-in:hover > .menu-link { background: var(--ast-global-color-0); color: #fff; }

	/* Scrolled: the bar lifts off the edges and floats as a rounded capsule. */
	.site-header .ast-primary-header-bar {
		transition: margin 0.3s ease, border-radius 0.3s ease, background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
	}
	.site-header .site-primary-header-wrap { transition: min-height 0.3s ease; }
	.dxo-scrolled .site-header .ast-primary-header-bar {
		margin: 10px auto 0;
		max-width: min(1240px, calc(100% - 24px));
		border: 1px solid var(--ast-global-color-7);
		border-radius: 18px;
		background: color-mix(in srgb, var(--ast-global-color-4) 92%, transparent);
		backdrop-filter: saturate(1.8) blur(20px);
		box-shadow: 0 12px 32px -16px rgb(10 10 10 / 35%);
	}
	.dxo-scrolled .site-header .site-primary-header-wrap { min-height: 60px; padding-inline: 20px; }
	.dxo-scrolled .site-header .custom-logo { max-width: 128px; }
}
@media (max-width: 921px) {
	.dxo-scrolled .site-header .ast-primary-header-bar {
		background: color-mix(in srgb, var(--ast-global-color-4) 86%, transparent);
		backdrop-filter: saturate(1.6) blur(12px);
		border-bottom-color: var(--ast-global-color-7);
	}
}
@media (prefers-reduced-motion: reduce) {
	.site-header :is(.ast-primary-header-bar, .site-primary-header-wrap, .menu-link, .ast-arrow-svg) { transition: none; }
}

/* ---------- Scroll-in animations (only with JS, never for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.dxo-js .dxo-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
	.dxo-js .dxo-reveal.is-visible { opacity: 1; transform: none; }
}

/* ---------- Footer on black ---------- */
.site-footer { color: #9AA1AD; }
.site-footer :is(h2, h3, .widget-title) { color: #fff; font-size: 1rem; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #4D8BFF; }

/* ---------- Home slider (DiluxOne Slider) ---------- */
.wp-block-diluxone-slider { --dxs-accent: var(--ast-global-color-0); --dxs-control-fg: var(--ast-global-color-2); }
/* Small screens: every slide's text sits over its image on a dark gradient
 * (the plugin turns it white); the lede and the outline button follow. */
/* On phones the slider fills the screen under the header (64px, Astra's
 * mobile header height), so its controls are in view without scrolling. */
@media (max-width: 599px) {
	.entry-content .wp-block-diluxone-slider.dxs--h-fixed .wp-block-diluxone-slide {
		min-height: calc(100svh - 64px - var(--wp-admin--admin-bar--height, 0px));
	}
}
/* Short phones: a smaller lede keeps every slide within that height. */
@media (max-width: 599px) and (max-height: 760px) {
	.dxo-slide .is-style-dxo-lede { font-size: 1rem; line-height: 1.5; }
}
@media (max-width: 599px) {
	.dxo-slide.dxs-text-sm-light .is-style-dxo-eyebrow { color: #4D8BFF; }
	.dxo-slide.dxs-text-sm-light .is-style-dxo-lede { color: #C9CED6; }
	.entry-content .dxo-slide.dxs-text-sm-light .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: #fff; }
}

/* ---------- Article diagrams (blog) ----------
 * The figures of the "How we build software" post, drawn with HTML and the
 * palette: the black block is what a person decides, the blue module what
 * runs on its own. Every color is a palette slot, so the dark scheme
 * repaints them. */
.dxo-fig { --ink: var(--ast-global-color-2); --muted: var(--ast-global-color-8); --line: var(--ast-global-color-7); --tint: var(--ast-global-color-5); --surface: var(--ast-global-color-4); --blue: var(--ast-global-color-0); margin: 2rem 0; font-size: 0.95rem; line-height: 1.5; }
.dxo-fig * { box-sizing: border-box; min-width: 0; }
.dxo-fig h4 { margin: 0; font-size: 1.02rem; line-height: 1.25; color: var(--ink); }
.dxo-fig p { margin: 0; color: var(--muted); }
.dxo-fig .k { font-family: var(--dxo-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.dxo-fig .box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 6px; align-content: start; }
.dxo-fig .block { background: var(--ink); border-color: var(--ink); }
.dxo-fig .block :is(h4, p, .k) { color: var(--surface); }
.dxo-fig .block p, .dxo-fig .block .k { opacity: 0.75; }
.dxo-fig .blue { border: 1.5px solid var(--blue); }
.dxo-fig .soft { background: var(--tint); }
.dxo-fig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
.dxo-fig-caption { margin-top: 10px; font-size: 0.85rem; color: var(--muted); text-align: center; }

/* Tally */
.dxo-fig-tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.dxo-fig-tally > div { background: var(--surface); padding: 18px; display: grid; gap: 2px; }
.dxo-fig-tally b { font-family: "Red Hat Display", sans-serif; font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.dxo-fig-tally .auto b { color: var(--blue); }
.dxo-fig-tally span { color: var(--muted); font-size: 0.9rem; }

/* Chips */
.dxo-fig .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dxo-fig .chip { font-family: var(--dxo-mono); font-size: 0.7rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.dxo-fig .chip.det { border-color: var(--blue); color: var(--blue); }
.dxo-fig .chip.ai { border: 1px dashed var(--blue); color: var(--blue); }
.dxo-fig .chip.hum { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* Gates rail */
.dxo-fig-rail { list-style: none; margin: 0; padding: 0; display: grid; }
.dxo-fig-rail li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; position: relative; padding-bottom: 14px; margin: 0; }
.dxo-fig-rail li::before { content: ""; position: absolute; left: 25px; top: 44px; bottom: 0; width: 2px; background: var(--line); }
.dxo-fig-rail li:last-child::before { display: none; }
.dxo-fig-rail .dot { width: 52px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-family: var(--dxo-mono); font-weight: 600; background: var(--surface); border: 1.5px solid var(--blue); color: var(--blue); position: relative; z-index: 1; }
.dxo-fig-rail .human .dot { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.dxo-fig-rail .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.dxo-fig-rail .fail { color: var(--ink); font-size: 0.88rem; }
.dxo-fig-rail .fail span { font-family: var(--dxo-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-right: 6px; }

/* Chain: issue → pull request → receipt */
.dxo-fig-chain { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.dxo-fig-chain .arrow { align-self: center; color: var(--muted); font-family: var(--dxo-mono); font-size: 1.3rem; }
.dxo-fig-chain ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.9rem; }
.dxo-fig-chain .sub { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; font-size: 0.88rem; }
.dxo-fig-chain .sub .hash { font-family: var(--dxo-mono); font-size: 0.72rem; color: var(--blue); }
.dxo-fig-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.dxo-fig-compare > div { background: var(--surface); padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.dxo-fig-compare b { font-family: "Red Hat Display", sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.dxo-fig-compare .rdd { background: var(--ink); }
.dxo-fig-compare .rdd :is(b, p) { color: var(--surface); }

/* Hash demo */
.dxo-fig-hash { background: var(--tint); border-radius: 14px; padding: 18px; display: grid; gap: 12px; }
.dxo-fig-hash .row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.dxo-fig-hash .text, .dxo-fig-hash .digest { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--ink); }
.dxo-fig-hash .digest { font-family: var(--dxo-mono); font-size: 0.78rem; word-break: break-all; }
.dxo-fig-hash .ok { border-color: var(--blue); }
.dxo-fig-hash .bad { border: 2px solid var(--ink); }
.dxo-fig-hash .diff { background: var(--ink); color: var(--surface); padding: 0 0.2em; border-radius: 3px; }
.dxo-fig-hash .lbl { display: block; font-family: var(--dxo-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.dxo-fig-hash .arrow { color: var(--muted); font-family: var(--dxo-mono); }

/* Golden rule and notes */
.dxo-fig-note { background: var(--ink); color: var(--surface); border-radius: 14px; padding: 16px 20px; margin-top: 12px; }
.dxo-fig-note b { font-family: "Red Hat Display", sans-serif; }

/* Numbered layers */
.dxo-fig-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: layer; }
.dxo-fig-layers li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0; counter-increment: layer; }
.dxo-fig-layers li::before { content: counter(layer); font-family: var(--dxo-mono); font-weight: 600; color: var(--blue); }

/* Resources */
.dxo-fig a.box { text-decoration: none; transition: border-color 0.15s; }
.dxo-fig a.box:hover { border-color: var(--blue); }
.dxo-fig .url { font-family: var(--dxo-mono); font-size: 0.76rem; color: var(--blue); overflow-wrap: anywhere; }
.dxo-fig a.block .url { color: var(--blue); opacity: 1; }
.dxo-fig .dashed { border-style: dashed; }

@media (max-width: 700px) {
	.dxo-fig-chain, .dxo-fig-hash .row, .dxo-fig-compare { grid-template-columns: minmax(0, 1fr); }
	.dxo-fig-chain .arrow, .dxo-fig-hash .arrow { transform: rotate(90deg); justify-self: center; }
}