/* =============================================================
   DECISIVE MARKETING PAGE
   Loaded only on the "Decisive Marketing" page template. Uses design
   tokens from tokens.css and shared components from style.css.
   ============================================================= */

/* --- Article header (minimal — no hero gradient) --- */
.decisive__header {
	padding-block: var(--space-2xl) var(--space-md);
}

.decisive__header .decisive__prose h1 {
	font-family: 'Poppins', sans-serif;
	color: var(--color-dark);
	margin-bottom: 0;
}

/* --- Article body (Medium-style single column) --- */
.decisive__article {
	padding-block: var(--space-md) var(--space-4xl);
}

.decisive__prose {
	max-width: 42rem;
	margin-inline: auto;
}

.decisive__prose p {
	font-size: var(--text-lg);
	line-height: 1.78;
	color: var(--color-teal-700);
	margin-bottom: var(--space-lg);
}

.decisive__prose p strong {
	font-family: 'Poppins', sans-serif;
	color: var(--color-dark);
}

.decisive__prose h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.875rem);
	font-weight: 800;
	color: var(--color-dark);
	margin-top: var(--space-4xl);
	margin-bottom: var(--space-md);
	line-height: 1.2;
}

.decisive__prose h2:first-child {
	margin-top: 0;
}

/* Bold punch line (the "131 years…" kicker) */
.decisive__prose p.decisive__punch {
	font-family: 'Poppins', sans-serif;
	font-size: clamp(1.3rem, 1rem + 1.5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-cta);
}

/* Inline illustration figure */
.decisive__figure {
	margin: var(--space-xl) 0 var(--space-2xl);
	padding: 0;
}

.decisive__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
	border: 1px solid var(--color-hairline);
}

/* Technical note — indented block with left rule (Algolia step style) */
.decisive__note {
	margin-block: var(--space-2xl);
}

.decisive__note-heading {
	margin-bottom: var(--space-md);
}

.decisive__note-body {
	padding-left: var(--space-xl);
	border-left: 2px solid var(--color-hairline);
}

.decisive__note-body p:last-child {
	margin-bottom: 0;
}

/* Styled code block (title bar + copy button) */
.dm-code-block {
	margin-block: var(--space-lg) var(--space-xl);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	overflow: hidden;
}

.dm-code-block__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-lg);
	border-bottom: 1px solid var(--color-hairline);
	background: var(--color-surface-2, #f3f4f6);
}

.dm-code-block__title {
	font-family: var(--font-label, var(--font-body));
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
}

.dm-code-block__copy {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.5rem;
	background: none;
	border: none;
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
	font-size: var(--text-sm);
	font-family: var(--font-body);
	color: var(--color-text-muted);
	transition: color var(--transition), background var(--transition);
	white-space: nowrap;
}

.dm-code-block__copy:hover {
	background: var(--color-hairline);
	color: var(--color-heading);
}

.dm-code-block__copy--copied {
	color: var(--color-success, #16a34a);
}

.dm-code-block__copy svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.dm-code-block__pre {
	margin: 0;
	padding: var(--space-lg) var(--space-xl);
	overflow-x: auto;
	background: transparent;
}

.dm-code-block__pre code {
	font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--color-heading);
	background: none;
	padding: 0;
}

/* CTA tip card (after step 1 — Algolia-style bordered callout) */
.dm-tip {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-block: var(--space-lg) var(--space-xl);
	padding: var(--space-md) var(--space-lg);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-card);
	background: var(--color-background);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.dm-tip:hover {
	border-color: var(--color-primary);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	text-decoration: none;
}

.dm-tip__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border-radius: var(--radius-sm, 6px);
	background: var(--color-orange-50);
	color: var(--color-cta);
}

.dm-tip__icon svg {
	width: 1.2rem;
	height: 1.2rem;
}

.dm-tip__body {
	flex: 1;
	min-width: 0;
}

.dm-tip__heading {
	display: block;
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	color: var(--color-heading);
	font-style: normal;
}

.dm-tip__sub {
	display: block;
	margin-top: 0.125rem;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	font-style: normal;
}

.dm-tip__arrow {
	flex-shrink: 0;
	font-size: 1.1rem;
	color: var(--color-text-muted);
	transition: color var(--transition);
}

.dm-tip:hover .dm-tip__arrow {
	color: var(--color-primary);
}


/* =============================================================
   PILLAR SUB-PAGES
   The three /decisive-marketing/<slug>/ pages share page-templates/pillar.php.
   ============================================================= */
.pillar-hero__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	margin-bottom: var(--space-md);
	font-family: var(--font-label);
	font-weight: var(--weight-semibold);
	font-size: var(--text-sm);
	color: var(--brand-primary);
	text-decoration: none;
	transition: color var(--transition);
}

.pillar-hero__back:hover,
.pillar-hero__back:focus-visible {
	color: var(--brand-primary-hover);
}

.pillar-hero__term {
	display: block;
	margin-bottom: var(--space-sm);
	color: var(--brand-primary);
}

.pillar-hero__tagline {
	max-width: 44rem;
	margin-inline: auto;
	margin-top: var(--space-sm);
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
}

.pillar-body__content {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: 1.7;
}

.pillar-body__content > * + * {
	margin-top: var(--space-md);
}

.pillar-body__todo {
	font-size: var(--text-lg);
}

.pillar-body__return {
	margin-top: var(--space-2xl);
}


/* --- Comparison table --- */
.decisive__compare {
	background: var(--color-surface-2);
}

.compare-table {
	max-width: 56rem;
	margin-inline: auto;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--color-background);
}

.compare-table__head,
.compare-table__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.compare-table__head {
	background: var(--color-dark);
	color: var(--color-dark-text);
}

.compare-table__col {
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-label);
	font-weight: var(--weight-semibold);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.compare-table__row + .compare-table__row {
	border-top: var(--border-width) solid var(--color-hairline);
}

.compare-table__cell {
	padding: var(--space-md) var(--space-lg);
}

.compare-table__cell--us {
	border-right: var(--border-width) solid var(--color-hairline);
	position: relative;
	padding-left: var(--space-2xl);
}

.compare-table__cell--us::before {
	content: "\2713";
	position: absolute;
	left: var(--space-lg);
	color: var(--color-success);
	font-weight: 800;
}

.compare-table__cell--ai {
	color: var(--color-text-muted);
	position: relative;
	padding-left: var(--space-2xl);
}

.compare-table__cell--ai::before {
	content: "\2717";
	position: absolute;
	left: var(--space-lg);
	color: var(--color-error);
	font-weight: 800;
}


/* --- Closing CTA band --- */
.decisive__cta {
	background: var(--color-dark);
	color: var(--color-dark-text);
	text-align: center;
	padding-block: var(--space-3xl);
}

.decisive__cta h2 {
	color: var(--color-dark-text);
}

.decisive__cta p {
	color: var(--color-dark-muted);
	max-width: 40rem;
	margin-inline: auto;
	margin-bottom: var(--space-xl);
}

.decisive__cta-actions {
	display: flex;
	gap: var(--space-md);
	justify-content: center;
	flex-wrap: wrap;
}


/* --- Responsive --- */
@media (max-width: 700px) {
	.decisive__prose {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.compare-table__head,
	.compare-table__row {
		grid-template-columns: 1fr;
	}

	.compare-table__cell--us {
		border-right: none;
		border-bottom: var(--border-width) solid var(--color-hairline);
	}
}