/**
 * Interface preview illustrations.
 *
 * The figure is a size container; .dui sets its font size from the container
 * width and every measurement below is in em, so an illustration scales as a
 * single piece from phone to desktop.
 */

.wp-block-disputeur-ui-preview {
	container-type: inline-size;
	flex-shrink: 0; /* inside flex columns, never squash the illustration */
	margin: 0;
	--dui-ink: #0B1035;
	--dui-text: #4B5170;
	--dui-muted: #8B90A7;
	--dui-line: #ECEDF5;
	--dui-blue: #3048FC;
	--dui-blue-soft: #EEF0FF;
	--dui-green: #12B76A;
	--dui-green-soft: #E7F8EF;
	--dui-amber: #F59E0B;
	--dui-amber-soft: #FEF3DC;
	--dui-red: #EF4444;
	--dui-red-soft: #FDECEC;
	--dui-teal: #14B8A6;
}

.dui {
	position: relative;
	color: var(--dui-ink);
	font-size: clamp(6.5px, 2cqi, 13.5px);
	line-height: 1.35;
	text-align: left;
}

.dui svg {
	display: block;
}

.dui p,
.wp-block-disputeur-ui-preview .dui li {
	color: var(--dui-ink);
}

/* Compact panels read larger: they are shown in narrow columns. */
.dui:is(.dui--recent-alerts, .dui--dispute-trends, .dui--integration-logos, .dui--notification, .dui--alert-skeleton, .dui--payment-identifiers, .dui--recent-disputes) {
	font-size: clamp(7px, 3.3cqi, 14px);
}

.dui--breakdowns {
	font-size: clamp(7px, 2.2cqi, 15px);
}

.dui p,
.dui ul,
.dui ol,
.dui dl,
.dui table {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dui .dui-muted {
	color: var(--dui-muted);
	font-size: 0.85em;
}

/* Tilted hero screenshots. */
.wp-block-disputeur-ui-preview.is-tilted {
	perspective: 1600px;
}

.wp-block-disputeur-ui-preview.is-tilted .dui {
	transform: rotateY(-9deg) rotateX(3deg) rotateZ(-0.6deg);
	transform-origin: left center;
}

/* ------------------------------------------------------------------ chrome */

.dui-window {
	display: flex;
	overflow: hidden;
	border-radius: 1.1em;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(15, 23, 72, 0.06), 0 2em 4em -1.5em rgba(10, 16, 60, 0.35);
}

.dui-side {
	flex: 0 0 12.5em;
	padding: 1.3em 0.9em;
	border-right: 1px solid var(--dui-line);
}

.dui-logo {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin: 0 0 1.4em 0.4em;
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.dui-logo i,
.dui-wordlogo i,
.dui-orbit__core i,
.dui-paycard__brand i {
	color: var(--dui-blue);
	font-style: normal;
}

.dui-logo__mark {
	display: inline-grid;
	place-items: center;
	width: 1.3em;
	height: 1.3em;
	border-radius: 0.3em;
	background: var(--dui-blue);
	color: #fff;
	font-size: 0.8em;
	font-weight: 800;
}

.dui-side li {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 0.25em;
	padding: 0.6em 0.75em;
	border-radius: 0.6em;
	color: var(--dui-text);
	font-size: 0.95em;
}

.dui-side li svg {
	width: 1.15em;
	height: 1.15em;
	color: var(--dui-muted);
}

.dui-side li.is-active {
	background: var(--dui-blue-soft);
	color: var(--dui-blue);
	font-weight: 600;
}

.dui-side li.is-active svg {
	color: var(--dui-blue);
}

.dui-main {
	flex: 1;
	min-width: 0;
	padding: 1.2em 1.4em 1.4em;
}

.dui-top,
.dui-row,
.dui-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8em;
	margin-bottom: 1.1em;
}

.dui-top__icons {
	display: flex;
	gap: 0.9em;
	color: var(--dui-muted);
}

.dui-top__icons svg,
.dui-close svg {
	width: 1.2em;
	height: 1.2em;
}

.dui-close {
	color: var(--dui-blue);
}

.dui-search {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.5em;
	max-width: 22em;
	padding: 0.55em 0.9em;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--dui-line);
	color: var(--dui-muted);
	font-size: 0.9em;
}

.dui-search svg {
	width: 1em;
	height: 1em;
}

.dui-h {
	color: var(--dui-ink);
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.dui-h.is-lg {
	font-size: 1.4em;
}

.dui .dui-h.is-blue {
	color: var(--dui-blue);
}

.dui-range {
	display: flex;
	align-items: center;
	gap: 0.3em;
	color: var(--dui-blue);
	font-size: 0.85em;
}

.dui-range svg {
	width: 1em;
	height: 1em;
}

.dui-select {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 0.8em;
	border-radius: 0.55em;
	box-shadow: inset 0 0 0 1px var(--dui-line);
	color: var(--dui-text);
	font-size: 0.85em;
	white-space: nowrap;
}

.dui-select svg {
	width: 1em;
	height: 1em;
}

.dui-spacer {
	flex: 1;
}

.dui-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--dui-line);
	color: var(--dui-text);
}

.dui-iconbtn svg {
	width: 1.05em;
	height: 1.05em;
}

.dui-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.6em 1.1em;
	border-radius: 999px;
	background: var(--dui-blue);
	color: #fff;
	font-size: 0.85em;
	font-weight: 600;
	white-space: nowrap;
}

.dui-btn.is-ghost {
	background: #fff;
	box-shadow: inset 0 0 0 1px #C9CEFF;
	color: var(--dui-blue);
}

.dui-btn svg {
	width: 1.05em;
	height: 1.05em;
}

.dui .dui-link {
	color: var(--dui-blue);
	font-size: 0.85em;
	font-weight: 600;
	white-space: nowrap;
}

.dui-link.is-lg {
	margin-top: 0.6em;
	font-size: 1.05em;
}

/* ------------------------------------------------------------------- KPIs */

.dui-kpis {
	display: grid;
	gap: 1.1em;
	margin-bottom: 1.3em;
}

.dui-kpis.is-2 {
	grid-template-columns: 1fr 1fr;
}

.dui-kpis.is-3 {
	grid-template-columns: repeat(3, 1fr);
}

.dui-kpis.is-inline {
	margin: 1.1em 0 0;
}

.dui-kpis.is-inline .dui-kpi.is-ring .dui-ring,
.dui-kpis.is-inline .dui-kpi b {
	position: static;
}

.dui-kpi {
	position: relative;
	min-width: 0;
}

.dui-kpi > span:not(.dui-ring):not(.dui-kpi__icon) {
	display: block;
	margin-bottom: 0.3em;
	color: var(--dui-text);
	font-size: 0.8em;
	font-weight: 600;
}

.dui-kpi b {
	display: block;
	color: var(--dui-ink);
	font-size: 2.05em;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	white-space: nowrap;
}

.dui-kpi b small {
	margin-left: 0.25em;
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0;
}

.dui-kpi .is-up,
.dui-kpi .is-green {
	color: var(--dui-green);
}

.dui-kpi .is-down {
	color: var(--dui-red);
}

.dui-kpi .is-blue {
	color: var(--dui-blue);
}

.dui-kpi .is-pink {
	color: #E0399B;
}

.dui-kpi.is-ring .dui-ring {
	position: absolute;
	top: 0.4em;
	right: 0;
}

.dui-kpis.is-tiles .dui-kpi {
	padding: 1em;
	border-radius: 0.9em;
	box-shadow: inset 0 0 0 1px var(--dui-line), 0 0.4em 1.2em -0.6em rgba(10, 16, 60, 0.18);
}

.dui-kpi.has-icon {
	padding-left: 3.6em !important;
}

.dui-kpi__icon {
	position: absolute;
	top: 50%;
	left: 1em;
	display: grid;
	place-items: center;
	width: 2em;
	height: 2em;
	margin-top: -1em;
	border-radius: 50%;
	background: var(--dui-blue-soft);
	color: var(--dui-blue);
}

.dui-kpi__icon.is-teal {
	background: #E3F8F5;
	color: var(--dui-teal);
}

.dui-kpi__icon svg {
	width: 1.1em;
	height: 1.1em;
}

.dui-kpis.is-tiles .dui-kpi b {
	font-size: 1.65em;
}

.dui-ring {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 3.6em;
	height: 3.6em;
}

.dui-ring svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.dui-ring circle {
	fill: none;
	stroke-width: 3.6;
}

.dui-ring__track {
	stroke: #E4F6EC;
}

.dui-ring__value {
	stroke: #19C37D;
	stroke-linecap: round;
}

.dui-ring b {
	position: relative;
	color: var(--dui-green) !important;
	font-size: 0.75em !important;
}

/* ----------------------------------------------------------------- charts */

.dui-line,
.dui-area {
	position: relative;
	padding: 0 0 1.7em 2.4em;
}

.dui-line svg,
.dui-area svg {
	width: 100%;
	height: 10.5em;
	overflow: visible;
}

.dui-line__axis,
.dui-area__axis,
.dui-bars__axis {
	position: absolute;
	top: 0;
	bottom: 1.7em;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--dui-muted);
	font-size: 0.72em;
}

.dui-line__x,
.dui-area__x {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5em;
	color: var(--dui-muted);
	font-size: 0.72em;
}

.dui-tip {
	display: inline-block;
	padding: 0.45em 0.7em;
	border-radius: 0.5em;
	background: #fff;
	box-shadow: 0 0 0 1px var(--dui-line), 0 0.4em 1em -0.3em rgba(10, 16, 60, 0.25);
	color: var(--dui-ink);
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.dui-tip.is-floating {
	position: absolute;
}

.dui-bars {
	position: relative;
	padding-left: 2.4em;
}

.dui-bars__plot {
	display: flex;
	align-items: flex-end;
	gap: 1.1em;
	height: 10em;
	padding-bottom: 1.7em;
	border-bottom: 1px solid var(--dui-line);
	background: repeating-linear-gradient(to top, transparent 0, transparent calc(33.3% - 1px), var(--dui-line) calc(33.3% - 1px), var(--dui-line) 33.3%);
	background-position: 0 -1.7em;
}

.dui-bars__col {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}

.dui-bars__bar {
	display: block;
	width: 62%;
	min-height: 0.3em;
	border-radius: 0.3em 0.3em 0 0;
	background: linear-gradient(180deg, #3048FC 0%, #6F80FF 100%);
}

.dui-bars__col em {
	position: absolute;
	bottom: -1.6em;
	color: var(--dui-muted);
	font-size: 0.72em;
	font-style: normal;
}

.dui-bars__col .dui-tip {
	position: absolute;
	bottom: calc(100% - 3em);
	z-index: 1;
	background: #EDEFFF;
	box-shadow: none;
	color: var(--dui-ink);
}

.dui-area__grid line {
	stroke: var(--dui-line);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.dui-area svg {
	height: 13em;
}

.dui-legend {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6em 1.6em;
	margin-top: 0.4em !important;
	color: var(--dui-text);
	font-size: 0.85em;
}

.dui-legend li,
.dui-donut li {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.dui-legend i,
.dui-donut i {
	width: 0.85em;
	height: 0.85em;
	border-radius: 0.2em;
}

.dui-donut {
	display: grid;
	grid-template-columns: 11em 1fr;
	align-items: center;
	gap: 2.5em;
	padding: 0.4em 1em 0.4em 2em;
}

.dui-donut svg {
	width: 11em;
	height: 11em;
	transform: rotate(-90deg);
}

.dui-donut li {
	justify-content: space-between;
	margin-bottom: 0.7em;
	color: var(--dui-text);
	font-size: 0.9em;
}

.dui-donut li i {
	border-radius: 50%;
}

.dui-donut li b {
	margin-left: auto;
	color: var(--dui-ink);
	font-weight: 600;
}

/* ----------------------------------------------------------------- tables */

.dui-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85em;
}

.dui-table th {
	padding: 0 0.6em 0.7em 0;
	color: var(--dui-muted);
	font-size: 0.9em;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
}

.dui-table td {
	padding: 0.7em 0.6em 0.7em 0;
	border-top: 1px solid var(--dui-line);
	color: var(--dui-ink);
	white-space: nowrap;
}

.dui-table td.is-muted {
	color: var(--dui-muted);
}

.dui-table td.is-strong {
	font-weight: 700;
}

.dui-table td.is-id {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--dui-blue);
	font-weight: 600;
}

.dui-table.is-compact {
	font-size: 0.78em;
}

.dui-table.is-compact td {
	padding-block: 0.6em;
}

.dui-table.is-striped tbody tr:nth-child(odd) td {
	background: #F7F8FE;
}

.dui-table.is-striped td {
	padding-left: 0.6em;
	border-top: 0;
}

.dui-table.is-striped th {
	padding-left: 0.6em;
}

.dui-brand {
	display: block;
	width: auto;
	height: 1.25em;
	max-width: 4.2em;
	object-fit: contain;
}

.dui-brand.is-chip {
	display: inline-block;
	height: 1.25em;
	margin-left: 0.3em;
	vertical-align: middle;
}

.dui-brand.is-boxed {
	box-sizing: content-box;
	height: 1em;
	padding: 0.2em 0.35em;
	border-radius: 0.25em;
	background: #fff;
}

.dui-check {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border-radius: 0.25em;
	background: var(--dui-blue);
	box-shadow: inset 0 0 0 0.22em #fff, 0 0 0 1px var(--dui-blue);
}

.dui-badge {
	display: inline-block;
	padding: 0.25em 0.65em;
	border-radius: 0.4em;
	font-size: 0.82em;
	font-weight: 600;
	white-space: nowrap;
}

.dui-badge.is-success { background: var(--dui-green-soft); color: var(--dui-green); }
.dui-badge.is-warning { background: var(--dui-amber-soft); color: #C27803; }
.dui-badge.is-danger { background: var(--dui-red-soft); color: var(--dui-red); }
.dui-badge.is-info { background: var(--dui-blue-soft); color: var(--dui-blue); }

.dui-badge.is-outline {
	background: #fff;
	box-shadow: inset 0 0 0 1.5px currentColor;
	border-radius: 0.5em;
}

.dui-badge.is-solid.is-success { background: #22C55E; color: #fff; }
.dui-badge.is-solid.is-warning { background: #FBBF24; color: #fff; }
.dui-badge.is-solid.is-info { background: var(--dui-blue); color: #fff; }

.dui-badge.is-soft.is-info {
	background: #E0E4FF;
}

.dui-tabs {
	display: flex !important;
	gap: 1.6em;
	margin-bottom: 0.9em !important;
	font-size: 0.85em;
}

.dui-tabs span {
	padding-bottom: 0.4em;
	color: var(--dui-muted);
}

.dui-tabs .is-active {
	box-shadow: inset 0 -2px 0 var(--dui-blue);
	color: var(--dui-blue);
	font-weight: 600;
}

/* ------------------------------------------------------------------ cards */

.dui-stack {
	display: grid;
	gap: 1em;
}

.dui-split {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 1em;
}

.dui-card,
.dui-panel,
.dui-toast {
	position: relative;
	border-radius: 1em;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(15, 23, 72, 0.06), 0 1.2em 3em -1.2em rgba(48, 72, 252, 0.35);
}

.dui-card {
	padding: 1.3em 1.4em;
}

.dui-card.is-flat {
	box-shadow: 0 0 0 1px rgba(15, 23, 72, 0.06), 0 0.6em 1.6em -0.8em rgba(10, 16, 60, 0.18);
}

.dui-panel {
	padding: 1.3em 1.4em;
	box-shadow: 0 0 0 1px rgba(15, 23, 72, 0.06), 0 0.6em 1.6em -0.8em rgba(10, 16, 60, 0.15);
}

.dui-card__title {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 1em !important;
	color: var(--dui-ink);
	font-size: 1.15em;
	font-weight: 700;
}

.dui-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	font-size: 0.9em;
}

.dui-dl dt,
.dui-dl dd {
	margin: 0;
	padding: 0.65em 0;
	border-top: 1px solid var(--dui-line);
}

.dui-dl dt {
	padding-right: 2em;
	color: var(--dui-muted);
}

.dui-dl dd {
	display: flex;
	align-items: center;
	font-weight: 600;
}

.dui-actions {
	display: flex !important;
	gap: 0.7em;
	margin-top: 1em !important;
}

.dui-toast {
	display: flex;
	align-items: center;
	gap: 0.9em;
	width: 78%;
	margin-left: 22%;
	padding: 0.9em 1.2em;
}

.dui-toast svg {
	width: 1.5em;
	height: 1.5em;
	color: var(--dui-blue);
}

.dui-toast b {
	display: block;
	font-size: 0.95em;
}

.dui-toast span {
	color: var(--dui-muted);
	font-size: 0.75em;
}

.dui-toast em {
	margin-left: auto;
	color: var(--dui-muted);
	font-size: 0.72em;
	font-style: normal;
	white-space: nowrap;
}

.dui-timeline li {
	position: relative;
	padding: 0 0 1.35em 2.1em;
}

.dui-timeline li::before {
	content: "";
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 0.85em;
	height: 0.85em;
	border: 0.22em solid var(--dui-blue);
	border-radius: 50%;
	background: #fff;
}

.dui-timeline li::after {
	content: "";
	position: absolute;
	top: 1.4em;
	bottom: 0;
	left: 0.52em;
	width: 2px;
	background: var(--dui-blue);
}

.dui-timeline li:last-child::after {
	display: none;
}

.dui-timeline li.is-teal::before {
	border-color: #20C9A6;
}

.dui-timeline li.is-teal::after {
	background: #20C9A6;
}

.dui-timeline b {
	display: block;
	font-size: 0.95em;
}

.dui-timeline span {
	color: var(--dui-muted);
	font-size: 0.8em;
}

.dui-events li {
	display: flex;
	align-items: center;
	gap: 1.2em;
	padding: 0.85em 0;
}

.dui-events__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	background: #F2F4FF;
	color: var(--dui-blue);
}

.dui-events__icon svg {
	width: 1.35em;
	height: 1.35em;
}

.dui-events li.is-done .dui-events__icon {
	background: var(--dui-green);
	color: #fff;
}

.dui-events b {
	display: block;
	font-size: 1.05em;
}

.dui-events span {
	color: var(--dui-muted);
	font-size: 0.85em;
}

.dui-window.is-split {
	overflow: visible;
	background: transparent;
	box-shadow: none;
	gap: 0.6em;
}

.dui-window.is-split .dui-side {
	align-self: flex-start;
	border: 0;
	border-radius: 1em;
	background: #fff;
	box-shadow: 0 1.2em 3em -1.2em rgba(10, 16, 60, 0.5);
}

.dui-main.is-raised {
	padding: 0.6em 1.6em;
	border-radius: 1em;
	background: #fff;
	box-shadow: 0 1.2em 3em -1.2em rgba(10, 16, 60, 0.5);
}

.dui-card.is-alert {
	display: flex;
	align-items: flex-start;
	gap: 1.3em;
	padding: 1.6em 1.8em 2em;
}

.dui-bubble {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 4.2em;
	height: 4.2em;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px var(--dui-line), 0 0.6em 1.4em -0.6em rgba(48, 72, 252, 0.4);
	color: var(--dui-blue);
}

.dui-bubble svg {
	width: 2em;
	height: 2em;
}

.dui-card.is-alert > div {
	flex: 1;
}

.dui-skel {
	display: block;
	height: 0.9em;
	margin-top: 1em;
	border-radius: 999px;
	background: #EEF0F8;
}

.dui-card.is-notification {
	align-items: center;
}

.dui-card.is-notification .dui-card__title {
	margin-bottom: 0.4em !important;
}

.dui-card.is-notification > .dui-badge {
	align-self: center;
}

.dui-alerts li {
	display: grid;
	grid-template-columns: auto 1fr auto 4em;
	align-items: center;
	gap: 0.8em;
	padding: 0.75em 0;
	border-top: 1px solid var(--dui-line);
	font-size: 0.95em;
}

.dui-alerts li:first-child {
	border-top: 0;
}

.dui-alerts .dui-brand {
	justify-self: end;
}

.dui-dot {
	display: grid;
	place-items: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
}

.dui-dot svg {
	width: 1.15em;
	height: 1.15em;
}

.dui-dot.is-danger { color: var(--dui-red); }
.dui-dot.is-warning { color: var(--dui-amber); }
.dui-dot.is-success { color: var(--dui-green); }

.dui-logogrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-items: center;
	gap: 2.2em 1.5em;
	padding: 2em 1.5em;
}

.dui-logogrid .dui-brand {
	height: 2.1em;
	max-width: 9em;
}

.dui-more {
	grid-column: 1 / -1;
	color: var(--dui-ink);
	font-weight: 700;
}

.dui-window.is-insights {
	display: block;
	padding: 1.5em 1.7em;
}

.dui-wordlogo {
	font-size: 1.5em;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.dui-breakdowns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2em;
	font-size: 0.85em;
}

.dui-bd li {
	display: grid;
	grid-template-columns: 1.4em minmax(0, 1fr) 3.5em 2.3em 3.6em;
	align-items: center;
	gap: 0.55em;
	padding: 0.65em 0;
}

.dui-bd li:not(:has(.dui-flag)) {
	grid-template-columns: minmax(0, 1fr) 3.5em 2.3em 3.6em;
}

.dui-bd__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.dui-bd__bar {
	height: 0.55em;
	border-radius: 999px;
	background: #EEF0FC;
}

.dui-bd__bar i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--dui-blue);
}

.dui-bd__n {
	color: var(--dui-muted);
	text-align: right;
}

.dui-bd b {
	text-align: right;
	font-weight: 600;
}

.dui-breakdowns .dui-link {
	margin-top: 0.6em;
	font-size: 1em;
}

.dui-flag {
	font-size: 1.1em;
	line-height: 1;
}

.dui-intlist li {
	display: grid;
	grid-template-columns: 7em 1fr auto;
	align-items: center;
	gap: 1.3em;
	padding: 1.2em 0;
	border-top: 1px solid var(--dui-line);
}

.dui-intlist li:first-child {
	border-top: 0;
}

.dui-intlogo .dui-brand {
	height: 2.6em;
	max-width: 6.5em;
	margin: 0 auto;
}

.dui-intlist b {
	display: block;
	font-size: 1.2em;
}

.dui-ok {
	display: flex;
	align-items: center;
	gap: 0.4em;
	color: var(--dui-green);
	font-size: 1em;
}

.dui-ok::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--dui-green);
}

.dui-intlist li > svg {
	width: 1.3em;
	height: 1.3em;
	color: var(--dui-ink);
}

/* --------------------------------------------------- integrations orbit */

.dui-orbit {
	position: relative;
	aspect-ratio: 1;
	max-width: 36em;
	margin: 0 auto;
}

.dui-orbit__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.dui-orbit__lines circle {
	fill: none;
	stroke: rgba(122, 140, 255, 0.25);
	stroke-width: 0.3;
	stroke-dasharray: 1 1.4;
}

.dui-orbit__node {
	position: absolute;
	display: grid;
	place-items: center;
	width: 17%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 0.35em rgba(255, 255, 255, 0.12), 0 0 2.4em rgba(120, 140, 255, 0.55);
	transform: translate(-50%, -50%);
}

.dui-orbit__node .dui-brand {
	width: 72%;
	height: 56%;
	max-width: none;
}

.dui-orbit__node .dui-brand.is-mark {
	width: 46%;
	height: 46%;
}

.dui-orbit__core {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	width: 42%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, #fff 55%, #DCE2FF 100%);
	box-shadow: 0 0 0 0.6em rgba(255, 255, 255, 0.08), 0 0 4em rgba(120, 140, 255, 0.7);
	color: var(--dui-ink);
	font-size: 1.6em;
	font-weight: 800;
	letter-spacing: -0.03em;
	transform: translate(-50%, -50%);
}

.dui-orbit__core .dui-logo__mark {
	width: 1.1em;
	height: 1.1em;
	font-size: 0.9em;
	background: none;
	color: var(--dui-blue);
	font-size: 1.1em;
}

/* --------------------------------------------------------- pricing visual */

.dui-paycard {
	position: relative;
	aspect-ratio: 1.45;
	max-width: 34em;
	margin: 0 auto;
}

.dui-paycard__glow {
	position: absolute;
	inset: 6% 4%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(70, 60, 255, 0.85), rgba(70, 60, 255, 0.35) 55%, transparent 100%);
	filter: blur(1.5em);
}

.dui-paycard__card {
	position: absolute;
	top: 24%;
	left: 22%;
	display: block;
	width: 60%;
	aspect-ratio: 1.58;
	padding: 4.5% 5%;
	border-radius: 1em;
	background: linear-gradient(135deg, #F8FAFF 0%, #D6E3FF 40%, #5B7CFA 100%);
	box-shadow: 0 1.5em 3em -1em rgba(18, 20, 90, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
	color: #1C2560;
	transform: rotate(-16deg);
}

.dui-paycard__card > span {
	position: absolute;
}

.dui-paycard__tag {
	top: -0.2em;
	right: 8%;
	padding: 0.35em 0.8em;
	border-radius: 0.4em;
	background: #22D18B;
	color: #fff;
	font-size: 0.85em;
	font-weight: 700;
	transform: translateY(-50%);
}

.dui-paycard__brand {
	top: 18%;
	left: 7%;
	font-size: 1.25em;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.dui-paycard__chip {
	top: 40%;
	left: 7%;
	width: 12%;
	height: 18%;
	border-radius: 0.3em;
	background: linear-gradient(135deg, #E8ECF8, #B8C2DD);
}

.dui-paycard__num {
	top: 62%;
	left: 7%;
	font-size: 1.15em;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.dui-paycard__name {
	bottom: 10%;
	left: 7%;
	font-size: 0.6em;
	letter-spacing: 0.12em;
	opacity: 0.7;
}

.dui-paycard__visa {
	right: 7%;
	bottom: 10%;
	color: #fff;
	font-size: 1.5em;
	font-style: italic;
	font-weight: 800;
}

.dui-float {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3.8em;
	height: 3.8em;
	border-radius: 50%;
	background: linear-gradient(140deg, #4B5CFF, #2B33D6);
	box-shadow: 0 0.8em 1.6em -0.6em rgba(30, 30, 160, 0.6);
	color: #fff;
}

.dui-float svg {
	width: 1.7em;
	height: 1.7em;
}

.dui-float.is-a { top: 16%; left: 12%; }
.dui-float.is-b { top: 52%; left: 2%; }
.dui-float.is-c { top: 6%; right: 2%; }

/* ---------------------------------------------------------------- mobile */

@container (max-width: 520px) {
	.dui-side {
		flex-basis: 9.5em;
		padding-inline: 0.6em;
	}

	.dui-side li span {
		font-size: 0.92em;
	}

	.dui-breakdowns {
		grid-template-columns: 1fr;
		font-size: 1.15em;
	}

	.dui-split {
		grid-template-columns: 1fr;
	}

	.dui-toast {
		width: 100%;
		margin-left: 0;
	}
}

/* =========================================================================
 * Solutions pages (variants-solutions.php)
 * ====================================================================== */

.dui-badge.is-violet { background: #F1EAFF; color: #7C3AED; }
.dui-badge.is-solid.is-danger { background: var(--dui-red); color: #fff; }
.dui-badge.is-solid.is-violet { background: #8B5CF6; color: #fff; }
.dui-badge.is-dark.is-danger { background: rgba(239, 68, 68, 0.22); color: #FF8A8A; }
.dui-badge.is-dark.is-info { background: rgba(92, 119, 255, 0.22); color: #AEBBFF; }

.dui-scene {
	position: relative;
	isolation: isolate;
}

.dui-scene > * {
	position: relative;
}

/* Soft violet glow behind light-section illustrations. */
.dui-blob {
	position: absolute !important;
	inset: 6% 4%;
	z-index: -1;
	border-radius: 46% 54% 48% 52%;
	background: radial-gradient(circle at 50% 45%, rgba(122, 108, 255, 0.38), rgba(122, 108, 255, 0.12) 55%, transparent 72%);
	filter: blur(8px);
}

.dui-blob.is-mint {
	background: radial-gradient(circle at 50% 45%, rgba(25, 195, 125, 0.28), rgba(25, 195, 125, 0.1) 55%, transparent 72%);
}

/* Floating icon tiles. */
.dui-tile {
	position: absolute !important;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 4.4em;
	height: 4.4em;
	border-radius: 1.1em;
	box-shadow: 0 1.2em 2.4em -1em rgba(10, 16, 60, 0.45);
}

.dui-tile svg {
	width: 2em;
	height: 2em;
}

.dui-tile.is-blue,
.dui-tile.is-solid { background: linear-gradient(145deg, #4A63FF, #2236D9); color: #fff; }
.dui-tile.is-white { background: #fff; color: var(--dui-blue); }
.dui-tile.is-dark { background: #0E1650; color: #fff; }
.dui-tile.is-glass { background: rgba(255, 255, 255, 0.1); color: #fff; backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.dui-tile.is-gold { background: radial-gradient(circle at 35% 30%, #FFE27A, #F5B301 60%, #C98500); color: #7A4B00; border-radius: 50%; }
.dui-tile .dui-brand { width: 2.4em; height: 2.4em; max-width: none; }

.dui-mini {
	display: inline-grid;
	flex-shrink: 0;
	place-items: center;
	width: 2.1em;
	height: 2.1em;
	border-radius: 0.6em;
	background: var(--dui-blue-soft);
	color: var(--dui-blue);
}

.dui-mini svg { width: 1.15em; height: 1.15em; }
.dui-mini.is-warm { background: linear-gradient(145deg, #FFB547, #FF7A3D); color: #fff; }

.dui-cardno {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	white-space: nowrap;
}

.dui-cardno .dui-brand.is-chip { margin: 0; }

.dui .dui-btn.is-block {
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding-block: 0.8em;
}

.dui .dui-btn.is-green { background: #19C37D; }

/* Definition rows. */
.dui-kv {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0;
}

.dui-kv dt,
.dui-kv dd {
	margin: 0;
	padding: 0.75em 0;
	border-top: 1px solid var(--dui-line);
	font-size: 0.92em;
}

.dui-kv dt { padding-right: 1.5em; color: var(--dui-muted); }
.dui-kv dd { color: var(--dui-ink); font-weight: 600; }
.dui-kv dt:first-of-type,
.dui-kv dd:first-of-type { border-top: 0; }

/* Dispute toast. */
.dui-dtoast {
	z-index: 4;
	display: flex;
	gap: 0.9em;
	width: 17em;
	padding: 1.1em 1.2em;
	border-radius: 1em;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(15, 23, 72, 0.06), 0 1.5em 3em -1.2em rgba(10, 16, 60, 0.45);
}

.dui-dtoast__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: 0.7em;
	background: linear-gradient(145deg, #FF6B6B, #E5374A);
	color: #fff;
}

.dui-dtoast__icon svg { width: 1.4em; height: 1.4em; }
.dui-dtoast b { display: block; font-size: 1em; }
.dui-dtoast strong { display: block; margin-top: 0.15em; font-size: 1.25em; }
.dui-dtoast span { display: block; margin-top: 0.2em; color: var(--dui-muted); font-size: 0.85em; }

.dui-dtoast em {
	display: inline-block;
	margin-top: 0.7em;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: var(--dui-red-soft);
	color: var(--dui-red);
	font-size: 0.85em;
	font-style: normal;
	font-weight: 600;
}

.dui-dtoast.is-tr { position: absolute; top: -1em; right: 0; }
.dui-dtoast.is-tl { position: absolute; top: 4%; left: -2%; }
.dui-dtoast.is-bl { position: absolute; bottom: -2em; left: -1.5em; }
.dui-dtoast.is-bm { position: absolute; bottom: -1.5em; left: 30%; }

/* Compact app window used on the solutions pages. */
.dui-side.is-dark {
	flex-basis: 12em;
	border-right: 0;
	background: linear-gradient(180deg, #0B1240, #070D33);
}

.dui-side.is-dark .dui-logo { color: #fff; }
.dui-side.is-dark li { color: rgba(255, 255, 255, 0.62); font-size: 0.88em; }
.dui-side.is-dark li svg { color: rgba(255, 255, 255, 0.5); }
.dui-side.is-dark li.is-active { background: rgba(92, 119, 255, 0.22); color: #fff; }
.dui-side.is-dark li.is-active svg { color: #fff; }

.dui-side li i {
	margin-left: auto;
	padding: 0.1em 0.5em;
	border-radius: 0.4em;
	background: rgba(255, 255, 255, 0.16);
	font-size: 0.85em;
	font-style: normal;
}

.dui-count {
	margin-left: 0.3em;
	padding: 0.1em 0.45em;
	border-radius: 0.4em;
	background: var(--dui-blue-soft);
	color: var(--dui-blue);
	font-size: 0.6em;
	vertical-align: middle;
}

.dui-scene.is-panel { padding: 0 0 2.5em 1.5em; }

/* Hero dashboards. */
.dui-scene.is-hero { padding: 4.5em 11.5em 2em 0; }
.dui-scene.is-hero .dui-side.is-dark { flex-basis: 10.5em; }
.dui-scene.is-hero .dui-window { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2.5em 5em -1.5em rgba(0, 0, 0, 0.6); }

.dui-activity {
	position: absolute !important;
	z-index: 3;
	width: 11em;
	padding: 1.1em;
	border-radius: 1em;
	background: linear-gradient(180deg, #121B5C, #0B1240);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1.5em 3em -1em rgba(0, 0, 0, 0.6);
}

.dui-activity.is-br { right: 0; bottom: 0; }
.dui-scene.is-hero .dui-kpicard { top: -1em; right: 0; }
.dui-activity.is-br.is-low { bottom: -1em; }
.dui .dui-activity p { color: #fff; font-weight: 700; }

.dui-activity__bars {
	display: flex;
	align-items: flex-end;
	gap: 0.6em;
	height: 6em;
	margin-top: 1em;
}

.dui-activity__bars span {
	flex: 1;
	border-radius: 0.3em 0.3em 0 0;
	background: linear-gradient(180deg, #8C7BFF, #4F3FE0);
}

.dui-activity__bars span.is-hi { background: linear-gradient(180deg, #4F8BFF, #2E5BFF); }

.dui-activity__x {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5em;
	color: var(--dui-muted);
	font-size: 0.68em;
}

.dui-kpicard {
	position: absolute !important;
	top: -1.5em;
	right: -0.5em;
	z-index: 3;
	width: 15em;
	padding: 1.1em 1.2em;
}

.dui-kpicard > span { color: var(--dui-muted); font-size: 0.82em; }
.dui-kpicard b { display: block; font-size: 1.9em; letter-spacing: -0.02em; }
.dui-kpicard b small { font-size: 0.45em; }
.dui-kpicard .is-up { color: var(--dui-green); }
.dui-kpicard svg { width: 100%; height: 3em; margin-top: 0.4em; }

/* E-commerce hero. */
.dui-scene.is-order {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 1.5em;
	align-items: start;
	padding-top: 1em;
}

.dui-order-col { padding-top: 3.5em; }
.dui-order-col .dui-tile.is-store { top: 0; left: 30%; }

.dui-ghost {
	position: absolute !important;
	inset: 5em 2.5em -1.5em -1.5em;
	border-radius: 1.2em;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	transform: rotate(-6deg);
}

.dui-order {
	padding: 1.4em;
	transform: rotate(-3deg);
}

.dui-order.is-big { transform: none; }

.dui-order__head {
	display: flex;
	gap: 1em;
	margin-bottom: 0.9em;
}

.dui-order__head b { display: block; font-size: 1.15em; }
.dui-order__head span:not(.dui-badge) { display: block; margin: 0.2em 0 0.5em; color: var(--dui-muted); font-size: 0.88em; }

.dui-thumb {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 4.4em;
	height: 4.4em;
	border-radius: 0.9em;
	background: linear-gradient(145deg, #F2F4FF, #DDE2FF);
	color: #1B2366;
}

.dui-thumb svg { width: 2.2em; height: 2.2em; }
.dui-thumb.is-dark { background: rgba(255, 255, 255, 0.1); color: #fff; }
.dui-order .dui-link { display: block; margin-top: 0.8em; }

.dui-alertbox {
	display: flex;
	gap: 0.9em;
	padding: 1.2em;
}

.dui-alertbox__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 2.8em;
	height: 2.8em;
	border-radius: 50%;
	background: var(--dui-red-soft);
	color: var(--dui-red);
}

.dui-alertbox__icon svg { width: 1.4em; height: 1.4em; }
.dui-alertbox b { display: block; }
.dui-alertbox span:not(.dui-btn) { display: block; margin: 0.3em 0 0.8em; color: var(--dui-muted); font-size: 0.85em; }

.dui-vsteps { margin: 1.8em 0 0 0.6em !important; }

.dui-vsteps li {
	position: relative;
	padding: 0 0 1.5em 2em;
	color: #fff;
}

.dui-vsteps li::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0;
	width: 0.9em;
	height: 0.9em;
	border-radius: 50%;
	background: #8D97D6;
	box-shadow: 0 0 0 0.25em rgba(141, 151, 214, 0.25);
}

.dui-vsteps li::after {
	content: "";
	position: absolute;
	top: 1.3em;
	bottom: 0.1em;
	left: 0.4em;
	width: 2px;
	background: rgba(141, 151, 214, 0.45);
}

.dui-vsteps li:last-child::after { display: none; }
.dui-vsteps li.is-active::before { background: var(--dui-red); box-shadow: 0 0 0 0.25em rgba(239, 68, 68, 0.3); }
.dui-vsteps li.is-active::after { background: var(--dui-red); }
.dui .dui-vsteps b { display: block; color: #fff; font-weight: 600; }
.dui .dui-vsteps span { display: block; color: rgba(255, 255, 255, 0.65); font-size: 0.85em; }

/* E-commerce scenarios. */
.dui-scene.is-orders {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 1em;
	align-items: center;
}

.dui-orders-side { display: grid; gap: 1em; }

.dui-gcard {
	display: flex;
	gap: 1em;
	padding: 1.2em;
	border-radius: 1em;
	background: rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	color: #fff;
}

.dui .dui-gcard b { display: block; color: #fff; }
.dui .dui-gcard span:not(.dui-badge) { display: block; margin: 0.15em 0 0.45em; color: rgba(255, 255, 255, 0.72); font-size: 0.85em; }
.dui .dui-gcard em { display: block; margin-top: 0.5em; color: rgba(255, 255, 255, 0.55); font-size: 0.8em; font-style: normal; }

/* Monitor / laptop. */
.dui-scene.is-monitor { padding: 1.5em 0 1.5em 3em; }

.dui-monitor__screen,
.dui-laptop__screen {
	padding: 1.6em;
	border: 0.7em solid #1E2A7A;
	border-radius: 1.2em;
	background: linear-gradient(180deg, #FFFFFF, #EEF1FF);
	box-shadow: 0 2em 4em -1.5em rgba(48, 72, 252, 0.55);
}

.dui-monitor { transform: perspective(60em) rotateY(-12deg); }

.dui-monitor__stand {
	display: block;
	width: 30%;
	height: 1.4em;
	margin: 0 auto;
	border-radius: 0 0 0.6em 0.6em;
	background: linear-gradient(180deg, #C9CEFF, #9AA5F5);
}

.dui-monitor__bars {
	display: flex;
	align-items: flex-end;
	gap: 0.9em;
	height: 11em;
	margin-top: 1.2em;
}

.dui-monitor__bars span {
	flex: 1;
	border-radius: 0.35em 0.35em 0 0;
	background: linear-gradient(180deg, #4A63FF, #9FAEFF);
}

.dui-skel {
	display: block;
	height: 0.6em;
	margin-bottom: 0.5em;
	border-radius: 999px;
	background: #DDE2FF;
}

.dui-tile.is-brandtile { top: 0; left: 0; width: 6em; height: 6em; }

/* Phones. */
.dui-phone {
	width: 17em;
	padding: 0.6em;
	border-radius: 2.4em;
	background: #10163F;
	box-shadow: 0 2em 4em -1.5em rgba(10, 16, 60, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.dui-phone__screen {
	overflow: hidden;
	min-height: 24em;
	padding: 1.6em 1.3em;
	border-radius: 1.9em;
	background: #fff;
}

.dui-phone.is-game .dui-phone__screen {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.2em;
	background: radial-gradient(circle at 60% 25%, #9B6BFF, #4A2BB8 45%, #1A1360 80%);
	color: #fff;
}

.dui-phone__art {
	display: grid;
	place-items: center;
	align-self: center;
	width: 7em;
	height: 7em;
	margin-bottom: auto;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 70%);
	color: #fff;
}

.dui-phone__art svg { width: 4em; height: 4em; }
.dui .dui-phone.is-game b { font-size: 1.2em; }
.dui .dui-phone.is-game span:not(.dui-btn) { opacity: 0.85; }
.dui .dui-phone.is-game strong { margin-bottom: 0.6em; font-size: 1.3em; }
.dui-phone.is-game .dui-btn { justify-content: center; }

.dui-scene.is-game {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2em;
	align-items: center;
	padding-left: 4.5em;
}

.dui-tile.is-g1 { top: 8%; left: 0; }
.dui-tile.is-g2 { top: 38%; left: -0.5em; }
.dui-tile.is-g3 { top: 70%; left: 1em; }
.dui-game-side { display: grid; gap: 1.2em; }
.dui-dtoast.is-static { width: auto; }

.dui-darkcard {
	padding: 1.2em;
	border-radius: 1em;
	background: rgba(18, 27, 92, 0.85);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.dui .dui-darkcard p { color: #fff; font-weight: 700; }

.dui-activity-list li {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 0.7em;
	padding: 0.65em 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: #fff !important;
	font-size: 0.9em;
}

.dui-activity-list li:first-child { margin-top: 0.6em; border-top: 0; }
.dui-activity-list .dui-mini { background: rgba(92, 119, 255, 0.3); color: #fff; }

/* App purchase. */
.dui-scene.is-app { padding: 1em 0 1em 4em; }
.dui-phone.is-apps { margin-left: 3em; transform: rotate(4deg); }
.dui-phone.is-apps .dui-phone__screen { background: linear-gradient(180deg, #2A1F8F, #120C4A); }

.dui-appgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;
}

.dui-appgrid i {
	aspect-ratio: 1;
	border-radius: 0.9em;
	background: linear-gradient(145deg, #6E7DFB, #3048FC);
	opacity: 0.85;
}

.dui-appgrid i:nth-child(3n+2) { background: linear-gradient(145deg, #FF8FB1, #E5374A); }
.dui-appgrid i:nth-child(4n+3) { background: linear-gradient(145deg, #FFC75A, #F58F00); }
.dui-appgrid i:nth-child(5n+1) { background: linear-gradient(145deg, #53E0B4, #13A07A); }
.dui-tile.is-a1 { top: 8%; left: 0; }
.dui-tile.is-a2 { top: 46%; left: 1.5em; }

.dui-paywall {
	position: absolute !important;
	right: -1em;
	bottom: 12%;
	z-index: 4;
	width: 16em;
	padding: 1.3em;
}

.dui-paywall__head { display: flex; gap: 0.9em; margin-bottom: 1em; }
.dui-paywall__head b { display: block; font-size: 1.1em; }
.dui-paywall__head span { display: block; color: var(--dui-muted); font-size: 0.85em; }
.dui-paywall__head strong { display: block; margin-top: 0.3em; }

.dui-appicon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 3.2em;
	height: 3.2em;
	border-radius: 0.9em;
	background: linear-gradient(145deg, #FF8A3D, #E5374A 55%, #8B5CF6);
	color: #fff;
}

.dui-appicon svg { width: 1.6em; height: 1.6em; }

/* Case cards. */
.dui-scene.is-case { padding: 3em 4em; }

.dui-device {
	position: absolute !important;
	inset: 1.5em 6em 1em 3em;
	border-radius: 2em;
	background: linear-gradient(145deg, #2A2F8F, #0E1650);
	transform: rotate(-8deg);
}

.dui-casecard {
	padding: 1.6em 1.8em;
	transform: rotate(-3deg);
}

.dui-card__title.is-lg { margin-bottom: 0.9em; font-size: 1.35em; }
.dui-tile.is-left { top: 42%; left: 0.5em; }
.dui-tile.is-right { top: 18%; right: 0.5em; }

/* Plan picker. */
.dui-scene.is-plans { display: flex; justify-content: center; padding: 1em 4em; }
.dui-phone.is-light { background: #1B2366; }
.dui-phone__swap { display: block; width: 1.6em; margin: 0 auto 0.6em; color: var(--dui-blue); }
.dui-phone.is-light .dui-h.is-lg { margin-bottom: 1em; text-align: center; }

.dui-plans li,
.dui-checkout li {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin-bottom: 0.7em;
	padding: 0.8em;
	border-radius: 0.8em;
	box-shadow: inset 0 0 0 1px var(--dui-line);
}

.dui-plans li > div,
.dui-checkout li > div { flex: 1; }
.dui-plans b,
.dui-checkout b { display: block; font-size: 0.95em; }
.dui-plans span,
.dui-checkout span { display: block; color: var(--dui-muted); font-size: 0.78em; white-space: nowrap; }
.dui-plans li > svg { width: 1em; height: 1em; color: var(--dui-muted); }
.dui-tile.is-p1 { top: 12%; left: 0; }
.dui-tile.is-p2 { top: 52%; left: 1em; }
.dui-tile.is-p3 { top: 30%; right: 0; }

/* Small business workspace. */
.dui-scene.is-workspace { padding: 3em 1em 3em 2em; }
.dui-laptop__screen { padding: 1.2em; }
.dui-laptop__base { display: block; height: 1em; margin: 0 -1.5em; border-radius: 0 0 1em 1em; background: linear-gradient(180deg, #C9CEFF, #9AA5F5); }
.dui-store { display: flex; align-items: center; gap: 0.6em; margin-bottom: 1em; }
.dui-workspace .dui-kpis { margin-bottom: 0.4em; }
.dui-scene.is-workspace .dui-kpi b { font-size: 1.6em; }
.dui-scene.is-workspace .dui-monitor__bars { height: 6em; }

.dui-chip {
	position: absolute !important;
	right: -0.5em;
	bottom: 0.5em;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 0.7em;
	max-width: 13em;
	padding: 0.9em 1.1em;
	border-radius: 0.9em;
	background: #fff;
	box-shadow: 0 1.5em 3em -1.2em rgba(10, 16, 60, 0.45);
}

.dui-chip svg { flex-shrink: 0; width: 1.8em; height: 1.8em; color: var(--dui-blue); }
.dui-chip b { font-size: 0.95em; line-height: 1.3; }

/* Status summary. */
.dui-scene.is-summary { display: grid; gap: 1.2em; padding: 2em 3em 2em 5em; }

.dui-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.4em 1.6em;
}

.dui-total span { display: block; color: var(--dui-muted); font-size: 0.85em; }
.dui-total b { display: block; font-size: 2.6em; letter-spacing: -0.02em; }
.dui-total svg { width: 6em; height: 6em; }
.dui-statuslist { margin-left: 3em; padding: 0.8em 1.4em; transform: rotate(-3deg); }

.dui-statuslist li {
	display: flex;
	align-items: center;
	gap: 0.8em;
	padding: 0.75em 0;
	border-top: 1px solid var(--dui-line);
}

.dui-statuslist li:first-child { border-top: 0; }
.dui-statuslist i { width: 0.75em; height: 0.75em; border-radius: 50%; }
.dui-statuslist b { margin-left: auto; color: var(--dui-blue); }
.dui-statuslist svg { width: 1em; height: 1em; color: var(--dui-muted); }
.dui-tile.is-s1 { top: 0; left: 0; }
.dui-tile.is-s2 { bottom: 0; left: 2em; }

/* Startups. */
.dui-scene.is-growth { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; align-items: center; padding: 2em 0.5em; }
.dui-txcard { padding: 1.3em; transform: rotate(-4deg); }
.dui-txcard .dui-monitor__bars { height: 8em; }
.dui-growlist { padding: 0.8em 1.3em; }

.dui-growlist li {
	display: flex;
	align-items: center;
	gap: 0.8em;
	padding: 0.7em 0;
	font-size: 0.95em;
	font-weight: 600;
}

.dui-scene.is-checkout { display: grid; grid-template-columns: auto 1fr; gap: 1.5em; align-items: center; padding: 1em 0 1em 3.5em; }
.dui-checkout li strong { font-size: 0.95em; }
.dui-tile.is-c1 { top: 18%; left: 0; }
.dui-tile.is-c2 { top: 55%; left: 0.5em; }
.dui-methods { padding: 1.4em; transform: rotate(3deg); }
.dui-methods svg { width: 8em; height: 8em; margin: 1em auto; transform: rotate(-90deg); }

.dui-methods__legend li {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 0.55em;
	font-size: 0.88em;
}

.dui-methods__legend i { width: 0.75em; height: 0.75em; border-radius: 50%; }
.dui-methods__legend b { margin-left: auto; }

/* Phones and narrow columns: simplify overlapping layouts. */
@container (max-width: 520px) {
	.dui { font-size: clamp(7px, 2.6cqi, 13px); }
	.dui-scene.is-hero { padding-right: 0; }
	.dui-scene.is-hero .dui-activity { display: none; }
	.dui-scene.is-order,
	.dui-scene.is-orders { grid-template-columns: 1fr; }
	.dui-scene.is-game { grid-template-columns: 1fr; padding-left: 0; }
	.dui-scene.is-game .dui-phone,
	.dui-scene.is-game .dui-tile { display: none; }
	.dui-order-col { padding-top: 0; }
	.dui-order-col .dui-tile,
	.dui-ghost { display: none; }
}

@container (max-width: 400px) {
	.dui-scene.is-checkout { grid-template-columns: 1fr; padding-left: 0; }
	.dui-scene.is-checkout .dui-phone,
	.dui-scene.is-checkout .dui-tile { display: none; }
	.dui-scene.is-growth { grid-template-columns: 1fr; }
}

/* =========================================================================
 * Health, hub, pricing, contact, about, glossary, blog (variants-pages.php)
 * ====================================================================== */

/* Soft radial glow for illustrations on dark heroes. */
.dui-glow {
	position: absolute !important;
	inset: 5% 10%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(92, 119, 255, 0.55), rgba(92, 119, 255, 0.12) 50%, transparent 70%);
	filter: blur(10px);
}

/* Floating label chips ("Product questions", "Chargeback"…). */
.dui-topic {
	position: absolute !important;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.7em;
	padding: 0.85em 1.3em 0.85em 0.85em;
	border-radius: 0.9em;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1.2em 2.4em -1em rgba(0, 0, 0, 0.5);
	color: #1B2366;
	font-size: 1.05em;
	font-weight: 700;
	white-space: nowrap;
	transform: rotate(-4deg);
}

.dui-topic.is-0 { top: 4%; right: 2%; }
.dui-topic.is-1 { top: 38%; right: -2%; }
.dui-topic.is-2 { top: 72%; right: 6%; }

/* Wellness orders. */
.dui:is(.dui--wellness-orders, .dui--payment-methods, .dui--disputes-overview, .dui--activity-overview, .dui--card-alert, .dui--alerts-panel, .dui--team-sync) {
	font-size: clamp(7px, 2.9cqi, 14px);
}

.dui--payment-methods { font-size: clamp(8px, 5cqi, 15px) !important; }

.dui-scene.is-wellness { display: flex; align-items: center; justify-content: center; gap: 1.5em; padding: 2em 1em; }
.dui-scene.is-wellness .dui-plans .dui-badge { display: inline-block; margin-top: 0.35em; }
.dui-scene.is-wellness .dui-plans b { white-space: nowrap; }
.dui-scene.is-wellness .dui-phone__screen { min-height: 18em; }
.dui-bottles { position: relative; display: flex; align-items: flex-end; gap: 0.8em; }

.dui-bottle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 7em;
	height: 11em;
	border-radius: 1.4em 1.4em 1em 1em;
	box-shadow: 0 1.5em 3em -1em rgba(10, 16, 60, 0.35);
}

.dui-bottle::before {
	content: "";
	position: absolute;
	top: -1.4em;
	left: 22%;
	width: 56%;
	height: 1.6em;
	border-radius: 0.4em 0.4em 0 0;
	background: #2A2F4F;
}

.dui-bottle.is-amber { background: linear-gradient(160deg, #A8541C, #5C2A0B); }
.dui-bottle.is-cream { height: 8.5em; background: linear-gradient(160deg, #FFFFFF, #E9E4DA); }
.dui-bottle.is-cream::before { background: #CFC6B5; }

.dui-bottle i {
	padding: 0.5em;
	border-radius: 0.3em;
	background: rgba(255, 255, 255, 0.92);
	color: #2A2F4F;
	font-size: 0.75em;
	font-style: normal;
	font-weight: 700;
	text-align: center;
}

.dui-leaf {
	position: absolute !important;
	top: -3em;
	right: -1.5em;
	width: 5em;
	height: 8em;
	border-radius: 0 100% 0 100%;
	background: linear-gradient(135deg, #3BC97B, #11834A);
	transform: rotate(18deg);
}

/* Hub & glossary overview cards. */
.dui-scene.is-methods { display: flex; justify-content: center; padding: 1.5em 3em; }
.dui-scene.is-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; align-items: center; padding: 2em 1em; }
.dui-checklist li { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 0; border-top: 1px solid var(--dui-line); font-size: 0.95em; }
.dui-checklist li:first-child { border-top: 0; }
.dui-checklist .dui-h { margin-bottom: 0.5em; }
.dui-kpicard.is-static { position: relative !important; top: auto; right: auto; width: auto; }
.dui-txcard.is-small .dui-monitor__bars { height: 6em; }
.dui-scene.is-overview .dui-tile.is-shield { top: -1em; right: -1em; }

/* Pricing. */
.dui-scene.is-pricing { padding: 1em 0 0.5em; }
.dui-scene.is-pricing .dui-window { transform: perspective(70em) rotateY(-8deg); }
.dui-scene.is-pricing .dui-monitor__bars { height: 9em; }
.dui-scene.is-pricing .dui-side { flex-basis: 10em; }

.dui-pill {
	display: inline-block;
	padding: 0.4em 0.8em;
	border-radius: 0.6em;
	background: var(--dui-green-soft);
	color: var(--dui-green);
	font-weight: 700;
}

.dui-pill small { margin-left: 0.3em; font-size: 0.85em; }

.dui-wires {
	display: block;
	width: 100%;
	height: 3em;
	overflow: visible;
}

.dui-wires path {
	fill: none;
	stroke: #8F9DFF;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.dui-logorow {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1em;
}

.dui-logochip {
	display: grid;
	place-items: center;
	aspect-ratio: 1.15;
	border-radius: 1em;
	background: #fff;
	box-shadow: 0 1em 2em -1em rgba(48, 72, 252, 0.35), 0 0 0 1px rgba(15, 23, 72, 0.05);
}

.dui-logochip .dui-brand { width: 70%; height: auto; max-height: 2.4em; max-width: none; }
.dui-logochip.is-more { color: var(--dui-blue); font-size: 1.4em; font-weight: 800; letter-spacing: 0.1em; }

/* Contact envelope. */
.dui-scene.is-envelope { height: 22em; }

.dui-envelope {
	position: absolute !important;
	top: 22%;
	left: 22%;
	width: 15em;
	height: 10em;
	border-radius: 1em;
	background: linear-gradient(160deg, #F4F6FF, #BFC9FF);
	box-shadow: 0 2em 4em -1em rgba(48, 72, 252, 0.7);
	transform: rotate(-10deg);
}

.dui-envelope__flap {
	position: absolute;
	inset: 0 0 35%;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: linear-gradient(180deg, #FFFFFF, #D9DFFF);
}

.dui-envelope__letter {
	position: absolute;
	top: -2.5em;
	left: 12%;
	width: 76%;
	height: 5em;
	border-radius: 0.6em;
	background: repeating-linear-gradient(180deg, transparent 0 1em, #C9D1FF 1em 1.4em), #fff;
	background-clip: content-box, padding-box;
	padding: 1em 1.2em;
	box-sizing: border-box;
	z-index: -1;
}

.dui-plane {
	position: absolute !important;
	top: 30%;
	left: 2%;
	width: 5em;
	height: 3.5em;
	clip-path: polygon(0 50%, 100% 0, 70% 100%, 45% 62%);
	background: linear-gradient(135deg, #8EA0FF, #3048FC);
}

.dui-scene.is-envelope .dui-topic { transform: none; }

/* About. */
.dui-scene.is-globe { height: 24em; }

.dui-globe {
	position: absolute !important;
	top: 6%;
	left: 14%;
	width: 20em;
	height: 20em;
	border-radius: 50%;
	background:
		repeating-linear-gradient(90deg, transparent 0 1.9em, rgba(140, 160, 255, 0.35) 1.9em 2em),
		repeating-linear-gradient(0deg, transparent 0 1.9em, rgba(140, 160, 255, 0.35) 1.9em 2em),
		radial-gradient(circle at 35% 30%, #4E66FF, #1B2399 55%, #0A0F55);
	box-shadow: 0 0 4em 0.5em rgba(78, 102, 255, 0.55), inset -2em -2em 4em rgba(0, 0, 0, 0.45);
}

.dui-globe i {
	position: absolute;
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: #A8B8FF;
	box-shadow: 0 0 0.8em #A8B8FF;
}

.dui-globe__ring {
	position: absolute;
	inset: 18% -18%;
	border: 1px solid rgba(160, 176, 255, 0.55);
	border-radius: 50%;
	transform: rotate(-18deg);
}

.dui-globe__ring.is-b { inset: 30% -26%; transform: rotate(14deg); }
.dui-scene.is-globe .dui-topic.is-0 { top: 26%; left: -2%; right: auto; transform: rotate(6deg); }
.dui-scene.is-globe .dui-topic.is-2 { top: 72%; right: 0; }

.dui-scene.is-cardalert { height: 18em; }
.dui-paycard__card.is-solo { top: 14%; left: 10%; width: 62%; transform: rotate(-8deg); }

.dui-alertbox.is-float {
	position: absolute !important;
	top: 6%;
	right: 4%;
	z-index: 2;
	align-items: center;
	width: 15em;
	transform: rotate(-4deg);
}

.dui-alertbox.is-float span:not(.dui-alertbox__icon) { margin: 0.2em 0 0; }
.dui-alertbox__icon.is-amber { background: #FFF1DC; color: #E58A00; }

.dui-scene.is-alertspanel { height: 18em; }
.dui-window.is-narrow { width: 14em; }
.dui-window.is-narrow .dui-side { flex-basis: 100%; border-right: 0; }
.dui-dtoast.is-right { position: absolute; top: 28%; right: 4%; }
.dui-tile.is-shield { top: 4%; right: 0; border-radius: 50%; }

.dui-scene.is-team { display: grid; gap: 1.2em; padding: 2em 2em 2em 1em; }
.dui-people { display: flex; align-items: center; gap: 0.6em; }
.dui-people b { display: block; margin-left: 0.4em; font-size: 1.1em; }
.dui-people div span { display: block; margin-left: 0.5em; color: var(--dui-muted); font-size: 0.85em; }

.dui-avatar {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 3.2em;
	height: 3.2em;
	border-radius: 50%;
	background: linear-gradient(145deg, #7C5CFF, #3048FC);
	color: #fff;
	box-shadow: 0 0 0 0.25em #fff;
}

.dui-avatar.is-b { margin-left: -1.2em; background: linear-gradient(145deg, #19C37D, #0E8F5A); }
.dui-avatar svg { width: 1.5em; height: 1.5em; }
.dui-checklist.is-offset { margin-left: 3em; transform: rotate(-2deg); }

/* Glossary book. */
.dui-scene.is-book { height: 20em; }

.dui-book {
	position: absolute !important;
	top: 8%;
	left: 6%;
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	width: 12em;
	height: 16em;
	padding: 2em 1.8em;
	border-radius: 1.4em;
	background: linear-gradient(160deg, #FFFFFF, #CDD6FF);
	box-shadow: 0 2em 4em -1em rgba(48, 72, 252, 0.7);
	transform: rotate(-8deg);
	box-sizing: border-box;
}

.dui-book__icon { color: var(--dui-blue); }
.dui-book__icon svg { width: 5em; height: 5em; stroke-width: 1.6; }
.dui-book i { display: block; height: 0.7em; border-radius: 999px; background: #D5DCFF; }
.dui-book i:last-child { width: 60%; }

/* Blog hero. */
.dui-scene.is-blog { height: 22em; }
.dui-laptop.is-dark { position: absolute !important; top: 14%; left: 14%; width: 22em; transform: perspective(60em) rotateY(-14deg) rotateZ(-3deg); }
.dui-laptop.is-dark .dui-laptop__screen { border-color: #2A36B8; background: linear-gradient(180deg, #3D4FE6, #1D2799); }
.dui .dui-laptop.is-dark .dui-h { color: #fff; }
.dui-blogcards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; margin-top: 0.8em; }
.dui-blogcards span { height: 3.6em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.22); }
.dui-tile.is-doc { top: 0; right: 18%; }
.dui-tile.is-chart { top: 6%; right: 0; }
.dui-tile.is-bulb { top: -2%; left: 34%; }
.dui-tile.is-tick { bottom: 14%; left: 4%; }

@container (max-width: 520px) {
	.dui-scene.is-envelope .dui-plane { display: none; }
	.dui-scene.is-overview { grid-template-columns: 1fr; }
	.dui-topic { font-size: 0.9em; }
}

@container (max-width: 360px) {
	.dui-scene.is-wellness .dui-bottles { display: none; }
}