/* =========================================================================
 * Devgraphix — Comparison Table
 * Unlimited side-by-side columns; one can be highlighted into an elevated
 * card with a ribbon badge. Each cell supports a value, a check/cross icon
 * and a chip. Per-column background + accent colours. The widget has NO
 * wrapper background — drop it on your own section/container and add your own
 * background + padding. Cosmetic defaults are baked here; controls override.
 * ========================================================================= */

.dgx-cmp {
	--cmp-rule: rgba(14, 26, 38, 0.12);
	--cmp-ink: #0e1a26;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	box-sizing: border-box;
}

.dgx-cmp *,
.dgx-cmp *::before,
.dgx-cmp *::after {
	box-sizing: border-box;
}

/* ----- Column ------------------------------------------------------------ */
.dgx-cmp__col {
	--cmp-accent: #435970;
	position: relative;
	flex: 1 1 240px;
	min-width: 0;
	padding: 36px 28px 28px;
	z-index: 1;
}

/* Highlighted column — elevated card. The cream gradient is the default look;
 * a per-column Background control paints over the overlay layer below, so a
 * solid colour or a custom gradient both fully replace it. */
.dgx-cmp__col--highlight {
	z-index: 2;
	padding: 36px 36px 28px;
	border-radius: 28px;
	border: 1px solid var(--cmp-rule);
	background: linear-gradient(180deg, #ffffff 0%, #fbf9f4 100%);
	box-shadow: 0 28px 60px rgba(14, 26, 38, 0.1), 0 6px 14px rgba(14, 26, 38, 0.05);
}

/* Per-column background overlay. Sits above the column's own background but
 * below the content, so the per-column Background control (solid OR gradient)
 * cleanly overrides the baked-in default. Transparent by default. */
.dgx-cmp__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
}

/* Keep content above the overlay. */
.dgx-cmp__head,
.dgx-cmp__rows {
	position: relative;
	z-index: 1;
}

/* ----- Ribbon ------------------------------------------------------------ */
.dgx-cmp__ribbon {
	position: absolute;
	top: -16px;
	left: 36px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--cmp-ink);
	color: #ffffff;
	box-shadow: 0 8px 18px rgba(14, 26, 38, 0.22);
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.dgx-cmp__ribbon-icon {
	display: inline-flex;
	color: #f6c453;
}

.dgx-cmp__ribbon-icon svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
}

/* ----- Header ------------------------------------------------------------ */
.dgx-cmp__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--cmp-rule);
}

.dgx-cmp__brand {
	min-width: 0;
}

.dgx-cmp__logo {
	display: block;
	height: 56px;
	width: auto;
	object-fit: contain;
}

.dgx-cmp__name {
	font-family: "Fraunces", Georgia, serif;
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba(14, 26, 38, 0.55);
}

.dgx-cmp__col--highlight .dgx-cmp__name {
	color: var(--cmp-ink);
}

.dgx-cmp__subtitle {
	margin-top: 6px;
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(14, 26, 38, 0.45);
}

.dgx-cmp__price {
	text-align: right;
	flex-shrink: 0;
}

.dgx-cmp__price-label {
	display: block;
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(14, 26, 38, 0.4);
}

.dgx-cmp__col--highlight .dgx-cmp__price-label {
	color: var(--cmp-accent);
}

.dgx-cmp__price-val {
	font-family: "Fraunces", Georgia, serif;
	font-size: 28px;
	font-weight: 400;
	font-style: italic;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba(14, 26, 38, 0.55);
}

.dgx-cmp__col--highlight .dgx-cmp__price-val {
	font-size: 32px;
	color: var(--cmp-ink);
}

.dgx-cmp__price-suffix {
	font-family: "Inter Tight", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: rgba(14, 26, 38, 0.55);
	margin-left: 2px;
}

.dgx-cmp__price--strike .dgx-cmp__price-val {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(14, 26, 38, 0.3);
}

/* ----- Rows -------------------------------------------------------------- */
.dgx-cmp__rows {
	display: flex;
	flex-direction: column;
}

.dgx-cmp__row {
	padding: 20px 0;
}

.dgx-cmp__row:not(:last-child) {
	border-bottom: 1px solid var(--cmp-rule);
}

.dgx-cmp__row-label {
	margin-bottom: 8px;
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(14, 26, 38, 0.35);
}

/* Label-only row: no value box below it, so drop the gap it reserved. */
.dgx-cmp__row-label:last-child {
	margin-bottom: 0;
}

.dgx-cmp__col--highlight .dgx-cmp__row-label {
	color: rgba(14, 26, 38, 0.5);
}

.dgx-cmp__row-value {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	min-height: 36px;
}

/* Value text */
.dgx-cmp__val {
	font-family: "Inter Tight", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.1;
	color: rgba(14, 26, 38, 0.55);
}

.dgx-cmp__col--highlight .dgx-cmp__val {
	font-family: "Fraunces", Georgia, serif;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--cmp-ink);
}

/* Icon + label rows render the value slightly smaller. */
.dgx-cmp__row--icon .dgx-cmp__val {
	font-size: 15px;
}

.dgx-cmp__col--highlight .dgx-cmp__row--icon .dgx-cmp__val {
	font-size: 22px;
	font-style: italic;
	font-weight: 300;
}

/* Row icons (check / cross / named). Colours are driven by CSS variables so
 * the Style panel can recolour each group; values below are the fallbacks. */
.dgx-cmp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--cmp-ico-bg, rgba(14, 26, 38, 0.06));
}

.dgx-cmp__icon svg {
	width: 14px;
	height: 14px;
}

.dgx-cmp__icon--check {
	color: var(--cmp-ico-pos, rgba(14, 26, 38, 0.5));
}

.dgx-cmp__icon--cross {
	border: 1px solid var(--cmp-rule);
	color: var(--cmp-ico-neg, rgba(14, 26, 38, 0.4));
}

.dgx-cmp__icon--other {
	color: var(--cmp-ico-other, var(--cmp-accent));
}

.dgx-cmp__col--highlight .dgx-cmp__icon {
	width: 32px;
	height: 32px;
	background: var(--cmp-ico-hl-bg, var(--cmp-ink));
	border: 0;
	color: var(--cmp-ico-hl-color, #ffffff);
}

.dgx-cmp__col--highlight .dgx-cmp__icon svg {
	width: 16px;
	height: 16px;
}

/* Chip */
.dgx-cmp__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--cmp-accent);
	background: color-mix(in srgb, var(--cmp-accent) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--cmp-accent) 22%, transparent);
}

.dgx-cmp--arrow .dgx-cmp__chip::before {
	content: "\2191"; /* ↑ */
	font-size: 10px;
	line-height: 1;
}

/* ----- Responsive -------------------------------------------------------- */
@media (max-width: 880px) {
	.dgx-cmp:not(.dgx-cmp--matrix) {
		flex-direction: column;
	}

	.dgx-cmp__col {
		flex: 1 1 auto;
	}

	.dgx-cmp__col--highlight {
		margin-bottom: 8px;
	}
}

/* =========================================================================
 * Checklist Matrix layout — a feature grid with a check / cross per column,
 * one highlighted column (tint + top accent + ribbon), a CTA and a footnote.
 * It reuses the shared header / ribbon / icon classes + colour vars, so the
 * existing Style controls drive both layouts. The outer panel + inner card are
 * baked here (the matrix needs a wrapper, unlike the columns layout).
 * ========================================================================= */
.dgx-cmp--matrix {
	--cmp-accent: #435970;
	--cmp-hl-tint: rgba(14, 26, 38, 0.025);
	--cmp-hl-accent: #435970;
	--cmp-hl-accent-h: 3px;
	--cmp-mark-size: 30px;
	display: block;
	flex: none;
	padding: 22px;
	border-radius: 32px;
	background: #dfedfb;
}

.dgx-cmp__matrix {
	overflow: hidden;
	border: 1px solid var(--cmp-rule);
	border-radius: 24px;
	background: #ffffff;
}

.dgx-cmp__matrix-row {
	display: grid;
	grid-template-columns: 1.6fr repeat(var(--cmp-cols, 3), 1fr);
	align-items: stretch;
}

.dgx-cmp__matrix-row:not(.dgx-cmp__matrix-head) {
	border-top: 1px solid var(--cmp-rule);
}

.dgx-cmp__mcell {
	position: relative;
	min-width: 0;
	padding: 16px 18px;
}

/* Keep cell content above the per-column background overlay. */
.dgx-cmp__mcell > *:not(.dgx-cmp__bg) {
	position: relative;
	z-index: 1;
}

/* Feature label (first column). */
.dgx-cmp__feat-label {
	display: flex;
	align-items: center;
	padding-right: 28px;
	padding-left: 28px;
	font-family: "Inter Tight", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: #0e1a26;
}

/* Header cells. */
.dgx-cmp__matrix-head .dgx-cmp__mcell {
	padding-top: 24px;
	padding-bottom: 24px;
	text-align: center;
}

.dgx-cmp__mhead-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.dgx-cmp--matrix .dgx-cmp__logo {
	height: 40px;
	margin: 0 auto;
}

.dgx-cmp--matrix .dgx-cmp__name {
	font-size: 26px;
}

.dgx-cmp--matrix .dgx-cmp__subtitle {
	margin-top: 4px;
}

.dgx-cmp__mcell--highlight .dgx-cmp__subtitle {
	color: var(--cmp-accent);
}

.dgx-cmp__subtitle--strike {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(14, 26, 38, 0.3);
}

/* Highlight column — continuous tint, top accent on the header, ribbon. */
.dgx-cmp__mcell--highlight {
	background: var(--cmp-hl-tint);
}

.dgx-cmp__matrix-head .dgx-cmp__mcell--highlight {
	padding-top: 18px;
	border-top: var(--cmp-hl-accent-h) solid var(--cmp-hl-accent);
}

/* In the matrix the card clips overflow, so the badge can't bleed above it —
   render it in normal flow at the top of the highlighted header cell (centred
   by the cell's text-align) so it always pushes the name down and never
   overlaps it, whatever the name length / font size. */
.dgx-cmp--matrix .dgx-cmp__ribbon {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	margin: 0 0 12px;
	vertical-align: top;
}

/* Mark cells. */
.dgx-cmp__mmark {
	display: flex;
	align-items: center;
	justify-content: center;
}

.dgx-cmp--matrix .dgx-cmp__icon {
	width: var(--cmp-mark-size);
	height: var(--cmp-mark-size);
}

.dgx-cmp--matrix .dgx-cmp__icon svg {
	width: calc(var(--cmp-mark-size) * 0.5);
	height: calc(var(--cmp-mark-size) * 0.5);
}

.dgx-cmp--matrix .dgx-cmp__mcell--highlight .dgx-cmp__icon {
	border: 0;
	background: var(--cmp-ico-hl-bg, var(--cmp-ink));
	color: var(--cmp-ico-hl-color, #ffffff);
}

/* CTA. */
.dgx-cmp__cta-wrap {
	margin-top: 22px;
	text-align: center;
}

.dgx-cmp__cta {
	appearance: none;
	-webkit-appearance: none;
	min-width: 0;
	min-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 30px;
	border: 0;
	border-radius: 999px;
	background: #0e1a26;
	color: #ffffff;
	font-family: "Inter Tight", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.dgx-cmp__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 32px rgba(14, 26, 38, 0.3);
}

.dgx-cmp__cta svg,
.dgx-cmp__cta i {
	width: 1em;
	height: 1em;
	font-size: 1em;
	fill: currentColor;
}

/* Footnote. */
.dgx-cmp__footnote {
	margin: 18px 0 0;
	text-align: center;
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.5;
	color: rgba(14, 26, 38, 0.5);
}

@media (max-width: 600px) {
	.dgx-cmp__feat-label {
		padding-right: 10px;
		padding-left: 14px;
	}

	.dgx-cmp__matrix-head .dgx-cmp__mcell,
	.dgx-cmp__mmark {
		padding-right: 6px;
		padding-left: 6px;
	}
}