*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

html {
	scroll-behavior: smooth
}

body {
	font-family: var(--font-family);
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
	overflow-x: hidden
}

a {
	text-decoration: none;
	color: inherit
}

img {
	max-width: 100%
}

:root {
	--radius: 12px;
	--radius-xs: 5px;
	--radius-sm: 8px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 16px;
	--radius-dot: 7px;
	--radius-pill: 100px;
	--radius-round: 50%;
	--border-width: 1.5px;
	--border-width-thin: 1px;
	--border-width-thick: 2px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-9: 36px;
	--space-10: 40px;
	--space-11: 44px;
	--space-12: 48px;
	--space-13: 52px;
	--space-14: 56px;
	--space-15: 72px;
	--space-16: 64px;
	--space-18: 88px;
	--space-20: 80px;
	--space-22: 100px;
	--section-pad: 80px;
	--section-pad-sm: 60px;
	--section-pad-md: 70px;
	--section-pad-lg: 100px;
	--section-pad-xl: 50px;
	--container-max: 1180px;
	--container-pad: 24px;
	--nav-height: 68px;
	--sticky-top: 80px;
	--font-family: 'Plus Jakarta Sans', sans-serif;
	--blue: #4f46e5;
	--blue-dark: #3730a3;
	--blue-light: #eef2ff;
	--blue-text: #312e81;
	--blue-muted: #c7d2fe;
	--blue-sky: #60a5fa;
	--blue-pale: #93c5fd;
	--blue-hero-text: #bfdbfe;
	--indigo: #4338ca;
	--indigo-mid: #6366f1;
	--bg: #f8fafc;
	--bg-subtle: #f1f5f9;
	--bg-muted: #f9fafb;
	--bg-alt: #fafafa;
	--surface: #fff;
	--surface-hover: #f8fafc;
	--surface-raised: #fff;
	--topbar-bg: #f3f4f6;
	--text: #0f172a;
	--text-heading: #1e293b;
	--text-body: #374151;
	--text2: #64748b;
	--text3: #94a3b8;
	--on-primary: #fff;
	--border: #e2e8f0;
	--border-strong: #cbd5e1;
	--border-faint: #f1f5f9;
	--row-border: #f3f4f6;
	--plan-cta-secondary-bg: var(--bg-muted);
	--plan-cta-secondary-hover: var(--bg-subtle);
	--plan-cta-secondary-text: var(--text-body);
	--green: #16a34a;
	--green-dark: #15803d;
	--green-darker: #166534;
	--green-light: #dcfce7;
	--green-border: #bbf7d0;
	--green-text: #166534;
	--green-bright: #4ade80;
	--green-soft: #86efac;
	--red: #dc2626;
	--red-dark: #b91c1c;
	--red-bright: #ef4444;
	--red-light: #fef2f2;
	--red-border: #fca5a5;
	--amber: #d97706;
	--amber-dark: #b45309;
	--amber-light: #fffbeb;
	--amber-border: #fde68a;
	--amber-text: #92400e;
	--amber-soft: #fcd34d;
	--amber-deep: #78350f;
	--purple: #7c3aed;
	--purple-dark: #6d28d9;
	--purple-light: #f5f3ff;
	--purple-soft: #c4b5fd;
	--purple-pale: #ddd6fe;
	--teal: #059669;
	--teal-light: #ecfdf5;
	--cyan: #0891b2;
	--yellow: #fbbf24;
	--star: #f59e0b;
	--slate: #475569;
	--slate-light: #f1f5f9;
	--footer-bg: #111827;
	--footer-text: #9ca3af;
	--footer-heading: #6b7280;
	--footer-link: #e5e7eb;
	--footer-accent: #818cf8;
	--footer-muted: #4b5563;
	--shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
	--shadow-md: 0 8px 30px rgba(15, 23, 42, .1);
	--shadow-lg: 0 20px 60px rgba(15, 23, 42, .12);
	--shadow-nav: 0 2px 20px rgba(0, 0, 0, .08);
	--shadow-btn-blue: 0 4px 16px rgba(79, 70, 229, .35);
	--shadow-btn-white: 0 8px 24px rgba(0, 0, 0, .2);
	--shadow-card: 0 8px 30px rgba(0, 0, 0, .08);
	--shadow-card-featured: 0 12px 40px rgba(79, 70, 229, .12);
	--shadow-sol-hover: 0 12px 40px rgba(79, 70, 229, .1);
	--shadow-compare: 0 8px 30px rgba(79, 70, 229, .1);
	--shadow-auth: 0 4px 24px rgba(0, 0, 0, .06);
	--shadow-cookie: 0 -4px 20px rgba(0, 0, 0, .07);
	--shadow-nav-mobile: 0 12px 30px rgba(0, 0, 0, .08);
	--shadow-kb: 0 8px 30px rgba(0, 0, 0, .2);
	--shadow-back-top: 0 4px 16px rgba(0, 0, 0, .1);
	--hero-bg: var(--surface);
	--hero-accent: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);
	--hero-blue-bg: linear-gradient(135deg, #1e3a5f 0%, #1e40af 50%, #2563eb 100%);
	--hero-blue-badge-bg: rgba(34, 197, 94, .15);
	--hero-blue-badge-border: rgba(34, 197, 94, .3);
	--hero-purple-bg: linear-gradient(135deg, #2e1065 0%, #4c1d95 50%, #5b21b6 100%);
	--hero-purple-badge-bg: rgba(167, 139, 250, .2);
	--hero-purple-badge-border: rgba(167, 139, 250, .4);
	--hero-dark-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f172a 100%);
	--hero-dark-badge-bg: rgba(251, 191, 36, .1);
	--hero-dark-badge-border: rgba(251, 191, 36, .3);
	--hero-emerald-bg: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
	--hero-emerald-badge-bg: rgba(52, 211, 153, .15);
	--hero-emerald-badge-border: rgba(52, 211, 153, .3);
	--hero-emerald-text: #a7f3d0;
	--hero-forest-bg: linear-gradient(135deg, #1a4731 0%, #166534 50%, #15803d 100%);
	--hero-forest-badge-bg: rgba(255, 255, 255, .12);
	--hero-forest-badge-border: rgba(255, 255, 255, .2);
	--hero-forest-text: #bbf7d0;
	--kb-hero-bg: linear-gradient(135deg, #1e3a8a, #1d4ed8);
	--kb-tag-bg: rgba(255, 255, 255, .15);
	--kb-tag-border: rgba(255, 255, 255, .25);
	--promo-bg: linear-gradient(90deg, var(--blue), var(--indigo-mid));
	--promo-link: var(--blue-muted);
	--nav-link: #374151;
	--dropdown-bg: var(--surface);
	--input-bg: var(--surface);
	--legal-text: #4b5563;
	--error-code: #e5e7eb;
	--hw-dot-red: #ff5f57;
	--hw-dot-yellow: #ffbd2e;
	--hw-dot-green: #28c840;
	--av-indigo: #4f46e5;
	--av-green: #16a34a;
	--av-amber: #d97706;
	--av-red: #dc2626;
	--av-cyan: #0891b2;
	--white-90: rgba(255, 255, 255, .9);
	--white-70: rgba(255, 255, 255, .7);
	--white-60: rgba(255, 255, 255, .6);
	--white-40: rgba(255, 255, 255, .4);
	--white-25: rgba(255, 255, 255, .25);
	--white-15: rgba(255, 255, 255, .15);
	--white-10: rgba(255, 255, 255, .1);
	--white-08: rgba(255, 255, 255, .08);
	--white-06: rgba(255, 255, 255, .06);
	--white-04: rgba(255, 255, 255, .04);
	--blue-muted-70: rgba(199, 210, 254, .7);
	--footer-divider: rgba(255, 255, 255, .08);
	--footer-divider-top: rgba(255, 255, 255, .06);
	--footer-icon-bg: rgba(255, 255, 255, .07);
	--footer-icon-border: rgba(255, 255, 255, .1);
	--emerald-badge-bg: rgba(52, 211, 153, .2);
}

[data-theme="dark"] {
	--bg: #0b1120;
	--bg-subtle: #111827;
	--bg-muted: #0f172a;
	--bg-alt: #0f172a;
	--surface: #151e2e;
	--surface-hover: #1e293b;
	--surface-raised: #1e293b;
	--topbar-bg: #0f172a;
	--text: #f1f5f9;
	--text-heading: #e2e8f0;
	--text-body: #e2e8f0;
	--text2: #94a3b8;
	--text3: #64748b;
	--border: #2d3a4f;
	--border-strong: #3d4f66;
	--border-faint: #1e293b;
	--row-border: #1e293b;
	--plan-cta-secondary-bg: var(--surface-raised);
	--plan-cta-secondary-hover: var(--surface-hover);
	--plan-cta-secondary-text: var(--text);
	--blue: #818cf8;
	--blue-dark: #6366f1;
	--blue-light: #1e2a5e;
	--blue-text: #c7d2fe;
	--blue-muted: #a5b4fc;
	--green-light: #14532d;
	--green-border: #166534;
	--green-text: #86efac;
	--red-light: #450a0a;
	--red-border: #991b1b;
	--amber-light: #451a03;
	--amber-border: #78350f;
	--amber-text: #fcd34d;
	--purple-light: #2e1065;
	--purple-soft: #a78bfa;
	--teal-light: #064e3b;
	--slate-light: #1e293b;
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
	--shadow-md: 0 8px 30px rgba(0, 0, 0, .4);
	--shadow-lg: 0 20px 60px rgba(0, 0, 0, .45);
	--shadow-nav: 0 2px 20px rgba(0, 0, 0, .35);
	--shadow-card: 0 8px 30px rgba(0, 0, 0, .35);
	--shadow-auth: 0 4px 24px rgba(0, 0, 0, .35);
	--hero-bg: #111827;
	--hero-accent: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
	--promo-bg: linear-gradient(90deg, #3730a3, #4f46e5);
	--nav-link: #cbd5e1;
	--dropdown-bg: var(--surface);
	--input-bg: var(--surface);
	--legal-text: #cbd5e1;
	--error-code: #334155;
	color-scheme: dark;
}

.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad)
}

.promo {
	background: var(--promo-bg);
	text-align: center;
	padding: 10px 40px;
	font-size: 13.5px;
	color: var(--on-primary);
	position: relative;
	font-weight: 500
}

.promo a {
	color: var(--promo-link);
	text-decoration: underline;
	margin-left: 6px
}

.promo-close {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--white-70);
	cursor: pointer;
	font-size: 15px;
	padding: 4px 8px
}

.topbar {
	background: var(--topbar-bg);
	border-bottom: var(--border-width-thin) solid var(--border);
	padding: 6px 0;
	font-size: 13px;
	color: var(--text2)
}

.topbar .container {
	display: flex;
	align-items: center;
	gap: 20px
}

.topbar a {
	color: var(--text2);
	display: flex;
	align-items: center;
	gap: 5px;
	transition: color .2s
}

.topbar a:hover {
	color: var(--blue)
}

.topbar .ml {
	margin-left: auto
}

.nav {
	background: var(--surface);
	border-bottom: var(--border-width-thin) solid var(--border);
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: box-shadow .3s
}

.nav.scrolled {
	box-shadow: var(--shadow-nav)
}

.nav .container {
	display: flex;
	align-items: center;
	height: var(--nav-height);
	gap: var(--space-1)
}

.nav-bar {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--space-1)
}

.nav-right-desktop {
	display: flex;
	align-items: center;
	gap: 8px
}

.nav-drawer-head,
.nav-drawer-actions {
	display: none
}

.nav-link-mobile-only {
	display: none
}

.nav-drawer-scroll {
	display: flex;
	align-items: center;
	flex: 1
}

button.nav-link-btn {
	background: none;
	border: none;
	font-family: inherit;
	cursor: pointer
}

.nav-overlay {
	display: none
}

.nav-mobile-toggle {
	display: none;
	background: transparent;
	border: none;
	font-size: 20px;
	color: var(--text);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0
}

.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 21px;
	font-weight: 800;
	color: var(--text);
	margin-right: 20px;
	letter-spacing: -.02em
}

.logo-icon {
	width: 36px;
	height: 36px;
	background: var(--blue);
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--on-primary);
	font-size: 16px
}

.logo span {
	color: var(--blue)
}

.nav-links {
	display: flex;
	align-items: center;
	flex: 1
}

.nav-item {
	position: relative
}

.nav-link {
	padding: 8px 14px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--nav-link);
	border-radius: var(--radius-sm);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: all .15s;
	white-space: nowrap;
	user-select: none
}

.nav-link:hover {
	color: var(--blue);
	background: var(--blue-light)
}

.nav-link i.arr {
	font-size: 10px;
	transition: transform .2s
}

.nav-item:hover .arr {
	transform: rotate(180deg)
}

.dropdown {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	background: var(--dropdown-bg);
	border: var(--border-width-thin) solid var(--border);
	border-radius: var(--radius);
	padding: 10px;
	min-width: 340px;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all .18s;
	z-index: 999
}

.nav-item:hover .dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0)
}

.mega {
	min-width: 460px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px
}

.drop-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--text3);
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 6px 10px 2px;
	grid-column: 1/-1
}

.drop-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	color: var(--text-body);
	font-size: 13.5px;
	font-weight: 500;
	transition: all .15s
}

.drop-item:hover {
	background: var(--purple-light);
	color: var(--blue)
}

.drop-item .di {
	width: 30px;
	height: 30px;
	border-radius: 7px;
	background: var(--blue-light);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex-shrink: 0
}

.drop-item .dt {
	display: flex;
	flex-direction: column
}

.drop-item .dt strong {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-heading)
}

.drop-item .dt span {
	font-size: 11.5px;
	color: var(--text3);
	margin-top: 1px
}

.drop-item:hover .dt strong {
	color: var(--blue)
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 20px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: all .2s;
	border: none;
	font-family: inherit;
	white-space: nowrap
}

.btn-outline {
	background: var(--surface);
	color: var(--blue);
	border: var(--border-width-thin) solid var(--blue)
}

.btn-outline:hover {
	background: var(--blue-light)
}

.btn-solid {
	background: var(--blue);
	color: var(--on-primary)
}

.btn-solid:hover {
	background: var(--blue-dark);
	transform: translateY(-1px);
	box-shadow: var(--shadow-btn-blue)
}

.btn-green {
	background: var(--green);
	color: var(--on-primary)
}

.btn-green:hover {
	background: var(--green-dark);
	transform: translateY(-1px)
}

.btn-white {
	background: var(--surface);
	color: var(--blue);
	font-weight: 800
}

.btn-white:hover {
	background: var(--blue-light);
	transform: translateY(-1px);
	box-shadow: var(--shadow-btn-white)
}

.btn-ow {
	background: transparent;
	color: var(--on-primary);
	border: var(--border-width-thick) solid var(--white-40);
	font-weight: 700
}

.btn-danger {
	background: var(--red);
	color: var(--on-primary)
}

.btn-danger:hover {
	background: var(--red-dark)
}

.btn-lg {
	padding: 12px 26px;
	font-size: 15px
}

.btn-sm {
	padding: 7px 16px;
	font-size: 13px
}

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

.btn-ow:hover {
	background: var(--white-10)
}

.hero {
	padding: var(--space-15) 0 var(--section-pad);
	background: var(--hero-bg);
	position: relative;
	overflow: hidden
}

.hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--border)
}

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

.hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center
}

.hero-grid-single {
	grid-template-columns: 1fr;
	max-width: 720px
}

.hero-no-visual .hero-sub {
	max-width: 560px
}

@keyframes blink {

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: .4
	}
}

@keyframes floatY {

	0%,
	100% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-8px)
	}
}

.hero h1 {
	font-size: 48px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.03em;
	color: var(--text);
	margin-bottom: 18px
}

.hero h1 em {
	color: var(--blue);
	font-style: normal
}

.hero-sub {
	font-size: 17px;
	color: var(--text2);
	line-height: 1.72;
	margin-bottom: 28px;
	max-width: 500px
}

.hero-checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin-bottom: 32px
}

.hc {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--text-body);
	font-weight: 500
}

.hc i {
	color: var(--green);
	font-size: 13px;
	flex-shrink: 0
}

.hc.white {
	color: var(--white-90)
}

.hc.white i {
	color: var(--green-bright)
}

.hc .gold {
	color: var(--amber);
	font-weight: 700
}

.hero-btns {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 22px
}

.hero-trust {
	display: flex;
	gap: 20px;
	font-size: 13px;
	color: var(--text2);
	flex-wrap: wrap
}

.ht {
	display: flex;
	align-items: center;
	gap: 5px
}

.hero-visual {
	position: relative;
	display: flex;
	justify-content: center
}

.hero-bg {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: var(--hero-accent);
	clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
	z-index: 0
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--green-light);
	border: var(--border-width-thin) solid var(--green-border);
	color: var(--green);
	border-radius: var(--radius-pill);
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 22px
}

.live-dot {
	width: 7px;
	height: 7px;
	background: var(--green);
	border-radius: 50%;
	animation: blink 2s infinite;
	flex-shrink: 0
}

.hw-browser {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: 14px;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	width: 100%;
	max-width: 440px;
	animation: floatY 6s ease-in-out infinite
}

.hw-bar {
	background: var(--bg-muted);
	border-bottom: var(--border-width-thin) solid var(--border);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 8px
}

.hw-dots span:nth-child(1) {
	background: var(--hw-dot-red)
}

.hw-dots span:nth-child(2) {
	background: var(--hw-dot-yellow)
}

.hw-dots span:nth-child(3) {
	background: var(--hw-dot-green)
}

.hw-url {
	flex: 1;
	background: var(--surface);
	border: var(--border-width-thin) solid var(--border);
	border-radius: var(--radius-xs);
	padding: 4px 10px;
	font-size: 11.5px;
	color: var(--text3);
	font-family: monospace;
	margin: 0 8px
}

.ds {
	background: var(--bg-muted);
	border: var(--border-width-thin) solid var(--border-faint);
	border-radius: var(--radius-sm);
	padding: 10px
}

.ds-l {
	font-size: 10.5px;
	color: var(--text3);
	margin-bottom: 3px
}

.ds-v.g {
	color: var(--green)
}

.dash-services {
	background: var(--bg-muted);
	border: var(--border-width-thin) solid var(--border-faint);
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-bottom: 10px
}

.ds-head {
	display: flex;
	justify-content: space-between;
	padding: 8px 10px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--text3);
	letter-spacing: .05em;
	text-transform: uppercase;
	border-bottom: var(--border-width-thin) solid var(--border-faint)
}

.ds-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 10px;
	border-bottom: var(--border-width-thin) solid var(--border-faint);
	font-size: 11.5px
}

.b-active {
	background: var(--green-light);
	color: var(--green)
}

.b-susp {
	background: var(--amber-light);
	color: var(--amber)
}

.dash-uptime {
	background: linear-gradient(135deg, var(--blue), var(--indigo-mid));
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.du-left .du-val {
	font-size: 20px;
	font-weight: 800;
	color: var(--on-primary)
}

.float-c {
	position: absolute;
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	box-shadow: var(--shadow-md);
	font-size: 12px
}

.fc-l {
	font-size: 11px;
	color: var(--text3);
	margin-bottom: 3px;
	display: flex;
	align-items: center;
	gap: 4px
}

.fc-s {
	font-size: 11px;
	color: var(--green);
	font-weight: 600;
	margin-left: 4px
}

.sol-card {
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 28px 22px;
	transition: all .22s;
	background: var(--surface)
}

.sc-i-purple {
	background: var(--purple-light);
	color: var(--purple)
}

.sc-i-green {
	background: var(--green-light);
	color: var(--green)
}

.sc-i-amber {
	background: var(--amber-light);
	color: var(--amber)
}

.sc-i-red {
	background: var(--red-light);
	color: var(--red)
}

.sc-i-teal {
	background: var(--teal-light);
	color: var(--teal)
}

.sc-i-dark {
	background: var(--slate-light);
	color: var(--slate)
}

.company {
	padding: var(--section-pad) 0;
	background: var(--bg-muted);
	border-top: var(--border-width-thin) solid var(--border);
	border-bottom: var(--border-width-thin) solid var(--border)
}

.sbx {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 22px 20px
}

.sbx .sl2 {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text-body)
}

.feat-box:hover {
	background: var(--bg-muted)
}

.cta-box {
	background: linear-gradient(135deg, var(--indigo), var(--blue) 50%, var(--indigo-mid));
	border-radius: var(--radius-xl);
	padding: 52px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	position: relative;
	overflow: hidden
}

.cta-text h2 {
	font-size: 26px;
	font-weight: 800;
	color: var(--on-primary);
	margin-bottom: 8px
}

.cta-text p {
	color: var(--blue-muted);
	font-size: 15px
}

.cta-text small {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	color: var(--blue-muted-70)
}

.hw-dots {
	display: flex;
	gap: 5px
}

.hw-dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%
}

.hw-body {
	padding: 16px
}

.dash-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px
}

.dh-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--text)
}

.dh-user {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text2)
}

.dh-avatar {
	width: 24px;
	height: 24px;
	background: var(--blue);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--on-primary);
	font-size: 10px;
	font-weight: 700
}

.dash-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 10px
}

.ds-v {
	font-size: 17px;
	font-weight: 800;
	color: var(--text)
}

.ds-v.b {
	color: var(--blue)
}

.ds-row:last-child {
	border: none
}

.ds-domain {
	color: var(--text);
	font-family: monospace;
	font-size: 11px
}

.badge {
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	font-size: 10px;
	font-weight: 700
}

.du-left .du-label {
	font-size: 10.5px;
	color: var(--white-70);
	margin-bottom: 2px
}

.du-right {
	font-size: 10px;
	color: var(--white-70);
	text-align: right
}

.du-bars {
	display: flex;
	gap: 2px;
	margin-top: 4px;
	justify-content: flex-end
}

.du-bar {
	width: 6px;
	height: 20px;
	border-radius: 2px;
	background: var(--white-25)
}

.du-bar.up {
	background: var(--white-90)
}

.fc1 {
	top: -14px;
	right: -20px;
	animation: floatY 5s ease-in-out .5s infinite
}

.fc2 {
	bottom: 30px;
	left: -24px;
	animation: floatY 5s ease-in-out 1s infinite
}

.fc-v {
	font-size: 18px;
	font-weight: 800;
	color: var(--text)
}

.sh {
	text-align: center;
	margin-bottom: 48px
}

.sh .sl,
.section-label {
	display: inline-block;
	background: var(--blue-light);
	color: var(--blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: 12px
}

.sh h2,
.section-title {
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--text);
	margin-bottom: 10px
}

.sh p,
.section-sub {
	font-size: 16px;
	color: var(--text2);
	max-width: 520px;
	margin: 0 auto
}

.solutions {
	padding: var(--section-pad) 0
}

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

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

.sc-i {
	width: 46px;
	height: 46px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 16px
}

.sc-i-blue {
	background: var(--blue-light);
	color: var(--blue)
}

.sol-card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 6px
}

.sol-card p {
	font-size: 13.5px;
	color: var(--text2);
	line-height: 1.55;
	margin-bottom: 16px
}

.sc-sep {
	border: none;
	border-top: var(--border-width-thin) solid var(--border);
	margin: 0 0 14px
}

.sc-from {
	font-size: 12px;
	color: var(--text3);
	margin-bottom: 2px
}

.sc-price {
	font-size: 26px;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -.02em
}

.sc-price span {
	font-size: 13px;
	font-weight: 400;
	color: var(--text3)
}

.sc-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--blue);
	transition: gap .2s
}

.sc-link:hover {
	gap: 9px
}

.company-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.sbx-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px
}

.sbx .sn {
	font-size: 34px;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -.03em;
	margin-bottom: 4px
}

.sbx .ss {
	font-size: 12px;
	color: var(--text3);
	margin-top: 2px
}

.cc .up {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 10px
}

.cc h2 {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--text);
	margin-bottom: 16px;
	line-height: 1.25
}

.cc p {
	font-size: 15px;
	color: var(--text2);
	line-height: 1.78;
	margin-bottom: 14px
}

.features {
	padding: var(--section-pad) 0
}

.feat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-top: 48px
}

.feat-box {
	padding: 30px 26px;
	border-right: var(--border-width-thin) solid var(--border);
	border-bottom: var(--border-width-thin) solid var(--border);
	transition: background .2s
}

.feat-box:nth-child(3n) {
	border-right: none
}

.feat-box:nth-child(4),
.feat-box:nth-child(5),
.feat-box:nth-child(6) {
	border-bottom: none
}

.feat-box .fi {
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	margin-bottom: 14px
}

.feat-box h4 {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 7px
}

.feat-box p {
	font-size: 13.5px;
	color: var(--text2);
	line-height: 1.65
}

.cta {
	padding: var(--section-pad-sm) 0
}

.cta-box::before {
	content: '';
	position: absolute;
	right: -60px;
	top: -60px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: var(--white-06)
}

.cta-box::after {
	content: '';
	position: absolute;
	left: -40px;
	bottom: -40px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: var(--white-04)
}

.cta-text {
	position: relative
}

.cta-acts {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
	position: relative
}

.page-hero {
	padding: var(--section-pad-md) 0;
	position: relative;
	overflow: hidden
}

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

.page-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center
}

.page-hero h1 {
	font-size: 44px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--on-primary);
	margin-bottom: 16px
}

.page-hero h1 em {
	font-style: normal
}

.page-hero p {
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: 28px
}

.page-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: var(--radius-pill);
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 20px
}

.hero-blue {
	background: var(--hero-blue-bg)
}

.hero-blue .page-hero-badge {
	background: var(--hero-blue-badge-bg);
	border: var(--border-width-thin) solid var(--hero-blue-badge-border);
	color: var(--green-bright)
}

.hero-blue h1 em {
	color: var(--blue-sky)
}

.hero-blue p {
	color: var(--blue-hero-text)
}

.hero-purple {
	background: var(--hero-purple-bg)
}

.hero-purple .page-hero-badge {
	background: var(--hero-purple-badge-bg);
	border: var(--border-width-thin) solid var(--hero-purple-badge-border);
	color: var(--purple-soft)
}

.hero-purple h1 em {
	color: var(--purple-soft)
}

.hero-purple p {
	color: var(--purple-pale)
}

.hero-dark {
	background: var(--hero-dark-bg)
}

.hero-dark .page-hero-badge {
	background: var(--hero-dark-badge-bg);
	border: var(--border-width-thin) solid var(--hero-dark-badge-border);
	color: var(--yellow)
}

.hero-dark h1 em {
	color: var(--yellow)
}

.hero-dark p {
	color: var(--text2)
}

.hero-emerald {
	background: var(--hero-emerald-bg)
}

.hero-emerald .page-hero-badge {
	background: var(--hero-emerald-badge-bg);
	border: var(--border-width-thin) solid var(--hero-emerald-badge-border);
	color: var(--green-soft)
}

.hero-emerald h1 em {
	color: var(--green-soft)
}

.hero-emerald p {
	color: var(--hero-emerald-text)
}

.hero-forest {
	background: var(--hero-forest-bg)
}

.hero-forest .page-hero-badge {
	background: var(--hero-forest-badge-bg);
	border: var(--border-width-thin) solid var(--hero-forest-badge-border);
	color: var(--on-primary)
}

.hero-forest h1 em {
	color: var(--green-soft)
}

.hero-forest p {
	color: var(--hero-forest-text)
}

.hero-panel {
	background: var(--white-08);
	border: var(--border-width-thin) solid var(--white-15);
	border-radius: var(--radius-xl);
	padding: var(--space-7)
}

.hero-panel-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--white-60);
	margin-bottom: var(--space-4)
}

.hero-why-item {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
	align-items: flex-start
}

.hero-why-icon {
	width: 36px;
	height: 36px;
	background: var(--white-10);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--blue-sky);
	flex-shrink: 0;
	font-size: 14px
}

.hero-why-title {
	font-weight: 700;
	color: var(--on-primary);
	font-size: 14px;
	margin-bottom: 2px
}

.hero-why-desc {
	font-size: 13px;
	color: var(--blue-pale)
}

.hero-stats-bar {
	background: var(--bg);
	border-bottom: var(--border-width-thin) solid var(--border);
	padding: 20px 0
}

.hero-stats-bar .container {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 16px
}

.hero-stat-item {
	text-align: center
}

.hero-stat-val {
	font-size: 22px;
	font-weight: 800;
	color: var(--text)
}

.hero-stat-lbl {
	font-size: 12px;
	color: var(--text3);
	font-weight: 600;
	margin-top: 2px
}

.plans-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px
}

.plan-card {
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: var(--space-8);
	background: var(--surface);
	position: relative;
	transition: all .2s
}

.plan-card:hover {
	box-shadow: var(--shadow-card)
}

.plan-card.featured {
	box-shadow: var(--shadow-card-featured)
}

.plan-card.featured-blue {
	border-color: var(--blue)
}

.plan-card.featured-purple {
	border-color: var(--purple)
}

.plan-card.featured-green {
	border-color: var(--green)
}

.plan-card.featured-amber {
	border-color: var(--amber)
}

.plan-featured-badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--on-primary);
	font-size: 11px;
	font-weight: 700;
	padding: 3px 14px;
	border-radius: var(--radius-pill);
	white-space: nowrap
}

.plan-featured-badge.blue {
	background: var(--blue)
}

.plan-featured-badge.purple {
	background: var(--purple)
}

.plan-featured-badge.green {
	background: var(--green)
}

.plan-featured-badge.amber {
	background: var(--amber)
}

.plan-name {
	font-size: 20px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 4px
}

.plan-tagline {
	font-size: 13px;
	color: var(--text3);
	margin-bottom: 20px
}

.plan-price-row {
	margin-bottom: 6px
}

.plan-price-amount {
	font-size: 38px;
	font-weight: 800;
	color: var(--text)
}

.plan-price-unit {
	font-size: 16px;
	color: var(--text2)
}

.plan-billing-note {
	font-size: 12px;
	color: var(--text3);
	margin-bottom: 20px
}

.plan-billing-note s {
	color: var(--text3)
}

.plan-cycle-wrap {
	margin-bottom: 14px
}

.plan-cycle-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--text3);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 6px
}

.plan-cycle-select {
	width: 100%;
	font-size: 13px;
	padding: 8px 10px
}

.plan-cta {
	display: block;
	text-align: center;
	border-radius: var(--radius-sm);
	padding: 12px;
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 20px;
	transition: all .2s;
	cursor: pointer;
	border: none;
	font-family: inherit;
	width: 100%;
	text-decoration: none
}

.plan-cta-primary {
	background: var(--blue);
	color: var(--on-primary)
}

.plan-cta-primary:hover {
	background: var(--blue-dark)
}

.plan-cta-primary.purple {
	background: var(--purple)
}

.plan-cta-primary.purple:hover {
	background: var(--purple-dark)
}

.plan-cta-primary.green {
	background: var(--green)
}

.plan-cta-primary.green:hover {
	background: var(--green-dark)
}

.plan-cta-primary.amber {
	background: var(--amber)
}

.plan-cta-primary.amber:hover {
	background: var(--amber-dark)
}

.plan-cta-secondary {
	background: var(--plan-cta-secondary-bg);
	color: var(--plan-cta-secondary-text);
	border: var(--border-width) solid var(--border)
}

.plan-cta-secondary:hover {
	background: var(--plan-cta-secondary-hover)
}

.plan-divider {
	border: none;
	border-top: var(--border-width-thin) solid var(--border);
	margin: 0 0 var(--space-4)
}

.plan-feature {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 5px 0;
	font-size: 13.5px;
	color: var(--text-body)
}

.plan-feature i {
	color: var(--green);
	font-size: 12px;
	flex-shrink: 0
}

.plan-note {
	text-align: center;
	margin-top: var(--space-6);
	font-size: 14px;
	color: var(--text3)
}

.plan-note strong {
	color: var(--text-body)
}

.plan-note a {
	color: var(--blue);
	font-weight: 700
}

.feat-section {
	padding: var(--section-pad) 0;
	border-top: var(--border-width-thin) solid var(--border)
}

.feat-section.bg-gray {
	background: var(--bg)
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 40px
}

.info-grid.cols-3 {
	grid-template-columns: repeat(3, 1fr)
}

.info-grid.cols-2 {
	grid-template-columns: repeat(2, 1fr)
}

.info-card {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 24px
}

.info-card-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-bottom: 14px
}

.info-card h4 {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 7px;
	color: var(--text)
}

.info-card p {
	font-size: 13.5px;
	color: var(--text2);
	line-height: 1.6
}

.compare-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 800px;
	margin: 40px auto 0
}

.compare-card {
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 28px;
	background: var(--surface)
}

.compare-card.highlighted {
	border-color: var(--blue);
	box-shadow: var(--shadow-compare)
}

.compare-card-title {
	font-size: 18px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px
}

.compare-card p {
	font-size: 14px;
	color: var(--text2);
	margin-bottom: 16px
}

.compare-item {
	display: flex;
	gap: 8px;
	padding: 5px 0;
	font-size: 14px;
	color: var(--text-body)
}

.compare-item i {
	margin-top: 3px;
	flex-shrink: 0
}

.about-hero {
	background: var(--bg);
	border-bottom: var(--border-width-thin) solid var(--border);
	padding: var(--section-pad-sm) 0;
	text-align: center
}

.timeline {
	max-width: 700px;
	margin: 50px auto 0;
	position: relative
}

.timeline::before {
	content: '';
	position: absolute;
	left: 20px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--border)
}

.timeline-item {
	display: flex;
	gap: 20px;
	margin-bottom: 28px;
	position: relative
}

.timeline-dot {
	width: 42px;
	height: 42px;
	background: var(--blue);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--on-primary);
	font-size: 10px;
	font-weight: 800;
	flex-shrink: 0;
	position: relative;
	z-index: 1
}

.timeline-body {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	flex: 1
}

.timeline-title {
	font-weight: 700;
	color: var(--text);
	margin-bottom: 4px
}

.timeline-desc {
	font-size: 13.5px;
	color: var(--text2)
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px
}

.team-card {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	text-align: center
}

.team-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--on-primary);
	font-size: 20px;
	font-weight: 800;
	margin: 0 auto 14px
}

.team-name {
	font-size: 16px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 3px
}

.team-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--blue);
	margin-bottom: 10px
}

.team-bio {
	font-size: 13px;
	color: var(--text2);
	line-height: 1.65
}

.contact-grid,
.grid-contact {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 60px;
	align-items: start
}

.contact-form-card {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 36px
}

.contact-form-card h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 24px
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px
}

.form-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-body)
}

.form-label span {
	color: var(--red-bright)
}

.form-input,
.form-select,
.form-textarea {
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-sm);
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	color: var(--text);
	transition: border-color .2s;
	background: var(--surface);
	width: 100%
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	border-color: var(--blue)
}

.form-textarea {
	resize: vertical;
	min-height: 140px
}

.form-note {
	font-size: 12.5px;
	color: var(--text3);
	text-align: center;
	margin-top: 12px
}

.form-success {
	background: var(--green-light);
	border: var(--border-width) solid var(--green-border);
	border-radius: var(--radius);
	padding: 40px;
	text-align: center
}

.form-success-icon {
	width: 60px;
	height: 60px;
	background: var(--green);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px
}

.form-success h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 8px
}

.form-success p {
	color: var(--text2);
	font-size: 15px
}

.contact-methods {
	display: flex;
	flex-direction: column;
	gap: 14px
}

.contact-method {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	display: flex;
	gap: 14px;
	align-items: flex-start
}

.contact-method-icon {
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	flex-shrink: 0
}

.contact-method-title {
	font-weight: 700;
	color: var(--text);
	margin-bottom: 2px
}

.contact-method-val {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px
}

.contact-color-indigo {
	color: var(--av-indigo)
}

.contact-color-green {
	color: var(--av-green)
}

.contact-color-amber {
	color: var(--av-amber)
}

.contact-method-note {
	font-size: 13px;
	color: var(--text3)
}

.contact-map {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	overflow: hidden
}

.contact-map-footer {
	padding: 14px 16px;
	border-top: var(--border-width-thin) solid var(--border)
}

.contact-map-footer-title {
	font-weight: 700;
	color: var(--text);
	font-size: 13.5px;
	margin-bottom: 3px
}

.contact-map-footer-addr {
	font-size: 13px;
	color: var(--text2)
}

.faq-item {
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-md);
	margin-bottom: 10px;
	overflow: hidden
}

.faq-btn {
	width: 100%;
	text-align: left;
	padding: 16px 20px;
	background: var(--surface);
	border: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.faq-btn:hover {
	background: var(--bg)
}

.faq-icon {
	font-size: 12px;
	color: var(--text3);
	transition: transform .2s;
	flex-shrink: 0
}

.faq-icon.rotated {
	transform: rotate(180deg)
}

.faq-body {
	display: none;
	padding: 0 20px 16px;
	font-size: 14.5px;
	color: var(--text2);
	line-height: 1.7;
	background: var(--surface)
}

.faq-body.open {
	display: block
}

.kb-hero {
	background: var(--kb-hero-bg);
	padding: var(--section-pad-sm) 0;
	text-align: center
}

.kb-hero h1 {
	font-size: 40px;
	font-weight: 800;
	color: var(--on-primary);
	letter-spacing: -.03em;
	margin-bottom: 12px
}

.kb-hero p {
	color: var(--blue-hero-text);
	font-size: 16px;
	margin-bottom: 28px
}

.kb-search-bar {
	display: flex;
	background: var(--surface);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-kb);
	max-width: 600px;
	margin: 0 auto
}

.kb-search-bar input {
	flex: 1;
	border: none;
	padding: 14px 20px;
	font-size: 15px;
	font-family: inherit;
	outline: none;
	color: var(--text)
}

.kb-search-bar button {
	background: var(--blue);
	border: none;
	color: var(--on-primary);
	padding: 0 24px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer
}

.kb-tags {
	margin-top: 14px;
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap
}

.kb-tag {
	background: var(--kb-tag-bg);
	border: var(--border-width-thin) solid var(--kb-tag-border);
	color: var(--on-primary);
	border-radius: var(--radius-pill);
	padding: var(--space-1) var(--space-3);
	font-size: 12.5px;
	cursor: pointer
}

.kb-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px
}

.kb-cat-card {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	display: block;
	transition: all .2s
}

.kb-cat-card:hover {
	border-color: var(--blue);
	transform: translateY(-2px)
}

.kb-cat-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px
}

.kb-cat-icon {
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0
}

.kb-cat-name {
	font-weight: 700;
	color: var(--text);
	font-size: 15px
}

.kb-cat-count {
	font-size: 12px;
	color: var(--text3)
}

.kb-art-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--text2);
	padding: 4px 0
}

.kb-art-item i {
	color: var(--border-strong);
	margin-top: 2px;
	font-size: 11px;
	flex-shrink: 0
}

.kb-cat-more {
	margin-top: 12px;
	font-size: 13px;
	color: var(--blue);
	font-weight: 600
}

.kb-cat-section {
	margin-bottom: 40px
}

.kb-cat-section:last-child {
	margin-bottom: 0
}

.kb-guide-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 16px
}

.kb-guide-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	text-decoration: none;
	transition: all .2s
}

.kb-guide-card:hover {
	border-color: var(--blue);
	transform: translateY(-2px)
}

.kb-guide-card-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.4
}

.kb-guide-card-desc {
	font-size: 13px;
	color: var(--text2);
	line-height: 1.6;
	margin: 0;
	flex: 1
}

.kb-guide-card-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--blue);
	margin-top: auto
}

.kb-subnav {
	background: var(--surface);
	border-bottom: var(--border-width-thin) solid var(--border)
}

.kb-subnav-inner {
	padding: 0
}

.kb-subnav-tabs {
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow-x: auto;
	scrollbar-width: none
}

.kb-subnav-tabs::-webkit-scrollbar {
	display: none
}

.kb-subnav-tab {
	display: inline-flex;
	align-items: center;
	padding: 14px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text2);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color .2s, border-color .2s
}

.kb-subnav-tab:hover {
	color: var(--blue)
}

.kb-subnav-tab.is-active {
	color: var(--blue);
	border-bottom-color: var(--blue)
}

.kb-category-bar {
	background: var(--bg);
	border-bottom: var(--border-width-thin) solid var(--border);
	padding: 16px 0
}

.kb-category-section {
	padding-top: 32px
}

.kb-category-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start
}

.kb-category-sidebar {
	position: sticky;
	top: 80px
}

.kb-category-sidebar-card {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 20px
}

.kb-category-sidebar-title {
	font-size: 15px;
	font-weight: 800;
	color: var(--blue);
	margin-bottom: 14px;
	line-height: 1.3
}

.kb-category-nav {
	display: flex;
	flex-direction: column;
	gap: 2px
}

.kb-category-nav-group {
	border-radius: var(--radius-sm)
}

.kb-category-nav-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
	list-style: none;
	border-radius: var(--radius-sm);
	transition: background .2s, color .2s
}

.kb-category-nav-summary::-webkit-details-marker {
	display: none
}

.kb-category-nav-summary::after {
	content: "\f054";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 10px;
	color: var(--text3);
	transition: transform .2s
}

.kb-category-nav-group[open] > .kb-category-nav-summary::after {
	transform: rotate(90deg)
}

.kb-category-nav-summary:hover {
	background: var(--bg);
	color: var(--blue)
}

.kb-category-nav-children {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 2px 0 6px 12px;
	border-left: var(--border-width-thick) solid var(--border);
	margin: 2px 0 4px 10px
}

.kb-category-nav-link {
	display: block;
	padding: 7px 10px;
	font-size: 13px;
	color: var(--text2);
	border-radius: var(--radius-sm);
	line-height: 1.4;
	transition: background .2s, color .2s
}

.kb-category-nav-link:hover,
.kb-category-nav-link.is-active {
	background: var(--blue-light);
	color: var(--blue)
}

.kb-category-nav-link.is-active {
	font-weight: 700
}

.kb-category-main {
	min-width: 0
}

.kb-category-main > .kb-article-body {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 32px
}

.kb-article-body svg {
	display: none !important
}

.kb-article-body .twemoji {
	display: none
}

.kb-article-body .fa-arrow-right {
	font-size: 12px;
	margin: 0 4px;
	color: var(--blue)
}

.kb-email-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 20px 0;
	max-width: 480px
}

.kb-email-form label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text2)
}

.kb-email-form input {
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit
}

.kb-article-hero--minimal h1 {
	font-size: 28px;
	font-weight: 800;
	color: var(--on-primary);
	margin-top: 8px
}

.kb-section-block:first-of-type {
	margin-top: 32px
}

.kb-group-block {
	margin-bottom: 28px
}

.kb-group-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 8px
}

.kb-group-list {
	border-top: var(--border-width-thin) solid var(--row-border)
}

.kb-article-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: var(--border-width-thin) solid var(--row-border);
	text-decoration: none;
	transition: padding-left .15s
}

.kb-article-row:hover {
	padding-left: 6px
}

.kb-article-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text)
}

.kb-article-cat {
	font-size: 12px;
	color: var(--text3)
}

.kb-article-meta {
	font-size: 12px;
	color: var(--text3);
	white-space: nowrap
}

.kb-cta {
	padding: var(--section-pad-sm) 0;
	background: var(--bg);
	border-top: var(--border-width-thin) solid var(--border);
	text-align: center
}

.kb-cta h2 {
	font-size: 26px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 8px
}

.kb-cta p {
	color: var(--text2);
	margin-bottom: 24px
}

.kb-breadcrumb {
	background: var(--bg);
	border-bottom: var(--border-width-thin) solid var(--border);
	padding: 16px 0;
	font-size: 13.5px;
	color: var(--text3)
}

.kb-breadcrumb a {
	color: var(--blue)
}

.kb-breadcrumb i {
	font-size: 10px
}

.kb-article-layout {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 48px;
	align-items: start
}

.kb-article-meta-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 16px
}

.kb-article-tag {
	background: var(--blue-light);
	color: var(--blue);
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var(--radius-pill)
}

.kb-article-h1 {
	font-size: 32px;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -.02em;
	margin-bottom: 24px;
	line-height: 1.2
}

.kb-info-box {
	background: var(--blue-light);
	border: var(--border-width-thin) solid var(--blue-muted);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	margin-bottom: 28px;
	font-size: 14px;
	color: var(--blue-text)
}

.kb-tip-box {
	background: var(--green-light);
	border: var(--border-width-thin) solid var(--green-border);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	margin-bottom: 20px
}

.kb-article-body {
	color: var(--text-body);
	font-size: 15px;
	line-height: 1.8
}

.kb-article-body h2 {
	font-size: 20px;
	font-weight: 800;
	color: var(--text);
	margin: 28px 0 12px
}

.kb-article-body h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	margin: 20px 0 10px
}

.kb-article-body p {
	margin-bottom: 16px
}

.kb-article-body ul,
.kb-article-body ol {
	margin: 0 0 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.kb-article-hero--minimal {
	padding-bottom: 0
}

.kb-article-hero--minimal + .kb-article-section {
	padding-top: 24px
}

.kb-article-body h1 {
	font-size: 28px;
	font-weight: 800;
	color: var(--text);
	margin: 0 0 20px;
	line-height: 1.3
}

.kb-article-body .admonition {
	border-left: 4px solid var(--blue);
	background: var(--bg);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	margin: 16px 0
}

.kb-article-body .admonition-title {
	font-weight: 700;
	margin-bottom: 6px
}

.kb-article-body .admonition.warning {
	border-left-color: #e6a700
}

.kb-article-body .highlight,
.kb-article-body pre {
	background: var(--bg);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	margin-bottom: 16px;
	overflow-x: auto;
	font-size: 13px;
	line-height: 1.6
}

.kb-article-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--bg);
	padding: 2px 6px;
	border-radius: 4px
}

.kb-article-body pre code {
	background: transparent;
	padding: 0
}

.kb-article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	font-size: 14px
}

.kb-article-body th,
.kb-article-body td {
	border: var(--border-width) solid var(--border);
	padding: 8px 12px;
	text-align: left
}

.kb-article-body th {
	background: var(--bg);
	font-weight: 700
}

.kb-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	margin: 12px 0
}

.kb-article-body li p {
	margin-bottom: 8px
}

.kb-code-block {
	background: var(--bg);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	margin-bottom: 16px;
	font-family: monospace;
	font-size: 13px;
	color: var(--text-body)
}

.kb-helpful {
	border-top: var(--border-width) solid var(--border);
	margin-top: 40px;
	padding-top: 28px
}

.kb-helpful-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-body);
	margin-bottom: 14px
}

.kb-helpful-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	color: var(--text-body);
	transition: all .2s;
	margin-right: 8px
}

.kb-helpful-btn:hover {
	border-color: var(--blue);
	color: var(--blue)
}

.kb-sidebar-card {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	margin-bottom: 16px
}

.kb-sidebar-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--text3);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 12px
}

.kb-sidebar-toc-link {
	display: block;
	padding: 6px 0 6px 10px;
	border-left: var(--border-width-thick) solid var(--border);
	font-size: 13px;
	color: var(--text2);
	margin-bottom: 4px;
	transition: all .2s
}

.kb-sidebar-toc-link:hover {
	border-color: var(--blue);
	color: var(--blue)
}

.kb-sidebar-art {
	display: block;
	padding: 8px 0;
	border-bottom: var(--border-width-thin) solid var(--row-border)
}

.kb-sidebar-art-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text)
}

.kb-sidebar-art-cat {
	font-size: 11.5px;
	color: var(--text3)
}

.kb-support-card {
	background: var(--blue-light);
	border: var(--border-width) solid var(--blue-muted);
	border-radius: var(--radius);
	padding: 20px;
	text-align: center
}

.kb-support-card i {
	font-size: 24px;
	color: var(--blue);
	margin-bottom: 10px;
	display: block
}

.kb-support-card-title {
	font-weight: 700;
	color: var(--text);
	margin-bottom: 6px
}

.kb-support-card p {
	font-size: 13px;
	color: var(--text2);
	margin-bottom: 14px
}


.legal-hero {
	background: var(--bg);
	border-bottom: var(--border-width-thin) solid var(--border);
	padding: 50px 0
}

.legal-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 48px;
	align-items: start;
	padding: var(--section-pad-sm) 0
}

.legal-toc {
	position: sticky;
	top: 80px;
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 20px
}

.legal-toc-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--text3);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 12px
}

.legal-toc-link {
	display: block;
	padding: 6px 0 6px 10px;
	border-left: var(--border-width-thick) solid var(--border);
	font-size: 13px;
	color: var(--text2);
	margin-bottom: 3px;
	transition: all .2s
}

.legal-toc-link:hover {
	border-color: var(--blue);
	color: var(--blue)
}

.legal-section {
	margin-bottom: 36px;
	padding-bottom: 36px;
	border-bottom: var(--border-width-thin) solid var(--row-border)
}

.legal-section h2 {
	font-size: 20px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 12px
}

.legal-section p {
	font-size: 15px;
	color: var(--legal-text);
	line-height: 1.8;
	margin-bottom: 12px
}

.legal-section ul {
	margin: 0 0 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 15px;
	color: var(--legal-text);
	line-height: 1.8
}

.sla-uptime-highlight {
	background: var(--green-light);
	border: var(--border-width) solid var(--green-border);
	border-radius: var(--radius-md);
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px
}

.sla-uptime-number {
	font-size: 48px;
	font-weight: 800;
	color: var(--green)
}

.sla-uptime-label {
	font-weight: 700;
	color: var(--green-dark);
	font-size: 15px
}

.sla-uptime-sub {
	font-size: 13.5px;
	color: var(--green-darker);
	margin-top: 3px
}

.sla-table {
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-top: 16px
}

.sla-table-head {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	background: var(--bg);
	padding: 12px 16px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text3);
	letter-spacing: .05em;
	text-transform: uppercase;
	border-bottom: var(--border-width-thin) solid var(--border)
}

.sla-table-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 13px 16px;
	font-size: 14px;
	border-bottom: var(--border-width-thin) solid var(--row-border)
}

.sla-table-row.good {
	background: var(--green-light);
	color: var(--green);
	font-weight: 600
}

.sla-table-row.warn {
	background: var(--amber-light);
	color: var(--amber)
}

.sla-table-row.bad {
	background: var(--red-light);
	color: var(--red)
}

.error-page {
	padding: 100px 0;
	text-align: center
}

.error-code {
	font-size: 120px;
	font-weight: 800;
	color: var(--footer-link);
	line-height: 1;
	margin-bottom: 8px
}

.error-title {
	font-size: 32px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 12px
}

.error-desc {
	font-size: 16px;
	color: var(--text2);
	max-width: 440px;
	margin: 0 auto 32px;
	line-height: 1.7
}

.error-btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 48px
}

.error-tip {
	font-size: 14px;
	color: var(--text3);
	margin-bottom: 16px
}

.error-suggestions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap
}

.error-suggestion-link {
	background: var(--bg);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-sm);
	padding: 8px 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-body);
	transition: all .2s
}

.error-suggestion-link:hover {
	border-color: var(--blue);
	color: var(--blue)
}

.auth-page {
	min-height: 100vh;
	background: var(--bg);
	display: flex;
	flex-direction: column
}

.auth-nav {
	background: var(--surface);
	border-bottom: var(--border-width-thin) solid var(--border);
	padding: 0 24px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.auth-nav-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -.02em
}

.auth-nav-logo span {
	color: var(--blue)
}

.auth-body {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px
}

.auth-card {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 40px;
	width: 100%;
	max-width: 440px;
	box-shadow: var(--shadow-auth)
}

.auth-card h1 {
	font-size: 26px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 6px;
	letter-spacing: -.02em
}

.auth-sub {
	font-size: 14.5px;
	color: var(--text2);
	margin-bottom: 28px
}

.auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	font-size: 13px;
	color: var(--text3)
}

.auth-divider::before,
.auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border)
}

.auth-footer {
	text-align: center;
	margin-top: 20px;
	font-size: 14px;
	color: var(--text2)
}

.auth-footer a {
	color: var(--blue);
	font-weight: 600
}

.auth-footer a:hover {
	text-decoration: underline
}

.auth-alert {
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	font-size: 13.5px;
	margin-bottom: 20px;
	display: flex;
	align-items: flex-start;
	gap: 8px
}

.auth-alert-error {
	background: var(--red-light);
	border: var(--border-width-thin) solid var(--red-border);
	color: var(--red)
}

.auth-alert-success {
	background: var(--green-light);
	border: var(--border-width-thin) solid var(--green-border);
	color: var(--green)
}

.auth-terms {
	font-size: 12.5px;
	color: var(--text3);
	text-align: center;
	margin-top: 16px;
	line-height: 1.6
}

.auth-terms a {
	color: var(--blue)
}

.input-group {
	position: relative
}

.input-group .form-input {
	padding-right: 44px
}

.input-icon {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text3);
	font-size: 14px;
	cursor: pointer
}

.password-strength {
	margin-top: 8px;
	height: 4px;
	border-radius: 2px;
	background: var(--border);
	overflow: hidden
}

.password-strength-bar {
	height: 100%;
	border-radius: 2px;
	transition: width .3s, background .3s;
	width: 0
}

.password-strength-bar.weak {
	background: var(--red-bright);
	width: 33%
}

.password-strength-bar.medium {
	background: var(--star);
	width: 66%
}

.password-strength-bar.strong {
	background: var(--green);
	width: 100%
}

.password-strength-label {
	font-size: 11.5px;
	color: var(--text3);
	margin-top: 4px
}

.form-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--text-body)
}

.form-check input[type=checkbox] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
	accent-color: var(--blue)
}

.footer {
	padding: var(--section-pad-sm) 0 0;
	background: var(--footer-bg)
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
	gap: var(--space-10);
	padding-bottom: var(--section-pad-xl);
	border-bottom: var(--border-width-thin) solid var(--footer-divider)
}

.fb-logo {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 19px;
	font-weight: 800;
	color: var(--on-primary);
	margin-bottom: 14px
}

.fb-logo .li {
	width: 30px;
	height: 30px;
	background: var(--blue);
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--on-primary);
	font-size: 13px
}

.fb-logo span {
	color: var(--footer-accent)
}

.footer-brand p {
	font-size: 13.5px;
	color: var(--footer-text);
	line-height: 1.75;
	margin-bottom: 20px
}

.fcol h4 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--footer-heading);
	margin-bottom: 16px
}

.fcol-links {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.fcol-links a {
	font-size: 13.5px;
	color: var(--footer-text);
	transition: color .2s
}

.fcol-links a:hover {
	color: var(--footer-link)
}

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
	gap: 16px;
	flex-wrap: wrap
}

.f-legal {
	display: flex;
	gap: 18px;
	font-size: 13px
}

.f-legal a {
	color: var(--footer-heading);
	transition: color .2s
}

.f-legal a:hover {
	color: var(--footer-text)
}

.pays {
	display: flex;
	gap: 8px;
	align-items: center
}

.pay {
	background: var(--footer-icon-bg);
	border: var(--border-width-thin) solid var(--footer-icon-border);
	border-radius: var(--radius-xs);
	width: 40px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--footer-text);
	font-size: 22px;
	line-height: 1
}

.pay i {
	display: block
}

.fcopy {
	text-align: center;
	padding: var(--space-4) 0;
	border-top: var(--border-width-thin) solid var(--footer-divider-top);
	font-size: 12.5px;
	color: var(--legal-text)
}

.back-top {
	position: fixed;
	bottom: var(--space-7);
	right: var(--space-7);
	width: 42px;
	height: 42px;
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-round);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--footer-heading);
	font-size: 14px;
	cursor: pointer;
	box-shadow: var(--shadow-back-top);
	opacity: 0;
	transform: translateY(8px);
	transition: all .3s;
	z-index: 999
}

.back-top.on {
	opacity: 1;
	transform: translateY(0)
}

.back-top:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--on-primary)
}

.cookie {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--surface);
	border-top: var(--border-width) solid var(--border);
	padding: 14px 24px;
	z-index: 2000;
	font-size: 13.5px;
	color: var(--legal-text);
	box-shadow: var(--shadow-cookie)
}

.cookie.gone {
	display: none
}

.cookie-main,
.cookie-prefs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px
}

.cookie a {
	color: var(--blue)
}

.cookie-prefs-text {
	flex: 1;
	min-width: 0
}

.cookie-prefs-text strong {
	display: block;
	margin-bottom: 4px;
	color: var(--text)
}

.cookie-prefs-text p {
	margin: 0;
	line-height: 1.45
}

.cookie-btns {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	flex-wrap: wrap
}

.fu {
	transition: opacity .55s ease, transform .55s ease
}

.js .fu {
	opacity: 0;
	transform: translateY(24px)
}

.fu.in,
.no-js .fu {
	opacity: 1;
	transform: translateY(0)
}

.d1 {
	transition-delay: .1s
}

.d2 {
	transition-delay: .2s
}

.d3 {
	transition-delay: .3s
}

.d4 {
	transition-delay: .4s
}

.client-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch
}

.client-table {
	min-width: 520px
}

.client-panel-head {
	flex-wrap: wrap;
	gap: 12px
}

@media(max-width:1024px) {
	:root {
		--container-pad: 20px
	}

	.hero-grid,
	.page-hero-grid,
	.company-grid,
	.contact-grid,
	.grid-contact,
	.grid-2-col {
		grid-template-columns: 1fr
	}

	.grid-contact,
	.company-grid,
	.grid-2-col {
		gap: 32px
	}

	.hero-visual {
		display: none
	}

	.hero {
		padding: 48px 0 56px
	}

	.hero h1 {
		font-size: 38px
	}

	.page-hero {
		padding: 48px 0
	}

	.page-hero h1 {
		font-size: 36px
	}

	.page-hero-grid {
		gap: 32px
	}

	.sol-grid {
		grid-template-columns: 1fr 1fr
	}

	.feat-grid,
	.info-grid {
		grid-template-columns: 1fr 1fr
	}

	.info-grid.cols-2,
	.info-grid.cols-3 {
		grid-template-columns: 1fr 1fr
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr 1fr
	}

	.mega {
		min-width: 0;
		width: 100%;
		grid-template-columns: 1fr
	}

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

	.cta-acts {
		justify-content: center
	}

	.legal-layout {
		grid-template-columns: 1fr
	}

	.legal-toc {
		position: relative;
		top: 0
	}

	.kb-article-layout,
	.kb-category-layout {
		grid-template-columns: 1fr
	}

	.kb-category-sidebar {
		position: relative;
		top: 0
	}

	.plans-grid {
		grid-template-columns: 1fr 1fr
	}

	.compare-grid {
		grid-template-columns: 1fr
	}

	.sbx-grid {
		order: 2
	}

	.company-grid .cc {
		order: 1
	}
}

@media(max-width:768px) {
	:root {
		--container-pad: 16px;
		--section-pad: 56px;
		--section-pad-sm: 44px;
		--section-pad-md: 48px;
		--section-pad-lg: 64px;
		--nav-height: 60px
	}

	.topbar {
		display: none
	}

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

	.page-hero h1,
	.page-title,
	.kb-hero h1 {
		font-size: 28px
	}

	.page-title-sm,
	.page-title-md {
		font-size: 26px
	}

	.hero-sub,
	.page-hero p {
		font-size: 16px
	}

	.hero-checks {
		grid-template-columns: 1fr
	}

	.hero-btns,
	.hero-btns-center {
		flex-direction: column;
		align-items: stretch
	}

	.hero-btns .btn,
	.hero-btns-center .btn {
		justify-content: center
	}

	.hero-trust {
		flex-direction: column;
		gap: 8px
	}

	.hero-stats-bar .container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px
	}

	.sol-grid,
	.feat-grid,
	.info-grid,
	.info-grid.cols-2,
	.info-grid.cols-3,
	.plans-grid,
	.team-grid,
	.sbx-grid {
		grid-template-columns: 1fr
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px
	}

	.sh h2,
	.section-title {
		font-size: 28px
	}

	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px
	}

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

	.kb-cat-grid,
	.kb-guide-grid {
		grid-template-columns: 1fr
	}

	.kb-category-main > .kb-article-body,
	.legal-section,
	.contact-form-card {
		padding: 22px 18px
	}

	.cta-acts {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%
	}

	.cta-acts .btn {
		flex: 1 1 auto;
		justify-content: center;
		min-width: 140px
	}

	.cta-box {
		padding: 32px 24px;
		gap: 20px
	}

	.cta-text h2 {
		font-size: 22px
	}

	.auth-card {
		padding: 28px 20px
	}

	.auth-body {
		padding: 24px 16px
	}

	.nav .container,
	.nav-bar {
		position: relative;
		flex-wrap: nowrap;
		gap: 8px
	}

	.nav-mobile-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		flex-shrink: 0
	}

	.nav-right-desktop {
		display: none
	}

	.nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, .5);
		z-index: 1190;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .28s ease, visibility .28s ease
	}

	.nav-overlay.open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto
	}

	body.nav-open .nav {
		z-index: 1200
	}

	body.nav-open {
		overflow: hidden
	}

	.nav-links {
		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(320px, 88vw);
		max-width: 100%;
		flex: none;
		flex-direction: column;
		align-items: stretch;
		background: var(--surface);
		z-index: 2;
		transform: translateX(100%);
		transition: transform .28s ease;
		box-shadow: -8px 0 32px rgba(15, 23, 42, .18);
		padding: 0;
		overflow: hidden;
		border-left: var(--border-width-thin) solid var(--border);
		pointer-events: auto
	}

	.nav-links.open {
		transform: translateX(0)
	}

	.nav-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 18px;
		border-bottom: var(--border-width-thin) solid var(--border);
		flex-shrink: 0
	}

	.nav-drawer-title {
		font-size: 16px;
		font-weight: 800;
		color: var(--text)
	}

	.nav-drawer-close {
		width: 36px;
		height: 36px;
		border: none;
		border-radius: var(--radius-sm);
		background: var(--bg);
		color: var(--text);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 18px
	}

	.nav-drawer-scroll {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		flex: 1;
		overflow-y: auto;
		padding: 12px 14px;
		gap: 2px
	}

	.nav-drawer-actions {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 16px 18px;
		border-top: var(--border-width-thin) solid var(--border);
		flex-shrink: 0
	}

	.nav-link-mobile-only {
		display: flex
	}

	.nav-links .nav-item {
		width: 100%
	}

	.nav-links .nav-item > .nav-link,
	.nav-links .nav-item > .nav-link-btn {
		width: 100%;
		justify-content: space-between;
		padding: 12px 10px
	}

	.nav-links .nav-item .dropdown {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		border-radius: var(--radius-sm);
		padding: 4px 0 8px;
		min-width: 0;
		width: 100%;
		display: none;
		background: var(--bg)
	}

	.nav-links .nav-item.open .dropdown {
		display: block
	}

	.nav-links > .nav-link {
		padding: 12px 10px;
		border-radius: var(--radius-sm)
	}

	.nav-links .nav-item.open > .nav-link-btn .arr {
		transform: rotate(180deg)
	}

	.nav-right {
		gap: 6px;
		flex-shrink: 0;
		margin-left: auto
	}

	.theme-toggle {
		width: 40px;
		height: 40px
	}

	.grid-contact,
	.contact-grid {
		grid-template-columns: 1fr !important;
		gap: 24px
	}

	.contact-form-card {
		padding: 24px 18px
	}

	.client-wrap {
		grid-template-columns: 1fr
	}

	.client-sidebar {
		position: relative;
		height: auto;
		border-right: none;
		border-bottom: var(--border-width-thin) solid var(--border);
		padding: 16px
	}

	.client-nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
		margin-top: 12px
	}

	.client-nav a {
		padding: 8px 10px;
		font-size: 13px
	}

	.client-main {
		padding: 20px 16px
	}

	.client-stats-grid {
		grid-template-columns: 1fr
	}

	.client-page-head h1 {
		font-size: 24px
	}

	.client-ticket-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px
	}

	.promo {
		padding: 10px 40px 10px 14px;
		font-size: 12.5px;
		line-height: 1.45
	}

	.cookie {
		padding: 14px 16px
	}

	.cookie-main,
	.cookie-prefs {
		flex-direction: column;
		align-items: stretch;
		gap: 12px
	}

	.cookie-btns {
		width: 100%
	}

	.cookie-btns .btn {
		flex: 1;
		justify-content: center
	}

	.sla-table-head,
	.sla-table-row {
		font-size: 12px;
		padding: 10px 12px
	}

	.sla-uptime-highlight {
		flex-direction: column;
		text-align: center;
		gap: 8px
	}

	.error-code {
		font-size: 80px
	}

	.error-btns {
		flex-direction: column;
		align-items: center
	}

	.back-top {
		right: 16px;
		bottom: 16px
	}

	.logo-img {
		height: 34px;
		max-width: 150px
	}

	.plan-card {
		padding: 24px 20px
	}

	.compare-card {
		padding: 22px 18px
	}
}

@media(max-width:480px) {
	:root {
		--container-pad: 14px;
		--section-pad: 48px;
		--section-pad-sm: 36px
	}

	.hero h1 {
		font-size: 28px
	}

	.page-hero h1,
	.page-title,
	.kb-hero h1 {
		font-size: 24px
	}

	.sh h2,
	.section-title {
		font-size: 24px
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.hero-stats-bar .container {
		grid-template-columns: 1fr
	}

	.pays {
		flex-wrap: wrap
	}

	.faq-btn {
		padding: 14px 16px;
		font-size: 14px
	}

	.kb-subnav-tab {
		font-size: 13px;
		padding: 10px 12px
	}
}

/* Theme + client area */
.logo-img {
	height: 40px;
	width: auto;
	max-width: 200px;
	display: block;
	object-fit: contain
}

.footer-logo {
	height: 36px;
	max-width: 180px
}

.hero-visual-img {
	width: 100%;
	max-width: 520px;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg)
}

.theme-toggle {
	background: transparent;
	border: var(--border-width-thin) solid var(--border);
	color: var(--text2);
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	padding: 0
}

.topbar-theme {
	margin-left: auto
}

@media (min-width: 769px) {
	.nav-mobile-toggle {
		display: none !important
	}
}

a.kb-tag:hover {
	border-color: var(--blue);
	color: var(--blue)
}

.client-wrap {
	display: grid;
	grid-template-columns: 260px 1fr;
	min-height: calc(100vh - 80px);
	background: var(--bg)
}

.client-sidebar {
	background: var(--surface);
	border-right: var(--border-width-thin) solid var(--border);
	padding: 24px 16px
}

.client-sidebar-title {
	font-weight: 800;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 8px
}

.client-sidebar-user {
	font-size: 13px;
	color: var(--text2);
	margin-top: 6px
}

.client-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 20px
}

.client-nav a {
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--text2);
	display: flex;
	align-items: center;
	gap: 10px
}

.client-nav a:hover,
.client-nav a.active {
	background: var(--blue-light);
	color: var(--blue)
}

.client-main {
	padding: 32px 28px
}

.client-page-head {
	margin-bottom: 24px
}

.client-page-head h1 {
	font-size: 28px;
	font-weight: 800;
	color: var(--text)
}

.client-page-head p {
	color: var(--text2);
	margin-top: 6px
}

.client-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px
}

.client-stat-card {
	background: var(--surface);
	border: var(--border-width-thin) solid var(--border);
	border-radius: var(--radius);
	padding: 20px
}

.client-stat-val {
	font-size: 28px;
	font-weight: 800;
	color: var(--text)
}

.client-stat-lbl {
	font-size: 13px;
	color: var(--text2)
}

.client-panel {
	background: var(--surface);
	border: var(--border-width-thin) solid var(--border);
	border-radius: var(--radius);
	padding: 22px;
	margin-bottom: 20px
}

.client-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px
}

.client-panel-head h2 {
	font-size: 18px;
	font-weight: 800
}

.client-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px
}

.client-table th,
.client-table td {
	padding: 12px 10px;
	border-bottom: var(--border-width-thin) solid var(--border);
	text-align: left
}

.client-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--text3)
}

.client-muted {
	font-size: 12px;
	color: var(--text3)
}

.client-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--text2)
}

.client-empty i {
	font-size: 32px;
	color: var(--blue);
	margin-bottom: 12px
}

.client-empty.compact {
	padding: 20px
}

.client-ticket-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: var(--border-width-thin) solid var(--border)
}

.client-ticket-row:last-child {
	border-bottom: none
}

.client-link-more {
	display: inline-block;
	margin-top: 12px;
	font-weight: 700;
	color: var(--blue)
}

.client-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--blue);
	margin-bottom: 10px
}

.order-summary {
	border: var(--border-width-thin) solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
	margin-bottom: 20px;
	background: var(--bg)
}

.order-summary-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	font-size: 14px
}

.order-summary-total {
	border-top: var(--border-width-thin) solid var(--border);
	margin-top: 8px;
	padding-top: 12px;
	font-size: 16px
}

.ticket-reply {
	padding: 14px 0;
	border-bottom: var(--border-width-thin) solid var(--border)
}

.ticket-reply.staff {
	background: var(--bg);
	padding: 14px;
	border-radius: var(--radius-sm);
	margin-bottom: 10px;
	border: var(--border-width-thin) solid var(--border)
}

.ticket-reply-meta {
	font-size: 12px;
	color: var(--text3);
	margin-bottom: 6px
}

.ticket-reply-form {
	margin-top: 16px
}

.kb-breadcrumb {
	font-size: 13px;
	color: var(--text3);
	margin-bottom: 12px;
	display: flex;
	gap: 8px
}

.kb-article-meta-bar {
	display: flex;
	gap: 16px;
	font-size: 13px;
	color: var(--text2);
	margin-top: 10px
}

/* Utilities */
.u-hidden {
	display: none !important
}

.u-text-center {
	text-align: center
}

.u-flex {
	display: flex
}

.u-flex-col {
	flex-direction: column
}

.u-items-center {
	align-items: center
}

.u-items-start {
	align-items: flex-start
}

.u-justify-between {
	justify-content: space-between
}

.u-justify-center {
	justify-content: center
}

.u-gap-8 {
	gap: var(--space-2)
}

.u-gap-10 {
	gap: 10px
}

.u-gap-12 {
	gap: var(--space-3)
}

.u-gap-40 {
	gap: var(--space-10)
}

.u-mt-8 {
	margin-top: var(--space-2)
}

.u-mt-32 {
	margin-top: var(--space-8)
}

.u-mb-0 {
	margin-bottom: 0
}

.u-mb-10 {
	margin-bottom: 10px
}

.u-mb-12 {
	margin-bottom: var(--space-3)
}

.u-mb-16 {
	margin-bottom: var(--space-4)
}

.u-mb-20 {
	margin-bottom: var(--space-5)
}

.u-mb-48 {
	margin-bottom: var(--space-12)
}

.u-mx-auto {
	margin-left: auto;
	margin-right: auto
}

.u-max-w-500 {
	max-width: 500px
}

.u-max-w-560 {
	max-width: 560px
}

.u-max-w-600 {
	max-width: 600px
}

.u-max-w-700 {
	max-width: 700px
}

.u-min-h-60 {
	min-height: 60vh
}

.u-min-h-70 {
	min-height: 70vh
}

.section-pad {
	padding: var(--section-pad) 0
}

.section-pad-sm {
	padding: var(--section-pad-sm) 0
}

.section-pad-hero {
	padding: var(--section-pad-sm) 0
}

.page-title {
	font-size: 44px;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -.03em;
	margin-bottom: 16px;
	line-height: 1.1
}

.page-title-md {
	font-size: 40px;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -.03em;
	margin-bottom: 12px
}

.page-title-sm {
	font-size: 36px;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -.03em;
	margin-bottom: 8px
}

.page-lead {
	font-size: 17px;
	color: var(--text2);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.7
}

.page-lead-sm {
	font-size: 16px;
	color: var(--text2);
	max-width: 500px;
	margin: 0 auto
}

.page-meta {
	font-size: 14px;
	color: var(--text3)
}

.section-heading {
	font-size: 20px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 16px
}

.section-heading-lg {
	font-size: 20px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 20px
}

.grid-2-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 60px
}

.panel-narrow {
	max-width: 560px
}

.card-narrow {
	max-width: 520px
}

.auth-body-tall {
	min-height: 70vh
}

.form-label-row {
	display: flex;
	justify-content: space-between
}

.form-label-link {
	font-weight: 600;
	color: var(--blue);
	font-size: 13px
}

.form-label-muted {
	color: var(--text3);
	font-weight: 400
}

.form-check-spaced {
	margin-bottom: 20px
}

.alert-spaced {
	margin-bottom: 16px
}

.icon-success {
	color: var(--on-primary);
	font-size: 24px
}

.icon-lock-ok {
	color: var(--green);
	font-size: 11px
}

.icon-fire {
	color: var(--red);
	margin-right: 8px
}

.icon-clock-blue {
	color: var(--blue);
	margin-right: 8px
}

.rank-num {
	font-size: 11px;
	font-weight: 800;
	color: var(--text3);
	width: 20px
}

.hero-why-icon-emerald {
	background: var(--emerald-badge-bg);
	color: var(--green-soft);
	font-size: 13px;
	font-weight: 800
}

.hero-panel-glass {
	background: var(--white-10);
	border-color: var(--white-15)
}

.hero-panel-icon-purple {
	font-size: 24px;
	color: var(--purple-soft);
	margin-bottom: 10px;
	display: block
}

.icon-check-green {
	color: var(--green)
}

.icon-check-blue {
	color: var(--blue)
}

.icon-muted {
	color: var(--text3)
}

.icon-map-blue {
	color: var(--blue);
	margin-right: 6px
}

.icon-sync {
	margin-right: 5px
}

.map-embed {
	border: none;
	display: block
}

.error-flex {
	display: flex;
	align-items: center;
	min-height: 60vh
}

.about-section-alt {
	padding: var(--section-pad-sm) 0;
	background: var(--bg);
	border-top: var(--border-width-thin) solid var(--border)
}

.timeline-wrap {
	max-width: 700px;
	margin: 40px auto 0
}

.hero-btns-center {
	justify-content: center
}

.hero-lead-center {
	max-width: 600px;
	margin: 0 auto 32px;
	color: var(--text2)
}

.wp-progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	margin-bottom: 4px
}

.wp-progress-label.ok {
	color: var(--green-bright)
}

.wp-progress-label.dim {
	color: var(--white-60)
}

.wp-progress-track {
	background: var(--white-10);
	border-radius: var(--radius-pill);
	height: 8px
}

.wp-progress-fill {
	height: 8px;
	border-radius: var(--radius-pill)
}

.wp-progress-fill.ok {
	background: var(--green-bright)
}

.wp-progress-fill.dim {
	background: var(--white-40)
}

.wp-panel-spaced {
	margin-top: 20px
}

.info-grid-start {
	align-content: start
}

.box-bordered {
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	margin-bottom: 48px
}

.box-bordered-flush {
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	overflow: hidden
}

.kb-actions {
	display: flex;
	gap: 8px
}

.kb-article-section {
	padding: var(--section-pad-sm) 0
}

.order-actions {
	display: flex;
	gap: 10px;
	flex-direction: column
}

.order-lead {
	font-size: 14px;
	color: var(--text2);
	margin-bottom: 16px
}

.client-heading {
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 16px
}

.btn-spaced-top {
	margin-top: 8px
}

.btn-spaced-lg {
	margin-top: 20px
}

.form-success-icon-center {
	margin: 0 auto 20px
}

.forgot-success {
	text-align: center
}

.info-card,
.compare-card,
.timeline-body,
.team-card,
.contact-form-card,
.faq-btn,
.faq-body,
.kb-cat-card,
.kb-helpful-btn,
.kb-sidebar-card,
.legal-toc,
.auth-nav,
.auth-card,
.cookie,
.back-top {
	background: var(--surface)
}

.form-input,
.form-select,
.form-textarea {
	background: var(--input-bg)
}