/* Public site styles */

/* =============================================================================
   Base — variables, typography, layout primitives
   ============================================================================= */

html {
	scroll-behavior: smooth;
}

:root {
	--c2b-navy: #1b2a4b;
	--c2b-blue: #2f5eea;
	--c2b-blue-dark: #2247c4;
	--c2b-blue-light: #eaf0ff;
	--c2b-green: #16a34a;
	--c2b-canvas: #f4f6fb;
	--c2b-border: #e7e9f2;
	--c2b-text: #3a4666;
	--c2b-muted: #7480a0;
	--c2b-shadow: 0 10px 30px rgba(24, 35, 80, .07);
	--c2b-shadow-lg: 0 20px 50px rgba(24, 35, 80, .12);
	--bs-primary: #2f5eea;
	--bs-primary-rgb: 47, 94, 234;
	--bs-body-color: #3a4666;
	--bs-body-bg: #f4f6fb;
	--bs-border-color: #e7e9f2;
	--bs-link-color: #2f5eea;
	--bs-link-hover-color: #2247c4;
	--bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--main-color: var(--c2b-navy);
	--bg-main-color: var(--c2b-navy);
	--sky-blue-color: var(--c2b-blue);
	--bg-main-light: #3e5171cc;
	--bg-sky-blue-color: var(--c2b-blue);
	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bg-gray-color: #f2f2f2;
	--bg-light-blue: var(--c2b-blue);
}

body {
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	font-size: 16px;
	color: var(--c2b-text);
	font-family: var(--font-family);
	font-weight: 400;
	line-height: 1.6;
	background-color: var(--c2b-canvas);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
.navbar-brand {
	color: var(--c2b-navy);
	font-weight: 800;
	letter-spacing: -.02em;
}

section {
	scroll-margin-top: 86px;
}

img {
	max-width: 100%;
	height: auto;
}

p {
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

a {
	text-decoration: none;
}

a:hover {
	color: var(--sky-blue-color);
}

p+p {
	margin-top: 1rem;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

h5,
h6,
p {
	font-family: inherit;
}

.container {
	width: 100%;
	max-width: 1200px;
}

.section {
	padding: 60px 0;
}

.main-color {
	color: var(--c2b-navy);
}

.bg-main-color {
	background-color: var(--bg-main-color);
}

.bg-light-blue {
	background-color: var(--bg-light-blue) !important;
}

.blue-color {
	color: var(--c2b-blue);
}

.bg-gray {
	background-color: var(--bg-gray-color)
}

.bg-blue-color {
	background-color: var(--c2b-blue);
}

.bg-main-light {
	background-color: var(--bg-main-light);
}

/* =============================================================================
   Legacy — banners, old pricing cards, forms, utilities
   ============================================================================= */

/* Legacy header – unused; new layout uses .navbar */

.btn.btn-custom {
	background-color: var(--c2b-blue);
	border-color: var(--c2b-blue);
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
	border-radius: 999px;
	transition: transform .15s ease, background-color .15s ease;
	letter-spacing: 0;
	width: fit-content;
}

.btn.btn-custom:hover {
	background-color: var(--c2b-blue-dark);
	border-color: var(--c2b-blue-dark);
	color: #fff;
	transform: translateY(-2px);
}

.top-50 {
	top: 50%;
	transform: translateY(-50%);
}

.text-block h1 {
	font-size: 60px;
	font-weight: 900;
}

.fs-55 {
	font-size: 55px;
	font-weight: 900;
	line-height: 40px;
}

.text-block h2 {
	font-weight: 900;
	font-size: 34px;
	line-height: 35px;
}

.header {
	transition: all ease-in-out .5s;
}

.sticky-header {
	background-color: #fff;
	color: #fff;
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0px 0px !important;
	z-index: 100;
	-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
}

.sticky-header .site-logo img {
	width: 100px;
}

.site-logo img {
	transition: all ease-in-out .5s;
}

.navbar-nav .active a {
	color: var(--sky-blue-color);
}

.banner-section img {
	border-radius: 10px;
}

.banner-image::after {
	content: "";
	position: absolute;
	background: linear-gradient(84deg, #75aef5, #000000a8, transparent);
	width: 100%;
	height: 100%;
	left: 0;
	border-radius: 10px;
}

.dropshippind-section .text-block h2 {
	line-height: 35px;
}

.dropshippind-section .text-block img {
	object-fit: cover;
	text-align: left;
	width: 200px;
	height: 200px;
	border-radius: 50px;
}

.footer-section,
.bg-image,
.features-2,
.Professionelles-section,
.image-with-text,
.blog-banner,
.single-blog-banner {
	background-image: url("../images/bg.ec7313fdfed9.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: inherit;
}

.ft-block {
	font-size: 22px;
	font-weight: 500;
	line-height: 30px;
}

.list-style li {
	color: var(--blue-color);
	font-size: 18px;
	list-style: disc;
	font-weight: 500;
}

.list-style {
	padding: revert;
}

.accordion-button:focus {
	box-shadow: none;
}

.accordion-item {
	border-radius: 0px !important;
	border-bottom: 1px solid #cacaca !important;
	border: 0px;
}

.accordion-button:not(.collapsed) {
	background: transparent;
	color: #2db5fa;
	border-radius: 0px !important;
}

.accordion-button.collapsed {
	color: var(--main-color);
}

.pricing-card .btn-custom,
.pricing-card .btn.btn-custom {
	width: 100%;
	color: #fff;
	font-size: 14px;
	border: 1px solid #2db5fa;
	letter-spacing: 1px;
}

.pricing-card .btn-custom.disabled,
.pricing-card .btn.btn-custom.disabled {
	background: var(--bg-main-color);
	border: 1px solid var(--bg-main-color);
}

.pricing-card ul.plan-features li.checked::before {
	opacity: 0;
}

.pricing-card ul.plan-features li::before {
	content: "✖";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #ff0909;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	width: 16px;
	height: 15px;
	background: #edecec;
	border-radius: 100%;
}

.list-disc {
	list-style: disc;
	font-weight: 500;
}

.pricing-card ul.plan-features li.checked::after {
	content: "✓";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	width: 16px;
	height: 16px;
	background: green;
	border-radius: 100%;
}

.pricing-card .most-popular ul.plan-features li::before {
	background: #fff;
}

.pricing-card ul.checklist li::before,
.pricing-card ul.checklist li::after {
	content: none !important;
	display: none !important;
}

.mx-1200 {
	max-width: 1200px;
}

.form-check-input[type=checkbox]:focus {
	box-shadow: none;
}

.pricing-card .card {
	transition: all ease-in-out .6s;
	border: 2px solid var(--sky-blue-color);
}

.pricing-card .card:hover {
	transform: scale(1.01);
	transform-origin: bottom;
}

.form-control,
.form-select,
.btn-filter {
	height: 45px !important;
	font-size: 16px !important;
	color: #575757;
	font-weight: 500;
	border: 1px solid #2db5fa;
}

.form-floating>label {
	padding: 5px 10px !important;
	font-size: 16px;
}

.form-control:focus {
	box-shadow: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 45px !important;
}

.select2-container--default .select2-selection--single {
	width: 100% !important;
	padding: 0.375rem 0.25rem;
	height: 45px !important;
}

.select2-container {
	width: 100% !important;
}

.list-unstyled li span {
	font-size: 16px;
}

.number_fs {
	bottom: -20px;
	z-index: 1;
	width: max-content;
	background: #2db5fa;
	border-radius: 5px;
	padding: 3px 10px;
}

.contact-form-card .error,
.ajax-form .error {
	display: block;
	color: #dc3545;
	font-size: 0.8125rem;
	font-weight: 500;
	margin-top: 0.35rem;
	line-height: 1.35;
}

.contact-form-card .form-control.is-invalid,
.contact-form-card .form-select.is-invalid,
.ajax-form .form-control.is-invalid,
.ajax-form .form-check-input.is-invalid {
	border-color: #dc3545;
}

.contact-form-card .form-control.is-invalid,
.ajax-form .form-control.is-invalid {
	background-image: none;
	padding-right: 0.75rem;
}

.number_fs:first-letter {
	font-size: 22px;
}


.banner-section>div iframe {
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.most-popular {
	background: var(--bg-main-color);
	transform: scale(1.05);
	border: 2px solid var(--sky-blue-color) !important;
}

.most-popular:hover {
	transform: scale(1.04) !important;
}

.most-popular li span,
.most-popular h4 {
	color: #fff !important;
}

.most-popular hr {
	color: #fff;
	opacity: 1;
}

.most-popular .btn.btn-primary.disabled {
	background-color: #fff !important;
	color: #000;
}

.most-popular .btn.btn-primary {
	background: #fff;
	color: #000;
}

.most-popular .btn.btn-primary:hover {
	background: #2db5fa;
	color: #fff;
}

.divider {
	display: flex;
	align-items: center;
	text-align: center;
}

.divider::before,
.divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #ccc;
}

.divider:not(:empty)::before {
	margin-right: .25em;
}

.divider:not(:empty)::after {
	margin-left: .25em;
}

.allauth-template button[type="submit"] {
	background: #3e5171;
	border: 0;
	transition: all ease-in-out .5s;
	text-transform: initial;
	letter-spacing: 0px;
	color: #fff;
	padding: 6px 15px;
	border-radius: 10px;
	width: 100%;
	margin-top: 20px;
}

.functions-section ul {
	padding-left: 2rem;

	li {
		list-style: disc;

		a {
			color: var(--sky-blue-color);
			text-decoration: underline;
		}
	}
}

.functions-section ol li {
	list-style: decimal;
}

.allauth-template {
	.card-body h1 {
		font-size: 26px;
		font-weight: bold;
	}

	ul {
		padding-left: 2rem;

		li {
			font-size: 15px;
			list-style: disc;
		}
	}

	label {
		font-size: 14px;
		font-weight: 600;
		color: #334155;
		width: 100%;
		margin-bottom: .5rem;
	}

	input {
		height: 45px;
		font-size: 16px !important;
		color: #575757;
		font-weight: 500;
		border: 1px solid #2db5fa;
		border-radius: .375rem;
		width: 100%;
		padding: .375rem .75rem;
	}
}

.dropdown-menu .nav-link {
	color: var(--main-color) !important;
}

.dropdown-menu .nav-link:hover {
	color: var(--sky-blue-color) !important;
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0 #fff !important;
}

.fw-500 {
	font-weight: 500;
}

.fs-60 {
	font-size: 4rem;
	font-weight: 800;
}

.fs-50 {
	font-size: 50px;
}

.sticky-whatsapp-btn {
	position: fixed;
	bottom: 1.25rem;
	right: 1.25rem;
	z-index: 99999;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.35rem;
	border-radius: 999px;
	background: #25d366;
	border: 1.5px solid #25d366;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(37, 211, 102, 0.32);
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sticky-whatsapp-btn:hover,
.sticky-whatsapp-btn:focus {
	background: #20ba5a;
	border-color: #20ba5a;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(37, 211, 102, 0.38);
}

.sticky-whatsapp-btn .bi {
	font-size: 1.35rem;
	line-height: 1;
}


.rotate {
	transform: rotate(180deg);
}

.sh_billing li:nth-child(4) span {
	font-size: 18px !important;
	font-weight: 700;
}

/* =============================================================================
   Blog — listing and article
   ============================================================================= */

/*=----------= shopify-setup=--=-=*/
.blog_search {
	input {
		border-radius: 20px 0 0 20px !important;
	}

	.search_btn {
		border-radius: 0px 20px 20px 0px !important;
	}
}

.blog_cate_name {
	background: #2db5fa4a !important;
}

.blog-pagination .page-item .prev_blog {
	border-radius: 15px 0 0 15px !important;
}

.blog-pagination .page-item .next_blog {
	border-radius: 0px 15px 15px 0px !important;
	text-align: center;
}

.blog-pagination .page-link {
	background: #2db5fa;
	color: #fff;
	font-weight: 500;
	width: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 5px;

	svg {
		fill: #fff;
	}
}

.page-item.disabled .page-link {
	background: #f2f2f2;
	color: #000;

	svg {
		fill: #000;
	}
}

.blog_sidebar li:not(:last-child) {
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}

/*.blog_image img {
	height: 180px;
	object-fit: contain;
}
*/

.dropdown-btn .down-arrow {
	transform: rotate(90deg);
}

.line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #7a7a7a;
	line-height: 1.6;
}

.light-main-color {
	color: #3e5171de;
}

.hover_img_effect {
	transition: all .2s ease-in-out;

	&:hover img {
		transform: scale(1.02);
	}
}

.placeholder_image {
	width: 100%;
	height: 270px;
}

.placeholder_title {
	width: 100%;
	height: 25px;
}

.placeholder_content {
	width: 100%;
	height: 125px;
}

.cate_placeholder {
	width: 100px;
	height: 25px;
}

/* ----- Single blog article (generated + manual posts) ----- */
.single-blog-page {
	padding-top: 2.5rem;
	padding-bottom: 4rem;
}

.single-blog_content.ck-content,
.single-blog_content.blog-article-body {
	display: block !important;
	width: 100%;
	max-width: 100%;
	line-height: 1.75;
	color: #4a4a4a;
	font-size: 1.0625rem;
}

.single-blog_content .blog-article-sections>*+* {
	margin-top: 0;
}

.single-blog_content .blog-article-intro {
	margin-bottom: 2rem;
	padding-bottom: 0;
}

.single-blog_content .blog-article-intro p {
	color: #3e5171 !important;
	font-size: 1.125rem !important;
	line-height: 1.8 !important;
	margin-bottom: 0 !important;
	font-weight: 500;
}

.single-blog_content .blog-article-main {
	margin-top: 0;
}

.single-blog_content p {
	color: #606060 !important;
	font-size: 1.0625rem !important;
	line-height: 1.75 !important;
	margin-bottom: 1.25rem !important;
}

.single-blog_content h2,
.single-blog_content .blog-key-takeaways__title,
.single-blog_content .blog-faq__title {
	font-size: 1.5rem !important;
	color: #3e5171 !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin-top: 2.5rem !important;
	margin-bottom: 1rem !important;
}

.single-blog_content .blog-article-intro+.blog-key-takeaways h2,
.single-blog_content .blog-key-takeaways__title {
	margin-top: 0 !important;
}

.single-blog_content h3 {
	font-size: 1.25rem !important;
	color: #3e5171 !important;
	font-weight: 600 !important;
	margin-top: 2rem !important;
	margin-bottom: 0.75rem !important;
}

.single-blog_content h4 {
	font-size: 1.1rem !important;
	color: #3e5171 !important;
	font-weight: 600 !important;
	margin-top: 1.5rem !important;
	margin-bottom: 0.5rem !important;
}

.single-blog_content ul,
.single-blog_content ol {
	margin: 0 0 1.5rem 1.25rem !important;
	padding-left: 0.5rem !important;
}

.single-blog_content li {
	margin-bottom: 0.5rem !important;
	color: #606060 !important;
}

.single-blog_content li>ul,
.single-blog_content li>ol {
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}

.single-blog_content a {
	color: #2db5fa !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.single-blog_content a:hover {
	color: var(--main-color) !important;
}

.single-blog_content img {
	max-width: 100%;
	height: auto;
	border: none !important;
	background: none !important;
	border-radius: 0;
	margin: 0 !important;
	padding: 0;
	box-shadow: none;
}

.single-blog_content .blog-inline-image {
	display: block;
	margin: 2rem 0;
	padding: 0;
	border: none;
	background: none;
}

.single-blog_content .blog-inline-image img {
	display: block;
	width: 100%;
	height: auto;
}

.single-blog_content blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid #2db5fa;
	background: #f8fafc;
	border-radius: 0 8px 8px 0;
	color: #555 !important;
}

.single-blog_content .blog-key-takeaways {
	display: block;
	background: #edf7ef;
	border: 1px solid #c8e6c9;
	border-left: 4px solid #66bb6a;
	border-radius: 10px;
	padding: 1.5rem 1.75rem;
	margin: 2rem 0 2.5rem;
}

.single-blog_content .blog-key-takeaways ul {
	margin: 0 !important;
	padding-left: 1.35rem !important;
	list-style: disc;
}

.single-blog_content .blog-key-takeaways li {
	margin-bottom: 0.65rem !important;
	color: #2d4a3e !important;
	line-height: 1.6 !important;
}

.single-blog_content .blog-key-takeaways li:last-child {
	margin-bottom: 0 !important;
}

.single-blog_content .blog-faq {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid #e2e8f0;
}

.single-blog_content .blog-faq__title {
	margin-top: 0 !important;
	margin-bottom: 1.25rem !important;
}

.single-blog_content .blog-faq .accordion {
	--bs-accordion-border-color: #e2e8f0;
	--bs-accordion-btn-bg: #fff;
	--bs-accordion-active-bg: #f8fafc;
}

.single-blog_content .blog-faq .accordion-item {
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	margin-bottom: 0.75rem !important;
	overflow: hidden;
	background: #fff;
}

.single-blog_content .blog-faq .accordion-header {
	margin: 0 !important;
}

.single-blog_content .blog-faq .accordion-button {
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: #3e5171 !important;
	padding: 1rem 1.25rem !important;
	box-shadow: none !important;
}

.single-blog_content .blog-faq .accordion-button:not(.collapsed) {
	color: #2db5fa !important;
	background: #f8fafc !important;
}

.single-blog_content .blog-faq .accordion-body {
	padding: 1rem 1.25rem 1.25rem !important;
}

.single-blog_content .blog-faq .accordion-body p {
	margin-bottom: 0.75rem !important;
}

.single-blog_content .blog-faq .accordion-body p:last-child {
	margin-bottom: 0 !important;
}

.blog-article-meta {
	font-size: 0.9375rem;
}

.blog-article-meta__date {
	color: #888;
}

.blog-article-hero__img {
	border-radius: 10px;
	object-fit: cover;
}

/* =============================================================================
   Misc — product-card tabs, pagination, shipping modal
   ============================================================================= */

.placeholder {
	background-color: #f1f1f1;
}

.product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(74, 144, 226, 0.2);
}

.transition {
	transition: transform 0.3s, box-shadow 0.3s;
}

.price-tag {
	color: white;
	padding: 6px 12px;
	font-weight: bold;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.product-card .nav-tabs .nav-link {
	padding: 6px 12px;
	background: #f0f0f0;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;
	text-transform: capitalize;
	border: 1px solid #e0e0e0 !important;
	font-weight: 500;

	&:hover {
		color: var(--main-color);
	}
}

/* .product-card .tab-content{
	height: 20vh;
} */
.product-card .nav-tabs .nav-link.active {
	background: var(--bg-sky-blue-color);
	color: white !important;
	border-color: var(--bg-sky-blue-color) !important;
	box-shadow: 0 2px 4px rgba(74, 144, 226, 0.3);
}

.product-card .tab-content .tab-pane .badge {
	padding: 4px 8px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-wrap: auto;
	text-align: left;
}

.fs-14 {
	font-size: 14px;
}

.fs-11 {
	font-size: 11px;
}

.font-Segoe {
	font-family: var(--font-family);
	font-weight: 400;
}

.shadow-md {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s, box-shadow 0.3s;
}

.fw-500 {
	font-weight: 500;
}

div#product-images {
	position: relative;
}

div#product-images a:hover::after {
	opacity: 0.2;
}

#product-images a::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	opacity: 0;
}

.register_btn {
	position: absolute;
	bottom: 15px;
}

.fs-xl {
	font-size: 3.5rem;
}

.fs-8 {
	font-size: 0.5rem;
}

.grecaptcha-badge {
	bottom: 10% !important;
}

a.disabled {
	opacity: 0.7;
	pointer-events: none;
	cursor: not-allowed;
}

div#shippingInfo p,
div#shippingInfo>* {
	font-size: 0.95rem;
	line-height: normal;
}

.pagination .page-link {
	color: #2db5fa;
	border: 1px solid #2db5fa;
	background: #fff;
}

.pagination .page-link:hover {
	background: #2db5fa;
	color: #fff;
}

.pagination .page-item.active .page-link {
	background: #2db5fa;
	border-color: #2db5fa;
	color: #fff;
}

.pagination .page-item.disabled .page-link {
	color: #ccc;
	border-color: #eee;
}

div#shippingInfo img {
	height: revert-layer;
}

.text-hover-white:hover {
	color: #ffffff;
}

.jq-toast-heading {
	text-transform: capitalize;
}

/* =============================================================================
   Pricing — home page pricing redesign
   ============================================================================= */

/* Home page pricing section (redesign) */
.pricing-plans-title {
	color: #2b3a67;
	font-size: clamp(1.85rem, 3.2vw, 2.25rem);
	letter-spacing: -0.02em;
}

/* Access type tabs */
.pricing-access-tabs-wrap {
	max-width: 52rem;
	margin: 0 auto 1.75rem;
}

.pricing-access-tabs {
	gap: 0.625rem;
}

.pricing-access-tabs__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.6rem;
	border: 1px solid #e4e6ee;
	border-radius: 0.625rem;
	background: #f3f4f8;
	color: #6b7290;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pricing-access-tabs__tab:hover:not(.is-active) {
	color: #2b3350;
}

.pricing-access-tabs__tab.is-active {
	background: #fff;
	border-color: #2f6bd6;
	color: #2b3a67;
	box-shadow: inset 0 -2px 0 #2f6bd6;
}

.pricing-access-tabs__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	font-size: 1.05rem;
	line-height: 1;
}

.pricing-access-tabs__label {
	white-space: nowrap;
}

/* Panel wrapper */
.pricing-plans-panel {
	max-width: 65rem;
	border: 1px solid #e4e6ee;
	border-radius: 1.25rem;
	background: #fbfcfe;
	padding: 1.25rem;
	box-shadow: 0 1px 4px rgba(20, 30, 60, 0.05);
}

.pricing-plans-panel__top {
	min-height: 2rem;
}

/* Billing interval switch */
.pricing-billing-switch {
	display: inline-flex;
	background: #dfe3ee;
	border-radius: 999px;
	padding: 3px;
}

.pricing-billing-switch__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 0;
	background: transparent;
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: #6b7290;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pricing-billing-switch__btn.is-active {
	color: #2b3a67;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.pricing-billing-switch__save {
	background: #d9f2e3;
	color: #1f9254;
	font-weight: 700;
	font-size: 0.7rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
}

/* Plan cards */
.pricing-plans-grid {
	margin-bottom: 1.25rem;
	padding-top: .75rem;
}

.pricing-plan {
	border: 1px solid #e4e6ee;
	border-radius: 1rem;
	overflow: visible;
	background: #fff;
	box-shadow: 0 1px 4px rgba(20, 30, 60, 0.05);
}

.pricing-plan--featured {
	border: 2px solid #2f6bd6;
	box-shadow: 0 6px 24px rgba(47, 107, 214, 0.12);
}

.pricing-plan__head {
	padding: 1.35rem 1.35rem 1.1rem;
	border-bottom: 1px solid #ecedf3;
}

.pricing-plan--featured .pricing-plan__head {
	border-bottom-color: #dbe6fa;
}

.pricing-plan__badge {
	display: inline-block;
	background: #2f6bd6;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}

.pricing-plan__badge--spacer {
	visibility: hidden;
}

.pricing-plan__name {
	color: #2b3a67;
	font-weight: 800;
	font-size: 1.35rem;
	margin: 0 0 0.25rem;
}

.pricing-plan__price {
	white-space: nowrap;
}

.pricing-plan__name sub {
	font-size: 0.8rem;
	font-weight: 500;
	color: #6b7290;
	bottom: 0;
}

.pricing-plan__annual {
	font-size: 0.82rem;
	color: #6b7290;
	margin: 0.15rem 0 0.35rem;
}

.pricing-plan__annual strong {
	color: #2b3a67;
	font-weight: 700;
}

.pricing-plan__tagline {
	font-size: 0.9rem;
	color: #6b7290;
}

.pricing-plan__body {
	padding: 1.35rem;
	flex-grow: 1;
}

.pricing-plan__inc {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #6b7290;
	margin-bottom: 0.9rem;
}

.pricing-plans-panel .pricing-plan__feats li {
	position: relative;
	padding-left: 1.6rem;
	line-height: 1.45;
	font-size: 0.92rem;
	color: #2b3350;
}

.pricing-plans-panel .pricing-plan__feats li+li {
	margin-top: 0.7rem;
}

.pricing-plans-panel .pricing-plan__feats li.strong {
	font-weight: 700;
	color: #2b3a67;
}

.pricing-plans-panel .pricing-plan__feats li::before,
.pricing-plans-panel .pricing-common__list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.05rem;
	width: auto;
	height: auto;
	background: transparent;
	border-radius: 0;
	transform: none;
	color: #1f9254;
	font-weight: 700;
}

/* Included-with-every-plan block */
.pricing-common {
	border-top: 1px solid #e4e6ee;
	padding-top: 1.1rem;
}

.pricing-common__label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #6b7290;
	margin-bottom: 0.85rem;
}

.pricing-common__list {
	column-count: 2;
	column-gap: 2rem;
}

.pricing-common__list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.85rem;
	font-size: 0.9rem;
	color: #2b3350;
	break-inside: avoid;
}

.pricing-billing-note {
	font-size: 0.72rem;
	color: #6b7290;
	margin-top: 1.5rem;
	opacity: 0.85;
}

/* CTA */
.pricing-plans-cta__btn {
	width: auto;
	background: #2f6bd6;
	border-color: #2f6bd6;
	border-radius: 0.6rem;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.75rem 2.5rem;
}

.pricing-plans-cta__btn:hover,
.pricing-plans-cta__btn:focus {
	background: #245cbd;
	border-color: #245cbd;
	color: #fff;
}

/* =============================================================================
   Components — buttons, navbar, hero, home sections, footer
   ============================================================================= */

.btn-c2b {
	--bs-btn-bg: var(--c2b-blue);
	--bs-btn-border-color: var(--c2b-blue);
	--bs-btn-hover-bg: var(--c2b-blue-dark);
	--bs-btn-hover-border-color: var(--c2b-blue-dark);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-padding-x: 1.6rem;
	--bs-btn-padding-y: .8rem;
	--bs-btn-font-weight: 700;
	--bs-btn-font-size: .9rem;
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(47, 94, 234, .28);
	transition: transform .15s ease;
}

.btn-c2b:hover {
	transform: translateY(-2px);
}

.btn-c2b-outline {
	--bs-btn-bg: #fff;
	--bs-btn-color: var(--c2b-blue);
	--bs-btn-border-color: var(--c2b-border);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-color: var(--c2b-blue);
	--bs-btn-hover-border-color: var(--c2b-blue);
	--bs-btn-padding-x: 1.6rem;
	--bs-btn-padding-y: .8rem;
	--bs-btn-font-weight: 700;
	--bs-btn-font-size: .9rem;
	border-radius: 999px;
	border-width: 1.5px;
	transition: transform .15s ease;
}

.btn-c2b-outline:hover {
	transform: translateY(-2px);
}

.btn-ghost-light {
	--bs-btn-bg: rgba(255, 255, 255, .1);
	--bs-btn-color: #fff;
	--bs-btn-border-color: rgba(255, 255, 255, .25);
	--bs-btn-hover-bg: rgba(255, 255, 255, .18);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-border-color: rgba(255, 255, 255, .4);
	--bs-btn-padding-x: 1.6rem;
	--bs-btn-padding-y: .8rem;
	--bs-btn-font-weight: 700;
	--bs-btn-font-size: .9rem;
	border-radius: 999px;
}

.eyebrow {
	background: var(--c2b-blue-light);
	color: var(--c2b-blue-dark);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.c2b-card {
	background: #fff;
	border: 1px solid var(--c2b-border);
	border-radius: 20px;
	box-shadow: var(--c2b-shadow);
}

.text-c2b-muted {
	color: var(--c2b-muted) !important;
}

/* topbar + navbar */
.topbar {
	background: var(--c2b-navy);
	color: #dfe6ff;
	font-size: .82rem;
}

.navbar {
	background: #fff;
	border-bottom: 1px solid var(--c2b-border);
}

.navbar .nav-link {
	font-weight: 600;
	font-size: .92rem;
	color: var(--c2b-navy);
	opacity: .85;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
	opacity: 1;
	color: var(--c2b-blue);
}

.navbar .nav-link.active {
	box-shadow: inset 0 -2px 0 var(--c2b-blue);
}

.dropdown-menu {
	border: 1px solid var(--c2b-border);
	border-radius: 12px;
	box-shadow: var(--c2b-shadow-lg);
	font-size: .88rem;
	font-weight: 600;
}

.dropdown-item {
	color: var(--c2b-navy);
	border-radius: 8px;
	padding: .55rem .9rem;
}

.dropdown-item:hover {
	background: var(--c2b-blue-light);
	color: var(--c2b-blue);
}

.icon-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--c2b-canvas);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c2b-navy);
	font-size: .85rem;
	font-weight: 600;
}

/* Mobile login icon: sized/shaped to match the navbar hamburger toggler */
.navbar-login-icon {
	--bs-btn-padding-x: .75rem;
	--bs-btn-padding-y: .50rem;
	--bs-btn-font-size: 1.35rem;
	border-width: 1px;
	border-radius: var(--bs-navbar-toggler-border-radius, .375rem);
}

.navbar-lang-icon {
	flex-shrink: 0;
}

.navbar-mobile-lang-menu {
	min-width: 9rem;
	z-index: 1055;
}

/* Account chip — distinct from circular language .icon-btn */
.navbar-user-menu {
	align-self: center;
}

.navbar-user-chip {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .25rem .65rem .25rem .25rem;
	background: linear-gradient(135deg, #f0f4ff 0%, #e8efff 100%);
	border: 1.5px solid rgba(47, 94, 234, .22) !important;
	border-radius: 999px;
	color: var(--c2b-navy);
	font-weight: 700;
	max-width: 220px;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.navbar-user-chip:hover,
.navbar-user-chip:focus,
.navbar-user-chip.show {
	background: linear-gradient(135deg, #e4ecff 0%, #dce6ff 100%);
	border-color: rgba(47, 94, 234, .4) !important;
	box-shadow: 0 4px 14px rgba(47, 94, 234, .14);
}

.navbar-user-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--c2b-blue) 0%, var(--c2b-blue-dark) 100%);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .72rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	flex-shrink: 0;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(34, 71, 196, .28);
}

.navbar-user-label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
	min-width: 0;
}

.navbar-user-greeting {
	font-size: .62rem;
	font-weight: 700;
	color: var(--c2b-blue);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.navbar-user-name {
	max-width: 108px;
	font-size: .84rem;
	font-weight: 700;
}

.navbar-user-chevron {
	font-size: .58rem;
	color: var(--c2b-blue);
	opacity: .75;
	flex-shrink: 0;
	margin-left: .05rem;
}

.navbar-user-dropdown {
	min-width: 210px;
}

.navbar-user-dropdown .dropdown-header {
	font-size: .72rem;
	font-weight: 700;
	color: var(--c2b-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	padding-bottom: .35rem;
}

.navbar-user-dropdown .dropdown-item {
	display: flex;
	align-items: center;
}

.navbar-user-dropdown .dropdown-item i {
	font-size: .95rem;
	opacity: .75;
}

.pricing-tab-icon {
	flex-shrink: 0;
	display: block;
}

/* hero */
#hero h1 {
	font-size: clamp(20px, 6vw, 44px);
	line-height: 1.15;
	word-wrap: break-word;
}

#hero h1 span {
	color: var(--c2b-blue);
}

#hero h1 .de-flag {
	display: inline-block;
	position: relative;
	color: var(--c2b-navy);
	z-index: 0;
}

#hero h1 .de-flag::after {
	content: "";
	position: absolute;
	left: -2%;
	right: -2%;
	bottom: -4px;
	height: 12px;
	z-index: -1;
	background: url("../images/css-image-1.cea0bde452a0.svg") center/100% 100% no-repeat;
}

#hero .lead {
	font-size: 1rem;
	color: var(--c2b-muted);
	max-width: 440px;
}

#hero .hero-photo {
	display: flex;
	align-items: center;
	justify-content: center;
}

#hero .hero-photo-frame {
	width: 100%;
	max-width: 340px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

#hero .hero-photo img {
	width: 100%;
	height: auto;
	max-height: min(420px, 52vh);
	object-fit: contain;
	display: block;
}

#hero .hero-cert-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.media-photo {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--c2b-shadow-lg);
}

.media-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* checklist + icon list */
.checklist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 600;
	color: var(--c2b-navy);
	font-size: .94rem;
	margin-bottom: 12px;
}

.checklist.pricing-plan__feats li {
	align-items: center;
}

.checklist li.strong {
	font-weight: 800;
}

.check-ic {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--c2b-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.checklist.pricing-plan__feats .check-ic {
	margin-top: 0;
}

.check-ic svg {
	width: 11px;
	height: 11px;
}

.cursor-pointer {
	cursor: pointer;
}

.pricing-feature-tooltip {
	display: inline;
	line-height: 1.45;
}

.pricing-feature-tooltip__text {
	display: inline;
}

.pricing-feature-tooltip__icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: .3rem;
	opacity: .8;
	color: var(--c2b-blue);
}

.tooltip-inner {
	max-width: 280px;
	text-align: left;
}

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

.icon-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--c2b-navy);
	font-size: .88rem;
	margin-bottom: 12px;
}

.il-ic {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--c2b-blue-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .94rem;
}

/* product strip + quality */
.product-strip figure {
	background: var(--c2b-canvas);
	border: 1px solid var(--c2b-border);
	border-radius: 12px;
	padding: 14px;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
	margin: 0;
}

.product-strip figure:hover {
	transform: translateY(-4px);
	box-shadow: var(--c2b-shadow);
}

.product-strip img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
}

.product-strip figcaption {
	margin-top: 10px;
	font-weight: 700;
	color: var(--c2b-navy);
	font-size: .85rem;
}

.quality-card {
	border: 1px solid var(--c2b-border);
	border-radius: 12px;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
	background: #fff;
}

.quality-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--c2b-shadow);
}

.quality-ic {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--c2b-blue-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	margin: 0 auto 16px;
}

.quality-card h3 {
	font-size: .94rem;
}

.quality-card p {
	font-size: .85rem;
	color: var(--c2b-muted);
	margin: 0;
}

/* ship banner */
.ship-banner {
	background: linear-gradient(135deg, var(--c2b-navy), #243766);
	border-radius: 20px;
	box-shadow: var(--c2b-shadow-lg);
	color: #fff;
}

.ship-banner h2 {
	color: #fff;
}

.ship-sub {
	color: #aebbe4;
	font-size: .9rem;
}

.ship-tile {
	text-align: left;
	border-left: 1px solid rgba(255, 255, 255, .12);
}

.ship-tile:first-child {
	border-left: none;
}

.ship-tile svg {
	width: 26px;
	height: 26px;
	margin-bottom: 12px;
}

.ship-tile h4 {
	color: #fff;
	font-size: .94rem;
	font-weight: 800;
	margin-bottom: 4px;
}

.ship-tile p {
	color: #93a5d6;
	font-size: .82rem;
	font-weight: 500;
	margin: 0;
}

/* image gen */
.img-gen-grid img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid var(--c2b-border);
	background: var(--c2b-canvas);
}

/* pricing */
.seg {
	display: inline-flex;
	background: var(--c2b-canvas);
	border-radius: 999px;
	padding: 5px;
	border: 1px solid var(--c2b-border);
}

.seg button {
	border: none;
	background: transparent;
	padding: 9px 20px;
	border-radius: 999px;
	font-weight: 700;
	font-size: .85rem;
	color: var(--c2b-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

.seg button.active {
	background: #fff;
	color: var(--c2b-navy);
	box-shadow: var(--c2b-shadow);
}

.seg .pricing-access-tabs__tab {
	border: none;
	background: transparent;
	box-shadow: none;
	color: var(--c2b-muted);
	padding: 9px 20px;
	border-radius: 999px;
}

.seg .pricing-access-tabs__tab.is-active,
.seg .pricing-access-tabs__tab.active {
	background: #fff;
	color: var(--c2b-navy);
	box-shadow: var(--c2b-shadow);
}

.seg-divider {
	width: 1px;
	height: 22px;
	background: var(--c2b-border);
	margin: 0 8px;
	align-self: center;
	flex-shrink: 0;
}

.pill-switch {
	display: inline-flex;
	background: var(--c2b-canvas);
	border-radius: 999px;
	padding: 4px;
	border: 1px solid var(--c2b-border);
}

.pill-switch button {
	border: none;
	background: transparent;
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: 700;
	font-size: .82rem;
	color: var(--c2b-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

.pill-switch button.active {
	background: var(--c2b-navy);
	color: #fff;
}

.save-tag {
	background: #dff5e6;
	color: var(--c2b-green);
	font-size: .7rem;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 6px;
}

.plan {
	border: 1.5px solid var(--c2b-border);
	border-radius: 16px;
	position: relative;
	background: #fff;
	overflow: visible;
}

.plan.rec {
	border-color: var(--c2b-blue);
	box-shadow: 0 12px 32px rgba(47, 94, 234, .14);
}

.plan .rec-badge {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c2b-blue);
	color: #fff;
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 6px 12px;
	border-radius: 999px;
	box-shadow: 0 0 0 3px #fff;
}

.plan.rec .plan-name {
	padding-top: .15rem;
}

.plan-name {
	font-weight: 800;
	color: var(--c2b-navy);
	font-size: .94rem;
	margin-bottom: 2px;
}

.plan-sub {
	font-size: .78rem;
	color: var(--c2b-muted);
}

.plan-price {
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--c2b-navy);
}

.plan-price span {
	font-size: .88rem;
	font-weight: 600;
	color: var(--c2b-muted);
}

.plan-billed {
	font-size: .78rem;
	color: var(--c2b-muted);
	margin: 6px 0 2px;
}

.plan-feat-title {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .05em;
	color: var(--c2b-muted);
	margin-bottom: 10px;
}

.included {
	border: 1px solid var(--c2b-border);
	border-radius: 16px;
	background: var(--c2b-canvas);
	overflow: hidden;
}

.included-grid {
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px 16px;
	margin: 14px 0;
	padding: 0;
}

.included-grid li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: .85rem;
	font-weight: 600;
	color: var(--c2b-navy);
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.plus-ic {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: var(--c2b-blue);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: .82rem;
	line-height: 1;
	margin-top: 1px;
}

/* how it works */
.hiw-col {
	border: 1px solid var(--c2b-border);
	border-radius: 12px;
}

.hiw-col.hiw-main {
	border-color: var(--c2b-blue);
	box-shadow: 0 12px 32px rgba(47, 94, 234, .10);
}

.hiw-tag {
	display: inline-block;
	background: var(--c2b-blue-light);
	color: var(--c2b-blue-dark);
	font-size: .75rem;
	font-weight: 800;
	padding: 4px 12px;
	border-radius: 999px;
}

.step-num {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--c2b-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: .92rem;
	flex: none;
}

.hiw-step h4 {
	font-size: .88rem;
	margin-bottom: 2px;
}

.hiw-step p {
	font-size: .82rem;
	color: var(--c2b-muted);
	margin: 0;
}

.hiw-note {
	font-size: .78rem;
	color: var(--c2b-muted);
	border-top: 1px dashed var(--c2b-border);
}

/* media panel (svg) */
.media-panel {
	border-radius: 18px;
	background: var(--c2b-blue-light);
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4/3;
	box-shadow: inset 0 0 0 1px var(--c2b-border);
	padding: 30px;
}

.media-panel svg {
	width: 100%;
	height: 100%;
}

/* testimonials */
.testi-card {
	max-width: 720px;
	border: 1px solid var(--c2b-border);
	border-radius: 20px;
	box-shadow: var(--c2b-shadow);
	touch-action: pan-y;
}

.testi-quote {
	font-size: 1.05rem;
	font-style: italic;
	color: var(--c2b-navy);
	line-height: 1.6;
}

.testi-name {
	font-weight: 800;
	color: var(--c2b-blue);
	font-size: .88rem;
}

.testi-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c2b-border);
	cursor: pointer;
	border: none;
	padding: 0;
	transition: width .15s, background-color .15s, border-radius .15s;
	position: relative;
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
}

.testi-dot::before {
	content: '';
	position: absolute;
	inset: -10px;
}

.testi-dot.active {
	background: var(--c2b-blue);
	width: 22px;
	height: 8px;
	border-radius: 5px;
}

/* FAQ accordion (Bootstrap) */
.faq-acc .accordion-item {
	border: 1px solid var(--c2b-border);
	border-radius: 14px !important;
	margin-bottom: 12px;
	overflow: hidden;
	background: #fff;
}

.faq-acc .accordion-button {
	font-weight: 700;
	color: var(--c2b-navy);
	font-size: 1rem;
	padding: 18px 22px;
	box-shadow: none;
	background: #fff;
}

.faq-acc .accordion-button:not(.collapsed) {
	color: var(--c2b-blue);
}

.faq-acc .accordion-button:focus {
	box-shadow: none;
	border-color: var(--c2b-border);
}

.faq-acc .accordion-body {
	padding: 0 22px 20px;
	font-size: .85rem;
	color: var(--c2b-muted);
}

/* CTA + footer */
footer {
	background: var(--c2b-navy);
	color: #c6cee8;
}

footer h4 {
	color: #fff;
	font-size: .82rem;
	letter-spacing: .03em;
}

footer a {
	color: #c6cee8;
	text-decoration: none;
}

footer a:hover {
	color: #fff;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .78rem;
	color: #93a0c4;
}

/* scroll reveal */
.reveal {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}

.reveal.visible {
	opacity: 1;
	transform: none;
}

.reveal-page-block {
	transform: translateY(18px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

.reveal-stagger>* {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}

.reveal-stagger.visible>* {
	opacity: 1;
	transform: none;
}

.reveal-stagger.visible>*:nth-child(1) {
	transition-delay: .05s;
}

.reveal-stagger.visible>*:nth-child(2) {
	transition-delay: .15s;
}

.reveal-stagger.visible>*:nth-child(3) {
	transition-delay: .25s;
}

.reveal-stagger.visible>*:nth-child(4) {
	transition-delay: .35s;
}

/* =============================================================================
   Products — public products page
   ============================================================================= */

.products-hero h1 {
	font-size: clamp(28px, 3.6vw, 38px);
}

.search-bar {
	display: flex;
	max-width: 520px;
	border: 1.5px solid var(--c2b-border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--c2b-canvas);
	transition: border-color .15s;
}

.search-bar:focus-within {
	border-color: var(--c2b-blue);
	background: #fff;
}

.search-bar input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	padding: 14px 22px;
	font-size: .94rem;
	color: var(--c2b-navy);
}

.search-bar button {
	border: none;
	background: var(--c2b-blue);
	color: #fff;
	padding: 0 24px;
	cursor: pointer;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.fchip {
	padding: 8px 16px;
	border-radius: 999px;
	border: 1.5px solid var(--c2b-border);
	background: #fff;
	font-size: .82rem;
	font-weight: 700;
	color: var(--c2b-muted);
	cursor: pointer;
	transition: all .15s;
	text-decoration: none;
	display: inline-block;
}

button.fchip {
	line-height: inherit;
}

.fchip:hover {
	border-color: var(--c2b-blue);
	color: var(--c2b-blue);
}

.fchip.active {
	background: var(--c2b-blue);
	border-color: var(--c2b-blue);
	color: #fff;
}

.global-perks {
	border-top: 1px solid var(--c2b-border);
	font-size: .82rem;
	font-weight: 700;
	color: var(--c2b-navy);
}

.global-perks button,
.global-perks a.perk-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.global-perks button:hover,
.global-perks a.perk-link:hover {
	color: var(--c2b-blue);
}

.perk-note {
	color: var(--c2b-muted);
	font-weight: 600;
}

.pcard {
	background: #fff;
	border: 1px solid var(--c2b-border);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}

.pcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--c2b-shadow-lg);
}

.pcard-media {
	position: relative;
	background: var(--c2b-canvas);
	padding: 22px;
}

.pcard-media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}

.pcard-media a {
	display: block;
}

.pcard-body h3 {
	font-size: .94rem;
	line-height: 1.35;
}

.psize {
	color: var(--c2b-navy);
	font-weight: 800;
	font-size: inherit;
}

.price-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--c2b-navy);
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	padding: 6px 12px;
	border-radius: 999px;
	z-index: 1;
}

.pcard-shipping {
	position: absolute;
	bottom: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: #fff;
	color: var(--c2b-blue);
	box-shadow: var(--c2b-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
}

.ptag {
	background: var(--c2b-blue-light);
	color: var(--c2b-navy);
	font-size: .7rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

.pcard-more {
	font-size: .82rem;
	font-weight: 700;
	color: var(--c2b-blue);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	padding: 0;
}

.pcard-detail {
	display: none;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--c2b-border);
}

.pcard.open .pcard-detail {
	display: block !important;
}

.pcard-detail p {
	font-size: .78rem;
	color: var(--c2b-muted);
}

.plink {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .82rem;
	font-weight: 700;
	color: var(--c2b-blue);
	text-decoration: none;
	white-space: nowrap;
}

button.plink {
	background: none;
	border: none;
	padding: 0;
	text-align: left;
	cursor: pointer;
	font-size: .82rem;
	font-weight: 700;
	color: var(--c2b-blue);
}

.plink .bi {
	font-size: .95em;
	line-height: 1;
	flex-shrink: 0;
}

.plink:hover {
	text-decoration: underline;
	color: var(--c2b-blue);
}

.product-info-modal-dialog {
	max-width: 560px;
}

#productInfoModal .modal-header {
	padding: 1.25rem 1.5rem .5rem;
}

#productInfoModal .modal-title {
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--c2b-navy);
	padding-right: 1rem;
}

.product-info-modal-body {
	padding: .25rem 1.5rem 1.5rem;
	color: var(--c2b-text);
}

.product-info-modal-body__content {
	display: block;
	width: 100%;
}

.product-info-modal-body .ck-content {
	display: block;
	width: 100%;
}

.product-info-modal-body .c2b-content {
	font-size: .88rem;
	line-height: 1.65;
}

.product-info-modal-body .c2b-content> :first-child {
	margin-top: 0;
}

.product-info-modal-body .c2b-content> :last-child {
	margin-bottom: 0;
}

.product-info-modal-body .c2b-content p {
	margin-bottom: .75rem;
	overflow-wrap: anywhere;
}

.product-info-modal-body .c2b-content p:has(> strong:only-child),
.product-info-modal-body .c2b-content p:has(> b:only-child) {
	margin-top: 1rem;
	margin-bottom: .35rem;
}

.product-info-modal-body .c2b-content>p:first-child {
	margin-top: 0;
}

.product-info-modal-body .c2b-content strong,
.product-info-modal-body .c2b-content b {
	color: var(--c2b-navy);
	font-weight: 800;
	font-size: .84rem;
}

.product-info-modal-body .c2b-content ul,
.product-info-modal-body .c2b-content ol {
	margin: .25rem 0 1rem;
	padding-left: 1.25rem;
}

.product-info-modal-body .c2b-content ul {
	list-style: disc;
}

.product-info-modal-body .c2b-content ul>li,
.product-info-modal-body .c2b-content ol>li {
	margin-bottom: 0rem;
	padding-left: .15rem;
}

.product-info-modal-body .c2b-content h2,
.product-info-modal-body .c2b-content h3,
.product-info-modal-body .c2b-content h4 {
	font-size: .92rem;
	margin: 1rem 0 .4rem;
	color: var(--c2b-navy);
}

.product-info-modal-body .c2b-content hr {
	margin: 1rem 0;
	border: 0;
	height: 1px;
	background: var(--c2b-border);
}

.products-pagination {
	padding: 0.25rem 0 1rem;
}

.products-pagination-summary {
	font-size: .78rem;
	font-weight: 500;
	color: var(--c2b-muted);
	margin-bottom: .65rem !important;
}

.products-pagination .pagination {
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}

.products-pagination .page-item {
	margin: 0;
}

.products-pagination .page-item:first-child .page-link,
.products-pagination .page-item:last-child .page-link,
.products-pagination .page-link {
	border-radius: 8px !important;
}

.products-pagination .page-link {
	min-width: 32px;
	height: 32px;
	padding: 0 .55rem;
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	border: 1px solid var(--c2b-border);
	background: #fff;
	color: var(--c2b-navy);
	font-weight: 600;
	font-size: .78rem;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
	transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.products-pagination .page-link:hover,
.products-pagination .page-link:focus {
	border-color: #c5d0dc;
	color: var(--c2b-navy);
	background: #fff;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}

.products-pagination .page-item.active .page-link {
	background: var(--c2b-blue);
	border-color: var(--c2b-blue);
	color: #fff;
	box-shadow: 0 2px 8px rgba(45, 181, 250, .28);
}

.products-pagination .page-item.disabled .page-link {
	opacity: .5;
	pointer-events: none;
	background: #fff;
	border-color: var(--c2b-border);
	color: var(--c2b-muted);
	box-shadow: none;
}

.products-pagination .page-item--gap .page-link,
.products-pagination .page-item--gap.disabled .page-link {
	width: 32px;
	min-width: 32px;
	padding: 0;
	border: 1px solid var(--c2b-border);
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
	color: var(--c2b-muted);
	font-size: .9rem;
	letter-spacing: 0;
}

.products-pagination .page-item--nav .page-link {
	width: 32px;
	min-width: 32px;
	padding: 0;
	font-weight: 600;
	color: var(--c2b-navy);
}

.products-pagination .page-item--nav .page-link i {
	font-size: .75rem;
}

.products-pagination .page-item--nav.disabled .page-link {
	background: var(--c2b-canvas);
	border-color: var(--c2b-canvas);
	color: var(--c2b-muted);
}

.products-pagination .page-item:not(.page-item--nav):not(.page-item--gap) .page-link {
	width: 32px;
	padding: 0;
}

/* =============================================================================
   Solutions — solutions page
   ============================================================================= */

/* solutions page */
.sol-hero h1 {
	font-size: clamp(30px, 4.2vw, 44px);
	line-height: 1.15;
}

.sol-hero h1 span {
	color: var(--c2b-blue);
}

.sol-card {
	border: 1.5px solid var(--c2b-border);
	border-radius: 20px;
	box-shadow: var(--c2b-shadow);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	color: inherit;
}

.sol-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--c2b-shadow-lg);
	border-color: var(--c2b-blue);
	color: inherit;
}

.sol-tag {
	background: var(--c2b-blue-light);
	color: var(--c2b-blue-dark);
	font-size: .75rem;
	font-weight: 800;
}

.solution-access-icon {
	flex-shrink: 0;
	display: block;
}

.solution-access-glyph {
	font-size: .85em;
	line-height: 1;
}

.sol-for {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--c2b-muted);
}

.feat-link {
	font-size: .82rem;
	font-weight: 700;
	color: var(--c2b-blue);
}

.shared-tile {
	border: 1px solid var(--c2b-border);
	border-radius: 12px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--c2b-navy);
	line-height: 1.4;
	transition: transform .15s ease, box-shadow .15s ease;
}

.shared-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--c2b-shadow);
}

.shared-ic {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--c2b-blue-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

.flow-step h4 {
	font-size: .88rem;
	margin-bottom: 2px;
}

.flow-step p {
	font-size: .82rem;
	color: var(--c2b-muted);
	margin: 0;
}

.media-shot {
	border-radius: 18px;
	background: var(--c2b-blue-light);
	box-shadow: inset 0 0 0 1px var(--c2b-border);
}

.media-shot img {
	width: 100%;
	border-radius: 12px;
	border: 1px solid var(--c2b-border);
	box-shadow: var(--c2b-shadow-lg);
}

.store-badge img {
	height: 52px;
	width: auto;
	border-radius: 10px;
	transition: transform .15s ease, box-shadow .15s ease;
}

.store-badge:hover img {
	transform: translateY(-2px);
	box-shadow: var(--c2b-shadow);
}

.store-badge--shopify {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem .9rem;
	border: 1.5px solid var(--c2b-border);
	border-radius: 10px;
	font-size: .8rem;
	font-weight: 700;
	color: var(--c2b-navy);
	text-decoration: none;
	background: #fff;
	transition: border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.store-badge--shopify:hover {
	border-color: var(--c2b-blue);
	color: var(--c2b-blue);
	transform: translateY(-2px);
	box-shadow: var(--c2b-shadow);
}

.store-badge__icon {
	flex-shrink: 0;
	display: block;
}

.cmp thead th {
	border-bottom: 2px solid var(--c2b-border);
}

.cmp th,
.cmp td {
	padding: .9rem 1rem;
	font-size: .86rem;
	border-color: var(--c2b-border);
}

.cmp td {
	color: var(--c2b-text);
	font-weight: 500;
}

.cmp th:first-child,
.cmp td:first-child {
	text-align: left;
	font-weight: 700;
	color: var(--c2b-navy);
	width: 22%;
}

.cmp tbody tr:last-child td {
	border-bottom: 0;
}

.cmp-tag {
	background: var(--c2b-blue-light);
	color: var(--c2b-blue-dark);
	font-size: .75rem;
	font-weight: 800;
}

.row-note {
	display: block;
	font-weight: 500;
	color: var(--c2b-muted);
	font-size: .74rem;
}

.decide {
	border: 1px solid var(--c2b-border);
	border-radius: 12px;
}

.decide .if {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--c2b-muted);
}

.decide h3 {
	font-size: .94rem;
}

.switch-note {
	border: 1px dashed var(--c2b-border);
	border-radius: 12px;
	font-size: .82rem;
	color: var(--c2b-muted);
	background: var(--c2b-canvas);
}

.switch-note strong {
	color: var(--c2b-navy);
}

.cta-banner {
	background: linear-gradient(135deg, var(--c2b-navy), #243766);
	border-radius: 20px;
	box-shadow: var(--c2b-shadow-lg);
}

.cta-banner h2 {
	color: #fff;
	font-size: clamp(20px, 2.6vw, 27px);
}

/* =============================================================================
   Content — legal, documentation, contact, CMS
   ============================================================================= */

/* inner content / legal pages */
.c2b-legal-doc {
	display: block !important;
	width: 100%;
	color: var(--c2b-text);
	font-size: .96rem;
	line-height: 1.75;
}

.c2b-legal-doc> :first-child {
	margin-top: 0;
}

.c2b-legal-doc> :last-child {
	margin-bottom: 0;
}

.c2b-content {
	color: var(--c2b-text);
	font-size: .96rem;
	line-height: 1.75;
}

.c2b-content h1,
.c2b-content h2,
.c2b-content h3,
.c2b-content h4 {
	color: var(--c2b-navy);
	font-weight: 800;
	line-height: 1.35;
}

.c2b-content h1 {
	font-size: 1.5rem;
	margin: 2rem 0 1rem;
}

.c2b-content h2 {
	font-size: 1.3rem;
	margin: 2.25rem 0 .85rem;
}

.c2b-content h3 {
	font-size: 1.08rem;
	margin: 1.75rem 0 .65rem;
}

.c2b-content h4 {
	font-size: 1rem;
	margin: 1.5rem 0 .5rem;
}

.c2b-content>h2:first-child {
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	margin-top: 0;
	margin-bottom: .35rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--c2b-blue-light);
}

.c2b-content>h2:first-child+h3 {
	margin-top: .75rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--c2b-muted);
}

.c2b-content>h2:first-child+h3+p {
	font-size: 1rem;
}

.c2b-content p {
	margin-bottom: 1.1rem;
}

.c2b-content p:last-child {
	margin-bottom: 0;
}

.c2b-content strong,
.c2b-content b {
	color: var(--c2b-navy);
	font-weight: 800;
}

.c2b-content ul,
.c2b-content ol {
	margin: 0 0 1.25rem;
	padding-left: 1.35rem;
}

.c2b-content ul>li,
.c2b-content ol>li {
	margin-bottom: .5rem;
}

.c2b-content ol>li::marker {
	color: var(--c2b-blue);
	font-weight: 800;
}

.c2b-content a {
	color: var(--c2b-blue);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.c2b-content a:hover {
	color: var(--c2b-blue-dark);
}

.c2b-content hr {
	border: 0;
	height: 1px;
	margin: 2rem 0;
	background: linear-gradient(90deg, transparent, var(--c2b-border) 15%, var(--c2b-border) 85%, transparent);
	opacity: 1;
}

.c2b-content blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--c2b-blue);
	background: var(--c2b-canvas);
	border-radius: 0 12px 12px 0;
	color: var(--c2b-navy);
	font-weight: 600;
}

.c2b-content table {
	width: 100%;
	margin: 1.5rem 0;
	border-collapse: collapse;
	font-size: .9rem;
}

.c2b-content table th,
.c2b-content table td {
	padding: .75rem 1rem;
	border: 1px solid var(--c2b-border);
	vertical-align: top;
}

.c2b-content table th {
	background: var(--c2b-canvas);
	color: var(--c2b-navy);
	font-weight: 800;
	text-align: left;
}

.c2b-content.ck-content h1 {
	font-size: 1.45rem;
	margin-top: 0;
}

.c2b-content.ck-content h2 {
	font-size: 1.22rem;
	margin-top: 2rem;
	padding-top: .25rem;
}

.c2b-content.ck-content h3 {
	font-size: 1.05rem;
}

.c2b-content.ck-content h2+p,
.c2b-content.ck-content h3+p,
.c2b-content.ck-content h4+p {
	margin-top: 0;
}

.c2b-content.ck-content li>p {
	margin-bottom: .35rem;
}

.c2b-content.ck-content li>p:last-child {
	margin-bottom: 0;
}

.c2b-info-block {
	background: var(--c2b-canvas);
	border: 1px solid var(--c2b-border);
	border-radius: 14px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
}

.c2b-info-block:last-child {
	margin-bottom: 0;
}

.c2b-info-block p {
	margin-bottom: .85rem;
	line-height: 1.8;
}

.c2b-info-block p:last-child {
	margin-bottom: 0;
}

.c2b-info-block--compact p {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .5rem;
	align-items: baseline;
	margin-bottom: .65rem;
}

.c2b-info-block--compact p:last-child {
	margin-bottom: 0;
}

.c2b-legal-imprint .c2b-info-block p:only-child {
	margin-bottom: 0;
}

.contact-detail-card {
	border: 1px solid var(--c2b-border);
	border-radius: 16px;
	background: var(--c2b-canvas);
}

.contact-form-card .form-control,
.contact-form-card .form-select {
	border-color: var(--c2b-border);
	border-radius: 12px;
}

.contact-form-card .form-control:focus {
	border-color: var(--c2b-blue);
	box-shadow: 0 0 0 .2rem rgba(47, 94, 234, .12);
}

.faq-acc .accordion-body .ck-content {
	font-size: .9rem;
	line-height: 1.65;
	color: var(--c2b-text);
}

.faq-acc .accordion-body .ck-content a {
	color: var(--c2b-blue);
	font-weight: 600;
}

/* =============================================================================
   Documentation page
   ============================================================================= */

.doc-page {
	--c2b-ink: #2b3a55;
	--c2b-ink-strong: #1c2b45;
	--doc-muted: #6b7a99;
	--doc-bg: #eef2fa;
	background: var(--doc-bg);
	color: var(--c2b-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.doc-container {
	max-width: 1080px;
}

.doc-hero,
.doc-intro,
.doc-card,
.no-results {
	background: #fff;
	box-shadow: 0 1px 3px rgba(22, 41, 77, .06);
}

.doc-intro,
.doc-body {
	color: var(--c2b-ink);
	font-size: 1rem;
	line-height: 1.5;
}

.doc-intro strong,
.doc-body strong {
	color: inherit;
	font-weight: 700;
}

.doc-hero-title {
	color: var(--c2b-ink-strong);
	font-size: clamp(2rem, 5vw, 2.5rem);
	letter-spacing: -.01em;
}

.doc-eyebrow {
	background: #e7edfd;
	color: #1e46d0;
	font-size: .75rem;
	letter-spacing: .08em;
}

.doc-muted {
	color: var(--doc-muted);
}

.search-hint {
	min-height: 18px;
	font-size: .8125rem;
}

.doc-chip {
	display: inline-block;
	border-radius: 50rem;
	padding: .2rem .625rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.35;
	white-space: nowrap;
}

.doc-chip.all {
	background: #eef2ff;
	color: #3b4fd8;
}

.doc-chip.shopify {
	background: #e8f7ee;
	color: #1c7c4a;
}

.doc-chip.wholesale {
	background: #f3ecff;
	color: #6b3fd8;
}

.doc-chip.api {
	background: #fdeee6;
	color: #c05621;
}

.doc-category {
	color: var(--doc-muted);
	font-size: .8125rem;
	letter-spacing: .1em;
}

.doc-category::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: #e3e8f4;
}

.doc-card {
	border-color: transparent !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.doc-card[open] {
	border-color: #d8e0f5 !important;
}

.doc-card.hit {
	outline: 2px solid #2f5cf6;
	outline-offset: -2px;
}

.doc-summary {
	cursor: pointer;
	list-style: none;
	color: var(--c2b-ink-strong);
	font-size: 1.03rem;
	user-select: none;
}

.doc-summary::-webkit-details-marker {
	display: none;
}

.doc-card[open]>.doc-summary {
	color: #2f5cf6;
}

.doc-summary .chips {
	margin-left: auto;
}

.doc-copy-link {
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	opacity: 0;
	text-decoration: none !important;
	box-shadow: none !important;
}

.doc-summary:hover .doc-copy-link,
.doc-copy-link:focus-visible,
.doc-copy-link.is-copied {
	opacity: 1;
}

.doc-copy-link:hover,
.doc-copy-link:focus-visible {
	color: #2f5cf6 !important;
	background: #e7edfd;
}

.doc-copy-link.is-copied,
.doc-copy-link.is-copied:hover,
.doc-copy-link.is-copied:focus-visible {
	color: #198754 !important;
	background: #e8f7ee;
}

.doc-chevron {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: #2f5cf6;
	transition: transform .2s ease;
}

.doc-card[open] .doc-chevron {
	transform: rotate(180deg);
}

.doc-body {
	font-size: .97rem;
}

.doc-body h3 {
	color: var(--c2b-ink-strong);
	font-size: 1rem;
	margin: 1.375rem 0 .5rem;
}

.doc-body h4 {
	color: var(--c2b-ink-strong);
	font-size: .94rem;
	margin: 1.125rem 0 .375rem;
}

.doc-body p {
	margin: .625rem 0;
}

.doc-body ul {
	list-style: disc;
	padding-left: 1.25rem;
	margin: .5rem 0;
}

.doc-body ol {
	list-style: decimal;
	padding-left: 1.25rem;
	margin: .5rem 0;
}

.doc-body li {
	list-style: inherit;
	margin: .3125rem 0;
}

.doc-body a {
	font-weight: 600;
	color: #2f5cf6;
}

.doc-body a:hover {
	color: #1e46d0;
	text-decoration: underline;
}

.account-card {
	background: #fafbfe;
}

.doc-note {
	background: #fff8e6;
	border-color: #f4d98c !important;
	color: var(--c2b-ink);
}

.doc-tip {
	background: #eef6ff;
	border-color: #cfe2fb !important;
	color: var(--c2b-ink);
}

.doc-api-callout {
	background: linear-gradient(135deg, #fff7f2, #fdeee6);
	border-color: #f3d3bd !important;
	color: var(--c2b-ink);
}

.doc-page .table {
	--bs-table-striped-bg: #fafbfe;
}

.doc-page .table thead th,
.doc-page .table tbody th {
	background: #f5f7fc;
	color: var(--c2b-ink-strong);
}

/* =============================================================================
   Design — public design page
   ============================================================================= */

.design-lead {
	max-width: 540px;
}

.design-ai-lead {
	max-width: 520px;
}

.design-ai-grid {
	max-width: 900px;
}

.design-cta-title {
	max-width: 640px;
}

.design-icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	line-height: 1;
	margin-bottom: 1rem;
	flex: 0 0 52px;
}

.design-icon--canva {
	background: #eaf0ff;
}

.design-icon--tools {
	background: #fff3e0;
}

.design-icon--ai {
	background: #efe9ff;
}

.sol-card--soon {
	border-style: dashed;
	border-width: 1.5px;
}

.design-coming-badge {
	background: var(--c2b-navy);
	color: #fff;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.design-step-num {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--c2b-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: .92rem;
	flex: none;
}

.design-tool-pill {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1.5px solid var(--c2b-border);
	background: #fff;
	font-size: .78rem;
	font-weight: 600;
	color: var(--c2b-navy);
}

.design-soon-badge {
	background: rgba(255, 255, 255, .14) !important;
	color: #fff !important;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.design-ai-step {
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px;
	background: rgba(255, 255, 255, .08);
}

.design-ai-step h4 {
	color: #fff;
	font-size: .88rem;
	margin-bottom: 2px;
}

.design-ai-step p {
	color: #aebbe4;
	font-size: .82rem;
	margin: 0;
}

.design-ai-num {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: .85rem;
	flex: none;
}