@import url("fa-icons.css");

:root {
	--ink: #0b1722;
	--deep: #0b1722;
	--panel: #0b1722;
	--wash: #eefaff;
	--accent: #4dd2ff;
	--good: #67f1b3;
	--warn: #ffd166;
	--scrollPad: 160px;
}

h2 {
	margin: 0;
}

h1 {
	font-size: 7rem !important;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica,
		Arial, sans-serif;
	color: var(--ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: rgba(77, 210, 255, 0.3);
}

img {
	max-width: 100%;
	display: block;
}

.vanitycta {
	margin-top: calc(10vh - 15px) !important;
	margin-bottom: calc(10vh - 15px) !important;
}

.paddedboundary {
	padding: 0 40px 0 40px;
}

/* ========== Layout helpers (replicating only what’s used) ========== */
.maxw {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 0.5rem;
}



.section {
	padding: 2.5rem 0;
}

#inventory-first .section {
	padding: 1.5rem 0;
}

.grid {
	display: grid;
}

.flex {
	display: flex;
}

.inline-flex {
	display: inline-flex;
}

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

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

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

.flex-wrap {
	flex-wrap: wrap;
}

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

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.sticky {
	position: sticky;
}

.inset-0 {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.top-0 {
	top: 0;
}

.z-50 {
	z-index: 50;
}

.z-10 {
	z-index: 10;
}

.hidden {
	display: none;
}

.block {
	display: block;
}

.overflow-hidden {
	overflow: hidden;
}

.phlr {
	padding: 0.5rem 0.5rem;
}

/* Spacing */
.h-16 {
	height: 4rem;
}

.pr {
	padding: 12px 30px 12px 14px !important;
}

.p-4 {
	padding: 1rem;
}

.p-5 {
	padding: 1.25rem;
}

.p-6 {
	padding: 1.5rem;
}

.px-2 {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.px-3 {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.py-1 {
	padding: 0.25rem 0.5rem;
}

.mt-1 {
	margin-top: 0.25rem;
}

.mt-2 {
	margin-top: 0.5rem;
}

.mt-3 {
	margin-top: 0.75rem;
}

.mt-4 {
	margin-top: 1rem;
}

.mt-5 {
	margin-top: calc(5vh + 5px);
	margin-bottom: calc(5vh - 30px);
}

.mt-6 {
	margin-top: 1.5rem;
}

.mt-8 {
	margin-top: 2rem;
}

.mt-10 {
	margin-top: 2.5rem;
}

.mb-2 {
	margin-bottom: 0.5rem;
}

.mb-3 {
	margin-bottom: 0.75rem;
}

.ml-5 {
	margin-left: 5px;
}

.gap-2 {
	gap: 0.5rem;
}

.gap-3 {
	gap: 0.75rem;
}

.gap-6 {
	gap: 1.5rem;
}

.gap-10 {
	gap: 1.5rem;
}

.py-3 {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

/* Width/Height */
.w-full {
	width: 100%;
}

.h-full {
	height: 100%;
}

.h-auto {
	height: auto;
}

.w-32 {
	width: 8rem;
}

.w-36 {
	width: 9rem;
}

/* logo slightly larger */
.w-5 {
	width: 1.25rem;
}

.h-5 {
	height: 1.25rem;
}

.h-56 {
	height: 14rem;
}

.h-72 {
	height: 18rem;
}

/* Text */
.text-xs {
	font-size: 0.75rem;
}

.text-sm {
	font-size: 0.875rem;
}

.text-lg {
	font-size: 1.125rem;
}

.text-xl {
	font-size: 1.25rem;
}

.text-2xl {
	font-size: 1.5rem;
}

.text-3xl {
	font-size: 2.7rem;
}

/* .text-[44px] {
    font-size: 44px
} */

.font-normal {
	font-weight: 400;
}

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

.font-semibold {
	font-weight: 600;
}

/* .leading-[1\.05] {
    line-height: 1.05
} */

.tracking-tight {
	letter-spacing: -0.01em;
}

/* Color helpers */
.bg-white {
	background: #fff;
}

.bg-panel {
	background: #0b1722;
}

.bg-deep {
	background: var(--deep);
}

.bg-wash {
	background: var(--wash);
}

.text-white {
	color: #fff;
}

.text-ink {
	color: var(--ink);
}

.text-white\/90 {
	color: rgba(255, 255, 255, 0.9);
}

.text-white\/85 {
	color: rgba(255, 255, 255, 0.85);
}

.text-white\/80 {
	color: rgba(255, 255, 255, 0.8);
}

.text-white\/70 {
	color: rgba(255, 255, 255, 0.7);
}

.text-ink\/90 {
	color: rgba(11, 23, 34, 0.9);
}

.text-ink\/80 {
	color: rgba(11, 23, 34, 0.8);
}

.text-ink\/70 {
	color: rgba(11, 23, 34, 0.7);
}

.text-ink\/60 {
	color: rgba(11, 23, 34, 0.6);
	width: 70%;
}

.bg-white\/10 {
	background: rgba(255, 255, 255, 0.1);
}

/* curve text-color helpers */
.text-panel {
	color: var(--panel);
}

.text-deep {
	color: var(--deep);
}

.text-wash {
	color: var(--wash);
}

/* .text-[#e6f1ff] {
    color: #e6f1ff
} */

/* .text-[#cde2ff]\/80 {
    color: rgba(205, 226, 255, .8)
} */

/* Borders & radius */
.border {
	border: 1px solid #e5e7eb;
}

.border-transparent {
	border-color: transparent;
}

.border-white\/20 {
	border-color: rgba(255, 255, 255, 0.2);
}

.rounded-lg {
	border-radius: 0.5rem;
}

.rounded-2xl {
	border-radius: 8px;
}

.rounded-full {
	border-radius: 999px;
}

/* Object fit */
.object-cover {
	object-fit: cover;
}

/* Responsive (sm ≥640, md ≥768, lg ≥1024) */
@media (min-width: 640px) {
	.sm\:flex-row {
		flex-direction: row;
	}

	.sm\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.md\:flex {
		display: flex;
	}

	.md\:inline-flex {
		display: inline-flex;
	}

	.md\:hidden {
		display: none;
	}

	.md\:text-xl {
		font-size: 1.25rem;
	}

	.md\:text-3xl {
		font-size: 1.875rem;
	}

	.md\:text-4xl {
		font-size: 2.6rem;
	}

	.md\:text-7xl {
		font-size: 4.5rem;
		line-height: 1.05;
	}

	.md\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.md\:grid-cols-3 {
		grid-template-columns: 1fr 360px;
	}
}

@media (min-width: 1024px) {
	.lg\:grid-cols-2 {
		grid-template-columns: 400px 50%;
		justify-content: center;
		gap: 90px;
	}

	.lg\:grid-cols-1 {
		grid-template-columns: 50% 400px;
		justify-content: center;
		gap: 90px;
	}

	.lg\:order-1 {
		order: 1;
	}

	.lg\:order-2 {
		order: 2;
	}
}

/* Order helpers */
.order-1 {
	order: 1;
}

.order-2 {
	order: 2;
}

/* Spacing helpers */
.pt-24 {
	padding-top: 6rem;
}

.md\:pt-32 {
	padding-top: 8rem;
}

/* Header & progress */
header {
	transition: background-color 0.25s ease, box-shadow 0.25s ease,
		color 0.25s ease;
}

header.scrolled {
	background: rgba(11, 22, 34, 0.72) !important;
	backdrop-filter: saturate(120%) blur(6px);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
	color: #fff;
}

header:not(.scrolled) {
	background: transparent !important;
	color: #fff;
	position: fixed;
	width: 100%;
}

#progressBar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: transparent;
}

#progressFill {
	height: 100%;
	width: 0;
	background: var(--accent);
	box-shadow: 0 0 8px rgba(77, 210, 255, 0.35);
}

/* Nav chips */
.navlink {
	padding: 0.44rem 0.72rem;
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: background 0.2s ease, color 0.2s ease;
}

.navlink.active {
	border-bottom: 3px solid rgba(77, 210, 255, 0.18);
}

/* Buttons */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 400;
	border-radius: 25px;
	padding: 15px 40px;
	font-size: 16px;
	transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease,
		color 0.2s ease;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary {
	background: var(--accent);
	color: var(--ink);
	border-color: rgba(11, 23, 34, 0.15);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
	border: none;
	cursor: pointer;
}

.btn-dark {
	background: #0b1722;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.18);
}

.btn-neutral {
	background: #fff;
	color: var(--ink);
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.btn::after {
	content: "";
	position: absolute;
	top: -160%;
	left: -25%;
	width: 60%;
	height: 340%;
	transform: rotate(25deg);
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.35),
			rgba(255, 255, 255, 0));
	opacity: 0.8;
	transition: transform 0.6s ease;
}

.btn:hover::after {
	transform: translateX(260%) rotate(25deg);
}

/* Chips / badges */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.5rem;
	border-radius: 999px;
	border: 1px solid rgba(77, 210, 255, 0.35);
	background: rgba(77, 210, 255, 0.08);
	font-size: 0.78rem;
}

/* Tiles + transitions */
.tile,
.tile-dark {
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.tile {
	border: 1px solid rgba(77, 210, 255, 0.28);
	background: #fff;
	box-shadow: inset 0 1px 0 rgba(77, 210, 255, 0.14);
	margin: 0 10px 0 10px;
}

.tile-dark {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	/* box-shadow: 0 14px 34px rgba(77, 210, 255, 0.25); */
}

.hover\:shadow-blue:hover {
	/* box-shadow: 0 14px 34px rgba(77, 210, 255, 0.25); */
}

.tile:hover,
.tile-dark:hover {
	transform: translateY(-6px) scale(1.015);
}

/* Curves */
.curve {
	display: block;
	width: 100%;
	height: 100px;
	line-height: 0;
}

.curve.seam {
	position: relative;
	z-index: 1;
	pointer-events: none;
	margin-top: 0px;
	top: 1px;
}

.curve path {
	shape-rendering: geometricPrecision;
	vector-effect: non-scaling-stroke;
}

/* Dark wrap & hero */
.darkwrap {
	background: #0b1722;
}

.hero {
	position: relative;
	min-height: 100vh;
}

.hero video {
	opacity: 0.7;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.heroOverlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(188deg,
			rgba(11, 22, 34, 0.1) 0%,
			rgb(13 22 41 / 0%) 0%,
			rgb(13 22 41) 70%,
			rgba(11, 22, 34, 1) 80%),
		radial-gradient(810px 620px at 10% 0%,
			rgb(77 200 245 / 5.1%),
			transparent 95%);
	bottom: -10%;
}

/* Showcase carousel */
.cs-viewport {
	overflow: hidden;
	position: relative;
	touch-action: pan-y;
}

.cs-track {
	display: flex;
	gap: 16px;
	touch-action: none;
	will-change: transform;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	cursor: grab;
}

.cs-track.dragging {
	cursor: grabbing;
}

.cs-card {
	min-width: 80%;
	max-width: 80%;
}

@media (min-width: 900px) {
	.cs-card {
		min-width: 32%;
		max-width: 32%;
	}
}

.cs-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

.cs-dots button {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
	border: 0;
	transition: background 0.2s ease;
}

.cs-dots button.active {
	background: var(--accent);
}

/* prevent first-tap grab on iOS */
.cs-card,
.cs-card * {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.cs-card img {
	-webkit-user-drag: none;
	pointer-events: none;
}

/* Sticky secondary subnav */
.subnav {
	position: sticky;
	top: 0px;
	z-index: 99;
	margin-top: 0px;
	box-shadow: 0 -19px 23px -22px rgba(0, 0, 0, 0.35);
}

.subnav-line {
	height: 1px;
	background: none;
	margin-top: 0.25rem;
}

#quicklinks {
	padding-top: 15px;
	border-bottom: 1px solid #e6e6e6;
}

#quicklinks .maxw {
	padding: 0 0.75rem;
}

#quicklinks .navlink {
	color: var(--ink);
	white-space: nowrap;
}

#quicklinks .navlink.q-active {
	border-bottom: 3px solid rgb(77 210 255);
	color: var(--ink);
}

#quicklinks .flex {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	gap: 0.75rem;
	padding: 0.5rem 0.5rem;
}

#quicklinks .flex::-webkit-scrollbar {
	display: none;
}

#quicklinks .flex {
	scrollbar-width: none;
}

/* Value prop */
.vp-section {
	position: relative;
	padding: 30px 0 0px 0px;
}

.vp-pad {
	padding: 0 0px 10px 0px !important;
}

.vp-bottom {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 130px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.vp-bottom .badges {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* Reveal on view */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s, transform 0.6s;
}

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

/* Developers slab */
.dev-slab {
	background: linear-gradient(180deg,
			rgba(255, 255, 255, 0.04),
			rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	padding: 20px;
	box-shadow: 0 16px 38px rgba(0, 0, 0, 0.26);
}

.dev-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.dev-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.55rem;
	border-radius: 999px;
	border: 1px solid rgba(77, 210, 255, 0.35);
	background: rgba(77, 210, 255, 0.08);
	color: #d7eeff;
	font-size: 0.76rem;
	font-weight: 600;
}

.dev-h {
	font-size: 1.08rem;
	font-weight: 800;
}

.dev-lede {
	color: #cfe6ff;
}

.dev-meta {
	font-size: 0.94rem;
	color: #cfe6ff;
}

.dev-divider {
	height: 1px;
	background: linear-gradient(90deg,
			transparent,
			rgba(255, 255, 255, 0.16),
			transparent);
	margin: 14px 0;
}

.dev-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 14px;
}

@media (max-width: 1024px) {
	.dev-grid {
		grid-template-columns: 1fr;
	}
}

.dev-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 14px;
}

.code {
	background: #0b1722;
	color: #e6f1ff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 10px;
}

pre {
	white-space: pre;
	overflow: auto;
}

/* Misc helpers */
.max-w-3xl {
	max-width: 48rem;
}

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

.ml-5 {
	margin-left: 10px !important;
}

/* Pricing: base grid + center emphasis on ≥md */
#pricing .toggle-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	padding: 10px;
	margin: 10px 0 10px 0;
}

#pricing .toggle-wrap button {
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.9);
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.875rem;
	transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

#pricing .toggle-wrap button:active {
	transform: translateY(1px);
}

#pricing .toggle-wrap button.active {
	background: #fff;
	color: var(--ink);
	font-weight: 600;
}

#pricing .save-plain {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.9);
}

#pricing .plans {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	#pricing .plans {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	#pricing .plans>div {
		transform-origin: center;
		transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
		cursor: pointer;
	}

	#pricing .plans>div:nth-child(2) {
		/* transform: scale(1.06); */
		z-index: 1;
	}

	/* LARGER center card */
}

span.beta {
	position: absolute;
	font-size: 10px;
	top: 42px;
	left: 40%;
	opacity: 0.7;
	letter-spacing: 0.6px;
}

/* Mobile: turn pricing into stable snap carousel (prevents jank) */
@media (max-width: 767.98px) {


	#pricing .plans {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 16px;
		padding: 0 16px 8px;
	}

	.prel {
		height: 596px !important;
	}

	#pricing .plans>div {
		flex: 0 0 86%;
		scroll-snap-align: center;
		min-height: 360px;
		contain: content;
	}

	#pricing .plans::-webkit-scrollbar {
		height: 0;
		display: none;
	}
}

/* FAQs spacing preserved */
#pricing .faqs {
	margin-top: 2.5rem;
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	span.beta {
		left: 115px;
	}

	#pricing .faqs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* CTA row center */
#demo .cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* Domain row centering */
#domains .domain-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
}

#domains .domain-field {
	display: grid;
	gap: 0;
	border: 2px solid #0b1722;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	width: 90%;
	grid-template-columns: 80px 1fr 110px;

	padding: 20px 10px 20px 10px;
}

#domains .domain-field input {
	flex: 1;
	border: 0;
	outline: none;
}

/* Footer (float-based layout as requested) */
footer {
	background: var(--panel);
	color: #fff;
	margin-top: -70px;
	position: relative;
}

.footer-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 1rem;
}

.footer-cols {
	padding: 5.5rem 0 2rem 0;
	zoom: 1;
}

.footer-cols:after {
	content: "";
	display: block;
	clear: both;
}

.footer-col {
	float: left;
	width: 80%;
	margin-bottom: 1.5rem;
	position: relative;
}

@media (min-width: 768px) {
	.footer-col {
		width: 25%;
		padding: 20px 20px;
	}
}

footer .col-title {
	font-weight: 600;
	margin-bottom: 0.5rem;
}

footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer li {
	margin: 0.5rem 0;
}

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

footer a:hover {
	text-decoration: underline;
}

footer .brand-img {
	width: 8rem;
	height: auto;
	margin-bottom: 0.75rem;
}

.footer-bottom {
	padding-bottom: 2rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.75rem;
}

.mw-90 {
	max-width: 90%;
}

/* Pricing list: purple ticks (scoped to #pricing only) */
#pricing .plans ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

#pricing .plans li {
	position: relative;
	padding-left: 1.5rem;
	margin: 0.5rem 0;
	/* font-size: 12px; */
	padding-right: 10px;
}

#pricing .plans li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28rem;
	width: 1.15rem;
	height: 1.15rem;
	background: #7c3aed;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 L10 16 L4 11" fill="none" stroke="%23000" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 L10 16 L4 11" fill="none" stroke="%23000" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}

#pricing .plans .plan-flash {
	animation: planFlash 1.6s ease;
}

@keyframes planFlash {
	0% {
		box-shadow: 0 0 0 0 rgba(77, 210, 255, 0.7);
	}

	100% {
		box-shadow: 0 0 0 16px rgba(77, 210, 255, 0);
	}
}

#pricing .plans li.no-storefront::before {
	background: #dc2626;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 6 L18 18 M18 6 L6 18" fill="none" stroke="%23000" stroke-width="3.2" stroke-linecap="round"/></svg>') no-repeat center/contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 6 L18 18 M18 6 L6 18" fill="none" stroke="%23000" stroke-width="3.2" stroke-linecap="round"/></svg>') no-repeat center/contain;
}

/* --- VALUE PROP sections: purple ticks --- */
.vp-section ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.vp-section ul li {
	position: relative;
	padding-left: 1.4rem;
	margin: 0.5rem 0;
}

.vp-section ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28rem;
	width: 1.15rem;
	height: 1.15rem;
	background: #0d1722;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 L10 16 L4 11" fill="none" stroke="%23000" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 L10 16 L4 11" fill="none" stroke="%23000" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}

/* --- DEMO section: purple ticks + subtle card polish --- */
#demo .feature-list {
	margin: 1.5rem 0 0 0;
	padding: 0;
	list-style: none;
}

#demo .feature-list li {
	position: relative;
	padding-left: 1.4rem;
	margin: 0.45rem 0;
}

#demo .feature-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25rem;
	width: 1.15rem;
	height: 1.15rem;
	background: #7c3aed;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 L10 16 L4 11" fill="none" stroke="%23000" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 L10 16 L4 11" fill="none" stroke="%23000" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}

/* keep code block look you already had */
#developers pre.code {
	background: #0b1722;
}

/* Anchor scroll offset */
section,
[id] {
	scroll-margin-top: var(--scrollPad) !important;
}

/* ----- Pricing FAQs (accordion) ----- */
#pricing .faqs-accordion {
	color: #fff;
	padding: 0 10rem;
	margin-top: 90px;
	border-top: 1px solid #0b1722;
}

#pricing .faqs-list {
	margin-top: 1.25rem;
}

#pricing .faq-group {
	border-bottom: 1px solid rgb(29 36 53);
	padding: 10px 0;
}

#pricing .faq-q {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: color 0.2s ease;
	font-size: 17px;
	font-weight: 100;
}

#pricing .faq-q:hover {
	color: var(--accent);
}

#pricing .faq-icon {
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	display: inline-block;
	border-right: 2px solid rgba(255, 255, 255, 0.7);
	border-bottom: 2px solid rgba(255, 255, 255, 0.7);
	transform: rotate(45deg);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.2s ease;
}

#pricing .faq-a {
	max-height: 0;
	overflow: hidden;
	opacity: 0.85;
	transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.35s ease;
	will-change: max-height;
	padding: 0 70px 0 5px;
}

#pricing .faq-a p {
	margin: 0 0 1rem 0;
	color: rgba(255, 255, 255, 0.9);
}

#pricing .faq-group.open .faq-a {
	max-height: 400px;
}

#pricing .faq-group.open .faq-icon {
	transform: rotate(-135deg);
	border-color: var(--accent);
}

/* Topnav active underline */
#topnav .navlink {
	position: relative;
}

#topnav .navlink::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: -6px;
	height: 2px;
	background: var(--accent);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.22s ease;
}

#topnav .navlink.is-active::after {
	transform: scaleX(1);
}

#showcase {
	position: relative;
	margin-top: -12%;
}

header .logo {
	width: 160px;
}

/* Back-to-top FAB */
#toTop {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 0;
	background: var(--accent);
	color: var(--ink);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	cursor: pointer;
	z-index: 1000;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
}

#toTop:hover {
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

#toTop.show {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.extraML {
	margin: 4%;
}

.bp {
	position: relative;
	left: 60px;
}

.cta2 {
	justify-content: center;
}

.ur-lgn {
	color: #72ff32 !important;
	padding: 18px 24px;
	/* border-radius: 100%; */
	color: white;
	font-size: 20px;
	text-decoration: none;
	width: 56px;
	/* transition: transform .12s 
ease, box-shadow .2s 
ease, background .2s 
ease, color .2s 
ease; */
	overflow: hidden;
	/* text-decoration: none; */
	/* border: 1px solid white; */
	/* border-color: rgba(11, 23, 34, .15); */
	/* box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); */
	/* text-align: right; */
}

.grid-distance {
	grid-template-columns: 161px 1fr 255px;
	gap: 8px;
	justify-items: center;
}

.cust-lgn {
	text-decoration: none;
	color: #6cdaff;
}

@media (max-width: 720px) {
	.paddedboundary {
		padding: 0 25px 0 25px;
	}

	.cont {
		padding: 0 25px 0 25px;
	}

	header .logo {
		width: 60%;
		margin: 0 0 0 6px;
	}

	.hero {
		position: relative;
		min-height: 65vh;
	}

	.header {
		top: 40px;
		position: relative;
	}

	.header .btn-primary {
		display: none;
	}

	h1 {
		font-size: 4.2rem !important;
		line-height: 70px;
		margin: 0 0 50px 0;
	}

	.hero-caption {
		width: 100%;
		margin: unset;
		padding: 140px 0 0 0;
	}

	#showcase {
		margin-top: 5%;
	}

	#showcase h2 {
		padding-left: 20px;
		padding-bottom: 20px;
	}

	#showcase.phlr {
		padding: unset;
	}

	.phlr {
		padding: 0.5rem 1rem;
	}

	.cs-card {
		margin-left: 10px;
	}

	.cs-viewport {
		padding-left: 30px;
	}

	#pricing .faqs-accordion {
		padding: 20px;
	}

	#demo .grid {
		padding: 0 35px;
	}

	header:not(.scrolled) {
		background: transparent !important;
		color: #fff;
		position: relative;
	}

	section#home {
		margin-top: -80px;
	}

	.vp-pad-m {
		padding: 0px 32px 0px 32px;
	}

	section#demo .grid {
		display: unset !important;
	}

	.extraML {
		margin: unset;
	}

	text-ink\/60 {
		color: rgba(11, 23, 34, 0.6);
		width: 70%;
		margin: unset;
	}

	.bp {
		left: 0;
	}

	section#demo h2 {
		width: 80%;
		margin: 0 auto;
	}

	.grid-distance {
		grid-template-columns: unset;
	}

	.ur-lgn {
		display: none;
	}

	.mw-90 {
		max-width: unset;
	}
}

#showcase .maxw {
	max-width: 100% !important;
}

/* Cookie banner */
.cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 9999;
	padding: 0 20px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cookie-banner.show {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.cookie-inner {
	max-width: 1100px;
	margin: 0 auto;
	background: #0f1b26;
	border: 1px solid #1b2633;
	border-radius: 16px;
	padding: 16px 18px;
	display: grid;
	grid-template-columns: 40% 1fr;
	/* justify-content: space-between; */
	gap: 16px;
	box-shadow: 0 10px 30px rgba(5, 10, 18, 0.35);
}

.cookie-copy {
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
}

.cookie-title {
	color: #fff;
	font-weight: 600;
	margin-bottom: 4px;
}

.cookie-copy a {
	color: var(--accent);
	text-decoration: none;
}

.cookie-actions {
	display: grid;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	grid-template-columns: 1fr 1fr 1fr;
}

.cookie-actions .btn {
	white-space: nowrap;
}

.cookie-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(5, 12, 20, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 10000;
}

.cookie-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.cookie-prefs {
	margin-top: 14px;
	padding: 14px 18px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	display: none;
}

.cookie-prefs.is-open {
	background: #0f1b26;
	display: block;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, calc(100% - 40px));
	z-index: 10001;
	box-shadow: 0 16px 40px rgba(5, 10, 18, 0.45);
}

.cookie-prefs-title {
	color: #fff;
	font-weight: 600;
	margin-bottom: 10px;
}

.cookie-prefs-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cookie-prefs-row:first-of-type {
	border-top: 0;
}

.cookie-prefs-name {
	color: #fff;
	font-weight: 600;
	font-size: 14px;
}

.cookie-prefs-desc {
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
}

.cookie-toggle {
	position: relative;
	width: 46px;
	height: 26px;
	display: inline-flex;
	align-items: center;
}

.cookie-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.cookie-switch {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.cookie-switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s ease;
}

.cookie-toggle input:checked+.cookie-switch {
	background: var(--accent);
	border-color: var(--accent);
}

.cookie-toggle input:checked+.cookie-switch::after {
	transform: translateX(20px);
}

.cookie-toggle.is-locked .cookie-switch {
	opacity: 0.6;
}

.cookie-prefs-actions {
	margin-top: 12px;
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 720px) {
	.cookie-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.cookie-actions {
		width: 100%;
	}

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

	.cookie-banner {
		bottom: 14px;
		padding: 0 14px;
	}

	.cookie-prefs-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.cookie-prefs-actions {
		justify-content: stretch;
	}

	.cookie-prefs-actions .btn {
		width: 100%;
	}
}

/* Policy pages */
.policy-card {
	/* background: #fff; */
	/* color: #0b1722; */
	/* border-radius: 16px; */
	/* padding: 28px; */
	/* box-shadow: 0 10px 30px rgba(10, 20, 30, 0.18); */
}

.policy-card h1,
.policy-card h2 {
	color: #0b1722;
}

.policy-card p {
	color: rgba(11, 23, 34, 0.8);
}

.policy-switch {
	-webkit-appearance: none;
	appearance: none;
	background: rgba(255, 255, 255, 0.1);
	border: 0;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 28px 6px 12px;
	border-radius: 999px;
	letter-spacing: 0.3px;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.8) 50%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.8) 50%, transparent 50%);
	background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.policy-switch option {
	color: #0b1722;
}

/* Careers */
.careers-list {
	display: grid;
	gap: 14px;
}

.job-row {
	border: 1px solid rgba(11, 23, 34, 0.12);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}

.job-summary {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	background: transparent;
	border: 0;
	color: #0b1722;
	text-align: left;
	cursor: pointer;
}

.job-main {
	display: grid;
	gap: 4px;
}

.job-title {
	font-weight: 600;
	font-size: 18px;
}

.job-title {
	color: #0b1722;
	text-decoration: none;
}

.job-meta {
	color: rgba(11, 23, 34, 0.7);
	font-size: 13px;
}

.job-cta {
	flex: 0 0 auto;
}

.job-details {
	display: none;
	padding: 0 20px 18px 20px;
	color: rgba(11, 23, 34, 0.85);
}

.job-row.open .job-details {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 18px;
}

.job-details-left h3 {
	margin: 0 0 8px 0;
	font-weight: 600;
	font-size: 16px;
	color: #0b1722;
}

.job-details-right {
	display: grid;
	gap: 6px;
	font-size: 13px;
	color: rgba(11, 23, 34, 0.75);
}

.job-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10050;
}

.job-modal.open {
	display: flex;
}

.job-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 12, 20, 0.6);
}

.job-modal-card {
	position: relative;
	background: #0f1b26;
	border: 1px solid #1b2633;
	border-radius: 16px;
	padding: 22px;
	width: min(560px, calc(100% - 32px));
	color: #fff;
	z-index: 1;
}

.job-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 22px;
	cursor: pointer;
}

.job-modal-sub {
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	margin: 4px 0 14px;
}

.job-field {
	display: grid;
	gap: 6px;
	margin-bottom: 12px;
	font-size: 13px;
}

.job-field input,
.job-field textarea {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 10px 12px;
	color: #fff;
}

.job-success {
	display: none;
	margin-top: 10px;
	color: var(--accent);
	font-size: 13px;
}

@media (max-width: 720px) {
	.job-summary {
		flex-direction: column;
		align-items: flex-start;
	}

	.job-row.open .job-details {
		grid-template-columns: 1fr;
	}
}

.hero-nav-switch {
	display: none;
}

@media (max-width: 720px) {
	.hero-nav-caption {
		display: none;
	}

	.hero-nav-switch {
		display: inline-flex;
		-webkit-appearance: none;
		appearance: none;
		background: rgba(255, 255, 255, 0.1);
		border: 0;
		color: #fff;
		font-size: 12px;
		font-weight: 600;
		padding: 6px 28px 6px 12px;
		border-radius: 999px;
		letter-spacing: 0.3px;
		cursor: pointer;
		background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.8) 50%),
			linear-gradient(135deg, rgba(255, 255, 255, 0.8) 50%, transparent 50%);
		background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
		background-size: 5px 5px, 5px 5px;
		background-repeat: no-repeat;
	}

	.hero-nav-switch option {
		color: #0b1722;
	}
}

/* sticky bar that stays in flow until its top hits the viewport top */
#quicklinks {
	position: sticky;
	top: 0;
	/* sticks to top when reached */
	z-index: 99;
	transition: opacity 0.2s, transform 0.2s;
}

#quicklinks.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
}

section#vanity {}

.headline {
	padding: 20px 40px;
	margin: 0px 150px;
	text-align: center;
}

.headline a {
	display: none;
}

section#vanity h2,
section#demo h2,
#inventory-first h2 {
	font-size: 3.5rem;
	text-align: center;
}

section#vanity p,
section#demo p {
	text-align: center;
}

.vanity-image {
	max-height: calc(100vh - 120px);
	overflow: hidden;
}

.vanity-image img {
	width: 80%;
	margin: 0 auto;
	border-radius: 7px 7px 0 0;
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
}

.spacing {
	margin: 30px auto;
	width: 70%;
}

.pscroll {
	position: relative;
	overflow: unset;
}

.cscroll {
	width: max-content;
	margin: 0 auto;
}

.slogo {
	background: url(https://cdn.mystockly.store/images/klarity_white_web_600w.png) -45px 45% no-repeat;
	width: 100%;
	height: 100%;
	background-size: 195px;
	/* padding: 0 0px; */
}

.fslogo {
	background: url(https://cdn.mystockly.store/images/klarity_white_web_600w.png) -42px 47% no-repeat;
	width: 280px;
	height: 40px;
	background-size: 70%;
}


@media (max-width: 720px) {

	.cookie-inner,
	.cookie-actions {
		display: flex;
	}

	#progressFill {
		display: none;
	}

	.slogo {
		background: url(https://cdn.mystockly.store/images/klarity_white_web_600w.png) -39px 50% no-repeat;
		width: 100%;
		/* height: 60px; */
		background-size: 65%;
	}


	.pscroll {
		overflow-x: scroll;
	}

	.spacing {
		width: unset;
	}

	section#vanity {}

	.headline {
		padding: 0px 0 30px 0px;
		margin: 0px 30px;
	}

	.headline a {
		display: block;
		width: 60%;
		margin: 4vh auto 0 auto;
	}

	section#vanity h2,
	section#demo h2,
	#inventory-first h2 {
		font-size: 2.5rem;
	}

	.vanity-image {}

	.vanity-image img {
		border-radius: 3px 3px 0 0;
	}

	#domains .domain-field {
		grid-template-columns: 80px 120px 110px;
	}
}

/* Trigger button – adjust if you already have .btn-primary */
#videoTrigger {
	/* display: inline-flex; */
	/* align-items: center; */
	/* justify-content: center; */
	/* padding: 0.75rem 1.5rem; */
	/* border-radius: 999px; */
	/* border: none; */
	/* background: #4DD2FF; */
	/* Stockly light blue */
	/* color: #0B1722; */
	/* Stockly dark blue */
	/* font-weight: 600; */
	font-size: 0.95rem;
	cursor: pointer;
	/* transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; */
	margin: 20px 0 20px 0;
}

#videoTrigger:hover {
	/* transform: translateY(-1px); */
	/* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); */
}

#videoTrigger:active {
	transform: translateY(0);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* "Watch again" text link */
#watchAgain {
	margin-left: 0.75rem;
	font-size: 0.85rem;
	color: #0b1722;
	text-decoration: none;
	cursor: pointer;
}

/* Modal overlay */
.modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
}

.video-footnote {
	width: 50%;
	font-size: 12px;
	color: #66d1fc;
	margin: 0 auto;
	text-align: center;
}

/* Modal content wrapper */
.modal-content {
	position: relative;
	margin: 4% auto;
	width: 90%;
	max-width: 1000px;
	background: #0b1722;
	/* dark blue frame */
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

/* Close (X) button */
.close {
	position: absolute;
	top: 10px;
	right: 16px;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #ffffff;
	opacity: 0.8;
	z-index: 2;
}

.close:hover {
	opacity: 1;
}

/* Video should fill the modal neatly */
#stocklyVideo {
	display: block;
	width: 100%;
	height: auto;
	outline: none;
}

/* Small tweak for mobile */
@media (max-width: 600px) {
	.video-footnote {
		font-size: 10px;
		margin-top: 15px;
	}

	.modal-content {
		margin: 10% auto;
		width: 94%;
		border-radius: 14px;
	}

	#videoTrigger {
		width: auto;
		font-size: 0.9rem;
		margin-bottom: 0;
	}
}

.recommended {
	background: #4dd2ff;
	padding: 7px 10px 7px 10px;
	border-radius: 20px;
	color: #0b1722;
	position: absolute;
	right: 12px;
	font-size: 14px;
	top: 12px;
}

.request {
	position: absolute;
	bottom: 30px;
}

.prel {
	position: relative;
	padding-bottom: 120px !important;
}

.recH {
	padding-bottom: 0;
}

.country-select {
	background: #242e40;
	color: #ffffff;
	border-radius: 999px;
	border: none;
	padding: 3px 32px 3px 3px;
	font-size: 14px;
	outline: none;
	cursor: pointer;

	/* hide default arrow */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	font-weight: bold;
}

/* Optional: add your own arrow */
.country-select {
	background-image: linear-gradient(45deg, transparent 50%, #ffffff 50%),
		linear-gradient(135deg, #ffffff 50%, transparent 50%);
	background-position: calc(100% - 14px) 45%, calc(100% - 9px) 45%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* Dropdown list items */
.country-select option {
	background: #0b1722;
	/* dark dropdown */
	color: #fff;
}

/* Optional: non-selected hover (Firefox/Chrome respect this) */
.country-select option:hover {
	background: #111e30;
}

video.showcasevid {
	scale: 1.0;
}

.pindex {
	border-top: 1px solid #71dbff;
	border-bottom: 1px solid #71dbff;
	padding: 0px 0 10px 0px;
	display: grid;
	justify-content: space-between;
	align-items: baseline;
	grid-template-columns: 1fr 120px;
}