@charset "utf-8";
/* CSS Document */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html, body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
	background: none;
	min-height: 100vh;
}
a {
	color: #7c3aed;
	text-decoration: none;
	cursor: pointer;
}
a:hover {
	text-decoration: underline;
}
code {
	background: #f3f4f6;
	padding: 0.125rem 0.375rem;
	border-radius: 4px;
	font-size: 0.875rem;
}
canvas {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}
.page {
	display: none;
}
.page.active {
	display: block;
}

.responsive-img {
    height: auto;
    max-width: 100%;
}
h4 {
    font-size: 1.6em;
    color: #441e9a;
    font-weight: 400;
    margin-bottom: 8px;
}

.shopied ul, .shopied ol {
    margin: 30px 0 30px 30px;
}
.red {
    color: #B93D3F;
    font-weight: 400;
}

/* ==================== HEADER ==================== */
.tops {
	background: #0B0B3A;
	background: linear-gradient(300deg, rgba(11, 11, 58, 1) 100%, rgba(24, 33, 79, 1) 100%);
	position: sticky;
	top: 0;
	z-index: 1000;
}
.header-pad {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.logo-link {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.header-divider {
	width: 1px;
	height: 24px;
	background-color: rgba(255, 255, 255, 0.3);
}
.header-section-title {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.85);
}
.topnav {
	display: flex;
	align-items: center;
}
.darkened {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.navlink {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9375rem;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	transition: all 0.2s ease;
	cursor: pointer;
}
.navlink:hover {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
	text-decoration: none;
}
/* ==================== LAYOUT ==================== */
.wrapper {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem 1.5rem 4rem;
}
.flex-wrap {
	display: flex;
	flex-direction: column;
}
/* ==================== TYPOGRAPHY ==================== */
h1.decorated {
	text-align: center;
	font-size: 2.25rem;
	font-weight: 700;
	color: #1f2937;
	margin-bottom: 0.75rem;
	line-height: 2.8rem;
}
h1.help-title {
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	color: #1f2937;
	margin: 1rem 0 0.75rem 0;
	line-height: 2rem;
}
.help-subhead {
	text-align: center;
	font-size: 1.125rem;
	color: #555;
	max-width: 640px;
	margin: 0 auto 2rem;
	line-height: 1.6;
}
/* ==================== BREADCRUMB ==================== */
.help-breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: #6b7280;
	margin-bottom: 1rem;
}
.help-breadcrumb a {
	color: #7c3aed;
	cursor: pointer;
}
.help-breadcrumb-separator {
	color: #9ca3af;
}
.help-breadcrumb-current {
	color: #1f2937;
	font-weight: 500;
}
/* ==================== HELP TILES ==================== */
.help-flexy {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
}
.help-grid-4 .help-section {
	flex: 1 1 calc(25% - 1.5rem);
	min-width: 220px;
	max-width: 280px;
}
.help-grid-3 .help-section {
	flex: 1 1 calc(33.333% - 1.5rem);
	min-width: 260px;
	max-width: 320px;
}
.help-section {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	transition: all 0.2s ease;
	position: relative;
}
.help-section:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(124,58,237,0.15);
}
.help-section a {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem 1.5rem;
	text-align: center;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.help-icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.help-icon svg {
	width: 32px;
	height: 32px;
	stroke: #7c3aed;
}
.help-section h3 {
	font-size: 1.125rem;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 0.5rem;
	
}
.help-section p {
	font-size: 0.9375rem;
	color: #6b7280;
	margin: 0;
}
.help-prompt {
	text-align: center;
	font-size: 1rem;
	color: #6b7280;
	margin-bottom: 1.5rem;
}
.help-reminder {
	text-align: center;
	font-size: 0.9375rem;
	color: #6b7280;
	margin-top: 2rem;
}
/* ==================== SEARCH ==================== */
.help-search-container {
	max-width: 600px;
	margin: 0 auto 2.5rem;
}
.help-search-box {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #fff;
	border: 2px solid #e5e7eb;
	border-radius: 12px;
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
	transition: all 0.2s ease;
}
.help-search-box:focus-within {
	border-color: #a78bfa;
	box-shadow: 0 0 0 3px rgba(167,139,250,0.15);
}
.help-search-box svg {
	flex-shrink: 0;
	color: #9ca3af;
}
.help-search-box input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 1rem;
	background: transparent;
	color: #1f2937;
	padding: 0.5rem 0;
}
.help-search-box input::placeholder {
	color: #9ca3af;
}
.search-btn {
	padding: 0.75rem 1.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #fff;
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
}
.search-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}
/* ==================== TILE BADGE ==================== */
.help-section.has-badge {
	position: relative;
}
.tile-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 0.25rem 0.625rem;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.help-section.has-badge a {
	padding-top: 2.5rem;
}
/* ==================== RECOMMENDATION ==================== */
.help-recommendation {
	background: #f3f0ff;
	border-radius: 8px;
	padding: 1rem 1.5rem;
	margin-top: 2rem;
	text-align: center;
}
.help-recommendation p {
	margin: 0;
	color: #4b5563;
	font-size: 0.9375rem;
}
.help-recommendation a {
	color: #7c3aed;
	font-weight: 500;
	cursor: pointer;
}
/* ==================== CHECKLIST HEADER ==================== */
.checklist-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	margin-bottom: 1.5rem;
}
.checklist-progress {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
	min-width: 200px;
}
.progress-bar {
	flex: 1;
	height: 8px;
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	max-width: 300px;
}
.progress-fill {
	height: 100%;
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
	border-radius: 4px;
	transition: width 0.3s ease;
	width: 0%;
}
.progress-text {
	font-size: 0.875rem;
	font-weight: 500;
	color: #4b5563;
	white-space: nowrap;
}
.checklist-controls {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.checklist-back-link {
	font-size: 0.875rem;
	color: #7c3aed;
	cursor: pointer;
}
.checklist-reset {
	font-size: 0.8125rem;
	color: #9ca3af;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
}
.checklist-reset:hover {
	color: #6b7280;
	text-decoration: underline;
}
/* ==================== CHECKLIST ==================== */
.step-why {
	margin-bottom: 1.25rem;
	padding: 0.75rem 1rem;
	background: #faf5ff;
	border-radius: 6px;
}
.step-why p {
	margin: 0;
	color: #4b5563;
	font-size: 0.9375rem; }

.checklist {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.checklist-step {
	background: #fff;
	border: 2px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.2s ease;
}
.checklist-step.is-active {
	border-color: #a78bfa;
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}
.checklist-step.is-complete {
	border-color: #10b981;
}
.checklist-step.is-complete .step-number {
	color: #10b981;
}
.checklist-step.is-complete .checkbox-custom {
	background: #10b981;
	border-color: #10b981;
}
.checklist-step.is-complete .checkbox-custom::after {
	opacity: 1;
}
/* ==================== STEP HEADER ==================== */

.linker {
	color: #0034C4;
    font-weight: 400;
    text-decoration: underline;
}
.linker:hover, .linker-nice:hover {
	color: #6291FF;
}
.step-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	cursor: pointer;
	user-select: none;
}
.step-header:hover {
	background: #fafafa;
}
.step-checkbox {
	position: relative;
	flex-shrink: 0;
}
.step-checkbox input {
	position: absolute;
	opacity: 0;
	width: 24px;
	height: 24px;
	cursor: pointer;
	z-index: 2;
}
.checkbox-custom {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	transition: all 0.2s ease;
}
.checkbox-custom::after {
	content: '';
	width: 6px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	margin-bottom: 2px;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.step-title-wrap {
	flex: 1;
	min-width: 0;
}
.step-number {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #7c3aed;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.125rem;
}
.step-title {
	font-size: 1rem;
	font-weight: 600;
	color: #1f2937;
	margin: 0;
}
.step-toggle-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	position: relative;
}
.step-toggle-icon::before, .step-toggle-icon::after {
	content: '';
	position: absolute;
	background: #9ca3af;
	border-radius: 1px;
	transition: transform 0.2s ease;
}
.step-toggle-icon::before {
	width: 12px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.step-toggle-icon::after {
	width: 2px;
	height: 12px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.checklist-step.is-active .step-toggle-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}
/* ==================== STEP CONTENT ==================== */
.step-content {
	display: none;
	padding: 0 1.25rem 1.25rem;
	border-top: 1px solid #f3f4f6;
}
.checklist-step.is-active .step-content {
	display: block;
}
.step-instructions {
	margin-bottom: 1.25rem;
}
.step-instructions h4, .step-resources h4, .step-verify h4 {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.75rem;
}
.step-instructions ol, .step-instructions ul, .webhook-list {
	margin: 0;
	padding-left: 1.25rem;
}
.step-instructions li, .webhook-list li {
	margin-bottom: 0.5rem;
	color: #374151;
	line-height: 1.5;
}
.step-note {
	background: #f9fafb;
	border-left: 3px solid #7c3aed;
	padding: 0.75rem 1rem;
	margin-top: 1rem;
	border-radius: 0 6px 6px 0;
	font-size: 0.9375rem;
	color: #4b5563;
}
.step-note--info {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	background: #eff6ff;
	border-left-color: #3b82f6;
}
.step-note--info svg {
	flex-shrink: 0;
	color: #3b82f6;
	margin-top: 0.125rem;
}
.step-tip {
	color: #6b7280;
	font-size: 0.9375rem;
	margin-top: 0.5rem;
}
/* ==================== RESOURCES ==================== */
.step-resources {
	margin-bottom: 1.25rem;
}
.resource-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.resource-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: 6px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #374151;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}
.resource-btn:hover {
	border-color: #7c3aed;
	color: #7c3aed;
	text-decoration: none;
}
.resource-btn--video {
	border-color: #7c3aed;
	color: #7c3aed;
}
.resource-btn--video:hover {
	background: #7c3aed;
	color: #fff;
}
.resource-btn--pdf {
	border-color: #ef4444;
	color: #ef4444;
}
.resource-btn--pdf:hover {
	background: #ef4444;
	color: #fff;
}
.resource-btn--download {
	border-color: #6b7280;
	color: #6b7280;
}
.resource-btn--download:hover {
	background: #6b7280;
	color: #fff;
}
.video-embed {
	margin-top: 1rem;
	border-radius: 8px;
	overflow: hidden;
}
.video-placeholder {
	background: #1f2937;
	color: #9ca3af;
	padding: 3rem 2rem;
	text-align: center;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* ==================== VERIFY ==================== */
.step-verify {
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: #f0fdf4;
	border-radius: 8px;
}
.step-verify p {
	margin: 0 0 0.25rem;
	color: #166534;
	font-size: 0.9375rem;
}
.step-verify p:last-child {
	margin-bottom: 0;
}
.verify-checklist {
	margin: 0;
	padding-left: 1.25rem;
}
.verify-checklist li {
	color: #166534;
	margin-bottom: 0.25rem;
}
.webhook-api {
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: #f4ebff;
	border-radius: 8px;
}
.webhook-api  p {
	margin: 0 0 0.25rem;
	color: #441772;
	font-size: 0.9375rem;
}
/* ==================== ACTIONS ==================== */
.step-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid #f3f4f6;
}
.btn-mark-complete {
	padding: 0.75rem 1.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #fff;
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.btn-mark-complete:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}
.btn-mark-complete--final {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.btn-mark-complete--final:hover {
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-skip {
	padding: 0.75rem 1.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #6b7280;
	background: #f3f4f6;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.btn-skip:hover {
	background: #e5e7eb;
	color: #374151;
}
/* ==================== HELPER ACCORDION ==================== */
.helper-accordion {
	margin: 1rem 0;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
}
.helper-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #374151;
	background: #f9fafb;
	border: none;
	cursor: pointer;
	text-align: left;
}
.helper-toggle:hover {
	background: #f3f4f6;
}
.helper-icon {
	flex-shrink: 0;
	color: #6b7280;
}
.helper-toggle span {
	flex: 1;
}
.helper-chevron {
	flex-shrink: 0;
	color: #9ca3af;
	transition: transform 0.2s ease;
}
.helper-toggle.is-open .helper-chevron {
	transform: rotate(180deg);
}
.helper-content {
	padding: 1rem;
	border-top: 1px solid #e5e7eb;
	font-size: 0.9375rem;
	color: #4b5563;
}
.helper-content p {
	margin: 0 0 0.75rem;
}
.helper-content ol {
	margin: 0;
	padding-left: 1.25rem;
}
.helper-content li {
	margin-bottom: 0.375rem;
}
.url-example {
	background: #f3f4f6;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin: 0.75rem 0;
}
.url-example p {
	margin: 0.25rem 0;
	font-family: monospace;
	font-size: 0.8125rem;
}
.url-wrong {
	color: #ef4444;
}
.url-right {
	color: #10b981;
}
/* ==================== DECISION TREE ==================== */
.decision-tree {
	margin: 1.25rem 0;
	padding: 1rem;
	background: #faf5ff;
	border: 1px solid #e9d5ff;
	border-radius: 8px;
}
.decision-question {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #581c87;
	margin: 0 0 0.75rem;
}
.decision-options {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.decision-btn {
	padding: 0.5rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #7c3aed;
	background: #fff;
	border: 2px solid #c4b5fd;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.decision-btn:hover {
	border-color: #7c3aed;
	background: #f5f3ff;
}
.decision-btn.is-selected {
	background: #7c3aed;
	border-color: #7c3aed;
	color: #fff;
}
.decision-result {
	margin-top: 0.75rem;
}
.decision-result-content {
	padding: 0.75rem 1rem;
	border-radius: 6px;
}
.decision-result--action {
	background: #fff;
	border: 1px solid #e9d5ff;
}
.decision-result--skip {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}
.decision-result--skip p {
	margin: 0;
	color: #166534;
}
.decision-note {
	font-size: 0.8125rem;
	color: #6b7280;
	margin-top: 0.5rem;
}
/* Decision Subsections (detailed content) */
.decision-subsection {
	padding: 1.25rem;
}
.subsection-title {
	font-size: 1rem;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 0.25rem;
	border: none;
	background: none;
}
.subsection-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 500;
	color: #7c3aed;
	background: #f3e8ff;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	margin-bottom: 0.75rem;
}
.decision-subsection > p {
	color: #4b5563;
	font-size: 0.9375rem;
	margin: 0 0 1rem;
	line-height: 1.5;
}
.subsection-benefits, .subsection-details, .subsection-when {
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	background: #f9fafb;
	border-radius: 6px;
}
.subsection-benefits p, .subsection-details p, .subsection-when p,.subsection-action p {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: #374151;
}
.subsection-benefits ul, .subsection-details ul, .subsection-when ul {
	margin: 0;
	padding-left: 1.25rem;
}
.subsection-benefits li, .subsection-details li, .subsection-when li {
	margin-bottom: 0.25rem;
	font-size: 0.875rem;
	color: #4b5563;
}
.subsection-action {
	margin-bottom: 1rem;
}
.subsection-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #7c3aed;
	background: #f5f3ff;
	border: 1px solid #e9d5ff;
	border-radius: 6px;
	text-decoration: none;
	margin-top: 0.5rem;
	transition: all 0.2s ease;
}
.subsection-link:hover {
	background: #ede9fe;
	border-color: #c4b5fd;
	text-decoration: none;
}
.subsection-link svg {
	flex-shrink: 0;
}
.subsection-resources {
	margin: 1rem 0;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
}
.subsection-return {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	background: #eff6ff;
	border-radius: 6px;
	font-size: 0.875rem;
	color: #1e40af;
	font-weight: 500;
}
/* ==================== COMPLETION ==================== */
.checklist-complete {
	text-align: center;
	padding: 3rem 2rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.complete-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	background: #d1fae5;
	border-radius: 50%;
	margin-bottom: 1.5rem;
}
.complete-icon svg {
	color: #10b981;
}
.checklist-complete h2 {
	font-size: 1.75rem;
	font-weight: 700;
	color: #1f2937;
	margin: 0 0 0.5rem;
}
.checklist-complete > p {
	font-size: 1.125rem;
	color: #6b7280;
	margin: 0 0 1.5rem;
}
.complete-actions {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #fff;
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
	border: none;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
}
.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
	color: #fff;
	text-decoration: none;
}
.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #374151;
	background: #f3f4f6;
	border: none;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
}
.btn-secondary:hover {
	background: #e5e7eb;
	color: #1f2937;
	text-decoration: none;
}
/* ==================== MODAL ==================== */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	display: none;
	justify-content: center;
	align-items: center;
	padding: 20px;
	z-index: 9999;
}
.modal-overlay.is-open {
	display: flex;
}
.modal-container {
	background: #fff;
	border-radius: 12px;
	max-width: 900px;
	width: 100%;
	height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid #e5e7eb;
}
.modal-header h3 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: #1f2937;
}
.modal-close {
	width: 36px;
	height: 36px;
	background: #f3f4f6;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-close:hover {
	background: #e5e7eb;
}
.modal-body {
	flex: 1;
	overflow: hidden;
	position: relative;
	background: #f5f5f5;
}
.modal-body iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid #e5e7eb;
}
/* ==================== STUB PAGE ==================== */
.stub-message {
	text-align: center;
	padding: 4rem 2rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.stub-message svg {
	color: #9ca3af;
	margin-bottom: 1rem;
}
.stub-message h2 {
	font-size: 1.5rem;
	color: #1f2937;
	margin: 0 0 0.5rem;
}
.stub-message p {
	color: #6b7280;
	margin: 0 0 1.5rem;
}
/* ==================== FOOTER ==================== */


.testimonial-out {
	background: #1f57a6;
    background: linear-gradient(325deg, rgba(31, 87, 166, 1) 0%, rgba(130, 0, 230, 1) 100%);
	padding: 2.5rem 1.5rem;
	margin-top: auto;
}
.testimonial-out .wrapper {
	padding: 0;
}
.address {
	color: #ffffff;
    font-size: 1.1em;
    margin-bottom: 40px;
	font-weight: 300;
}
.footer-link {
	margin: 0 0 1rem;
}
.footer-link a {
	font-size: 0.875rem;
	color: #fff;
	text-decoration: none;
}
.footer-link a:hover {
	text-decoration: underline;
}
.copyr {
	font-size: 1.1em;
    color: #ffffff;
    text-align: center;
	font-weight: 300;
}
.footer-terms {
    color: #ffffff;
    font-weight: 600;
}
.optional-badge {
	font-size: 0.6875rem;
	font-weight: 600;
	color: #6b7280;
	background: #f3f4f6;
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	text-transform: uppercase;
}
/* ==================== SUBSTEPS (Campaign Setup v3) ==================== */
.step-intro {
    font-size: 0.9375rem;
    color: #4b5563;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}
.substep {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}
.substep:last-of-type {
    border-bottom: none;
    margin-bottom: 1rem;
}
.substep--required {
    background: #fffbeb;
    margin: 0 -1.25rem 1.5rem;
    padding: 1.25rem;
    border-radius: 8px;
    border-bottom: none;
}
.substep-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.required-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #dc2626;
    background: #fef2f2;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}
.optional-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}
.substep .step-instructions {
    margin-bottom: 1rem;
}
.substep .step-instructions ol {
    margin: 0;
    padding-left: 1.25rem;
}
.substep .step-resources {
    margin-bottom: 0;
}

/* Required Selection Options */
.required-selection {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}
.selection-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.selection-option:hover {
    border-color: #a78bfa;
}
.selection-option input {
    margin-top: 0.25rem;
    accent-color: #7c3aed;
}
.selection-option input:checked + .selection-content {
    color: #1f2937;
}
.selection-option:has(input:checked) {
    border-color: #7c3aed;
    background: #faf5ff;
}
.selection-content {
    flex: 1;
}
.selection-content strong {
    display: block;
    font-size: 0.9375rem;
    color: #374151;
}
.selection-note {
    display: block;
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.25rem;
}
.recommended-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #7c3aed;
    background: #f3e8ff;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Conditional Guidance */
.conditional-guidance {
    margin: 1rem 0;
}
.guidance-box {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}
.guidance-box:last-child {
    margin-bottom: 0;
}
.guidance-box p {
    margin: 0;
}
.guidance-box--do {
    background: #f0fdf4;
    border-left: 3px solid #10b981;
}
.guidance-box--do p {
    color: #166534;
}
.guidance-box--dont {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
}
.guidance-box--dont p {
    color: #991b1b;
}

/* Example Boxes */
.example-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}
.example-box h5 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 0.5rem;
}
.example-box p {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0 0 0.5rem;
}
.example-box p:last-child {
    margin-bottom: 0;
}
.example-calc {
    display: flex;
   : wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: monospace;
    font-size: 0.9375rem;
    padding: 0.75rem;
    background: #fff;
    border-radius: 6px;
    margin: 0.5rem 0;
}
.example-wrong {
    color: #dc2626;
    font-weight: 600;
}
.example-note {
    font-size: 0.8125rem;
    color: #6b7280;
    font-style: italic;
}

/* Formula Box */
.formula-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    text-align: center;
    font-size: 1rem;
    color: #1e40af;
}

/* Network List */
.network-list {
    margin: 0.75rem 0;
    padding-left: 1.25rem;
    columns: 2;
    column-gap: 2rem;
}
.network-list li {
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    color: #374151;
}

/* Advanced Options */
.advanced-option {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.advanced-option:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.advanced-option h5 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem;
}
.advanced-option p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.5rem 0 0;
}

/* Validation Message */
.validation-message {
    display: block;
    font-size: 0.875rem;
    color: #dc2626;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Decision question text variant */
.decision-question-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #581c87;
    margin: 0 0 0.75rem;
}

/* Path examples (4a) */
.path-examples {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0;
}
.path-example {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.5;
}
.path-example--normal {
    background: #f0fdf4;
    border-left: 3px solid #10b981;
}
.path-example--custom {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
}
.path-example strong {
    color: #374151;
}
.path-flow {
    color: #6b7280;
    font-family: monospace;
    font-size: 0.8125rem;
}
.path-options {
    margin: 0.375rem 0 0 1rem;
    padding: 0;
    list-style: disc;
    font-family: monospace;
    font-size: 0.8125rem;
    color: #6b7280;
}
.path-options li {
    margin-bottom: 0.125rem;
}
.path-rule {
    font-size: 0.875rem;
    color: #92400e;
    font-weight: 500;
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    background: #fffbeb;
    border-radius: 4px;
}
.path-reassurance {
    font-size: 0.8125rem;
    color: #6b7280;
    font-style: italic;
    margin: 0.75rem 0 0;
}

/* Customer Path specific styling */
.decision-result--info {
    background: #f0fdf4;
    border-left: 3px solid #10b981;
    padding: 1rem;
    border-radius: 0 6px 6px 0;
}
.decision-result--info h5 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #065f46;
    margin: 0 0 0.75rem;
}
.decision-result--info h5:not(:first-child) {
    margin-top: 1.25rem;
}
.decision-result--info p {
    font-size: 0.875rem;
    color: #374151;
    margin: 0 0 0.5rem;
    line-height: 1.5;
}
.customer-path-important {
    background: #fef3c7;
    padding: 0.625rem 0.75rem;
    border-radius: 4px;
    margin: 0.75rem 0 !important;
}
.customer-path-steps {
    margin: 0.75rem 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: #374151;
}
.customer-path-steps li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
.customer-path-steps .step-detail {
    display: block;
    color: #7c3aed;
    font-weight: 500;
    margin-top: 0.25rem;
}
.customer-path-result {
    font-weight: 500;
    color: #065f46;
    margin-top: 0.75rem !important;
}

/* Revenue expander (4c) */
.revenue-expander {
    margin-top: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}
.revenue-expander-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #92400e;
    background: #fffbeb;
    border: none;
    cursor: pointer;
    text-align: left;
}
.revenue-expander-toggle:hover {
    background: #fef3c7;
}
.revenue-expander-toggle svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.revenue-expander-toggle.is-open svg {
    transform: rotate(180deg);
}
.revenue-expander-content {
    display: none;
    padding: 1rem;
    border-top: 1px solid #fcd34d;
    background: #fff;
    font-size: 0.875rem;
    color: #4b5563;
}
.revenue-expander-content.is-open {
    display: block;
}
.revenue-expander-content p {
    margin: 0 0 0.75rem;
}
.revenue-expander-content p:last-child {
    margin-bottom: 0;
}

/* Revenue question */
.revenue-question {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    margin: 0.75rem 0;
    padding: 0;
}

/* Simple rule styling (4d AOV) */
.simple-rule-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    margin: 1rem 0 0.5rem;
    padding: 0;
}
.simple-rule-content {
    background: #f9fafb;
    border-left: 3px solid #7c3aed;
    padding: 0.75rem 1rem;
    border-radius: 0 6px 6px 0;
    margin-bottom: 0.75rem;
}
.simple-rule-content p {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    color: #374151;
}
.simple-rule-content p:last-child {
    margin-bottom: 0;
}
.simple-rule-clarify {
    font-size: 0.875rem;
    color: #6b7280;
    font-style: italic;
    margin: 0 0 1rem;
}

/* ==================== STEP 5: NETWORK SELECTOR ==================== */
.skip-option-box {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
   : wrap;
}
.skip-option-box p {
    margin: 0;
    font-size: 0.9375rem;
    color: #92400e;
    flex: 1;
}
.btn-skip-step {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #92400e;
    background: #fff;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-skip-step:hover {
    background: #fef3c7;
}
.skip-note {
    font-size: 0.8125rem;
    color: #a16207;
    font-style: italic;
    width: 100%;
}

.network-selector {
    display: flex;
   : wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 1.5rem;
}
.network-btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.network-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.network-btn.is-selected {
    background: #f5f3ff;
    border-color: #7c3aed;
    color: #7c3aed;
}

.network-blocks {
    margin-top: 1rem;
}
.network-block {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.network-block-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}
.credentials-section {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}
.credentials-section h5 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem;
}
.credentials-section p {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0.375rem 0;
}
.advanced-note {
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0.25rem 0 0;
}
.substep-note {
    font-size: 0.875rem;
    color: #6b7280;
    font-style: italic;
    margin: 0.5rem 0 0;
}

/* ==================== MINI-WIZARD SUB-SECTIONS ==================== */
.wizard-subsections {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.wizard-subsection {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}
.wizard-subsection.is-active {
    border-color: #a78bfa;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
}
.wizard-subsection.is-complete {
    border-color: #10b981;
}
.wizard-subsection.is-complete .wizard-header {
    background: #f0fdf4;
}
.wizard-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    background: #f9fafb;
    transition: all 0.2s ease;
}
.wizard-header:hover {
    background: #f3f4f6;
}
.wizard-subsection.is-active .wizard-header {
    background: #faf5ff;
}
.wizard-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.wizard-subsection.is-complete .wizard-checkbox {
    background: #10b981;
    border-color: #10b981;
}
.wizard-checkbox svg {
    display: none;
}
.wizard-subsection.is-complete .wizard-checkbox svg {
    display: block;
}
.wizard-header-content {
    flex: 1;
}
.wizard-header-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.wizard-header-status {
    font-size: 0.75rem;
    color: #10b981;
    font-weight: 500;
    display: none;
}
.wizard-subsection.is-complete .wizard-header-status {
    display: inline;
}
.wizard-chevron {
    color: #9ca3af;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.wizard-subsection.is-active .wizard-chevron {
    transform: rotate(180deg);
    color: #7c3aed;
}
.wizard-body {
    display: none;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}
.wizard-subsection.is-active .wizard-body {
    display: block;
}
.wizard-body p {
    font-size: 0.9375rem;
    color: #4b5563;
    margin: 0 0 0.75rem;
}
.wizard-body p:last-child {
    margin-bottom: 0;
}
.wizard-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}
.wizard-complete-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.wizard-complete-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}
.wizard-complete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.wizard-skip-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.wizard-skip-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Wizard acknowledgment checkbox */
.wizard-acknowledge {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border-radius: 6px;
    margin-top: 1rem;
}
.wizard-acknowledge input {
    margin-top: 0.125rem;
    accent-color: #7c3aed;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.wizard-acknowledge label {
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}

/* Step 4 gating message */
.step4-gating-message {
    display: none;
    padding: 0.75rem 1rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #92400e;
}
.step4-gating-message.is-visible {
    display: block;
}


/* ================ VIDEO pop up  =============== */

.video-list {
	background-color: #ffffff;
	border-radius: 10px;
	width: 100%;
	max-width: 800px;
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%);
	margin: 20px auto 0 auto;
}

.video-list h4 {
	font-size: 1.1em;
	display: block;
	padding: 10px;
	color: #ffffff;
	background: #7c3aed ;
	border-bottom: 1px solid #cccccc;
}

.video-list h4:first-child {
	border-radius: 10px 10px 0 0;
}

.play-vid {
	display: block;
	padding: 10px 10px 10px 40px;
	color: #454545;
	border-bottom: 1px solid #cccccc;
	background: url("https://visiopt.com//images-new/vid-play.webp") no-repeat scroll 8px 8px transparent;
}

.play-pdf {
	display: block;
	padding: 10px 10px 10px 40px;
	color: #454545;
	border-bottom: 1px solid #cccccc;
	background: url("https://visiopt.com//images-new/pdf-play.webp") no-repeat scroll 8px 8px transparent;
}

.play-page {
	display: block;
	padding: 10px 10px 10px 40px;
	color: #454545;
	border-bottom: 1px solid #cccccc;
	background: url("https://visiopt.com//images-new/page-play-1.webp") no-repeat scroll 8px 8px transparent;
}

.play-vid:hover, .play-pdf:hover, .play-page:hover {
	color: #a531ff;
}

.video-list a:last-child {
	border-radius: 0 0 10px 10px;
	border-bottom: none;
}

.shopylinkholderfixed {
	position: fixed;
	max-width: 400px;
	top: 144px;
	right: 40px;
	padding: 10px;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%);
	font-size: 0.9em;
}

.shopylinkholderfixed a, .shopylinkholdermobile a {
	font-size: 1.2em;
	font-weight: 500;

}

.shopylinkholdermobile {
	display: none;
	position: fixed;
	max-width: 400px;
	top: 144px;
	right: 40px;
	padding: 10px;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%);
	font-size: 0.9em;
	z-index: 1;
}

.shopylist {
	margin: 0 0 14px 20px!important;
}

.shopylist li {
	margin: 0
}

.shopylist li a {
	font-size: 0.8em;
	font-weight: 400;
}

.play-page {
    display: block;
    padding: 10px 10px 10px 40px;
    color: #454545;
    border-bottom: 1px solid #cccccc;
    background: url(../images-new/page-play.png) no-repeat scroll 8px 8px transparent;
}

.shopylinkholderfixed a:hover, .shopylist li a:hover {
	text-decoration: underline;
}

.desktop-only {
	display: block;
}

.mobile-only {
	display: none;
}

.sh-red {
	font-size: 2em;
	color: #D30B0E;
	font-weight: 500;
	margin: 0.5em 0;
}
h3 {
    font-size: 1.8em;
    margin: 0.6em 0 1em;
    font-weight: 300;
}

.checklist-step p {
    padding: 8px 0;
}
.checklist-step img {
    max-width: 100%;
    box-shadow: rgba(149, 157, 165, 0.4) 0px 4px 10px;
    border-radius: 6px;
}
.step-verify {
    margin: 20px 0 0 0;
}
table, th, td {
    border: 1px solid #888888;
    padding: 8px;
    background-color: #ffffff;
    border-collapse: collapse;
    border-spacing: 0;
}
.checklist-step ul, ol {
    margin: 0 0 0 20px;
}

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

@media (max-width: 2100px) {
	.shopylinkholderfixed {
		max-width: 300px;
	}
}

@media (max-width: 1800px) {
	cartlinkholderfixed, .shopylinkholderfixed {
		display: none;
	}
	.shopy-menu {
		display: block;
		padding: 8px;
		position: fixed;
		background-color: #ffffff;
		box-shadow: 0px 0px 14px 4px rgb(20 39 89 / 10%);
		font-size: 1.2em;
		top: 110px;
		right: 40px;
		color: #7c3aed;
		font-weight: 600;
		cursor: pointer;
		z-index: 2;
		border-radius: 4px
	}
	.shopy-menu span {
		display: inline-block;
		vertical-align: middle;
	}
	.shopyburger {
		margin-left: 6px;
		width: 24px;
		height: 19px;
		background-image: url(https://visiopt.com/images-new/shopy-menu-purple.webp);
	}
	.shopy-menu:hover {
		opacity: 0.8;
	}
}



@media (max-width: 768px) {
	.checklist-header {
		flex-direction: column;
		align-items: stretch;
	}
	.checklist-progress {
		order: 2;
	}
	.checklist-controls {
		order: 1;
		justify-content: space-between;
	}
	.step-header {
		padding: 0.875rem 1rem;
	}
	.step-content {
		padding: 0 1rem 1rem;
	}
	.step-actions {
		flex-direction: column;
	}
	.btn-mark-complete, .btn-skip {
		width: 100%;
		justify-content: center;
	}
	h1.decorated {
		font-size: 1.75rem;
		line-height: 2rem;
	}
	h1.help-title {
		font-size: 1.4rem;
		line-height: 1.8rem;
}
	.help-grid-3 .help-section, .help-grid-4 .help-section {
		flex: 1 1 100%;
		max-width: 100%;
	}
}