/* =============================================
   INTEGRATIONS PAGE STYLES
   ============================================= */

/* =============================================
   LOCAL FEAT-GRID-REVERSE RULE
   (pending promotion to /style.css — see to-do list)
   ============================================= */
.feat-grid.feat-grid-reverse > :first-child {
	order: 2;
}

@media (max-width: 900px) {
	.feat-grid.feat-grid-reverse > :first-child {
		order: initial;
	}
}

/* =============================================
   LOCAL .feat-points RULE
   (pending promotion to /style.css)
   ============================================= */
.feat-points {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin-top: 1.5rem;
}

.feat-points p {
	margin: 0;
	line-height: 1.65;
	color: var(--ink-700);
	font-size: 1rem;
}

.feat-points strong {
	color: var(--ink-900);
	font-weight: 700;
}

/* =============================================
   SECTION 2 — PARTNER LOGO GRID + SOC 2 CHIP
   ============================================= */

.mock-partner-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.85rem;
	margin: 3.5rem auto 0;
	max-width: 1100px;
}

.mock-partner {
	background: #fff;
	border: 1px solid var(--ink-100);
	border-radius: 8px;
	padding: 1.25rem 0.85rem;
	text-align: center;
	box-shadow: 0 1px 3px rgba(15, 30, 60, 0.04);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.mock-partner:hover {
	border-color: var(--brand-200);
	box-shadow: 0 6px 18px rgba(15, 30, 60, 0.08);
	transform: translateY(-1px);
}

.mock-partner-name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink-900);
	line-height: 1.2;
	margin-bottom: 0.5rem;
	letter-spacing: -0.005em;
}

.mock-partner-meta {
	font-size: 0.6rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	line-height: 1.4;
}

.mock-partner.native .mock-partner-meta {
	color: var(--brand-700);
}

.mock-partner.beta .mock-partner-meta {
	color: var(--accent-600);
}

/* SOC 2 compliance chip */
.mock-compliance {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

.mock-compliance-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 1.25rem;
	border: 1px solid var(--ink-200);
	border-radius: 50px;
	background: #fff;
	font-size: 0.85rem;
	color: var(--ink-700);
	box-shadow: 0 1px 3px rgba(15, 30, 60, 0.04);
}

.mock-compliance-chip i {
	color: #16783F;
	font-size: 0.95rem;
}

.mock-compliance-chip strong {
	color: var(--ink-900);
	font-weight: 700;
}

/* Responsive collapse */
@media (max-width: 900px) {
	.mock-partner-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.mock-partner-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.mock-partner {
		padding: 1rem 0.7rem;
	}
	.mock-partner-name {
		font-size: 0.9rem;
	}
}

/* =============================================
   SECTION 3 — ATS IMPORT WORKFLOW MOCKUP
   ============================================= */

.mock-import {
	background: #fff;
	border: 1px solid var(--ink-200);
	border-radius: 10px;
	box-shadow: 0 18px 36px -18px rgba(15, 30, 60, 0.18), 0 2px 6px rgba(15, 30, 60, 0.04);
	overflow: hidden;
}

.mock-import-head {
	padding: 0.85rem 1.1rem;
	background: #fff;
	border-bottom: 1px solid var(--ink-100);
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ink-900);
}

.mock-import-head i {
	color: var(--brand-600);
	font-size: 0.95rem;
}

.mock-import-section {
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--ink-100);
	background: var(--ink-50);
}

.mock-import-section:last-of-type {
	border-bottom: 0;
}

.mock-import-section-title {
	font-size: 0.55rem;
	color: var(--ink-500);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-family: var(--mono);
	margin-bottom: 0.55rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.mock-import-file {
	background: #fff;
	border: 1px solid var(--ink-100);
	border-radius: 6px;
	padding: 0.55rem 0.85rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.7rem;
}

.mock-import-file-name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ink-900);
	font-weight: 600;
}

.mock-import-file-name i {
	color: #2A9D5C;
	font-size: 0.85rem;
}

.mock-import-file-count {
	font-family: var(--mono);
	color: var(--ink-500);
	font-size: 0.6rem;
	font-weight: 600;
}

/* Settings list */
.mock-import-settings {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.mock-import-setting {
	display: grid;
	grid-template-columns: 70px 1fr;
	align-items: center;
	gap: 0.7rem;
}

.mock-import-setting-label {
	font-family: var(--mono);
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: 0.52rem;
}

.mock-import-setting-value {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.65rem;
	background: #fff;
	border: 1px solid var(--ink-200);
	border-radius: 4px;
	font-size: 0.62rem;
	color: var(--ink-800);
	font-weight: 600;
	width: fit-content;
}

.mock-import-setting-value i {
	font-size: 0.55rem;
	color: var(--ink-500);
}

.mock-import-setting-value.checked i {
	color: #2A9D5C;
}

.mock-import-setting-value.tag {
	background: var(--brand-50);
	border-color: var(--brand-200);
	color: var(--brand-800);
}

/* Smart merge preview */
.mock-import-preview {
	background: #fff;
	border-radius: 6px;
	border: 1px solid var(--ink-100);
	overflow: hidden;
}

.mock-import-preview-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.65rem;
	border-bottom: 1px solid var(--ink-50);
}

.mock-import-preview-row:last-child {
	border-bottom: 0;
}

.mock-import-preview-name {
	color: var(--ink-900);
	font-weight: 600;
}

.mock-import-preview-action {
	font-family: var(--mono);
	font-size: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 700;
	padding: 0.2rem 0.55rem;
	border-radius: 3px;
}

.mock-import-preview-action.update {
	background: var(--ink-100);
	color: var(--ink-700);
}

.mock-import-preview-action.promote {
	background: rgba(34, 167, 95, 0.13);
	color: #16783F;
}

.mock-import-preview-action.new {
	background: var(--brand-50);
	color: var(--brand-700);
}

/* Summary footer */
.mock-import-summary {
	padding: 0.75rem 1.1rem;
	background: #fff;
	border-top: 1px solid var(--ink-100);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.mock-import-summary-text {
	font-size: 0.65rem;
	color: var(--ink-700);
}

.mock-import-summary-text strong {
	color: var(--ink-900);
	font-family: var(--mono);
	font-weight: 700;
}

.mock-import-btn {
	background: var(--brand-600);
	color: #fff;
	padding: 0.55rem 0.95rem;
	border-radius: 5px;
	font-size: 0.65rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	box-shadow: 0 1px 2px rgba(21, 101, 192, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.mock-import-btn i {
	font-size: 0.55rem;
}

/* =============================================
   SECTION 4 — NATIVE DEPTH: GUARDIAN + ZOOM
   ============================================= */

.mock-native {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.mock-native-card {
	background: #fff;
	border: 1px solid var(--ink-200);
	border-radius: 10px;
	box-shadow: 0 18px 36px -18px rgba(15, 30, 60, 0.18), 0 2px 6px rgba(15, 30, 60, 0.04);
	overflow: hidden;
}

.mock-native-head {
	padding: 0.7rem 1.1rem;
	background: #fff;
	border-bottom: 1px solid var(--ink-100);
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ink-900);
}

.mock-native-head i {
	font-size: 0.9rem;
}

.mock-native-card.guardian .mock-native-head i {
	color: #2A9D5C;
}

.mock-native-card.zoom .mock-native-head i {
	color: #2D8CFF;
}

.mock-native-body {
	padding: 0.95rem 1.1rem;
	background: var(--ink-50);
}

.mock-native-candidate,
.mock-native-event {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: 0.18rem;
	line-height: 1.3;
}

.mock-native-candidate-meta,
.mock-native-event-when {
	font-size: 0.6rem;
	color: var(--ink-500);
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	margin-bottom: 0.85rem;
}

/* Guardian field list */
.mock-native-fields {
	background: #fff;
	border: 1px solid var(--ink-100);
	border-radius: 6px;
	padding: 0.75rem 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.mock-native-field {
	display: grid;
	grid-template-columns: 90px 1fr;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.65rem;
}

.mock-native-field-label {
	font-family: var(--mono);
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: 0.52rem;
}

.mock-native-field-value {
	color: var(--ink-800);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

/* PHQ progress bar */
.mock-native-progress {
	flex: 1;
	height: 8px;
	background: var(--ink-100);
	border-radius: 3px;
	overflow: hidden;
	max-width: 130px;
}

.mock-native-progress-fill {
	height: 100%;
	background: #2A9D5C;
	border-radius: 3px;
}

.mock-native-progress-pct {
	font-family: var(--mono);
	font-size: 0.62rem;
	color: var(--ink-900);
	font-weight: 700;
}

/* Status pill */
.mock-native-status {
	font-family: var(--mono);
	font-size: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	padding: 0.2rem 0.6rem;
	border-radius: 3px;
}

.mock-native-status.assigned {
	background: rgba(34, 167, 95, 0.13);
	color: #16783F;
}

.mock-native-status.pending {
	background: rgba(232, 159, 80, 0.18);
	color: #B95A12;
}

/* Sync footer */
.mock-native-sync {
	padding: 0.55rem 1.1rem;
	border-top: 1px solid var(--ink-100);
	background: #fff;
	font-size: 0.55rem;
	color: var(--ink-600);
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mock-native-sync i {
	color: #2A9D5C;
	font-size: 0.55rem;
}

/* Zoom check list */
.mock-native-checks {
	background: #fff;
	border: 1px solid var(--ink-100);
	border-radius: 6px;
	padding: 0.75rem 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.mock-native-check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.68rem;
	color: var(--ink-800);
}

.mock-native-check i {
	color: #16783F;
	font-size: 0.7rem;
	flex-shrink: 0;
}

.mock-native-check strong {
	color: var(--ink-900);
	font-weight: 700;
	font-family: var(--mono);
}

/* =============================================
   SECTION 5 — AGENCY WEBSITE WITH EMBEDDED WIDGET
   ============================================= */

.mock-site {
	background: #fff;
	border: 1px solid var(--ink-200);
	border-radius: 10px;
	box-shadow: 0 18px 36px -18px rgba(15, 30, 60, 0.18), 0 2px 6px rgba(15, 30, 60, 0.04);
	overflow: hidden;
}

/* Browser chrome bar */
.mock-site-chrome {
	background: var(--ink-100);
	padding: 0.5rem 0.85rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 1px solid var(--ink-200);
}

.mock-site-chrome-dots {
	display: flex;
	gap: 0.28rem;
}

.mock-site-chrome-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ink-300);
}

.mock-site-chrome-url {
	flex: 1;
	background: #fff;
	border-radius: 4px;
	padding: 0.2rem 0.6rem;
	font-family: var(--mono);
	font-size: 0.6rem;
	color: var(--ink-700);
	border: 1px solid var(--ink-200);
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.mock-site-chrome-url i {
	color: #16783F;
	font-size: 0.5rem;
}

/* Agency nav bar */
.mock-site-nav {
	background: var(--navy-950);
	color: #fff;
	padding: 0.75rem 1.1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mock-site-nav-logo {
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.05em;
}

.mock-site-nav-links {
	display: flex;
	gap: 0.85rem;
	font-size: 0.62rem;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 600;
}

/* Agency hero band */
.mock-site-hero {
	padding: 1.4rem 1.1rem 1.1rem;
	background: linear-gradient(135deg, #1A3A6F 0%, #2D5A9F 100%);
	color: #fff;
	text-align: center;
}

.mock-site-hero-title {
	font-size: 1.15rem;
	font-weight: 800;
	margin-bottom: 0.2rem;
	letter-spacing: -0.01em;
}

.mock-site-hero-sub {
	font-size: 0.68rem;
	opacity: 0.78;
}

/* Embedded widget zone */
.mock-site-widget {
	padding: 1rem 1.1rem 1.1rem;
	background: #fff;
}

.mock-site-widget-label {
	font-family: var(--mono);
	font-size: 0.5rem;
	color: var(--brand-700);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 700;
	margin-bottom: 0.6rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.mock-site-widget-label i {
	color: var(--accent-600);
	font-size: 0.45rem;
}

.mock-site-events {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border: 1.5px dashed var(--brand-300);
	border-radius: 8px;
	padding: 0.85rem;
	background: var(--brand-50);
}

.mock-site-event {
	background: #fff;
	border: 1px solid var(--ink-100);
	border-radius: 6px;
	padding: 0.65rem 0.8rem;
	display: grid;
	grid-template-columns: 30px 1fr auto;
	gap: 0.65rem;
	align-items: center;
}

.mock-site-event-icon {
	width: 30px;
	height: 30px;
	border-radius: 6px;
	background: var(--brand-50);
	color: var(--brand-700);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.78rem;
}

.mock-site-event-info {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	overflow: hidden;
	min-width: 0;
}

.mock-site-event-title {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ink-900);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mock-site-event-when {
	font-size: 0.55rem;
	color: var(--ink-500);
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.mock-site-event-btn {
	background: var(--brand-600);
	color: #fff;
	font-size: 0.55rem;
	font-weight: 700;
	padding: 0.4rem 0.75rem;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	flex-shrink: 0;
}

/* Attribution footer */
.mock-site-attribution {
	padding: 0.6rem 1.1rem;
	background: var(--ink-50);
	border-top: 1px solid var(--ink-100);
	font-size: 0.5rem;
	color: var(--ink-600);
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 700;
	text-align: center;
}

.mock-site-attribution i {
	color: var(--brand-600);
	margin-right: 0.35rem;
	font-size: 0.5rem;
}

/* =============================================
   SECTION 6 — WEBHOOKS + ZAPIER MOCKUP
   ============================================= */

.mock-zap {
	background: #fff;
	border: 1px solid var(--ink-200);
	border-radius: 10px;
	box-shadow: 0 18px 36px -18px rgba(15, 30, 60, 0.18), 0 2px 6px rgba(15, 30, 60, 0.04);
	overflow: hidden;
}

.mock-zap-head {
	padding: 0.85rem 1.1rem;
	background: #fff;
	border-bottom: 1px solid var(--ink-100);
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ink-900);
}

.mock-zap-head i {
	color: var(--brand-600);
	font-size: 0.95rem;
}

.mock-zap-section {
	padding: 0.95rem 1.1rem;
	background: var(--ink-50);
	border-bottom: 1px solid var(--ink-100);
}

.mock-zap-section:last-of-type {
	border-bottom: 0;
}

.mock-zap-section-title {
	font-size: 0.55rem;
	color: var(--ink-500);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-family: var(--mono);
	margin-bottom: 0.6rem;
}

/* Trigger list */
.mock-zap-triggers {
	background: #fff;
	border: 1px solid var(--ink-100);
	border-radius: 6px;
	padding: 0.55rem 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
}

.mock-zap-trigger {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.2rem 0;
	font-size: 0.65rem;
	color: var(--ink-700);
}

.mock-zap-trigger-mark {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1.5px solid var(--ink-300);
	flex-shrink: 0;
	box-sizing: border-box;
}

.mock-zap-trigger.active .mock-zap-trigger-mark {
	border-color: var(--brand-600);
	background: radial-gradient(circle, var(--brand-600) 35%, transparent 38%);
}

.mock-zap-trigger.active {
	color: var(--ink-900);
	font-weight: 600;
}

/* Zap chain */
.mock-zap-chain {
	display: flex;
	flex-direction: column;
}

.mock-zap-step {
	background: #fff;
	border: 1px solid var(--ink-100);
	border-radius: 6px;
	padding: 0.6rem 0.85rem;
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 0.7rem;
	align-items: center;
}

.mock-zap-step.trigger {
	border-color: var(--brand-300);
	background: var(--brand-50);
}

.mock-zap-step-icon {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: var(--ink-200);
	color: var(--ink-700);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
}

.mock-zap-step.trigger .mock-zap-step-icon {
	background: var(--brand-600);
	color: #fff;
}

.mock-zap-step-icon.slack {
	background: #4A154B;
	color: #fff;
}

.mock-zap-step-icon.sheets {
	background: #0F9D58;
	color: #fff;
}

.mock-zap-step-info {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
	min-width: 0;
	overflow: hidden;
}

.mock-zap-step-app {
	font-size: 0.5rem;
	color: var(--ink-500);
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 700;
}

.mock-zap-step.trigger .mock-zap-step-app {
	color: var(--brand-700);
}

.mock-zap-step-detail {
	font-size: 0.7rem;
	color: var(--ink-900);
	font-weight: 600;
	line-height: 1.2;
}

/* Arrow between steps */
.mock-zap-arrow {
	display: flex;
	justify-content: center;
	padding: 0.25rem 0;
	color: var(--ink-400);
	font-size: 0.8rem;
}

/* Footer caption */
.mock-zap-foot {
	padding: 0.7rem 1.1rem;
	background: #fff;
	border-top: 1px solid var(--ink-100);
	font-size: 0.6rem;
	color: var(--ink-600);
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 700;
	text-align: center;
}

.mock-zap-foot strong {
	color: var(--ink-900);
}

/* =============================================
   PARTNER GRID LOGO NORMALIZATION
   Append to the Integrations page stylesheet.

   Each tile has a logo + a meta line beneath it. To make the logos read as a
   uniform row, the logo gets a FIXED-HEIGHT centered zone (so every mark, wide
   or tall, is the same visual height and vertically centered), and the meta
   line is pinned below that zone so the metas align across the grid too.
   Capping by height (not width) is what equalizes mismatched aspect ratios.
   ============================================= */

/* tile is a column: logo zone on top, meta beneath; equal tile heights */
.mock-partner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

/* the logo wrapper is a fixed-height centering box */
.mock-partner .mock-partner-name {
	display: flex;
	align-items: center;       /* vertical centering of the logo */
	justify-content: center;   /* horizontal centering */
	width: 100%;
	height: 48px;              /* uniform logo-zone height across the row */
	margin-bottom: 0.6rem;
}

/* normalize every logo to the same height; width follows aspect ratio */
.mock-partner .mock-partner-name img {
	height: 34px;              /* the single shared logo height */
	width: auto;
	max-width: 100%;           /* never overflow the tile */
	object-fit: contain;
	display: block;
}

/* meta line sits centered beneath the logo zone (markup already styles it) */
.mock-partner .mock-partner-meta {
	text-align: center;
}

@media (max-width: 900px) {
	.mock-partner .mock-partner-name {
		height: 44px;
	}
	.mock-partner .mock-partner-name img {
		height: 30px;
	}
}

@media (max-width: 600px) {
	.mock-partner .mock-partner-name {
		height: 40px;
	}
	.mock-partner .mock-partner-name img {
		height: 27px;
	}
}