/**
 * CRO Report Public Styles
 * The Good Brand System
 */

/* ==========================================================================
   CSS Variables - The Good Brand
   ========================================================================== */

:root {
	/* Primary - The Good Blue */
	--cro-blue: #0277C0;
	--cro-blue-75: #4A9AD0;
	--cro-blue-50: #87B8DF;
	--cro-blue-25: #C3DDF0;

	/* Accent - Green for highlights */
	--cro-green: #50E3C2;

	/* Neutrals */
	--cro-black: #000000;
	--cro-gray-75: #404040;
	--cro-gray-50: #7F7F7F;
	--cro-gray-25: #BFBFBF;
	--cro-white: #FFFFFF;
	--cro-bg-alt: #F7F7F7;

	/* Legacy mappings for compatibility */
	--cro-primary: var(--cro-blue);
	--cro-primary-dark: #015a91;
	--cro-gray-200: var(--cro-gray-25);
	--cro-gray-400: var(--cro-gray-50);
	--cro-gray-500: var(--cro-gray-50);
	--cro-gray-600: var(--cro-gray-75);
	--cro-gray-700: var(--cro-gray-75);
	--cro-gray-900: var(--cro-black);

	/* Typography */
	--cro-font-primary: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--cro-font-mono: 'IBM Plex Mono', 'SF Mono', 'Consolas', monospace;

	/* Spacing */
	--cro-section-padding: 4rem 2rem;
	--cro-container-max: 1000px;

	/* Borders & Radius */
	--cro-radius: 4px;
	--cro-radius-sm: 4px;
	--cro-border: 1px solid var(--cro-gray-25);

	/* Shadows - subtle */
	--cro-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
	--cro-shadow-lg: 0 4px 6px rgb(0 0 0 / 0.1);
	--cro-shadow-xl: 0 10px 20px rgb(0 0 0 / 0.1);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.cro-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Form Styles
   ========================================================================== */


.cro-report-form {
	width: 100%;
}

.cro-form-row {
	margin-bottom: 1em;
}

.cro-input-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

#cro-url-input {
	flex: 1;
	min-width: 200px;
	height: 50px;
	padding: 0 1em;
	font-size: 1em;
	border: 1px solid var(--cro-gray-200);
	border-radius: 0;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
	margin-bottom: 0 !important;
}

#cro-url-input:focus {
	outline: none;
	border-color: var(--cro-primary);
}

#cro-url-input.cro-input-error {
	border-color: var(--cro-error);
}

#cro-submit-button {
	height: 50px;
	padding: 0 1.5em;
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff;
	background-color: var(--cro-primary);
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
	white-space: nowrap;
	box-sizing: border-box;
}

#cro-submit-button:hover {
	background-color: var(--cro-primary-dark);
}

#cro-submit-button:disabled {
	background-color: var(--cro-gray-400);
	cursor: not-allowed;
}

.cro-button-loading {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.cro-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: cro-spin 0.8s linear infinite;
}

@keyframes cro-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Form Messages */
.cro-form-message {
	padding: 0.75em 1em;
	margin-top: 0.5em;
	border-radius: var(--cro-radius-sm);
	font-size: 0.9em;
}

.cro-message-error {
	background-color: var(--cro-error-bg);
	color: var(--cro-error);
	border: 1px solid #fecaca;
}

.cro-message-success {
	background-color: var(--cro-success-bg);
	color: var(--cro-success);
	border: 1px solid #bbf7d0;
}

/* ==========================================================================
   Modal Styles
   ========================================================================== */

.cro-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.2s, opacity 0.2s ease;
}

.cro-modal-visible {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.cro-modal-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
}

.cro-modal-content {
	position: relative;
	width: 100%;
	max-width: 440px;
	margin: 1em;
	padding: 2.5em;
	background: #fff;
	border-radius: var(--cro-radius);
	box-shadow: var(--cro-shadow-xl);
	animation: cro-modal-enter 0.3s ease;
}

@keyframes cro-modal-enter {
	from {
		transform: scale(0.95) translateY(-10px);
		opacity: 0;
	}
	to {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

.cro-modal-close {
	position: absolute;
	top: 1em;
	right: 1em;
	padding: 0.5em;
	background: none;
	border: none;
	font-size: 1.5em;
	color: var(--cro-gray-400);
	cursor: pointer;
	transition: color 0.2s ease;
	line-height: 1;
}

.cro-modal-close:hover {
	color: var(--cro-gray-700);
}

.cro-modal-header {
	text-align: center;
	margin-bottom: 1.5em;
}

.cro-modal-icon {
	color: var(--cro-primary);
	margin-bottom: 1em;
}

.cro-modal-icon svg {
	width: 48px;
	height: 48px;
}

.cro-modal-title {
	font-size: 1.5em;
	font-weight: 700;
	margin: 0 0 0.5em 0;
	color: var(--cro-gray-900);
}

.cro-modal-description {
	font-size: 1em;
	color: var(--cro-gray-500);
	margin: 0;
	line-height: 1.5;
}

.cro-modal-form {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.cro-form-group {
	width: 100%;
}

.cro-form-group input[type="email"] {
	width: 100%;
	padding: 0.875em 1em;
	font-size: 1em;
	border: 2px solid var(--cro-gray-200);
	border-radius: 0;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

.cro-form-group input[type="email"]:focus {
	outline: none;
	border-color: var(--cro-primary);
}

.cro-modal-submit {
	width: 100%;
	padding: 1em;
	font-family: var(--cro-font-primary);
	font-size: 1em;
	font-weight: 600;
	color: var(--cro-white);
	background: var(--cro-blue);
	border: none;
	border-radius: var(--cro-radius);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.cro-modal-submit:hover {
	background: var(--cro-primary-dark);
}

.cro-modal-submit:disabled {
	background: var(--cro-gray-50);
	cursor: not-allowed;
}

.cro-modal-privacy {
	text-align: center;
	font-size: 0.8em;
	color: var(--cro-gray-400);
	margin: 0.5em 0 0 0;
}

/* ==========================================================================
   Progress Display
   ========================================================================== */

.cro-progress-wrapper {
	text-align: center;
	padding: 3em 2em;
	max-width: 600px;
	margin: 0 auto;
}

.cro-progress-header {
	margin-bottom: 2em;
}

.cro-progress-title {
	font-size: 1.75em;
	font-weight: 700;
	margin: 0 0 0.5em 0;
	color: var(--cro-gray-900);
}

.cro-progress-url {
	color: var(--cro-gray-500);
	font-size: 0.95em;
	margin: 0;
	word-break: break-all;
}

.cro-progress-bar-wrapper {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-bottom: 1em;
}

.cro-progress-bar {
	flex: 1;
	height: 10px;
	background-color: var(--cro-gray-200);
	border-radius: 5px;
	overflow: hidden;
}

.cro-progress-fill {
	height: 100%;
	background: var(--cro-blue);
	border-radius: 5px;
	transition: width 0.5s ease;
}

.cro-progress-percent {
	font-weight: 700;
	min-width: 3.5em;
	text-align: right;
	font-size: 1.1em;
	color: var(--cro-gray-700);
}

.cro-progress-stage {
	color: var(--cro-gray-500);
	font-size: 1em;
	margin: 0;
}

/* ==========================================================================
   Error Display
   ========================================================================== */

.cro-error-wrapper {
	text-align: center;
	padding: 3em 2em;
	max-width: 500px;
	margin: 0 auto;
}

.cro-error-icon {
	font-size: 4em;
	margin-bottom: 0.5em;
}

.cro-error-title {
	font-size: 1.5em;
	font-weight: 700;
	margin: 0 0 0.5em 0;
	color: var(--cro-error);
}

.cro-error-message {
	color: var(--cro-gray-500);
	margin: 0 0 2em 0;
	line-height: 1.5;
}

.cro-retry-button {
	display: inline-block;
	padding: 0.875em 2em;
	font-size: 1em;
	font-weight: 600;
	color: var(--cro-primary);
	background-color: transparent;
	border: 2px solid var(--cro-primary);
	border-radius: var(--cro-radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}

.cro-retry-button:hover {
	color: #fff;
	background-color: var(--cro-primary);
}

/* ==========================================================================
   Report Display (Single Post Template)
   ========================================================================== */

.cro-report {
	max-width: 1000px;
	margin: 0 auto;
}

/* Blurred state for email gate */
.cro-report-blurred {
	filter: blur(8px);
	pointer-events: none;
	user-select: none;
}

.cro-report-header {
	text-align: center;
	margin-bottom: 3em;
	padding-bottom: 2em;
	border-bottom: 1px solid var(--cro-gray-200);
}

.cro-report-title {
	font-size: 2.25em;
	font-weight: 800;
	margin: 0 0 0.5em 0;
	color: var(--cro-gray-900);
}

.cro-report-meta {
	color: var(--cro-gray-500);
	font-size: 0.95em;
}

.cro-report-url {
	word-break: break-all;
}

/* Hero Stats */
.cro-hero-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5em;
	margin-bottom: 3em;
}

.cro-stat-card {
	background: var(--cro-white);
	border: var(--cro-border);
	padding: 1.75em;
	border-radius: var(--cro-radius);
	text-align: center;
}

.cro-stat-value {
	font-family: var(--cro-font-mono);
	font-size: 2.5em;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.25em;
	color: var(--cro-blue);
}

.cro-stat-label {
	font-family: var(--cro-font-primary);
	font-size: 0.875em;
	color: var(--cro-gray-75);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Insights Section */
.cro-insights {
	background: var(--cro-bg-alt);
	padding: 2em;
	border-radius: var(--cro-radius);
	margin-bottom: 3em;
}

.cro-insights p {
	font-family: var(--cro-font-primary);
	margin: 0 0 0.75em 0;
	line-height: 1.6;
	color: var(--cro-gray-75);
}

.cro-insights p:last-child {
	margin-bottom: 0;
}

/* Screenshots Section */
.cro-screenshots {
	margin-bottom: 3em;
}

.cro-section-title {
	font-size: 1.5em;
	font-weight: 700;
	margin: 0 0 1.5em 0;
	color: var(--cro-gray-900);
}

.cro-screenshots-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1.5em;
}

.cro-screenshot {
	border: 1px solid var(--cro-gray-200);
	border-radius: var(--cro-radius);
	overflow: hidden;
	box-shadow: var(--cro-shadow);
}

.cro-screenshot img {
	width: 100%;
	height: auto;
	display: block;
}

.cro-screenshot-label {
	padding: 0.875em;
	background: var(--cro-gray-50);
	font-weight: 600;
	font-size: 0.9em;
	text-align: center;
	color: var(--cro-gray-700);
}

/* Recommendations Section */
.cro-recommendations-section {
	background: var(--cro-bg-alt);
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
	padding-left: 2rem;
	padding-right: 2rem;
}

.cro-recommendations-section .cro-section__title {
	text-align: center;
}

.cro-recommendations {
	margin-bottom: 0;
}

.cro-recommendation {
	background-color: var(--stk-container-background-color, var(--cro-white));
	border-radius: var(--stk-container-border-radius, var(--cro-radius));
	box-shadow: var(--stk-container-box-shadow, var(--cro-shadow-lg));
	color: var(--stk-container-color, var(--cro-gray-75));
	padding: 1.75em;
	margin-bottom: 1.5em;
}

.cro-rec-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 1.25em;
	gap: 0.75em;
}

.cro-rec-title {
	font-size: 1.15em;
	font-weight: 700;
	margin: 0;
	color: var(--cro-black);
}

.cro-rec-badges {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
}

.cro-badge {
	padding: 0.25em 0.75em;
	border-radius: var(--cro-radius-sm);
	font-family: var(--cro-font-primary);
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: var(--cro-blue);
	color: var(--cro-white);
	border: none;
}

.cro-badge-priority-high,
.cro-badge-priority-medium,
.cro-badge-priority-low,
.cro-badge-lift {
	background: var(--cro-blue);
	color: var(--cro-white);
}

.cro-rec-content {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2em;
	align-items: start;
}

.cro-rec-details {
	font-size: 0.95em;
}

.cro-rec-section {
	margin-bottom: 1.25em;
}

.cro-rec-section:last-child {
	margin-bottom: 0;
}

.cro-rec-label {
	font-weight: 700;
	color: var(--cro-gray-700);
	margin-bottom: 0.25em;
	text-transform: uppercase;
	font-size: 0.75em;
	letter-spacing: 0.5px;
}

.cro-rec-text {
	color: var(--cro-gray-600);
	margin: 0;
	line-height: 1.6;
}

.cro-rec-screenshot {
	border-radius: var(--cro-radius);
	overflow: hidden;
	box-shadow: var(--cro-shadow-lg);
	border: 1px solid var(--cro-gray-200);
	background: var(--cro-gray-100);
}

.cro-rec-screenshot img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.2s ease;
}

.cro-rec-screenshot:hover img {
	transform: scale(1.02);
}

.cro-rec-impact {
	background: var(--cro-blue-25);
	border-radius: var(--cro-radius);
	padding: 1em;
	margin-top: 1em;
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
}

.cro-rec-impact-value {
	font-family: var(--cro-font-mono);
	font-size: 1.35em;
	font-weight: 700;
	color: var(--cro-blue);
}

.cro-rec-impact-label {
	font-family: var(--cro-font-primary);
	font-size: 0.9em;
	color: var(--cro-gray-75);
}

/* CTA Section */
.cro-cta {
	text-align: center;
	padding: 3em;
	background: var(--cro-bg-alt);
	border-radius: var(--cro-radius);
	margin-top: 3em;
}

.cro-cta-title {
	font-family: var(--cro-font-primary);
	font-size: 1.75em;
	font-weight: 700;
	margin: 0 0 0.5em 0;
	color: var(--cro-black);
}

.cro-cta-text {
	font-family: var(--cro-font-primary);
	color: var(--cro-gray-75);
	margin: 0 0 1.5em 0;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

.cro-cta-button {
	display: inline-block;
	padding: 1em 2.5em;
	font-family: var(--cro-font-primary);
	font-size: 1.1em;
	font-weight: 700;
	color: var(--cro-white);
	background: var(--cro-blue);
	border-radius: var(--cro-radius);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.cro-cta-button:hover {
	background: var(--cro-primary-dark);
	color: var(--cro-white);
}

/* ==========================================================================
   Report Sections - New Layout
   ========================================================================== */

/* Base Section Styles */
.cro-section {
	padding: var(--cro-section-padding);
}

.cro-section--alt {
	background: var(--cro-bg-alt);
}

.cro-section--blue {
	background: var(--cro-blue);
	color: var(--cro-white);
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
}

.cro-section__container {
	max-width: var(--cro-container-max);
	margin: 0 auto;
}

.cro-section__title {
	font-family: var(--cro-font-primary);
	font-size: 1.75em;
	font-weight: 700;
	color: var(--cro-black);
	margin: 0 0 1em 0;
}

.cro-section--blue .cro-section__title {
	color: var(--cro-white);
}

.cro-section--blue .cro-company-name {
	color: var(--cro-black);
}

.cro-section__subtitle {
	font-family: var(--cro-font-primary);
	font-size: 1em;
	color: var(--cro-gray-50);
	margin: -0.5em 0 1.5em 0;
}

.cro-section--blue .cro-section__subtitle {
	color: var(--cro-blue-25);
}

/* Hero Section */
.cro-hero {
	text-align: center;
	padding: 100px 2rem;
	background: var(--cro-black);
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
}

.cro-hero__eyebrow {
	font-family: var(--cro-font-primary);
	font-size: 0.875em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--cro-white);
	margin-bottom: 1em;
}

.cro-hero__title {
	font-family: var(--cro-font-primary);
	font-size: 2.5em;
	font-weight: 700;
	color: var(--cro-white);
	margin: 0 0 0.5em 0;
	line-height: 1.2;
}

.cro-hero__company {
	color: var(--cro-blue);
}

/* Company name styling - primary blue throughout report */
.cro-company-name {
	color: var(--cro-blue);
}

/* Highlight styling for revenue/impact amounts */
.cro-highlight {
	color: var(--cro-blue);
	font-weight: 700;
}

.cro-hero__subtitle {
	font-family: var(--cro-font-primary);
	font-size: 1.25em;
	color: var(--cro-white);
	margin: 0 0 1.5em 0;
	opacity: 0.9;
}

.cro-hero__analysis-box {
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--cro-radius);
	padding: 1.5em 2em;
	max-width: 800px;
	margin: 0 auto;
}

.cro-hero__analysis-box p {
	font-family: var(--cro-font-primary);
	font-size: 1em;
	color: var(--cro-white);
	line-height: 1.6;
	margin: 0;
}

.cro-hero__analysis-box .cro-company-name {
	color: var(--cro-blue-50);
	font-weight: 600;
}

.cro-hero__analysis-box .cro-revenue-highlight {
	color: var(--cro-blue-50);
	font-weight: 700;
}

/* Trust Section */
.cro-trust-section {
	background: var(--cro-white);
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
	padding-left: 2rem;
	padding-right: 2rem;
}

.cro-trust-section .cro-section__title {
	text-align: center;
}

.cro-trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
}

.cro-trust-card {
	text-align: center;
	padding: 2em 1.5em;
	background-color: var(--stk-container-background-color, var(--cro-white));
	border-radius: var(--stk-container-border-radius, var(--cro-radius));
	box-shadow: var(--stk-container-box-shadow, var(--cro-shadow-lg));
	color: var(--stk-container-color, var(--cro-gray-75));
}

.cro-trust-card__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1em;
	background: var(--cro-blue-25);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cro-trust-card__icon svg {
	width: 32px;
	height: 32px;
	color: var(--cro-blue);
}

.cro-trust-card__title {
	font-family: var(--cro-font-primary);
	font-size: 1.125em;
	font-weight: 700;
	color: var(--cro-black);
	margin: 0 0 0.5em 0;
}

.cro-trust-card__text {
	font-family: var(--cro-font-primary);
	font-size: 0.9em;
	color: var(--cro-gray-75);
	line-height: 1.5;
	margin: 0;
}

/* Executive Summary Section */
.cro-summary-section {
	background: var(--cro-bg-alt);
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
	padding-left: 2rem;
	padding-right: 2rem;
}

.cro-summary-section .cro-section__title {
	text-align: center;
}

.cro-summary-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5em;
}

.cro-summary-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--stk-container-background-color, var(--cro-white));
	border-radius: var(--stk-container-border-radius, var(--cro-radius));
	box-shadow: var(--stk-container-box-shadow, var(--cro-shadow-lg));
	color: var(--stk-container-color, var(--cro-gray-75));
	padding: 2em;
	text-align: center;
}

.cro-summary-stat__label {
	font-family: var(--cro-font-primary);
	font-size: 0.875em;
	color: var(--cro-gray-75);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.5em;
}

.cro-summary-stat__value {
	font-family: var(--cro-font-mono);
	font-size: 2.5em;
	font-weight: 700;
	color: var(--cro-blue);
	line-height: 1;
	margin-bottom: 0.5em;
}

.cro-summary-stat__context {
	font-family: var(--cro-font-primary);
	font-size: 0.8125em;
	color: var(--cro-gray-50);
}

/* Methodology Section */
.cro-methodology-section .cro-section__title {
	text-align: center;
}

.cro-methodology-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3em;
	align-items: start;
}

.cro-methodology-screenshot {
	border-radius: var(--cro-radius);
	overflow: hidden;
	box-shadow: var(--cro-shadow-lg);
}

.cro-methodology-screenshot img {
	width: 100%;
	height: auto;
	display: block;
}

.cro-methodology__description {
	font-family: var(--cro-font-primary);
	font-size: 1.125em;
	color: var(--cro-gray-75);
	line-height: 1.6;
	margin-bottom: 1.5em;
}

.cro-methodology__subtitle {
	font-family: var(--cro-font-primary);
	font-size: 1em;
	font-weight: 700;
	color: var(--cro-black);
	margin: 0 0 1em 0;
}

.cro-methodology__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cro-methodology__item {
	font-family: var(--cro-font-primary);
	font-size: 1em;
	color: var(--cro-gray-75);
	padding: 0.75em 0;
	padding-left: 50px;
	position: relative;
	line-height: 1.5;
}

.cro-methodology__item::before {
	content: "";
	display: block;
	height: 1px;
	width: 35px;
	background: var(--cro-blue);
	position: absolute;
	left: 0;
	top: 26px;
}

.cro-methodology__explanation {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid var(--cro-gray-25);
}

.cro-methodology__explanation-title {
	font-family: var(--cro-font-primary);
	font-size: 0.9em;
	font-weight: 700;
	color: var(--cro-black);
	margin: 0 0 0.5em 0;
}

.cro-methodology__explanation-text {
	font-family: var(--cro-font-primary);
	font-size: 0.875em;
	color: var(--cro-gray-75);
	line-height: 1.6;
	margin: 0;
}

/* Heatmaps Section */
.cro-heatmaps-section {
	background: var(--cro-bg-alt);
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
	padding-left: 2rem;
	padding-right: 2rem;
}

.cro-heatmaps-section .cro-section__title {
	text-align: center;
}

.cro-heatmaps-section .cro-methodology__description {
	text-align: center;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
}

.cro-heatmaps-grid {
	display: grid;
	gap: 1.5em;
	justify-content: center;
}

/* Grid layouts based on number of heatmaps */
.cro-heatmaps-grid--1 {
	grid-template-columns: minmax(0, 600px);
}

.cro-heatmaps-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 450px));
}

.cro-heatmaps-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 350px));
}

.cro-heatmap-card {
	background: var(--cro-white);
	border-radius: var(--cro-radius);
	overflow: hidden;
	box-shadow: var(--cro-shadow-lg);
}

.cro-heatmap-card__image {
	position: relative;
	overflow: hidden;
}

.cro-heatmap-card__image img {
	width: 100%;
	height: auto;
	display: block;
}

.cro-heatmap-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75em 1em;
	background: var(--cro-black);
	color: var(--cro-white);
}

.cro-heatmap-card__label {
	font-family: var(--cro-font-primary);
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--cro-gray-25);
}

.cro-heatmap-card__score {
	font-family: var(--cro-font-mono);
	font-size: 1.25em;
	font-weight: 700;
	color: var(--cro-blue-50);
}

.cro-heatmap-card__analysis {
	padding: 1.5em;
}

.cro-heatmap-card__title {
	font-family: var(--cro-font-primary);
	font-size: 1.15em;
	font-weight: 700;
	color: var(--cro-black);
	margin: 0 0 0.5em 0;
}

.cro-heatmap-card__text {
	font-family: var(--cro-font-primary);
	font-size: 0.9375em;
	color: var(--cro-gray-75);
	line-height: 1.5;
	margin: 0;
}

/* Issues Section - Hidden */
.cro-issues-section {
	display: none;
}

.cro-issues-list {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.cro-issue-card {
	background: var(--cro-white);
	border: var(--cro-border);
	border-radius: var(--cro-radius);
	padding: 1.5em;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1em;
}

.cro-issue-card__content {
	flex: 1;
}

.cro-issue-card__title {
	font-family: var(--cro-font-primary);
	font-size: 1em;
	font-weight: 700;
	color: var(--cro-black);
	margin: 0 0 0.25em 0;
}

.cro-issue-card__description {
	font-family: var(--cro-font-primary);
	font-size: 0.9em;
	color: var(--cro-gray-75);
	margin: 0;
	line-height: 1.5;
}

.cro-issue-card__meta {
	text-align: right;
	flex-shrink: 0;
}

.cro-issue-card__priority {
	font-family: var(--cro-font-primary);
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--cro-gray-50);
	margin-bottom: 0.5em;
}

.cro-issue-card__impact {
	font-family: var(--cro-font-mono);
	font-size: 1em;
	font-weight: 600;
	color: var(--cro-blue);
}

/* Combined Impact Section */
.cro-impact-total {
	text-align: center;
	margin-bottom: 2em;
}

.cro-impact-total__value {
	font-family: var(--cro-font-mono);
	font-size: 4em;
	font-weight: 700;
	color: var(--cro-white);
	line-height: 1;
}

.cro-impact-total__period {
	font-family: var(--cro-font-primary);
	font-size: 1.25em;
	color: var(--cro-blue-25);
}

.cro-impact-breakdown {
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--cro-radius);
	padding: 1.5em;
	max-width: 500px;
	margin: 0 auto;
}

.cro-impact-breakdown__title {
	font-family: var(--cro-font-primary);
	font-size: 0.875em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--cro-blue-25);
	margin: 0 0 1em 0;
	text-align: center;
}

.cro-impact-breakdown__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cro-impact-breakdown__item {
	font-family: var(--cro-font-primary);
	display: flex;
	justify-content: space-between;
	padding: 0.5em 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--cro-white);
}

.cro-impact-breakdown__item:last-child {
	border-bottom: none;
}

.cro-impact-breakdown__amount {
	font-family: var(--cro-font-mono);
	font-weight: 600;
}

/* Process Section */
.cro-process-section {
	background: var(--cro-bg-alt);
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
	padding-left: 2rem;
	padding-right: 2rem;
}

.cro-process-section .cro-section__title {
	text-align: center;
}

.cro-process-section .cro-methodology__description {
	text-align: center;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
}

.cro-process-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
}

.cro-process-step {
	text-align: center;
	padding: 1.5em 1em;
	position: relative;
}

.cro-process-step::after {
	content: "→";
	position: absolute;
	right: -0.75em;
	top: 50%;
	transform: translateY(-50%);
	color: var(--cro-gray-25);
	font-size: 1.5em;
}

.cro-process-step:last-child::after {
	display: none;
}

.cro-process-step__number {
	font-family: var(--cro-font-mono);
	font-size: 1.5em;
	font-weight: 700;
	color: var(--cro-blue);
	margin-bottom: 0.5em;
}

.cro-process-step__title {
	font-family: var(--cro-font-primary);
	font-size: 0.875em;
	font-weight: 700;
	color: var(--cro-black);
	margin: 0 0 0.25em 0;
}

.cro-process-step__text {
	font-family: var(--cro-font-primary);
	font-size: 0.8em;
	color: var(--cro-gray-50);
	margin: 0;
	line-height: 1.4;
}

/* Final CTA Section */
.cro-final-cta {
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
}

.cro-final-cta__list {
	list-style: none;
	padding: 0;
	margin: 0 0 2em 0;
	text-align: left;
	display: inline-block;
}

.cro-final-cta__item {
	font-family: var(--cro-font-primary);
	font-size: 1em;
	color: var(--cro-gray-75);
	padding: 0.5em 0;
	padding-left: 1.5em;
	position: relative;
}

.cro-final-cta__item::before {
	content: "✓";
	color: var(--cro-blue);
	font-weight: bold;
	position: absolute;
	left: 0;
}

.cro-final-cta__email {
	font-family: var(--cro-font-primary);
	font-size: 0.9em;
	color: var(--cro-gray-50);
	margin-top: 1.5em;
}

.cro-final-cta__email a {
	color: var(--cro-blue);
	text-decoration: none;
}

.cro-final-cta__email a:hover {
	text-decoration: underline;
}

/* Theme Button Override */
.cro-report .o-btn.o-btn--default {
	display: inline-block;
	padding: 1em 2.5em;
	font-family: var(--cro-font-primary);
	font-size: 1.1em;
	font-weight: 700;
	color: var(--cro-white);
	background: var(--cro-blue);
	border: none;
	border-radius: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.cro-report .o-btn.o-btn--default:hover {
	background: var(--cro-primary-dark);
	color: var(--cro-white);
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 1024px) {
	.cro-rec-content {
		grid-template-columns: 1fr 260px;
	}
}

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

	.cro-rec-content {
		grid-template-columns: 1fr;
	}

	.cro-rec-screenshot {
		max-width: 400px;
		margin-top: 1em;
	}

	.cro-hero-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.cro-input-wrapper {
		flex-direction: column;
	}

	#cro-submit-button {
		width: 100%;
	}

	.cro-modal-content {
		padding: 2em 1.5em;
	}

	.cro-progress-stages {
		gap: 1.5em;
	}

	.cro-stat-value {
		font-size: 2em;
	}

	.cro-report {
		padding: 1.5em;
	}

	.cro-report-title {
		font-size: 1.75em;
	}

	.cro-cta {
		padding: 2em 1.5em;
	}

	/* New section responsive */
	.cro-section {
		padding: 3rem 1.5rem;
	}

	.cro-hero__title {
		font-size: 1.75em;
	}

	.cro-trust-grid {
		grid-template-columns: 1fr;
		gap: 1.5em;
	}

	.cro-summary-stats {
		grid-template-columns: 1fr;
		gap: 1em;
	}

	.cro-methodology-grid {
		grid-template-columns: 1fr;
		gap: 2em;
	}

	.cro-summary-stat__value {
		font-size: 2em;
	}

	.cro-issue-card {
		flex-direction: column;
	}

	.cro-issue-card__meta {
		text-align: left;
		display: flex;
		gap: 1em;
		align-items: center;
	}

	.cro-impact-total__value {
		font-size: 2.5em;
	}

	/* Heatmaps responsive */
	.cro-heatmaps-grid--2,
	.cro-heatmaps-grid--3 {
		grid-template-columns: 1fr;
	}

	.cro-process-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.cro-process-step::after {
		display: none;
	}
}

@media (max-width: 480px) {
	.cro-hero-stats {
		grid-template-columns: 1fr;
	}

	.cro-progress-stages {
		gap: 1em;
	}

	.cro-stage-icon {
		font-size: 1.5em;
	}

	.cro-rec-header {
		flex-direction: column;
		align-items: flex-start;
	}

	/* New section responsive */
	.cro-hero__title {
		font-size: 1.5em;
	}

	.cro-process-steps {
		grid-template-columns: 1fr;
	}

	.cro-section__title {
		font-size: 1.5em;
	}

	/* Heatmaps mobile */
	.cro-heatmaps-grid--1,
	.cro-heatmaps-grid--2,
	.cro-heatmaps-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Image Expand Modal
   ========================================================================== */

.cro-expandable-image {
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

/* Dark overlay on hover */
.cro-expandable-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 5;
	pointer-events: none;
}

.cro-expandable-image:hover::before {
	opacity: 1;
}

/* Centered expand icon */
.cro-expand-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	background: transparent;
	border: none;
	color: var(--cro-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 10;
	pointer-events: none;
}

.cro-expandable-image:hover .cro-expand-icon {
	opacity: 1;
}

.cro-expand-icon svg {
	width: 32px;
	height: 32px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Image Modal */
.cro-image-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.3s, opacity 0.3s ease;
}

.cro-image-modal--visible {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.cro-image-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(8px);
}

.cro-image-modal__content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cro-image-modal__image {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	border-radius: var(--cro-radius);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	animation: cro-image-modal-enter 0.3s ease;
}

@keyframes cro-image-modal-enter {
	from {
		transform: scale(0.9);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.cro-image-modal__close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 50%;
	color: var(--cro-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.cro-image-modal__close:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* See Methodology Link */
.cro-see-methodology {
	display: inline-block;
	font-size: 0.75em;
	color: var(--cro-blue);
	text-decoration: none;
	margin-top: 0.5em;
	transition: color 0.2s ease;
}

.cro-see-methodology:hover {
	color: var(--cro-primary-dark);
	text-decoration: underline;
}

.cro-section--blue .cro-see-methodology {
	color: var(--cro-blue-25);
}

.cro-section--blue .cro-see-methodology:hover {
	color: var(--cro-white);
}

.cro-rec-impact .cro-see-methodology {
	font-size: 0.8em;
	margin-left: auto;
}

/* CTA Button Size Variant */
.cro-final-cta .o-btn.o-btn--default.cro-btn--small {
	padding: 0.75em 1.5em;
	font-size: 0.95em;
}