/* ── Action Picker Section ────────────────────────────────── */

.action-picker-section {
	background: #fff;
}

.action-picker-section .section-header {
	margin-bottom: 40px;
}

/* ── Grid ────────────────────────────────────────────────── */

.ap-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

/* ── Card ────────────────────────────────────────────────── */

.ap-card {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	padding: 36px;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ap-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.ap-card-primary {
	border-color: var(--crimson, #B91C1C);
	border-width: 2px;
}

/* ── Badge ───────────────────────────────────────────────── */

.ap-badge {
	display: inline-block;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--gray-500, #6b7280);
	margin-bottom: 20px;
}

.ap-badge-primary {
	background: var(--crimson, #B91C1C);
	color: #fff;
	padding: 5px 12px;
	border-radius: 4px;
}

/* ── Icon ────────────────────────────────────────────────── */

.ap-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(185, 28, 28, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--crimson, #B91C1C);
	margin-bottom: 20px;
}

.ap-card:not(.ap-card-primary) .ap-icon {
	background: rgba(12, 31, 63, 0.05);
	color: var(--ink, #0C1F3F);
}

/* ── Content ─────────────────────────────────────────────── */

.ap-heading {
	font-family: 'DM Sans', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--ink, #0C1F3F);
	margin: 0 0 12px;
}

.ap-desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--gray-500, #6b7280);
	margin: 0 0 20px;
}

.ap-desc strong {
	color: var(--ink, #0C1F3F);
	font-weight: 700;
}

/* ── Checklist ───────────────────────────────────────────── */

.ap-list {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.ap-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--ink, #0C1F3F);
}

.ap-list li svg {
	flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────── */

.ap-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ap-btn-dark {
	padding: 12px 24px;
	background: var(--ink, #0C1F3F);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ap-btn-dark:hover {
	background: #162d52;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(12, 31, 63, 0.3);
}

.ap-btn-dark:active {
	transform: translateY(0);
	box-shadow: none;
}

.ap-btn-arrow {
	transition: transform 0.2s ease;
}

.ap-btn:hover .ap-btn-arrow {
	transform: translateX(3px);
}

.ap-btn-dark:hover .ap-btn-arrow {
	transform: translateY(2px);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
	.ap-grid {
		grid-template-columns: 1fr;
	}
}