/**
 * Single Service Page — Dedicated Styles
 *
 * Loaded only on pages using the "Single Service Page" template.
 * Uses BEM-ish class prefix: ssno-ss- (single service).
 *
 * Color system uses the theme's CSS custom properties (--ssno-*).
 *
 * @package SeoServiceNewOrleans
 */

/* ── Scoped CSS Properties ─────────────────────────────────────────────── */
.ssno-ss-page {
	--ss-primary:         var(--ssno-primary, #5146ce);
	--ss-primary-dim:     var(--ssno-primary-dim, #4538c1);
	--ss-primary-cont:    var(--ssno-primary-container, #9a94ff);
	--ss-on-primary:      var(--ssno-on-primary, #f5f1ff);
	--ss-secondary:       var(--ssno-secondary, #4a40e0);
	--ss-surface:         var(--ssno-surface, #f5f6fc);
	--ss-surface-low:     var(--ssno-surface-container-low, #eff0f7);
	--ss-surface-high:    var(--ssno-surface-container-high, #e0e2ea);
	--ss-white:           var(--ssno-surface-container-lowest, #ffffff);
	--ss-on-surface:      var(--ssno-on-surface, #2c2f33);
	--ss-on-surface-var:  var(--ssno-on-surface-variant, #595b61);
	--ss-outline-var:     var(--ssno-outline-variant, #abadb3);
	--ss-radius-sm:       0.75rem;
	--ss-radius:          1rem;
	--ss-radius-lg:       1.5rem;
	--ss-shadow-sm:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--ss-shadow:          0 4px 16px -4px rgba(0,0,0,.10), 0 2px 6px -2px rgba(0,0,0,.06);
	--ss-shadow-primary:  0 8px 32px -8px rgba(81,70,206,.25);
}

/* ── Container ─────────────────────────────────────────────────────────── */
.ssno-ss-container {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 640px) {
	.ssno-ss-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
	.ssno-ss-container { padding-left: 2rem; padding-right: 2rem; }
}

/* =============================================================================
   SECTION 1 — HERO
   ============================================================================= */

.ssno-ss-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--ss-surface) 0%, var(--ss-white) 100%);
	padding-top: 8rem;
	padding-bottom: 4rem;
}
@media (min-width: 1024px) {
	.ssno-ss-hero {
		padding-top: 11rem;
		padding-bottom: 6rem;
	}
}

/* Layered decorative bg */
.ssno-ss-hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.ssno-ss-hero-mesh {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 0% 0%,    rgba(81,70,206,.14) 0, transparent 55%),
		radial-gradient(ellipse at 100% 10%, rgba(74,64,224,.12) 0, transparent 50%),
		radial-gradient(ellipse at 70% 100%, rgba(195,180,252,.16) 0, transparent 55%);
	filter: blur(75px);
}

.ssno-ss-hero-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(81,70,206,.06) 1px, transparent 1px);
	background-size: 28px 28px;
}

.ssno-ss-hero-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(to top, var(--ss-surface), transparent);
	pointer-events: none;
	z-index: 1;
}

.ssno-ss-hero-wrap {
	position: relative;
	z-index: 2;
}

/* Hero inner: side-by-side */
.ssno-ss-hero-inner {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}
@media (min-width: 1024px) {
	.ssno-ss-hero-inner {
		grid-template-columns: 1fr 420px;
		gap: 3.5rem;
	}
}

/* Title */
.ssno-ss-hero-title {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	margin: 0 0 1.25rem;
	background: linear-gradient(135deg, #1a1c20 0%, var(--ss-primary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Subtitle */
.ssno-ss-hero-desc {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--ss-on-surface-var);
	max-width: 560px;
	margin: 0 0 2.25rem;
}

/* CTA buttons */
.ssno-ss-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}

.ssno-ss-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	border-radius: 9999px;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
	cursor: pointer;
	border: none;
	white-space: nowrap;
}

.ssno-ss-btn:active {
	transform: scale(.97) !important;
}

.ssno-ss-btn--primary {
	background: var(--ss-primary);
	color: var(--ss-on-primary);
	box-shadow: var(--ss-shadow-primary);
}

.ssno-ss-btn--primary:hover {
	background: var(--ss-primary-dim);
	box-shadow: 0 16px 48px -12px rgba(81,70,206,.4);
	transform: translateY(-2px);
	color: var(--ss-on-primary);
	text-decoration: none;
}

/* Featured image */
.ssno-ss-hero-image {
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
	box-shadow:
		0 16px 48px -12px rgba(81,70,206,.35),
		0 4px 16px -4px rgba(0,0,0,.15);
	aspect-ratio: 4 / 3;
	position: relative;
	border: 2px solid rgba(255,255,255,.08);
}

.ssno-ss-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Breadcrumb */
.ssno-ss-breadcrumb {
	margin-bottom: 2.25rem;
}

.ssno-ss-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.125rem 0.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.8125rem;
}

.ssno-ss-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.ssno-ss-breadcrumb a {
	color: var(--ss-on-surface-var);
	opacity: 0.8;
	text-decoration: none;
	transition: color .2s;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.ssno-ss-breadcrumb a:hover {
	color: var(--ss-primary);
	opacity: 1;
}

.ssno-ss-breadcrumb-sep {
	font-size: 14px !important;
	color: var(--ss-outline-var);
	opacity: 0.6;
}

.ssno-ss-breadcrumb-current {
	font-weight: 600;
	color: var(--ss-on-surface);
}

/* =============================================================================
   SECTION 2 — DESCRIPTION + IMAGE BAND (Design That Solves Problems)
   ============================================================================= */

.ssno-ss-description {
	padding: 6rem 0;
	background: var(--ss-white);
}

.ssno-ss-desc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}
@media (min-width: 1024px) {
	.ssno-ss-desc-grid {
		grid-template-columns: 0.9fr 1.1fr;
		gap: 5rem;
	}
}

.ssno-ss-desc-content {
	text-align: left;
}

.ssno-ss-section-title {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	letter-spacing: -0.03em;
	color: var(--ss-on-surface);
	margin: 0 0 1.5rem;
	line-height: 1.15;
}

.ssno-ss-section-title--center {
	text-align: center;
}

.ssno-ss-desc-text {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--ss-on-surface-var);
	margin: 0 0 2rem;
}

.ssno-ss-desc-checklist {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ssno-ss-desc-checkitem {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ssno-ss-desc-check-icon {
	color: var(--ss-primary);
	font-weight: 700 !important;
	font-size: 1.25rem !important;
	line-height: 1;
}

.ssno-ss-desc-check-text {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: var(--ss-on-surface);
	font-size: 1.05rem;
}

.ssno-ss-desc-image-wrap {
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
	box-shadow: var(--ss-shadow-primary);
	border: 1px solid rgba(81,70,206,.08);
}

.ssno-ss-desc-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* =============================================================================
   SECTION 2b — DETAILED CHECKLIST (8 Boxes)
   ============================================================================= */

.ssno-ss-checklist-sec {
	padding: 6rem 0;
	background: var(--ss-surface);
}

.ssno-ss-checklist-header {
	margin-bottom: 3.5rem;
}

.ssno-ss-checklist-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1.75rem;
}

@media (min-width: 640px) {
	.ssno-ss-checklist-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ssno-ss-checklist-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ssno-ss-checklist-card {
	background: var(--ss-white);
	padding: 2.25rem 1.75rem;
	border-radius: var(--ss-radius-lg);
	border: 1px solid rgba(0,0,0,0.04);
	box-shadow: 0 4px 20px rgba(0,0,0,0.02);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ssno-ss-checklist-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--ss-shadow-primary);
	border-color: rgba(81,70,206,0.12);
}

.ssno-ss-checklist-card-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--ss-radius);
	background: rgba(81,70,206,0.06);
	color: var(--ss-primary);
	margin-bottom: 1.5rem;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.ssno-ss-checklist-card:hover .ssno-ss-checklist-card-icon-wrap {
	background: var(--ss-primary);
	color: var(--ss-on-primary);
}

.ssno-ss-checklist-card-icon {
	font-size: 1.75rem !important;
}

.ssno-ss-checklist-card-title {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--ss-on-surface);
	margin: 0 0 0.75rem;
	line-height: 1.3;
}

.ssno-ss-checklist-card-desc {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--ss-on-surface-var);
	margin: 0;
}

/* =============================================================================
   SECTION 3 — PROCESS STEPS
   ============================================================================= */

.ssno-ss-process {
	padding: 5rem 0;
	background: var(--ss-surface-low);
}

.ssno-ss-process .ssno-ss-section-title {
	margin-bottom: 3rem;
}

.ssno-ss-steps-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 640px) {
	.ssno-ss-steps-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.ssno-ss-steps-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ssno-ss-step-card {
	background: var(--ss-white);
	border: 1.5px solid rgba(0,0,0,.06);
	border-radius: var(--ss-radius-lg);
	padding: 2rem 1.75rem;
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
	position: relative;
}

.ssno-ss-step-card:hover {
	box-shadow: var(--ss-shadow-primary);
	border-color: rgba(81,70,206,.15);
	transform: translateY(-4px);
}

.ssno-ss-step-number {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 2rem;
	color: var(--ss-primary);
	line-height: 1;
	margin-bottom: 1rem;
	opacity: .7;
}

.ssno-ss-step-title {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--ss-on-surface);
	margin: 0 0 0.625rem;
}

.ssno-ss-step-desc {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--ss-on-surface-var);
	margin: 0;
}

/* =============================================================================
   SECTION 4 — CONSULTATION (What can we cover?)
   ============================================================================= */

.ssno-ss-consultation {
	padding: 6rem 0;
	background: var(--ss-white);
	color: var(--ss-on-surface);
}

.ssno-ss-consult-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}
@media (min-width: 1024px) {
	.ssno-ss-consult-grid {
		grid-template-columns: 0.9fr 1.1fr;
		gap: 5rem;
	}
}

.ssno-ss-consult-title {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	letter-spacing: -0.03em;
	color: var(--ss-on-surface);
	margin: 0 0 1rem;
	line-height: 1.15;
}

.ssno-ss-consult-subtitle {
	font-family: 'Manrope', sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ss-primary);
	margin: 0;
}

.ssno-ss-consult-card {
	background: var(--ss-surface);
	padding: 2.5rem;
	border-radius: var(--ss-radius-lg);
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow: var(--ss-shadow);
}

.ssno-ss-consult-card-intro {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ss-on-surface-var);
	margin: 0 0 2rem;
}

.ssno-ss-consult-checklist {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
@media (min-width: 640px) {
	.ssno-ss-consult-checklist {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem 2rem;
	}
}

.ssno-ss-consult-checkitem {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.ssno-ss-consult-check-icon {
	color: var(--ss-primary);
	font-size: 1.25rem !important;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 0.125rem;
}

.ssno-ss-consult-check-text {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	color: var(--ss-on-surface);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* =============================================================================
   SECTION 5 — HOW DOES THIS WORK? (Timeline)
   ============================================================================= */

.ssno-ss-work {
	padding: 6rem 0;
	background: var(--ss-surface);
	color: var(--ss-on-surface);
}

.ssno-ss-work-desc {
	text-align: center;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--ss-on-surface-var);
	max-width: 720px;
	margin: 0 auto;
}

.ssno-ss-timeline-container {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 900px;
	margin: 4rem auto 0;
}

.ssno-ss-timeline-line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	border-left: 2px dashed var(--ss-outline-var);
	opacity: 0.3;
	transform: translateX(-50%);
	z-index: 1;
}

.ssno-ss-timeline-item {
	position: relative;
	width: 50%;
	z-index: 2;
	margin-bottom: 2rem;
}

.ssno-ss-timeline-item--left {
	align-self: flex-start;
	padding-right: 3rem;
	text-align: right;
}

.ssno-ss-timeline-item--left .ssno-ss-timeline-dot {
	right: -20px;
	transform: translateY(-50%);
}

.ssno-ss-timeline-item--left .ssno-ss-timeline-content {
	margin-left: auto;
}

.ssno-ss-timeline-item--right {
	align-self: flex-end;
	padding-left: 3rem;
	text-align: left;
}

.ssno-ss-timeline-item--right .ssno-ss-timeline-dot {
	left: -20px;
	transform: translateY(-50%);
}

.ssno-ss-timeline-item--right .ssno-ss-timeline-content {
	margin-right: auto;
}

.ssno-ss-timeline-dot {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ss-white);
	border: 2px solid var(--ss-outline-var);
	color: var(--ss-on-surface-var);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.95rem;
	z-index: 3;
}

.ssno-ss-timeline-dot--active {
	background: linear-gradient(135deg, var(--ss-primary) 0%, var(--ss-secondary) 100%);
	border-color: var(--ss-primary);
	color: #fff;
	box-shadow: 0 0 15px rgba(81,70,206,0.45);
}

.ssno-ss-timeline-content {
	background: var(--ss-white);
	padding: 1.75rem 2rem;
	border-radius: var(--ss-radius);
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow: var(--ss-shadow);
	max-width: 400px;
}

.ssno-ss-timeline-content p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--ss-on-surface);
	font-weight: 600;
	letter-spacing: 0.02em;
}

@media (max-width: 767px) {
	.ssno-ss-timeline-line {
		left: 20px;
		transform: none;
	}
	.ssno-ss-timeline-item {
		width: 100% !important;
		align-self: flex-start !important;
		padding-left: 3.5rem !important;
		padding-right: 0 !important;
		text-align: left !important;
		margin-bottom: 2rem;
	}
	.ssno-ss-timeline-item--left .ssno-ss-timeline-dot,
	.ssno-ss-timeline-item--right .ssno-ss-timeline-dot {
		left: 0px !important;
		right: auto !important;
		transform: translateY(-50%) !important;
	}
	.ssno-ss-timeline-content {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
	}
}

/* =============================================================================
   SECTION 5 — FAQ ACCORDION
   ============================================================================= */

.ssno-ss-faq {
	padding: 5rem 0;
	background: var(--ss-surface-low);
}

.ssno-ss-faq-header {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto 2.5rem;
}

.ssno-ss-faq-subtitle {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ss-primary);
	margin: 0 0 0.625rem;
}

.ssno-ss-faq-list {
	max-width: 48rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.ssno-ss-faq-item {
	background: var(--ss-white);
	border: 1.5px solid rgba(0,0,0,.07);
	border-radius: var(--ss-radius);
	overflow: hidden;
	transition: box-shadow .25s ease, border-color .25s ease;
}

.ssno-ss-faq-item:hover {
	box-shadow: var(--ss-shadow);
}

.ssno-ss-faq-item.is-open {
	border-color: rgba(81,70,206,.18);
	box-shadow: 0 4px 20px rgba(81,70,206,.08);
}

.ssno-ss-faq-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: background-color .15s;
	font-family: inherit;
}

.ssno-ss-faq-toggle:hover,
.ssno-ss-faq-toggle:focus-visible {
	background: rgba(81,70,206,.03);
	outline: none;
}

.ssno-ss-faq-question {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: var(--ss-on-surface);
	line-height: 1.4;
}

.ssno-ss-faq-icon {
	font-size: 1.375rem !important;
	color: var(--ss-on-surface-var);
	transition: transform .3s ease, color .3s ease;
	flex-shrink: 0;
	line-height: 1;
}

.ssno-ss-faq-item.is-open .ssno-ss-faq-icon {
	transform: rotate(45deg);
	color: var(--ss-primary);
}

.ssno-ss-faq-answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .35s ease;
	padding: 0 1.5rem;
}

.ssno-ss-faq-answer[hidden] {
	display: block !important;
	/* We handle visibility via max-height for animation */
}

.ssno-ss-faq-item.is-open .ssno-ss-faq-answer {
	max-height: 600px;
	padding: 0 1.5rem 1.375rem;
}

.ssno-ss-faq-answer p {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--ss-on-surface-var);
	margin: 0;
}

/* =============================================================================
   SECTION 6 — PAGE CONTENT (Gutenberg)
   ============================================================================= */

.ssno-ss-page-content {
	padding: 4rem 0;
	background: var(--ss-surface);
}

.ssno-ss-entry {
	max-width: 52rem;
	margin: 0 auto;
	color: var(--ss-on-surface);
}

.ssno-ss-entry h2 {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 2rem);
	letter-spacing: -0.025em;
	color: var(--ss-on-surface);
	margin: 2.5rem 0 0.875rem;
}

.ssno-ss-entry h3 {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ss-on-surface);
	margin: 2rem 0 0.75rem;
}

.ssno-ss-entry p {
	font-size: 1.0125rem;
	line-height: 1.8;
	color: var(--ss-on-surface-var);
	margin: 0 0 1.5rem;
}

.ssno-ss-entry a {
	color: var(--ss-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .2s;
}

.ssno-ss-entry a:hover {
	color: var(--ss-primary-dim);
}

.ssno-ss-entry img {
	border-radius: var(--ss-radius);
	max-width: 100%;
	height: auto;
}

/* =============================================================================
   ANIMATIONS
   ============================================================================= */

/* Hero fade-up (CSS animation) */
.ssno-ss-fade-up {
	opacity: 0;
	transform: translateY(18px);
	animation: ssnoSSFadeUp .65s ease both;
	animation-delay: var(--ssno-delay, 0ms);
}

@keyframes ssnoSSFadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Scroll-triggered fade-in (JS adds .ssno-ss-visible) */
.ssno-ss-animate {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
	transition-delay: var(--ssno-delay, 0ms);
}

.ssno-ss-animate.ssno-ss-visible {
	opacity: 1;
	transform: translateY(0);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1023px) {
	.ssno-ss-hero {
		padding-top: 7rem;
		padding-bottom: 3.5rem;
	}
}

@media (max-width: 767px) {
	.ssno-ss-hero-title {
		font-size: 2.125rem;
	}

	.ssno-ss-hero-desc {
		font-size: 1rem;
	}

	.ssno-ss-hero-actions {
		flex-direction: column;
		align-items: flex-start;
	}

	.ssno-ss-btn {
		justify-content: center;
		width: 100%;
	}

	.ssno-ss-badges {
		flex-direction: column;
	}

	.ssno-ss-badge {
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,.08);
		justify-content: flex-start;
	}

	.ssno-ss-badge:last-child {
		border-bottom: none;
	}

	.ssno-ss-steps-grid {
		grid-template-columns: 1fr;
	}

	.ssno-ss-features-grid {
		grid-template-columns: 1fr;
	}

	.ssno-ss-description,
	.ssno-ss-process,
	.ssno-ss-features,
	.ssno-ss-faq,
	.ssno-ss-page-content {
		padding: 3.5rem 0;
	}
}

@media (max-width: 480px) {
	.ssno-ss-hero-title {
		font-size: 1.75rem;
	}

	.ssno-ss-section-title {
		font-size: 1.375rem;
	}
}

/* =============================================================================
   PRINT
   ============================================================================= */

@media print {
	.ssno-ss-hero-bg,
	.ssno-ss-hero-fade {
		display: none !important;
	}

	.ssno-ss-hero {
		background: #1a1c20 !important;
	}

	.ssno-ss-hero-title {
		color: #fff !important;
	}
}