.page-template-authenticator {

	main.wd-content-layout {
		max-width: 100%;
	}
	.auth-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
	}

	/* Hero Section */
	.hero {
		background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
		padding: 100px 0;
		text-align: center;
		position: relative;
		overflow: hidden;
	}

	.hero::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
		opacity: 0.3;
	}

	.hero-content {
		position: relative;
		z-index: 1;
	}

	.hero h1 {
		font-size: 48px;
		font-weight: 700;
		margin-bottom: 20px;
		color: #0f172a;
		letter-spacing: -1px;
	}

	.hero .subtitle {
		font-size: 20px;
		color: #475569;
		margin-bottom: 40px;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
		line-height: 1.6;
	}

	.hero-buttons {
		display: flex;
		gap: 20px;
		justify-content: center;
		margin-bottom: 60px;
		flex-wrap: wrap;
	}

	.btn-primary {
		background-color: #000;
		color: white;
		padding: 16px 32px;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		text-decoration: none;
		display: inline-block;
	}

	.btn-primary:hover {
		background-color: #1f2937;
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(0,0,0,0.15);
	}

	.btn-secondary {
		background-color: white;
		color: #000;
		border: 2px solid #000;
		padding: 14px 30px;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		text-decoration: none;
		display: inline-block;
	}

	.btn-secondary:hover {
		background-color: #000;
		color: white;
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(0,0,0,0.15);
	}

	.hero-features {
		display: flex;
		justify-content: center;
		gap: 40px;
		flex-wrap: wrap;
	}

	.hero-feature {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #065f46;
		font-weight: 600;
		font-size: 14px;
	}

	.hero-feature::before {
		content: '✓';
		width: 20px;
		height: 20px;
		background-color: #065f46;
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: bold;
	}

	/* Trust Bar */
	.trust-bar {
		padding: 80px 0;
		background-color: white;
	}

	.trust-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 40px;
		text-align: center;
	}

	.trust-item {
		padding: 30px 20px;
		border-radius: 12px;
		background-color: #f8fafc;
		border: 1px solid #e2e8f0;
		transition: all 0.3s ease;
	}

	.trust-item:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 32px rgba(0,0,0,0.1);
		border-color: #cbd5e1;
	}

	.trust-icon {
		width: 60px;
		height: 60px;
		margin: 0 auto 20px;
		background: linear-gradient(135deg, #1e293b, #334155);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2);
	}

	.trust-icon svg {
		width: 28px;
		height: 28px;
	}

	.trust-item h3 {
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 10px;
		color: #0f172a;
	}

	.trust-item p {
		color: #64748b;
		font-size: 14px;
	}

	/* How it Works */
	.how-it-works {
		padding: 80px 0;
		background: linear-gradient(135deg, #f8fafc, #f1f5f9);
	}

	.section-title {
		text-align: center;
		font-size: 36px;
		font-weight: 700;
		margin-bottom: 60px;
		color: #0f172a;
	}

	.steps-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30px;
	}

	.step {
		background: white;
		padding: 40px 25px;
		border-radius: 16px;
		text-align: center;
		box-shadow: 0 4px 20px rgba(0,0,0,0.08);
		position: relative;
		border: 1px solid #e2e8f0;
	}

	.step-number {
		position: absolute;
		top: -20px;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 40px;
		background: linear-gradient(135deg, #1e293b, #334155);
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 18px;
		box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3);
	}

	.step h3 {
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 15px;
		color: #0f172a;
	}

	.step p {
		color: #64748b;
		line-height: 1.6;
		font-size: 14px;
	}

	/* Service Selection */
	.services {
		padding: 80px 0;
		background-color: white;
	}

	.services-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
		gap: 40px;
		margin-top: 60px;
	}

	.service-card {
		background: white;
		border: 2px solid #e2e8f0;
		border-radius: 16px;
		padding: 40px;
		text-align: center;
		transition: all 0.3s ease;
		position: relative;
	}

	.service-card:hover {
		border-color: #065f46;
		box-shadow: 0 12px 40px rgba(6, 95, 70, 0.15);
		transform: translateY(-4px);
	}

	.service-badge {
		position: absolute;
		top: -15px;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(135deg, #065f46, #10b981);
		color: white;
		padding: 8px 20px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.service-card h3 {
		font-size: 24px;
		font-weight: 700;
		margin-bottom: 15px;
		color: #0f172a;
	}

	.service-card .price {
		font-size: 32px;
		font-weight: 700;
		color: #065f46;
		margin-bottom: 20px;
	}

	.service-card .duration {
		color: #64748b;
		margin-bottom: 25px;
		font-size: 14px;
	}

	.service-card p {
		color: #64748b;
		margin-bottom: 30px;
		line-height: 1.6;
	}

	/* Certificate Example */
	.certificate-section {
		padding: 80px 0;
		background: linear-gradient(135deg, #f8fafc, #f1f5f9);
	}

	.certificate-demo {
		background: white;
		border-radius: 16px;
		padding: 40px;
		max-width: 500px;
		margin: 40px auto;
		box-shadow: 0 8px 32px rgba(0,0,0,0.12);
		border: 1px solid #e2e8f0;
	}

	.cert-header {
		text-align: center;
		border-bottom: 2px solid #e2e8f0;
		padding-bottom: 20px;
		margin-bottom: 25px;
	}

	.cert-logo {
		font-size: 24px;
		font-weight: 700;
		color: #065f46;
		margin-bottom: 10px;
	}

	.cert-title {
		color: #64748b;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.cert-content {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 30px;
		align-items: center;
	}

	.cert-details {
		display: grid;
		gap: 15px;
	}

	.cert-row {
		display: flex;
		justify-content: space-between;
		padding: 8px 0;
		border-bottom: 1px solid #f1f5f9;
	}

	.cert-label {
		color: #64748b;
		font-size: 14px;
	}

	.cert-value {
		font-weight: 600;
		color: #0f172a;
	}

	.cert-status {
		background: linear-gradient(135deg, #065f46, #10b981);
		color: white;
		padding: 8px 16px;
		border-radius: 20px;
		font-weight: 700;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.qr-code {
		width: 80px;
		height: 80px;
		background: linear-gradient(45deg, #065f46, #10b981);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 10px;
		text-align: center;
		line-height: 1.2;
	}

	/* Photo Instructions */
	.photo-instructions {
		padding: 80px 0;
		background-color: white;
	}

	.photo-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 60px;
		margin-top: 40px;
		align-items: center;
	}

	.photo-list {
		list-style: none;
	}

	.photo-list li {
		display: flex;
		align-items: center;
		gap: 15px;
		padding: 15px 0;
		border-bottom: 1px solid #f1f5f9;
	}

	.photo-list li::before {
		content: '';
		width: 8px;
		height: 8px;
		background: linear-gradient(135deg, #1e293b, #334155);
		border-radius: 50%;
		flex-shrink: 0;
	}

	.photo-examples {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.photo-example {
		background: #f8fafc;
		border: 2px dashed #cbd5e1;
		border-radius: 12px;
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #64748b;
		font-size: 14px;
		text-align: center;
		padding: 20px;
	}

	/* Forms */
	.form-section {
		padding: 80px 0;
		background: linear-gradient(135deg, #f8fafc, #f1f5f9);
	}

	.form-container {
		background: white;
		border-radius: 16px;
		padding: 40px;
		box-shadow: 0 8px 32px rgba(0,0,0,0.12);
		margin-top: 40px;
	}

	.form-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 20px;
		margin-bottom: 30px;
	}

	.form-group {
		display: flex;
		flex-direction: column;
	}

	.form-group label {
		font-weight: 600;
		margin-bottom: 8px;
		color: #374151;
	}

	.form-group input,
	.form-group textarea {
		padding: 12px 16px;
		border: 2px solid #e5e7eb;
		border-radius: 8px;
		font-size: 16px;
		transition: all 0.3s ease;
	}
	.form-group select {
		border: 2px solid #e5e7eb;
		border-radius: 8px;
		font-size: 16px;
		transition: all 0.3s ease;
	}

	.form-group input:focus,
	.form-group select:focus,
	.form-group textarea:focus {
		outline: none;
		border-color: #065f46;
		box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.1);
	}

	.file-upload {
		border: 2px dashed #cbd5e1;
		border-radius: 8px;
		padding: 40px 20px;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.file-upload:hover {
		border-color: #065f46;
		background-color: #f0fdf4;
	}

	.file-upload input {
		display: none;
	}

	.checkbox-group {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 20px 0;
	}

	.checkbox-group input[type="checkbox"] {
		width: 18px;
		height: 18px;
	}

	/* Authenticate & Sell */
	.auth-sell {
		padding: 80px 0;
		background: linear-gradient(135deg, #065f46, #10b981);
		color: white;
		text-align: center;
	}

	.auth-sell h2 {
		font-size: 36px;
		font-weight: 700;
		margin-bottom: 20px;
	}

	.auth-sell p {
		font-size: 18px;
		margin-bottom: 40px;
		opacity: 0.9;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	.benefits-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 30px;
		margin-top: 50px;
	}

	.benefit {
		text-align: center;
	}

	.benefit-icon {
		width: 60px;
		height: 60px;
		background: rgba(255,255,255,0.2);
		border-radius: 50%;
		margin: 0 auto 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
	}

	.benefit h4 {
		font-size: 16px;
		font-weight: 700;
		margin-bottom: 8px;
	}

	.benefit p {
		font-size: 14px;
		opacity: 0.8;
		margin: 0;
	}

	/* FAQ */
	.faq {
		padding: 80px 0;
		background-color: white;
	}

	.faq-list {
		margin-top: 40px;
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

	.faq-item {
		border-bottom: 1px solid #e5e7eb;
		margin-bottom: 20px;
	}

	.faq-question {
		padding: 20px 0;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 600;
		color: #374151;
	}

	.faq-question:hover {
		color: #065f46;
	}

	.faq-answer {
		padding-bottom: 20px;
		color: #6b7280;
		line-height: 1.6;
		display: none;
	}

	.faq-answer.active {
		display: block;
	}

	/* Legal */
	.legal {
		padding: 40px 0;
		background-color: #f9fafb;
		text-align: center;
	}

	.legal p {
		color: #6b7280;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.legal a {
		color: #065f46;
		text-decoration: none;
	}

	.legal a:hover {
		text-decoration: underline;
	}

	/* Final CTA */
	.final-cta {
		padding: 80px 0;
		background: linear-gradient(135deg, #0f172a, #374151);
		color: white;
		text-align: center;
	}

	.final-cta h2 {
		font-size: 36px;
		font-weight: 700;
		margin-bottom: 40px;
		color: #fff;
	}

	.cta-buttons {
		display: flex;
		gap: 20px;
		justify-content: center;
		flex-wrap: wrap;
	}

	.btn-white {
		background-color: white;
		color: #000;
		padding: 16px 32px;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		text-decoration: none;
		display: inline-block;
	}

	.btn-white:hover {
		background-color: #f3f4f6;
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(255,255,255,0.15);
	}
}

/* Mobile Styles */
@media (max-width: 768px) {
	.page-template-authenticator {
		.auth-container {
			padding: 0 16px;
		}

		.hero {
			padding: 60px 0;
		}

		.hero h1 {
			font-size: 32px;
		}

		.hero .subtitle {
			font-size: 18px;
		}

		.hero-buttons {
			flex-direction: column;
			align-items: center;
		}

		.hero-features {
			flex-direction: column;
			gap: 20px;
		}

		.section-title {
			font-size: 28px;
		}

		.trust-grid,
		.steps-grid,
		.services-grid {
			grid-template-columns: 1fr;
		}

		.photo-grid {
			grid-template-columns: 1fr;
			gap: 40px;
		}

		.photo-examples {
			grid-template-columns: 1fr;
		}

		.form-grid {
			grid-template-columns: 1fr;
		}

		.benefits-grid {
			grid-template-columns: 1fr;
		}

		.cta-buttons {
			flex-direction: column;
			align-items: center;
		}

		.cert-content {
			grid-template-columns: 1fr;
			text-align: center;
		}
	}
}