/* Grid tracks are declared with minmax(0, …) throughout.
   A bare `1fr` track has min-width:auto, so one unbreakable child (a long mono
   string, the dashboard mock, an Arabic word) expands the track and pushes the
   whole page wider than the viewport. Verified at 320-1440px in EN/AR/FR. */

/**
 * AdProMax — marketing page presentation.
 * Landing (front page), About, FAQ, Early Access.
 */

/* =====================================================================
   Landing — hero
   ===================================================================== */

.apm-hero {
	background: linear-gradient(180deg, var(--apm-bg-hero-top) 0%, var(--apm-bg-section) 100%);
	border-block-end: 1px solid var(--apm-border);
	padding-block: var(--apm-section-block-sm) 0;
}

.apm-hero__intro {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

.apm-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px;
	border: 1px solid var(--apm-border-hero);
	background: var(--apm-white);
	border-radius: var(--apm-radius-pill);
	font-size: var(--apm-size-eyebrow);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--apm-text-muted);
	margin-block: 0 22px;
}

.apm-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--apm-success);
	display: inline-block;
	flex: 0 0 auto;
}

.apm-hero h1 {
	font-size: var(--apm-size-h1);
	line-height: var(--apm-lh-tight);
	margin-block: 0 18px;
}

.apm-hero__body {
	font-size: var(--apm-size-lead-lg);
	color: var(--apm-text-muted);
	margin-inline: auto;
	max-width: var(--apm-measure);
	margin-block-end: var(--apm-space-lg);
}

.apm-hero__paths {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
	gap: var(--apm-space-md);
	max-width: var(--apm-measure);
	margin-inline: auto;
	margin-block-end: var(--apm-space-lg);
	text-align: start;
}

.apm-path {
	display: block;
	padding: 18px 20px;
	border-radius: var(--apm-radius-lg);
	min-height: var(--apm-tap);
	border: 1px solid;
}

.apm-path__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.apm-path__kicker {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-block-end: 5px;
}

.apm-path__label {
	display: block;
	font-size: var(--apm-size-body);
	font-weight: 700;
}

.apm-path--dark {
	background: var(--apm-dark);
	border-color: var(--apm-dark);
	color: var(--apm-white);
}

.apm-path--dark:hover,
.apm-path--dark:focus {
	background: #151c36;
	color: var(--apm-white);
}

.apm-path--dark .apm-path__kicker {
	color: var(--apm-pink-soft);
}

.apm-path--dark .apm-path__label,
.apm-path--dark .apm-path__arrow {
	color: var(--apm-white);
}

.apm-path--dark .apm-path__arrow {
	color: var(--apm-pink);
}

.apm-path--light {
	background: var(--apm-white);
	border-color: var(--apm-border-stronger);
	color: var(--apm-text);
}

.apm-path--light:hover,
.apm-path--light:focus {
	border-color: var(--apm-brand);
	color: var(--apm-text);
}

.apm-path--light .apm-path__kicker,
.apm-path--light .apm-path__arrow {
	color: var(--apm-brand);
}

.apm-path__arrow {
	font-size: 19px;
}

.apm-hero__foot {
	font-size: var(--apm-size-small);
	color: var(--apm-text-subtle);
	margin-block: 0 var(--apm-space-2xl);
}

/* ---- Dashboard showcase (decorative product screenshot) -------------- */

.apm-showcase {
	max-width: 100%;
	border: 1px solid var(--apm-border-hero);
	border-radius: var(--apm-radius-xl) var(--apm-radius-xl) 0 0;
	background: var(--apm-white);
	box-shadow: var(--apm-shadow-card);
	overflow: hidden;
}

.apm-showcase__chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-block-end: 1px solid var(--apm-border);
	background: var(--apm-bg-muted);
}

.apm-showcase__dots {
	display: flex;
	gap: 6px;
}

.apm-showcase__dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #e1e4ef;
	display: block;
}

.apm-showcase__url {
	flex: 1;
	text-align: center;
	font-family: var(--apm-font-mono);
	font-size: var(--apm-size-micro);
	color: var(--apm-text-subtle);
}

.apm-showcase__scroll {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	/* The frame inside is a fixed 1020px illustration. Without an explicit
	   containment context the track can still report its intrinsic width to the
	   page, which pushed the document past the viewport at 320px and, in RTL,
	   spilled to the left. */
	contain: paint;
	-webkit-overflow-scrolling: touch;
}

.apm-showcase__frame {
	min-width: 1020px;
	display: grid;
	grid-template-columns: 214px minmax(0, 1fr);
	background: #f6f7fb;
}

.apm-showcase__side {
	background: var(--apm-dark);
	padding: var(--apm-space-md) var(--apm-space-sm) 26px;
	min-height: 660px;
}

.apm-showcase__brand {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 6px 20px;
}

.apm-showcase__brand strong {
	display: block;
	font-size: 14px;
	font-weight: 800;
	color: var(--apm-white);
}

.apm-showcase__brand span {
	display: block;
	font-family: var(--apm-font-mono);
	font-size: 8.5px;
	letter-spacing: var(--apm-ls-wide);
	color: var(--apm-dark-text-dimmer);
}

.apm-showcase__group {
	font-family: var(--apm-font-mono);
	font-size: 9px;
	letter-spacing: var(--apm-ls-wide);
	color: var(--apm-dark-text-dimmer);
	padding: var(--apm-space-md) var(--apm-space-xs) var(--apm-space-xs);
}

.apm-showcase__group:first-of-type {
	padding-block-start: 0;
}

.apm-showcase__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 9px;
	padding: var(--apm-space-xs) 10px;
	border-radius: var(--apm-radius);
	color: var(--apm-dark-text-nav);
	font-size: 13px;
	font-weight: 500;
}

.apm-showcase__item--active {
	background: var(--apm-brand);
	color: var(--apm-white);
	font-weight: 700;
	margin-block-end: var(--apm-space-2xs);
}

.apm-showcase__item b {
	font-family: var(--apm-font-mono);
	font-size: 10.5px;
	font-weight: 400;
	color: var(--apm-dark-text-nav);
}

.apm-showcase__item .apm-pill-count {
	font-family: var(--apm-font-mono);
	font-size: 10px;
	background: var(--apm-pink-deep);
	color: var(--apm-white);
	padding: 2px 7px;
	border-radius: var(--apm-radius-pill);
}

.apm-showcase__main {
	min-width: 0;
}

.apm-showcase__topbar {
	display: flex;
	align-items: center;
	gap: var(--apm-space-md);
	padding: var(--apm-space-sm) 20px;
	background: var(--apm-white);
	border-block-end: 1px solid var(--apm-border);
}

.apm-showcase__search {
	flex: 1;
	max-width: 340px;
	display: flex;
	align-items: center;
	gap: var(--apm-space-xs);
	padding: 9px var(--apm-space-sm);
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius);
	background: var(--apm-bg-muted);
	font-size: var(--apm-size-tiny);
	color: var(--apm-text-subtle);
}

.apm-showcase__chip {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: var(--apm-space-xs) 11px;
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius);
	font-size: var(--apm-size-tiny);
	font-weight: 600;
	color: var(--apm-text-body);
}

.apm-showcase__avatar {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--apm-brand);
	color: var(--apm-white);
	font-size: var(--apm-size-eyebrow);
	font-weight: 700;
}

.apm-showcase__body {
	padding: 20px 20px 26px;
}

.apm-showcase__kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--apm-space-sm);
	margin-block-end: var(--apm-space-sm);
}

.apm-kpi {
	background: var(--apm-white);
	border: 1px solid var(--apm-border);
	border-radius: var(--apm-radius-lg);
	padding: 13px 14px;
}

.apm-kpi__label {
	font-family: var(--apm-font-mono);
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--apm-text-subtle);
	margin-block-end: 7px;
}

.apm-kpi__value {
	font-family: var(--apm-font-mono);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: var(--apm-ls-snug);
	color: var(--apm-text-strong);
}

.apm-kpi__value small {
	font-size: 11px;
	color: var(--apm-text-subtle);
}

.apm-kpi__note {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--apm-text-subtle);
	margin-block-start: 5px;
}

.apm-kpi__note--up {
	color: var(--apm-success);
}

.apm-kpi__value--alert {
	color: var(--apm-pink-deep);
}

.apm-showcase__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: var(--apm-space-sm);
	margin-block-end: var(--apm-space-sm);
}

.apm-panel {
	background: var(--apm-white);
	border: 1px solid var(--apm-border);
	border-radius: var(--apm-radius-lg);
	padding: 14px var(--apm-space-md);
}

.apm-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--apm-space-sm);
	margin-block-end: 14px;
}

.apm-panel__title {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--apm-text-strong);
}

.apm-panel__sub {
	font-family: var(--apm-font-mono);
	font-size: 10px;
	color: var(--apm-text-subtle);
	margin-block-start: 3px;
}

.apm-legend {
	display: flex;
	gap: var(--apm-space-sm);
	font-family: var(--apm-font-mono);
	font-size: 10px;
	color: var(--apm-text-muted);
}

.apm-legend i {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	margin-inline-end: 5px;
}

.apm-chart {
	display: grid;
	grid-template-columns: repeat(14, minmax(0, 1fr));
	gap: 7px;
	align-items: end;
	height: 150px;
	padding-block-end: 6px;
	border-block-end: 1px solid var(--apm-border-soft);
}

.apm-chart__col {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}

.apm-chart__axis {
	display: flex;
	justify-content: space-between;
	font-family: var(--apm-font-mono);
	font-size: 9.5px;
	color: var(--apm-text-subtle);
	margin-block-start: 7px;
}

.apm-status {
	font-family: var(--apm-font-mono);
	font-size: 9.5px;
	letter-spacing: 0.06em;
	padding: var(--apm-space-2xs) var(--apm-space-xs);
	border-radius: var(--apm-radius-sm);
}

.apm-status--ok {
	color: var(--apm-success);
	background: var(--apm-success-bg);
}

.apm-status--warn {
	color: var(--apm-warning);
	background: var(--apm-warning-bg);
}

.apm-status--review {
	color: var(--apm-brand-hover);
	background: var(--apm-brand-tint);
}

.apm-status--neutral {
	color: var(--apm-text-muted);
	background: var(--apm-border-softer);
}

.apm-alloc {
	display: grid;
	gap: 9px;
}

.apm-alloc__row {
	display: flex;
	justify-content: space-between;
	font-size: 11.5px;
	margin-block-end: var(--apm-space-2xs);
}

.apm-alloc__track {
	height: 5px;
	background: var(--apm-border-soft);
	border-radius: var(--apm-radius-pill);
}

.apm-alloc__fill {
	height: 5px;
	border-radius: var(--apm-radius-pill);
}

.apm-showcase table {
	width: 100%;
	border-collapse: collapse;
}

.apm-showcase th {
	text-align: start;
	font-size: var(--apm-size-micro);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--apm-text-subtle);
	padding: 9px var(--apm-space-md);
	background: #fafbfe;
	border-block-end: 1px solid var(--apm-border-soft);
}

.apm-showcase td {
	padding: 11px var(--apm-space-md);
	border-block-end: 1px solid var(--apm-border-softer);
	font-size: 12px;
	color: var(--apm-text-body);
}

.apm-showcase .apm-num {
	text-align: end;
	font-family: var(--apm-font-mono);
	color: var(--apm-text-strong);
}

/* =====================================================================
   Marquee
   ===================================================================== */

.apm-marquee {
	padding-block: var(--apm-space-2xl);
	border-block-end: 1px solid var(--apm-border);
	background: var(--apm-white);
	overflow: hidden;
}

.apm-marquee__caption {
	text-align: center;
	font-size: var(--apm-size-eyebrow);
	font-weight: 700;
	letter-spacing: var(--apm-ls-wide);
	text-transform: uppercase;
	color: var(--apm-text-subtle);
	margin-block: 0 20px;
	padding-inline: var(--apm-space-md);
}

.apm-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: apm-marquee 26s linear infinite;
}

.apm-marquee__set {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: clamp(28px, 7vw, 64px);
	padding-inline-end: clamp(28px, 7vw, 64px);
}

.apm-marquee__set span {
	font-weight: 700;
	letter-spacing: var(--apm-ls-snug);
	color: #8891ac;
}

@keyframes apm-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.apm-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}

	.apm-marquee__set:last-child {
		display: none;
	}
}

/* =====================================================================
   Platform cards
   ===================================================================== */

/* Seven cards in a 3-column grid left the 7th stranded on a row of its own.
   An 8-track grid with each card spanning 2 gives a true 4 + 3: the second row's
   three cards start one half-card in, so they are centred under the first row
   without stretching, absolute positioning or placeholder cards. DOM order — and
   therefore reading and tab order — is untouched. */
@media (min-width: 1100px) {
	.apm-section .apm-card-grid--platforms {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.apm-card-grid--platforms > .apm-platform {
		grid-column: span 2;
	}

	.apm-card-grid--platforms > .apm-platform:nth-child(5) {
		grid-column: 2 / span 2;
	}
}

/* Tablet: 2 across on a 4-track grid, 7th centred the same way. */
@media (min-width: 680px) and (max-width: 1099px) {
	.apm-section .apm-card-grid--platforms {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.apm-card-grid--platforms > .apm-platform {
		grid-column: span 2;
	}

	.apm-card-grid--platforms > .apm-platform:nth-child(7) {
		grid-column: 2 / span 2;
	}
}

@media (max-width: 679px) {
	.apm-section .apm-card-grid--platforms {
		grid-template-columns: minmax(0, 1fr);
	}
}

.apm-platform {
	position: relative;
	overflow: hidden;
	border: 1px solid;
	border-radius: var(--apm-radius-lg);
	padding: var(--apm-space-lg);
	transition: border-color var(--apm-dur-fast) var(--apm-ease),
		box-shadow var(--apm-dur-fast) var(--apm-ease);
}

.apm-platform__glyph {
	position: absolute;
	inset-inline-end: -6px;
	inset-block-end: -34px;
	font-size: 150px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	pointer-events: none;
}

.apm-platform__inner {
	position: relative;
}

.apm-platform__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--apm-space-sm);
	margin-block-end: 14px;
}

.apm-platform__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--apm-space-xs);
	font-size: 14px;
	font-weight: 800;
	margin: 0;
}

.apm-platform__chip {
	width: 10px;
	height: 10px;
	border-radius: var(--apm-radius-pill);
	flex: 0 0 auto;
}

.apm-platform__badge {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: var(--apm-space-2xs) 9px;
	border-radius: var(--apm-radius-sm);
	white-space: nowrap;
}

.apm-platform h3 {
	font-size: var(--apm-size-h3);
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0 0 7px;
	color: inherit;
}

.apm-platform__desc {
	font-size: 14px;
	line-height: var(--apm-lh-body);
	margin: 0 0 var(--apm-space-md);
}

.apm-platform dl {
	display: grid;
	gap: var(--apm-space-xs);
	font-size: 12px;
	margin: 0;
}

.apm-platform dl > div {
	display: flex;
	justify-content: space-between;
	gap: var(--apm-space-sm);
	padding: 9px 11px;
	border: 1px solid;
	border-radius: var(--apm-radius);
}

.apm-platform dd {
	font-family: var(--apm-font-mono);
	font-weight: 700;
	margin: 0;
}

/* =====================================================================
   White-label
   ===================================================================== */

.apm-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--apm-space-2xl);
	align-items: center;
}

.apm-checklist {
	display: grid;
	gap: var(--apm-space-sm);
	margin: 0 0 var(--apm-space-xl);
	padding: 0;
	list-style: none;
}

.apm-checklist li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: var(--apm-size-base);
	line-height: 1.55;
}

.apm-checklist li::before {
	content: "\2713";
	color: var(--apm-pink);
	font-weight: 700;
	flex: 0 0 auto;
}

.apm-tabs {
	display: inline-flex;
	gap: var(--apm-space-2xs);
	padding: var(--apm-space-2xs);
	background: #151c36;
	border: 1px solid var(--apm-dark-border-strong);
	border-radius: var(--apm-radius);
	margin-block-end: 14px;
	flex-wrap: wrap;
}

.apm-tabs button {
	border: 0;
	background: transparent;
	color: var(--apm-dark-text-body);
	font-family: inherit;
	font-size: var(--apm-size-tiny);
	font-weight: 700;
	min-height: var(--apm-tap);
	padding-inline: var(--apm-space-md);
	border-radius: var(--apm-radius);
	cursor: pointer;
}

.apm-tabs button[aria-pressed="true"] {
	background: var(--apm-brand);
	color: var(--apm-white);
}

.apm-tabs button[aria-pressed="true"][data-apm-brand="agency"] {
	background: var(--apm-pink-deep);
}

.apm-wl-preview {
	border: 1px solid var(--apm-dark-border-strong);
	border-radius: var(--apm-radius-lg);
	overflow: hidden;
	background: var(--apm-dark-raised);
}

.apm-wl-panel[hidden] {
	display: none;
}

.apm-wl-panel__grid {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
}

@media (max-width: 1080px) {
	.apm-wl-panel__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.apm-wl-panel__side {
	padding: 14px 11px;
	border-inline-end: 1px solid var(--apm-dark-border-strong);
}

.apm-wl-panel__side div {
	padding: var(--apm-space-xs) 9px;
	font-size: 11.5px;
}

.apm-wl-panel__body {
	padding: var(--apm-space-md);
}

.apm-wl-panel__bars {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 5px;
	align-items: end;
	height: 76px;
}

/* =====================================================================
   Pillars accordion
   ===================================================================== */

.apm-pillars {
	background: linear-gradient(180deg, var(--apm-dark-gradient-top) 0%, var(--apm-dark-deeper) 100%);
	border-block-end: 1px solid var(--apm-dark-border);
}

.apm-bento {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

@media (min-width: 640px) {
	.apm-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.apm-bento {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.apm-pillar {
	border: 1px solid var(--apm-dark-border-line);
	border-radius: var(--apm-radius-xl);
	background: rgba(20, 27, 50, 0.55);
	box-shadow: 0 18px 40px -34px rgba(0, 0, 0, 0.9);
	overflow: hidden;
	transition: border-color 0.3s var(--apm-ease), background 0.3s var(--apm-ease),
		box-shadow 0.3s var(--apm-ease);
}

.apm-pillar h3 {
	margin: 0;
}

.apm-pillar__trigger {
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-height: var(--apm-tap);
	padding: 20px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: start;
}

.apm-pillar__trigger:hover {
	background: rgba(124, 138, 240, 0.07);
}

.apm-pillar__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border-radius: var(--apm-radius-lg);
	background: rgba(124, 138, 240, 0.1);
	color: #98a1c4;
	transition: background 0.3s var(--apm-ease), color 0.3s var(--apm-ease);
}

.apm-pillar__no {
	display: block;
	font-size: var(--apm-size-micro);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--apm-brand-light);
	margin-block-end: var(--apm-space-2xs);
}

.apm-pillar__title {
	display: block;
	font-size: var(--apm-size-h4);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--apm-white);
}

.apm-pillar__chev {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(124, 138, 240, 0.22);
	color: var(--apm-dark-text-dim);
	transition: transform var(--apm-dur-slow) var(--apm-ease), border-color 0.3s var(--apm-ease),
		color 0.3s var(--apm-ease);
}

.apm-pillar__panel {
	padding-inline: 20px;
	padding-block-end: 20px;
}

.apm-pillar__panel p {
	font-size: var(--apm-size-base);
	line-height: var(--apm-lh-relaxed);
	color: var(--apm-dark-text-body);
	margin: 0 0 14px;
}

.apm-pillar__proof {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px;
	border: 1px solid rgba(124, 138, 240, 0.24);
	border-radius: var(--apm-radius-pill);
	background: rgba(61, 80, 224, 0.12);
	margin: 0;
	font-family: var(--apm-font-mono);
	font-size: 11.5px;
	color: var(--apm-dark-text-body);
}

.apm-pillar__proof::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--apm-pink);
	flex: 0 0 auto;
}

.apm-pillar[data-open="true"] {
	border-color: var(--apm-dark-border-focus);
	background: rgba(61, 80, 224, 0.16);
	box-shadow: 0 0 0 1px rgba(92, 109, 234, 0.45), 0 24px 52px -28px rgba(61, 80, 224, 0.95);
}

.apm-pillar[data-open="true"] .apm-pillar__icon {
	background: rgba(61, 80, 224, 0.3);
	color: var(--apm-brand-pale);
}

.apm-pillar[data-open="true"] .apm-pillar__chev {
	transform: rotate(180deg);
	border-color: rgba(124, 138, 240, 0.55);
	color: var(--apm-brand-pale);
}

/* No-JS: panels are open by default and the chevron is hidden. */
.apm-pillar__panel[hidden] {
	display: none;
}

/* =====================================================================
   FAQ accordion (details/summary — works without JavaScript)
   ===================================================================== */

.apm-faq-group {
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-lg);
	background: var(--apm-bg-subtle);
	overflow: hidden;
}

.apm-faq-item {
	border-block-end: 1px solid var(--apm-border-soft);
	transition: background var(--apm-dur-fast) var(--apm-ease);
	scroll-margin-block-start: 96px;
}

.apm-faq-item:last-child {
	border-block-end: 0;
}

.apm-faq-item:hover {
	background: var(--apm-bg-hover);
}

.apm-faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--apm-space-md);
	padding: var(--apm-space-md) 20px;
	min-height: 56px;
	cursor: pointer;
	list-style: none;
	font-size: var(--apm-size-body);
	line-height: 1.45;
	font-weight: 700;
	color: var(--apm-text-strong);
}

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

.apm-faq-item__chev {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--apm-brand-tint);
	color: var(--apm-brand-hover);
	font-size: var(--apm-size-base);
	font-weight: 700;
	line-height: 1;
	transition: transform 0.22s var(--apm-ease);
}

.apm-faq-item[open] .apm-faq-item__chev {
	transform: rotate(45deg);
}

.apm-faq-item__answer {
	padding: 0 20px 18px;
	font-size: 14.5px;
	line-height: var(--apm-lh-relaxed);
	color: var(--apm-text-muted);
	max-width: 680px;
	margin: 0;
}

.apm-faq-count {
	font-family: var(--apm-font-mono);
	font-size: var(--apm-size-micro);
	letter-spacing: 0.1em;
	color: var(--apm-text-subtle);
}

/* =====================================================================
   About page
   ===================================================================== */

.apm-about-hero {
	background:
		radial-gradient(900px 420px at 82% -10%, rgba(61, 80, 224, 0.14), transparent 62%),
		linear-gradient(180deg, var(--apm-bg-hero-top) 0%, var(--apm-bg-section) 100%);
	border-block-end: 1px solid var(--apm-border);
	padding-block: var(--apm-section-block-sm) 72px;
}

.apm-about-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--apm-space-2xl);
	align-items: center;
}

@media (max-width: 1024px) {
	.apm-about-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.apm-note-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: var(--apm-size-small);
	color: var(--apm-text-muted);
	background: var(--apm-brand-tint);
	border: 1px solid var(--apm-brand-tint-border);
	border-radius: var(--apm-radius-pill);
	padding: 9px 15px;
	margin: 0;
}

.apm-note-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: var(--apm-radius-pill);
	background: var(--apm-brand);
	flex: 0 0 auto;
}

.apm-viz {
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-2xl);
	background: var(--apm-white);
	padding: 22px;
	box-shadow: var(--apm-shadow-soft);
}

.apm-viz__core {
	display: flex;
	justify-content: center;
	margin-block-end: 2px;
}

.apm-viz__core span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: var(--apm-space-sm) 18px;
	border-radius: var(--apm-radius-pill);
	background: var(--apm-dark);
	color: var(--apm-white);
	font-size: 14px;
	font-weight: 700;
}

.apm-viz__core i {
	width: 9px;
	height: 9px;
	border-radius: var(--apm-radius-pill);
	background: var(--apm-success-bright);
	flex: 0 0 auto;
}

.apm-rail {
	display: flex;
	max-width: 100%;
	gap: var(--apm-space-xs);
	overflow-x: auto;
	padding-block-end: var(--apm-space-2xs);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	min-width: 0;
	margin: 0;
	padding-inline: 0;
	list-style: none;
}

.apm-rail::-webkit-scrollbar {
	height: 4px;
}

.apm-rail::-webkit-scrollbar-thumb {
	background: var(--apm-border-strong);
	border-radius: var(--apm-radius-pill);
}

.apm-node-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--apm-space-xs);
	min-height: var(--apm-tap);
	padding-inline: var(--apm-space-sm);
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-pill);
	background: var(--apm-white);
	color: var(--apm-text-body);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.2s var(--apm-ease), background 0.2s var(--apm-ease),
		color 0.2s var(--apm-ease);
}

.apm-node-btn[aria-pressed="true"],
.apm-node-btn[aria-selected="true"] {
	border-color: var(--apm-brand);
	background: var(--apm-brand-tint);
	color: var(--apm-brand-hover);
}

.apm-node-btn i {
	width: 9px;
	height: 9px;
	border-radius: var(--apm-radius-pill);
	flex: 0 0 auto;
}

.apm-viz__detail,
.apm-detail-card {
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-lg);
	background: var(--apm-bg-subtle);
	padding: var(--apm-space-md) 18px;
	min-height: 112px;
}

.apm-detail-card[hidden] {
	display: none;
}

.apm-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--apm-space-xs);
	font-size: 12px;
	font-weight: 700;
	color: var(--apm-brand-hover);
	background: var(--apm-brand-tint);
	border-radius: var(--apm-radius-pill);
	padding: 6px var(--apm-space-sm);
	margin: 0;
}

/* Who we serve */
.apm-aud {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: var(--apm-space-md);
	align-items: start;
}

@media (max-width: 900px) {
	.apm-aud {
		grid-template-columns: minmax(0, 1fr);
	}
}

.apm-aud__tabs {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apm-aud__tab {
	display: flex;
	align-items: center;
	gap: var(--apm-space-sm);
	width: 100%;
	min-height: 56px;
	padding-inline: var(--apm-space-md);
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-md);
	background: var(--apm-white);
	cursor: pointer;
	font-family: inherit;
	text-align: start;
	font-size: var(--apm-size-base);
	font-weight: 700;
	color: var(--apm-text-body);
	transition: border-color 0.22s var(--apm-ease), background 0.22s var(--apm-ease),
		box-shadow 0.22s var(--apm-ease);
}

.apm-aud__tab[aria-selected="true"] {
	border-color: var(--apm-brand);
	background: var(--apm-brand-tint);
	color: var(--apm-text-strong);
	box-shadow: 0 0 0 1px rgba(61, 80, 224, 0.22);
}

.apm-aud__panel {
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-xl);
	background: linear-gradient(180deg, var(--apm-bg-subtle), #f6f8fe);
	padding: 28px;
	min-height: 264px;
}

.apm-aud__panel[hidden] {
	display: none;
}

.apm-aud__panel h3 {
	font-size: clamp(20px, 2.2vw, 24px);
	margin-block-end: 18px;
}

.apm-aud__panel dl {
	display: grid;
	gap: var(--apm-space-md);
	margin: 0;
}

.apm-aud__panel dt {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--apm-dark-text-dimmer);
	margin-block-end: 6px;
}

.apm-aud__panel dd {
	font-size: var(--apm-size-base);
	line-height: var(--apm-lh-body);
	color: var(--apm-text-muted);
	margin: 0;
}

.apm-aud__panel dd.is-outcome {
	color: var(--apm-text-strong);
	font-weight: 600;
}

/* Before / after */
.apm-cmp {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--apm-space-md);
	align-items: start;
}

@media (max-width: 860px) {
	.apm-cmp {
		grid-template-columns: minmax(0, 1fr);
	}
}

.apm-cmp__card {
	border: 1px solid var(--apm-dark-border-soft);
	border-radius: var(--apm-radius-xl);
	background: rgba(20, 27, 50, 0.6);
	padding: 26px;
	transition: border-color var(--apm-dur) var(--apm-ease), background var(--apm-dur) var(--apm-ease);
}

.apm-cmp__card[data-active="true"] {
	border-color: var(--apm-dark-border-focus);
	background: rgba(61, 80, 224, 0.12);
}

.apm-cmp__card h3 {
	font-size: var(--apm-size-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--apm-space-md);
}

.apm-cmp__card--before h3 {
	color: var(--apm-pink-soft);
}

.apm-cmp__card--after h3 {
	color: var(--apm-success-soft);
}

.apm-cmp__card ul {
	display: grid;
	gap: var(--apm-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.apm-cmp__card li {
	display: flex;
	gap: var(--apm-space-sm);
	align-items: flex-start;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--apm-dark-text-body);
}

.apm-cmp__card li::before {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: var(--apm-radius-pill);
	font-size: var(--apm-size-micro);
	line-height: 16px;
	text-align: center;
	border: 1px solid;
}

.apm-cmp__card--before li::before {
	content: "\00D7";
	border-color: rgba(242, 168, 205, 0.5);
	color: var(--apm-pink-soft);
}

.apm-cmp__card--after li::before {
	content: "\2713";
	border-color: rgba(143, 227, 190, 0.5);
	color: var(--apm-success-soft);
}

/* How it works */
.apm-flow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 20px;
	align-items: start;
}

@media (max-width: 900px) {
	.apm-flow {
		grid-template-columns: minmax(0, 1fr);
	}
}

.apm-flow__list {
	display: grid;
	gap: var(--apm-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.apm-flow__btn {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 56px;
	padding-inline: var(--apm-space-md);
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-md);
	background: var(--apm-white);
	cursor: pointer;
	font-family: inherit;
	text-align: start;
	transition: border-color 0.22s var(--apm-ease), background 0.22s var(--apm-ease);
}

.apm-flow__btn[aria-selected="true"] {
	border-color: var(--apm-brand);
	background: var(--apm-brand-tint);
}

.apm-flow__no {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: var(--apm-radius-pill);
	background: var(--apm-border-softer);
	color: var(--apm-text-muted);
	font-family: var(--apm-font-mono);
	font-size: 12px;
	font-weight: 700;
}

.apm-flow__btn[aria-selected="true"] .apm-flow__no {
	background: var(--apm-brand);
	color: var(--apm-white);
}

.apm-flow__label {
	flex: 1;
	min-width: 0;
	font-size: var(--apm-size-base);
	font-weight: 700;
	color: var(--apm-text-body);
}

.apm-flow__detail {
	position: sticky;
	inset-block-start: 96px;
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-xl);
	background: linear-gradient(180deg, var(--apm-bg-subtle), var(--apm-bg-section));
	padding: 26px;
	min-height: 220px;
}

.apm-flow__detail[hidden] {
	display: none;
}

/* Access steps */
.apm-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 14px;
	margin: 0 0 var(--apm-space-lg);
	padding: 0;
	list-style: none;
}

.apm-steps li {
	border: 1px solid var(--apm-dark-border-soft);
	border-radius: var(--apm-radius-md);
	background: rgba(20, 27, 50, 0.6);
	padding: var(--apm-space-lg);
}

.apm-steps__no {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--apm-radius-pill);
	background: rgba(61, 80, 224, 0.24);
	color: var(--apm-brand-pale);
	font-family: var(--apm-font-mono);
	font-size: 12px;
	font-weight: 700;
	margin-block-end: 14px;
}

.apm-quote-note {
	font-size: 14px;
	line-height: 1.7;
	color: var(--apm-dark-text-body);
	margin: 0;
	max-width: 680px;
	padding-inline-start: 18px;
	border-inline-start: 2px solid var(--apm-dark-border-bright);
}

/* Principles */
.apm-principles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 14px;
	align-items: start;
}

.apm-principle {
	border: 1px solid var(--apm-border-card);
	background: var(--apm-bg-subtle);
	border-radius: var(--apm-radius-md);
	overflow: hidden;
	transition: border-color var(--apm-dur) var(--apm-ease), background var(--apm-dur) var(--apm-ease),
		box-shadow var(--apm-dur) var(--apm-ease);
}

.apm-principle[data-open="true"] {
	border-color: var(--apm-brand);
	background: var(--apm-white);
	box-shadow: 0 0 0 1px rgba(61, 80, 224, 0.22), 0 18px 40px -28px rgba(61, 80, 224, 0.85);
}

.apm-principle h3 {
	margin: 0;
}

.apm-principle__trigger {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 64px;
	padding: var(--apm-space-md) 18px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	text-align: start;
}

.apm-principle__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: 11px;
	background: var(--apm-brand-tint);
	color: var(--apm-brand-hover);
	transition: background var(--apm-dur) var(--apm-ease), color var(--apm-dur) var(--apm-ease);
}

.apm-principle[data-open="true"] .apm-principle__icon {
	background: var(--apm-brand);
	color: var(--apm-white);
}

.apm-principle__label {
	flex: 1;
	min-width: 0;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--apm-text-strong);
	line-height: 1.3;
}

.apm-principle__chev {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-pill);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--apm-text-muted);
	transition: transform 0.22s var(--apm-ease);
}

.apm-principle[data-open="true"] .apm-principle__chev {
	transform: rotate(45deg);
}

.apm-principle__panel {
	padding: 0 18px 18px;
	font-size: 14.5px;
	line-height: var(--apm-lh-relaxed);
	color: var(--apm-text-muted);
	margin: 0;
}

.apm-principle__panel[hidden] {
	display: none;
}

/* =====================================================================
   Contact
   ===================================================================== */

.apm-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--apm-space-lg);
	align-items: start;
}

@media (max-width: 1080px) {
	.apm-contact-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.apm-contact-card {
	border: 1px solid var(--apm-dark-border-soft);
	border-radius: var(--apm-radius-xl);
	background: linear-gradient(180deg, rgba(20, 27, 50, 0.7), rgba(11, 16, 32, 0.9));
	padding: var(--apm-space-2xl) var(--apm-space-2xl);
}

.apm-contact-list {
	display: grid;
	gap: 10px;
	margin: 0 0 var(--apm-space-lg);
	padding: 0;
	list-style: none;
}

.apm-contact-list a {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 60px;
	padding-inline: 18px;
	border: 1px solid var(--apm-dark-border-strong);
	border-radius: var(--apm-radius-lg);
	background: rgba(14, 20, 42, 0.6);
	color: var(--apm-white);
	transition: border-color 0.22s var(--apm-ease), background 0.22s var(--apm-ease);
}

.apm-contact-list a:hover,
.apm-contact-list a:focus-visible {
	border-color: var(--apm-channel, var(--apm-brand-light));
	background: rgba(255, 255, 255, 0.05);
	color: var(--apm-white);
}

/* The channel colour tints the border and the icon only. Label text stays white on
   the dark surface, so a saturated colour never sits on a saturated ground. */
.apm-contact-list a:hover .apm-contact-list__icon,
.apm-contact-list a:focus-visible .apm-contact-list__icon {
	color: var(--apm-channel, var(--apm-brand-light));
	background: rgba(255, 255, 255, 0.1);
}

/* Official channel colours. The icon and label are always present, so the channel is
   never communicated by colour alone. */
.apm-contact-list li[data-channel="whatsapp"] a {
	--apm-channel: #25d366;
}

.apm-contact-list li[data-channel="telegram"] a {
	--apm-channel: #229ed9;
}

/* Email has no vendor colour; the approved brand light indigo is used, which clears
   4.5:1 against the dark contact surface. */
.apm-contact-list li[data-channel="email"] a {
	--apm-channel: var(--apm-brand-light);
}

/* The focus ring is never traded for the hover tint. */
.apm-contact-list a:focus-visible {
	outline: var(--apm-focus-width) solid var(--apm-channel, var(--apm-brand-light));
	outline-offset: var(--apm-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
	.apm-contact-list a {
		transition: none;
	}
}

.apm-contact-list__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: var(--apm-radius-md);
	background: rgba(255, 255, 255, 0.06);
}

.apm-contact-list strong {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--apm-white);
}

.apm-contact-list span {
	display: block;
	font-size: 13px;
	color: var(--apm-dark-text-subtle);
}

.apm-sla {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apm-sla li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--apm-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	color: var(--apm-dark-text-body);
	background: rgba(61, 80, 224, 0.14);
	border: 1px solid rgba(124, 138, 240, 0.28);
	border-radius: var(--apm-radius-pill);
	padding: 9px var(--apm-space-md);
}

.apm-chat {
	border: 1px solid rgba(124, 138, 240, 0.3);
	border-radius: var(--apm-radius-xl);
	background: linear-gradient(180deg, var(--apm-brand-hover), var(--apm-brand-strong));
	padding: var(--apm-space-xl);
}

.apm-chat__who {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 20px;
}

.apm-chat__avatar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: var(--apm-radius-pill);
	background: rgba(255, 255, 255, 0.16);
	color: var(--apm-white);
	font-size: 14px;
	font-weight: 800;
}

.apm-chat__thread {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apm-chat__thread li {
	max-width: 86%;
	margin: 0;
	padding: var(--apm-space-sm) 15px;
	font-size: 14.5px;
	line-height: 1.5;
	border-radius: var(--apm-radius-lg);
}

/* The white bubble sits on a dark section, where --apm-text-strong is remapped to
   white. Pin the ink colour instead so the text never disappears. */
.apm-chat__thread li.is-them {
	justify-self: end;
	color: var(--apm-dark);
	background: var(--apm-white);
	border-end-end-radius: var(--apm-space-2xs);
}

.apm-chat__thread li.is-us {
	justify-self: start;
	color: var(--apm-white);
	background: rgba(11, 16, 32, 0.34);
	border-end-start-radius: var(--apm-space-2xs);
}

/* =====================================================================
   Early Access
   ===================================================================== */

.apm-ea {
	min-height: 100vh;
	background:
		radial-gradient(1100px 620px at 12% -10%, rgba(61, 80, 224, 0.24), transparent 62%),
		radial-gradient(820px 520px at 96% 8%, rgba(217, 59, 135, 0.14), transparent 60%),
		var(--apm-dark-deep);
	color: var(--apm-dark-text);
}

.apm-ea a {
	color: var(--apm-brand-light);
}

.apm-ea a:hover,
.apm-ea a:focus {
	color: var(--apm-brand-lighter);
}

.apm-ea__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--apm-space-2xl);
	align-items: start;
	padding-block: var(--apm-space-2xl) 56px;
}

@media (min-width: 768px) {
	.apm-ea__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: 36px;
		padding-block: 56px 72px;
	}
}

@media (min-width: 1024px) {
	.apm-ea__grid {
		gap: 56px;
	}

	.apm-ea__intro {
		position: sticky;
		inset-block-start: 88px;
	}
}

.apm-ea h1 {
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: var(--apm-white);
	margin-block: 0 20px;
}

.apm-ea__lead {
	font-size: var(--apm-size-lead-lg);
	line-height: var(--apm-lh-relaxed);
	color: var(--apm-dark-text-muted);
	margin-block: 0 var(--apm-space-xl);
	max-width: 520px;
}

.apm-ea__stats {
	display: grid;
	gap: 1px;
	background: var(--apm-dark-border);
	border: 1px solid var(--apm-dark-border);
	border-radius: var(--apm-radius-md);
	overflow: hidden;
	margin: 0 0 var(--apm-space-xl);
	max-width: 520px;
}

.apm-ea__stats-duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	background: var(--apm-dark-border);
}

@media (min-width: 640px) {
	.apm-ea__stats-duo {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.apm-ea__stat {
	background: var(--apm-dark-panel);
	padding: 20px 22px;
}

.apm-ea__stat dt {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--apm-dark-text-faint);
	margin: 0 0 var(--apm-space-xs);
}

.apm-ea__stat dd {
	font-family: var(--apm-font-mono);
	font-size: var(--apm-space-lg);
	font-weight: 700;
	letter-spacing: var(--apm-ls-snug);
	color: var(--apm-white);
	margin: 0;
}

.apm-ea__stat dd.is-prose {
	font-family: var(--apm-font-body);
	font-size: var(--apm-size-base);
	font-weight: 400;
	line-height: var(--apm-lh-body);
	color: var(--apm-dark-text-body-alt);
}

.apm-ea__points {
	display: grid;
	gap: 14px;
	margin: 0 0 var(--apm-space-xl);
	padding: 0;
	list-style: none;
	max-width: 520px;
}

.apm-ea__points li {
	display: flex;
	gap: var(--apm-space-sm);
	align-items: flex-start;
	font-size: var(--apm-size-base);
	line-height: 1.55;
	color: var(--apm-dark-text-body-alt);
}

.apm-ea__points li::before {
	content: "\2713";
	color: var(--apm-pink);
	font-weight: 700;
	flex: 0 0 auto;
}

.apm-ea__note {
	font-size: 14px;
	line-height: 1.7;
	color: var(--apm-dark-text-dim);
	margin: 0;
	max-width: 520px;
	padding-inline-start: 20px;
	border-inline-start: 2px solid var(--apm-dark-border-bright);
}

.apm-ea__panel {
	background: linear-gradient(180deg, rgba(20, 27, 50, 0.72), rgba(10, 15, 30, 0.92));
	border: 1px solid var(--apm-dark-border-soft);
	border-radius: var(--apm-radius-2xl);
	padding: 20px;
	box-shadow: var(--apm-shadow-panel);
	scroll-margin-block-start: 88px;
}

@media (min-width: 768px) {
	.apm-ea__panel {
		padding: var(--apm-space-xl);
	}
}

.apm-ea__panel h2 {
	font-size: 22px;
	color: var(--apm-white);
	margin: 0;
}

.apm-ea__panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--apm-space-md);
	margin-block-end: var(--apm-space-xs);
	flex-wrap: wrap;
}

.apm-ea__counter {
	font-family: var(--apm-font-mono);
	font-size: 12px;
	color: var(--apm-dark-text-dim);
	margin: 0;
}

.apm-ea__blurb {
	font-size: 14.5px;
	line-height: var(--apm-lh-body);
	color: var(--apm-dark-text-dim);
	margin: 0 0 20px;
}

.apm-ea__progress {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--apm-space-xs);
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.apm-ea__progress li {
	height: var(--apm-space-2xs);
	border-radius: var(--apm-radius-pill);
	background: var(--apm-dark-border-soft);
}

.apm-ea__progress li[data-state="done"],
.apm-ea__progress li[data-state="current"] {
	background: var(--apm-brand);
}

.apm-ea__step[hidden] {
	display: none;
}

.apm-ea__step {
	display: grid;
	gap: 20px;
}

.apm-ea__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media (min-width: 640px) {
	.apm-ea__duo {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.apm-ea__nav {
	display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--apm-space-sm);
	margin-block-start: 28px;
	padding-block-start: var(--apm-space-lg);
	border-block-start: 1px solid var(--apm-dark-border-soft);
}

@media (min-width: 640px) {
	.apm-ea__nav {
		flex-direction: row;
		align-items: center;
	}

	.apm-ea__nav .apm-btn {
		width: auto;
	}
}

.apm-ea__nav .apm-btn {
	width: 100%;
}

.apm-ea__time-note {
	font-size: 13px;
	color: var(--apm-dark-text-faint);
	margin: 0;
}

.apm-ea__next {
	border: 1px solid var(--apm-dark-border-soft);
	border-radius: var(--apm-radius-md);
	padding: var(--apm-space-md) 18px;
	background: rgba(61, 80, 224, 0.08);
}

.apm-ea__next p:last-child {
	font-size: 14px;
	line-height: var(--apm-lh-relaxed);
	color: var(--apm-dark-text-body-alt);
	margin: 0;
}

.apm-ea__talk {
	font-size: var(--apm-size-tiny);
	line-height: var(--apm-lh-body);
	color: var(--apm-dark-text-faintest);
	margin: 20px 0 0;
}

.apm-ea__slot-notice {
	border: 1px dashed var(--apm-dark-border-bright);
	border-radius: var(--apm-radius-md);
	padding: var(--apm-space-lg);
	color: var(--apm-dark-text-muted);
	font-size: 14.5px;
	line-height: var(--apm-lh-relaxed);
}

/* ---------------------------------------------------------------------
   Form-plugin contract.
   Everything below is scoped to [data-apm-form]: a Gravity Forms (or WPForms)
   shortcode dropped inside #apm-form-slot inherits this styling with no
   restyling work. The theme owns presentation only — the plugin owns
   validation, storage, notifications and spam protection.
   ------------------------------------------------------------------- */

[data-apm-form] label,
[data-apm-form] .gfield_label,
[data-apm-form] .wpforms-field-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--apm-dark-text-body-alt);
	margin-block-end: var(--apm-space-xs);
}

[data-apm-form] input[type="text"],
[data-apm-form] input[type="email"],
[data-apm-form] input[type="tel"],
[data-apm-form] input[type="url"],
[data-apm-form] input[type="number"],
[data-apm-form] select,
[data-apm-form] textarea {
	width: 100%;
	min-height: var(--apm-control-h);
	padding-block: 14px;
	padding-inline: var(--apm-space-md);
	font-family: inherit;
	font-size: var(--apm-size-body);
	color: var(--apm-dark-text-bright);
	background-color: var(--apm-dark-field);
	border: 1px solid var(--apm-dark-border-mid);
	border-radius: var(--apm-radius-md);
	transition: border-color 0.16s var(--apm-ease), box-shadow 0.16s var(--apm-ease);
	appearance: none;
}

[data-apm-form] textarea {
	min-height: 132px;
	resize: vertical;
	line-height: var(--apm-lh-body);
}

[data-apm-form] input::placeholder,
[data-apm-form] textarea::placeholder {
	color: var(--apm-dark-text-placeholder);
}

[data-apm-form] input:hover,
[data-apm-form] select:hover,
[data-apm-form] textarea:hover {
	border-color: var(--apm-dark-border-hover);
}

[data-apm-form] input:focus,
[data-apm-form] select:focus,
[data-apm-form] textarea:focus {
	outline: none;
	border-color: var(--apm-dark-border-focus);
	box-shadow: 0 0 0 4px rgba(92, 109, 234, 0.28);
}

[data-apm-form] [aria-invalid="true"] {
	border-color: var(--apm-pink-error);
}

[data-apm-form] select {
	background-image:
		linear-gradient(45deg, transparent 50%, #8891b8 50%),
		linear-gradient(135deg, #8891b8 50%, transparent 50%);
	background-position: right 20px center, right 14px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-inline-end: 44px;
}

[dir="rtl"] [data-apm-form] select {
	background-position: left 14px center, left 20px center;
	padding-inline-end: var(--apm-space-md);
	padding-inline-start: 44px;
}

[data-apm-form] input[type="checkbox"],
[data-apm-form] input[type="radio"] {
	appearance: none;
	width: 22px;
	height: 22px;
	min-height: 22px;
	font-size: var(--apm-size-body);
	flex: 0 0 auto;
	margin: 0;
	border: 1px solid var(--apm-dark-border-hover);
	background: var(--apm-dark-field);
	cursor: pointer;
	transition: border-color 0.16s var(--apm-ease), background 0.16s var(--apm-ease);
}

[data-apm-form] input[type="checkbox"] {
	border-radius: var(--apm-radius-sm);
}

[data-apm-form] input[type="radio"] {
	border-radius: 50%;
}

[data-apm-form] input[type="radio"]:checked {
	background: var(--apm-brand);
	border-color: var(--apm-brand);
	box-shadow: inset 0 0 0 4px var(--apm-dark-field);
}

[data-apm-form] input[type="checkbox"]:checked {
	background: var(--apm-brand);
	border-color: var(--apm-brand);
	background-image: linear-gradient(#fff, #fff);
	background-size: 10px 10px;
	background-position: center;
	background-repeat: no-repeat;
}

[data-apm-form] fieldset {
	border: 1px solid var(--apm-dark-border-mid);
	border-radius: var(--apm-radius-lg);
	padding: 20px;
	margin: 0;
	background: rgba(8, 12, 24, 0.5);
}

[data-apm-form] legend {
	font-size: 13px;
	font-weight: 700;
	color: var(--apm-dark-text-body-alt);
	padding-inline: var(--apm-space-xs);
}

[data-apm-form] .apm-choice {
	display: flex;
	align-items: center;
	gap: var(--apm-space-sm);
	min-height: 48px;
	padding-inline: var(--apm-space-md);
	border: 1px solid var(--apm-dark-border-mid);
	border-radius: var(--apm-radius);
	background: var(--apm-dark-field);
	cursor: pointer;
	font-size: var(--apm-size-body);
	font-weight: 600;
	color: var(--apm-dark-text);
	margin: 0;
}

[data-apm-form] .apm-choice:hover {
	border-color: var(--apm-dark-border-hover);
}

[data-apm-form] .apm-choice-grid {
	display: grid;
	gap: var(--apm-space-xs);
	margin-block-start: var(--apm-space-xs);
}

[data-apm-form] .apm-choice-grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

[data-apm-form] .apm-consent {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: var(--apm-space-md);
	border: 1px solid var(--apm-dark-border-mid);
	border-radius: var(--apm-radius-md);
	background: rgba(8, 12, 24, 0.5);
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	line-height: var(--apm-lh-body);
	color: var(--apm-dark-text-body-alt);
	margin: 0;
}

[data-apm-form] .apm-required {
	color: var(--apm-pink);
	margin-inline-start: var(--apm-space-2xs);
}

[data-apm-form] .gfield_required,
[data-apm-form] .wpforms-required-label {
	color: var(--apm-pink);
	margin-inline-start: var(--apm-space-2xs);
}

[data-apm-form] .apm-hint,
[data-apm-form] .gfield_description,
[data-apm-form] .wpforms-field-description {
	font-size: var(--apm-size-tiny);
	line-height: 1.5;
	color: var(--apm-dark-text-dim);
	margin-block-start: var(--apm-space-xs);
}

[data-apm-form] .apm-field-error,
[data-apm-form] .validation_message,
[data-apm-form] .wpforms-error {
	font-size: 13px;
	color: var(--apm-pink-error-text);
	margin-block-start: var(--apm-space-xs);
}

[data-apm-form] .apm-field-error[hidden] {
	display: none;
}

[data-apm-form] .gform_footer input[type="submit"],
[data-apm-form] .wpforms-submit {
	min-height: var(--apm-control-h-lg);
	width: 100%;
	padding-inline: 28px;
	font-family: inherit;
	font-size: var(--apm-size-body);
	font-weight: 700;
	color: var(--apm-white);
	background: var(--apm-brand);
	border: 0;
	border-radius: var(--apm-radius-md);
	cursor: pointer;
}

[data-apm-form] .gform_fields,
[data-apm-form] .wpforms-field-container {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* =====================================================================
   Editorial (blog index, single, archives)
   ===================================================================== */

.apm-page-header {
	background: linear-gradient(180deg, var(--apm-bg-hero-top) 0%, var(--apm-bg-section) 100%);
	border-block-end: 1px solid var(--apm-border);
	padding-block: var(--apm-section-block-sm) 56px;
}

.apm-page-header h1 {
	font-size: var(--apm-size-h1-sub);
	margin-block: 0 14px;
}

.apm-page-header__intro {
	font-size: var(--apm-size-lead);
	color: var(--apm-text-muted);
	max-width: 640px;
	margin: 0;
}

.apm-featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--apm-space-lg);
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-xl);
	background: var(--apm-bg-subtle);
	overflow: hidden;
}

@media (min-width: 860px) {
	.apm-featured {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 0;
	}
}

.apm-featured__media {
	margin: 0;
}

.apm-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 10;
}

.apm-featured__body {
	padding: var(--apm-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--apm-space-sm);
	justify-content: center;
}

.apm-featured__body h2 {
	font-size: clamp(22px, 2.6vw, 30px);
	margin: 0;
}

/* Block-level heading link inside a padded card: a 44px hit box is invisible. */
.apm-featured__body h2 a {
	display: inline-flex;
	align-items: center;
	min-height: var(--apm-tap);
}

.apm-term-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apm-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.apm-term-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--apm-tap);
	padding-inline: var(--apm-space-md);
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-pill);
	background: var(--apm-white);
	color: var(--apm-text-body);
	font-size: 14px;
	font-weight: 700;
}

.apm-term-nav a:hover,
.apm-term-nav a:focus,
.apm-term-nav a[aria-current] {
	border-color: var(--apm-brand);
	background: var(--apm-brand-tint);
	color: var(--apm-brand-hover);
}

.apm-entry-header {
	max-width: var(--apm-content-width);
	margin-inline: auto;
	padding-block: var(--apm-space-xl) var(--apm-space-lg);
}

.apm-entry-title {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.08;
	margin-block: var(--apm-space-sm) var(--apm-space-md);
}

.apm-entry-deck {
	font-size: var(--apm-size-lead-lg);
	line-height: var(--apm-lh-relaxed);
	color: var(--apm-text-muted);
	margin-block-end: var(--apm-space-lg);
}

.apm-entry-media {
	margin: 0 0 var(--apm-space-xl);
}

.apm-entry-media img {
	width: 100%;
	border-radius: var(--apm-radius-xl);
}

.apm-byline {
	display: flex;
	align-items: center;
	gap: var(--apm-space-sm);
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--apm-text-subtle);
}

.apm-byline img {
	border-radius: 50%;
	flex: 0 0 auto;
}

/* Inline byline link: WCAG 2.5.8 minimum, not the 44px used for standalone controls. */
.apm-byline > span a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.apm-author-box {
	display: flex;
	gap: var(--apm-space-md);
	align-items: flex-start;
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-lg);
	background: var(--apm-bg-subtle);
	padding: var(--apm-space-lg);
	max-width: var(--apm-content-width);
	margin: var(--apm-space-2xl) auto 0;
}

.apm-author-box img {
	border-radius: 50%;
	flex: 0 0 auto;
}

.apm-author-box h2 {
	font-size: var(--apm-size-h4);
	margin: 0 0 6px;
}

.apm-author-box p {
	font-size: 14.5px;
	color: var(--apm-text-muted);
	margin: 0;
}

.apm-share {
	display: flex;
	align-items: center;
	gap: var(--apm-space-xs);
	flex-wrap: wrap;
	max-width: var(--apm-content-width);
	margin: var(--apm-space-xl) auto 0;
	padding-block-start: var(--apm-space-md);
	border-block-start: 1px solid var(--apm-border);
}

.apm-share__label {
	font-size: var(--apm-size-micro);
	font-weight: 700;
	letter-spacing: var(--apm-ls-wide);
	text-transform: uppercase;
	color: var(--apm-text-subtle);
	margin: 0;
}

.apm-share a,
.apm-share button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--apm-tap);
	min-width: var(--apm-tap);
	padding-inline: var(--apm-space-sm);
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius);
	background: var(--apm-white);
	color: var(--apm-text-body);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.apm-share a:hover,
.apm-share button:hover {
	border-color: var(--apm-brand);
	color: var(--apm-brand-hover);
}

.apm-related {
	margin-block-start: var(--apm-section-block-sm);
}

.apm-comments {
	max-width: var(--apm-content-width);
	margin: var(--apm-section-block-sm) auto 0;
}

.apm-comments .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.apm-comments .comment-list ol.children {
	list-style: none;
	padding-inline-start: var(--apm-space-lg);
}

.apm-comments article.comment-body {
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-lg);
	background: var(--apm-bg-subtle);
	padding: var(--apm-space-md) var(--apm-space-lg);
	margin-block-end: var(--apm-space-md);
}

.apm-comments .comment-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: var(--apm-size-tiny);
	color: var(--apm-text-subtle);
	margin-block-end: var(--apm-space-xs);
}

.apm-comments .comment-author img {
	border-radius: 50%;
}

.apm-comments .comment-form label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--apm-text-body);
	margin-block-end: 6px;
}

.apm-comments .comment-form input[type="text"],
.apm-comments .comment-form input[type="email"],
.apm-comments .comment-form input[type="url"],
.apm-comments .comment-form textarea {
	width: 100%;
	min-height: var(--apm-control-h);
	padding: var(--apm-space-sm) var(--apm-space-md);
	font-family: inherit;
	font-size: var(--apm-size-body);
	border: 1px solid var(--apm-border-strong);
	border-radius: var(--apm-radius);
	background: var(--apm-white);
}

.apm-comments .comment-form textarea {
	min-height: 140px;
}

.apm-comments .form-submit input {
	min-height: var(--apm-control-h);
	padding-inline: 26px;
	border: 0;
	border-radius: var(--apm-radius);
	background: var(--apm-brand);
	color: var(--apm-white);
	font-weight: 700;
	cursor: pointer;
}

.apm-comments .comment-awaiting-moderation,
.apm-comments .no-comments {
	font-size: 14px;
	color: var(--apm-text-subtle);
}

/* =====================================================================
   404 / search
   ===================================================================== */

.apm-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apm-space-sm);
	margin-block: var(--apm-space-lg);
	padding: 0;
	list-style: none;
}

.apm-result-count {
	font-family: var(--apm-font-mono);
	font-size: var(--apm-size-tiny);
	letter-spacing: 0.1em;
	color: var(--apm-text-subtle);
}

/* =====================================================================
   Small-screen adjustments
   ===================================================================== */

/* The dashboard mock is a fixed 1020px-wide illustration inside a horizontal
   scroller. Restructuring it by *viewport* width only made it taller — it never gets
   narrower — which is what produced a 1889px stack on a 375px screen. Its internal
   layout is now fixed at its designed proportions at every viewport; the container
   below decides how much of it is shown. */

@media (max-width: 640px) {
	.apm-contact-card {
		padding: var(--apm-space-lg);
	}

	.apm-aud__panel,
	.apm-flow__detail {
		padding: 20px;
	}
}

/* ---------------------------------------------------------------------
   Early Access — setup-required state (administrators only).
   The blueprint is an inert preview: dimmed, non-interactive, and excluded
   from focus and submission in the markup itself.
   ------------------------------------------------------------------- */

.apm-ea__setup {
	border: 1px solid var(--apm-dark-border-bright);
	border-radius: var(--apm-radius-md);
	background: rgba(61, 80, 224, 0.1);
	padding: var(--apm-space-lg);
	margin-block-end: var(--apm-space-lg);
	font-size: 14.5px;
	line-height: var(--apm-lh-relaxed);
	color: var(--apm-dark-text-body-alt);
}

.apm-ea__setup p {
	margin-block: 0 var(--apm-space-sm);
}

.apm-ea__setup p:last-child {
	margin-block-end: 0;
}

.apm-ea__setup-badge {
	display: inline-flex;
	align-items: center;
	font-size: var(--apm-size-micro);
	font-weight: 700;
	letter-spacing: var(--apm-ls-wide);
	text-transform: uppercase;
	color: var(--apm-pink-soft);
}

.apm-ea__setup-code code {
	display: block;
	overflow-x: auto;
	font-family: var(--apm-font-mono);
	font-size: 13px;
	direction: ltr;
	text-align: start;
	background: var(--apm-dark-field);
	border: 1px solid var(--apm-dark-border-mid);
	border-radius: var(--apm-radius-sm);
	padding: 10px var(--apm-space-sm);
	color: var(--apm-dark-text-body-alt);
}

.apm-ea__blueprint {
	opacity: 0.55;
	filter: saturate(0.4);
	pointer-events: none;
	display: grid;
	gap: var(--apm-space-lg);
}

.apm-ea__blueprint-step {
	font-family: var(--apm-font-mono);
	font-size: var(--apm-size-tiny);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apm-dark-text-faint);
	margin: 0;
}

/* `inert` is not supported everywhere yet; the pointer-events rule above and the
   per-control disabled/tabindex="-1" attributes carry the behaviour regardless. */
.apm-ea__blueprint [disabled] {
	cursor: not-allowed;
}

/* The contact route uses the same list component as the landing page, on the dark
   Early Access ground. */
.apm-ea .apm-contact-list {
	margin-block-end: var(--apm-space-lg);
}


/* ---------------------------------------------------------------------
   Dashboard mock — deliberate mobile presentation.

   The mock keeps its designed desktop composition (it is a product screenshot,
   not a responsive component). On small screens the frame is cropped to a
   fraction of the viewport and given a fade so the crop reads as intentional
   rather than clipped, and so the next section is reachable without scrolling
   through two screens of illustration.

   The crop keeps the chrome, the sidebar identity, the KPI row and the top of
   the spend chart — the account/wallet summary, the top-up action and the first
   chart — which is the principal information the section exists to show.

   Nothing inside the mock is interactive: it contains no links, buttons or form
   controls, so hiding the lower portion removes no reachable control. The
   horizontal scroller keeps its own keyboard affordance.
   ------------------------------------------------------------------- */

/* 1080px is the breakpoint at which the mock stops fitting its column — the same
   point the old (height-inflating) restructure used. */
@media (max-width: 1080px) {
	.apm-showcase__viewport {
		position: relative;
		max-height: 58vh;
		overflow: hidden;
		border-end-start-radius: var(--apm-radius-xl);
		border-end-end-radius: var(--apm-radius-xl);
	}

	.apm-showcase__viewport::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		height: 96px;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(246, 247, 251, 0) 0%, #f6f7fb 82%);
	}

	/* The sidebar's 660px floor is a desktop proportion; it only adds height here. */
	.apm-showcase__side {
		min-height: 0;
	}
}

@media (max-width: 480px) {
	.apm-showcase__viewport {
		max-height: 52vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.apm-showcase__viewport {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------------
   [adpromax_form] embed — the shortcode's contact state inside page content.
   ------------------------------------------------------------------- */

.apm-form-embed {
	margin-block: var(--apm-space-xl);
	padding: var(--apm-space-xl);
	border: 1px solid var(--apm-border);
	border-radius: var(--apm-radius-lg);
	background: var(--apm-bg-subtle);
}

.apm-form-embed__lead {
	margin-block-start: 0;
	color: var(--apm-ink-subtle);
}

.apm-form-embed__note {
	margin-block-end: 0;
	font-size: var(--apm-size-small);
	color: var(--apm-ink-subtle);
}

.apm-contact-list--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apm-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The base .apm-contact-list styling is written for the dark contact panel and
   sets a near-black translucent background. Inside the light [adpromax_form] card
   that produced dark-on-light-on-dark — measured 1.46:1. The inline variant owns
   its own surface and ink rather than inheriting a surface meant for a dark ground.
   blocks.css styles prose links as .apm-entry-content a:not(...):not(...), which two
   :not() arguments raise to (0,3,1). The selector here matches that specificity and
   pages.css is enqueued after blocks.css, so the card styling wins the tie. */
.apm-contact-list--inline a,
.apm-entry-content .apm-form-embed .apm-contact-list--inline a {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--apm-space-sm) var(--apm-space-md);
	border: 1px solid var(--apm-border);
	border-radius: var(--apm-radius-md);
	background: var(--apm-white);
	color: var(--apm-ink);
	text-decoration: none;
}

/* On this light surface the channel colour must carry enough contrast for text,
   so it tints the border only and the label keeps the body ink. */
.apm-contact-list--inline a:hover,
.apm-contact-list--inline a:focus-visible,
.apm-entry-content .apm-form-embed .apm-contact-list--inline a:hover,
.apm-entry-content .apm-form-embed .apm-contact-list--inline a:focus-visible {
	border-color: var(--apm-channel, var(--apm-brand));
	background: var(--apm-bg-muted);
	color: var(--apm-ink);
}

/* On a light ground the channel colour tints the border and the focus ring only;
   #25d366 and #229ed9 do not reach 4.5:1 against white as text. */
.apm-contact-list--inline a:focus-visible {
	outline: var(--apm-focus-width) solid var(--apm-channel, var(--apm-brand));
	outline-offset: var(--apm-focus-offset);
}

.apm-contact-list--inline .apm-contact-list__label {
	color: var(--apm-ink-subtle);
}

.apm-contact-list--inline .apm-contact-list__label {
	font-size: var(--apm-size-small);
	color: var(--apm-ink-subtle);
}

.apm-contact-list--inline .apm-contact-list__value {
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   Platform card identity — enlarged.

   The identifying mark was a 10px dot next to 14px text, which read as
   indistinct at every size. The mark now occupies a real 40px slot and the
   brand name is set at 17px, so the platform is legible at a glance.

   The slot takes an approved platform logo when one is present (see
   adpromax_platform_logo()). With none present it holds the approved colour
   chip, enlarged and ringed so it reads as a deliberate mark rather than a
   stray dot. Either way the brand name is printed as text beside it, so the
   platform is never identified by colour or by an image alone.
   ------------------------------------------------------------------- */

.apm-platform__brand {
	gap: var(--apm-space-sm);
	font-size: 17px;
	line-height: 1.2;
}

.apm-platform__name {
	min-width: 0;
}

.apm-platform__logo,
.apm-platform__chip {
	inline-size: 40px;
	block-size: 40px;
	flex: 0 0 auto;
}

.apm-platform__logo {
	object-fit: contain;
	border-radius: var(--apm-radius-sm);
}

.apm-platform__chip {
	border-radius: var(--apm-radius-md);
}

/* The decorative watermark competed with the mark it sits behind. */
.apm-platform__glyph {
	font-size: 132px;
	opacity: 0.55;
}

@media (max-width: 480px) {
	.apm-platform__logo,
	.apm-platform__chip {
		inline-size: 34px;
		block-size: 34px;
	}

	.apm-platform__brand {
		font-size: 16px;
	}
}