@import url( "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" );
@import url( "https://fonts.googleapis.com/css2?family=Anton&display=swap" );

:root {
	--color-light: #fff;
	--color-dark: #135;
	--dark: var( --color-dark );
	--light: var( --color-light );
}

@media ( prefers-color-scheme: light ) {
	:root {
		--dark: var( --color-dark );
		--light: var( --color-light );
	}
}

@media ( prefers-color-scheme: dark ) {
	:root {
		--dark: var( --color-light );
		--light: var( --color-dark );
	}
}

* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	font-family: Poppins, sans-serif;
}
body {
	padding: 0;
	margin: 0;
	width: 100%;
	scroll-behavior: smooth;
	font-weight: 400;
	font-style: normal;
	font-size: 16pt;
	background: var( --light );
	color: var( --dark );
}
.skip {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 1000;
}
.skip:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	padding: 8px 12px;
	background: var(--dark);
	color: var(--light);
	text-decoration: none;
	border-radius: 4px;
	/* font-weight: bold; */
}
section figure {
	display: block;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
}
img, svg {
	cursor: default;
}
svg path {
	fill: var( --dark );
}
svg polygon {
	stroke: var( --dark );
	stroke-width: 4px;
	fill: none;
}
.logo {
	fill: var( --dark );
}
span.nowrap {
	white-space: nowrap;
}
a:link, a:visited, a:active {
	color: var( --dark );
	text-decoration: none;
}
a:hover {
	color: var( --dark );
	text-decoration: underline;
}
/* Focus indicators for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var( --dark );
	outline-offset: 2px;
}
header {
	display: flex;
}
header figure {
	width: 200px;
}
#jaby_logo {
	width: 200px;
	height: auto;
}
header figure img {
	width: 100%;
}
footer {
	width: 100%;
	padding: 0;
}
footer ul {
	width: 100%;
	list-style-type: none;
	margin: 1rem auto;
	padding: 0;
	text-align: center;
}
footer ul > li {
	padding: 0.5rem;
	display: inline-block;
}
/* Ensure touch targets are at least 44px */
footer ul > li a {
	display: inline-block;
	min-width: 44px;
	min-height: 44px;
	padding: 8px;
}
footer ul > li a svg {
	width: 3rem;
	height: 3rem;
	display: block;
}
footer p {
	margin: 2rem auto;
	color: var( --dark );
	text-align: center;
	vertical-align: middle;
}
#copyright {
	font-size: 1rem;
}
aside {
	margin: 2rem 2rem 0 2rem;
}
main {
	margin: 0 2rem 2rem 2rem;
}
h1, h2, h3, h4, h5, h6 {
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 1px;
}
section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-inline-start: 0;
	padding-block-start: 0;
	padding-block-end: 0;
}
h1 {
	font-size: 3rem;
}
h2 {
	font-size: 2.75rem;
}
h3 {
	font-size: 2rem;
}
h4 {
	font-size: 1.5rem;
}
h5 {
	font-size: 1.25rem;
}
h6 {
	font-size: 1rem;
}
.svg-heading {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5em 1em;
	overflow: hidden;
	height: 6em;
	color: var( --light );
}
.svg-heading svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}
.svg-heading span {
	background-color: var( --light );
	color: var( --dark );
	text-transform: uppercase;
	padding: 0.1em 0.5em;
}
.center {
	text-align: center;
}
.hidden {
	display: none;
}
.transition {
	transition: opacity 1s ease-in;
}
.content {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}
.card {
	display: flex;
	flex-direction: row;
	text-align: left;
	justify-content: center;
	align-items: center;
	gap: 30px;
	padding: 2rem;
}
.white {
	background-color: var( --light );
	color: var( --dark );
}
.jaby-logo-color {
	margin: 0 auto;
	color: var( --dark );
}
.border {
	border: 0.3rem var( --dark ) solid;
	border-radius: 2rem;
}
article {
	width: 90%;
	padding: 0 1rem;
	margin: 0 5rem 10rem 5rem;
}
article * {
	text-align: left;
}
section {
	width: 100%;
	padding: 0 2rem;
	margin: 20rem auto;
}
aside section {
	width: 100%;
	padding: 0;
	margin: 0;
}
section h2 {
	margin: 2rem auto;
	text-align: center;
}
section ul {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-inline-start: 0;
	padding-block-start: 0;
	padding-block-end: 0;
}
ul.card-tiles {
	display: grid;
	margin: 5rem 0;
	gap: 2rem;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
}
ul.card-tiles li {
	border: 0.3rem var( --dark ) solid;
	padding: 2em 1em;
	text-align: center;
}
ul.image-tiles {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 5rem 0;
	list-style: none;
}
ul.image-tiles > li {
	margin: 0 auto;
}
ul.image-tiles > li figure {
	min-width: 10rem;
	max-width: fit-content;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
}
ul.image-tiles > li figcaption {
	padding: 0 3rem;
	margin: 0 1rem;
}
ul.image-tiles > li:nth-child(even) figcaption {
	order: -1;
}
ul.image-tiles > li figcaption ul {
	list-style-type: none;
}
ul.image-tiles > li figure svg {
	max-width: 10rem;
}
section > figure {
	position: relative;
	max-width: 35rem;
	width: 75%;
	text-align: center;
	margin: 0 auto;
}
#hero {
	margin-top: 0;
	margin-bottom: 10rem;
}
#animateLogo > figcaption {
	position: absolute;
	top: 30%;
	left: 0;
}
#animateLogo > figcaption > h2 {
	font-size: clamp( 0.5rem, 10vw, 5rem );
	white-space: nowrap;
	background-color: var( --light );
	color: var( --dark );
	text-transform: uppercase;
	padding: 0.1em 0;
	line-height: 1;
	margin: 0 0 0.1em 0;
}
#animateLogo > figcaption > h4 {
	font-size: clamp( 0.25rem, 5vw, 2rem );
	font-family: Poppins, sans-serif;
	font-weight: bold;
	background-color: var( --light );
	color: var( --dark );
	line-height: 1;
	padding: 0.25rem 0;
}
#animateLogo > figcaption > img {
	position: absolute;
	width: 50%;
	left: 7%;
	top: 100%;
}
#glow-bg {
	width: 90%;
	margin: 0 auto;
	display: flex;
	position: absolute;
	top: 40%;
	justify-content: space-between;
	height: 50rem;
	z-index: 0;
}
.glowing-image {
	width: 4px;
	height: 300px;
	position: relative;
	background: linear-gradient(
		0deg,
		rgba(17, 51, 85, 1) 0%,
		rgba(1, 223, 127, 1) 29%,
		rgba(244, 199, 49, 1) 72%,
		rgba(255, 155, 25, 1) 100%
	);

	border-radius: 5px; /* Tapering effect at the end */
	clip-path: polygon(
		0% 0%,
		100% 0%,
		50% 100%
	); /* Tapered effect at the bottom */
}
hr {
	border: none;
	height: 1px;
	border-top: 1px solid var( --dark );
	margin: 3rem 20%;
}
img.screenshot {
	min-width: 20rem;
	max-width: 40rem;
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}
.jaby-logo-color {
	width: 75%;
}
.jaby-logo-color svg {
	width: 100%;
	height: auto;
}
.hide-visibility {
	opacity: 0;
}
.no-js .hidden,
.no-js .hide-visibility {
	display: block !important;
	opacity: 1 !important;
}
.animateLogoIcon {
	scale: 1;
	animation: growRotate 2s ease-out forwards;
}
#pricing {
	margin: 0 auto;
	align-items: center;
	display: grid;
	gap: 3rem;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
}
#pricing ul
{
	list-style: none;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	align-items: center;
	grid-auto-rows: 1fr;
}
#pricing ul li {
	border: 1px var( --dark ) solid;
	border-radius: 0.5em;
	padding: 20px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
#evolving > div {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(2, 1fr);
}

@keyframes growRotate {
	0% {
		transform: scale(0) rotate(0deg);
	}
	100% {
		transform: scale(1) rotate(360deg);
	}
}
/* Reduced motion support for all keyframe animations */
@keyframes glow {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
	}
}

@keyframes shine {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 100%;
	}
}

@keyframes move {
	0% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(10px);
	}
}

@media (max-width: 1000px) {
	body {
		font-size: 14pt;
	}
	.content {
		width: 90%;
	}
	article {
		width: 100%;
		padding: 0;
		margin: 0 auto 10rem auto;
	}
	section {
		padding: 1rem;
		margin: 10rem auto;
	}
	ul.card-tiles {
		grid-template-columns: repeat(1, 1fr);
	}
	ul.image-tiles > li {
		padding: 2rem 0;
	}
	ul.image-tiles > li figure {
		flex-direction: column;
	}
	ul.image-tiles > li figure svg {
		max-width: 8rem;
		max-height: 15rem;
	}
	ul.image-tiles > li figcaption {
		padding: 0 1rem;
		margin: 0 0.5rem;
	}
	ul.image-tiles > li:nth-child(even) figcaption {
		order: unset;
	}
	#pricing {
		grid-template-columns: repeat(1, 1fr);
		flex-direction: column;
		grid-auto-rows: unset;
	}
	#evolving > div {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 640px) {
	body {
		font-size: 12pt;
	}
	.content {
		width: 100%;
	}
	article {
		width: 90%;
		padding: 0 1rem;
		margin: 0 0 10rem 0;
	}
	article.border {
		border: none;
	}
	section {
		padding: 0;
	}
	header {
		width: 100%;
		flex-direction: row-reverse;
	}
	header figure {
		width: 120px;
	}
	ul.image-tiles {
		padding: 1rem 0;
	}
	ul.image-tiles > li figure svg {
		max-width: 5rem;
		max-height: 10rem;
	}
	ul.image-tiles > li figcaption {
		padding: 0;
		margin: 0;
	}
	ul.card-tiles {
		grid-template-columns: repeat(1, 1fr);
	}
	#pricing ul {
		grid-template-columns: repeat(1, 1fr);
	}
	.svg-heading svg {
		display: none;
	}
}

/* High contrast mode improvements - Light mode */
@media (prefers-contrast: more) and (prefers-color-scheme: light), 
       (forced-colors: active) and (prefers-color-scheme: light) {
	:root {
		--dark: #000 !important;
		--light: #fff !important; 
	} 
	body {
		background: var( --light ) !important;
		color: var( --dark ) !important;
	}
	.border, ul.card-tiles li, #pricing ul li {
		border-color: var( --dark ) !important;
		border-width: 2px !important;
	}
	a:link, a:visited {
		color: var( --dark ) !important;
		text-decoration: underline !important;
	}
	a:hover, a:focus {
		background: var( --dark ) !important;
		color: var( --light ) !important;
	}
	a:focus,
	button:focus,
	input:focus,
	textarea:focus,
	select:focus {
		outline: 3px solid var( --dark ) !important;
		outline-offset: 3px !important;
	}
	svg path, .logo {
		fill: var( --dark ) !important;
	}
	svg polygon {
		stroke: var( --dark ) !important;
	}
	hr {
		border-top: 2px solid var( --dark ) !important;
	}
	#animateLogo > figcaption > h2,
	#animateLogo > figcaption > h4,
	.svg-heading span {
		background-color: var( --light ) !important;
		color: var( --dark ) !important;
	}
	footer p, #copyright {
		color: var( --dark ) !important;
	}
	#glow-bg {
		display: none;
	}
}

/* High contrast mode improvements - Dark mode */
@media (prefers-contrast: more) and (prefers-color-scheme: dark), 
       (forced-colors: active) and (prefers-color-scheme: dark) {
	:root {
		--dark: #fff !important;
		--light: #000 !important; 
	} 
	body {
		background: var( --light ) !important;
		color: var( --dark ) !important;
	}
	.border, ul.card-tiles li, #pricing ul li {
		border-color: var( --dark ) !important;
		border-width: 2px !important;
	}
	a:link, a:visited {
		color: var( --dark ) !important;
		text-decoration: underline !important;
	}
	a:hover, a:focus {
		background: var( --dark ) !important;
		color: var( --light ) !important;
	}
	a:focus,
	button:focus,
	input:focus,
	textarea:focus,
	select:focus {
		outline: 3px solid var( --dark ) !important;
		outline-offset: 3px !important;
	}
	svg path, .logo {
		fill: var( --dark ) !important;
	}
	svg polygon {
		stroke: var( --dark ) !important;
	}
	hr {
		border-top: 2px solid var( --dark ) !important;
	}
	#animateLogo > figcaption > h2,
	#animateLogo > figcaption > h4,
	.svg-heading span {
		background-color: var( --light ) !important;
		color: var( --dark ) !important;
	}
	footer p, #copyright {
		color: var( --dark ) !important;
	}
	#glow-bg {
		display: none;
	}
}

/* Fallback for systems that don't report color scheme preference */
@media (prefers-contrast: more), (forced-colors: active) {
	#glow-bg {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.animateLogoIcon {
		animation: none;
		transform: scale(1) rotate(0deg);
	}
	.transition {
		transition: none;
	}
	.glowing-image {
		animation: none;
	}
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	@keyframes glow {
		0%, 100% {
			opacity: 1;
		}
	}
}

@media print {
	:root {
		--dark: #000;
		--light: #fff;
	}
	hr {
		border-top: 1px solid #000 !important;
	}
	html {
		--base-url: "https://jaby.com";
	}
	a[href*="://"]::after,
	a:not([href^="/"]):not([href^="#"]):not([href^="mailto"])::after
	{
		content: " (" attr(href) ")";
	}
	a[href^="/"]:not([href*="://"]):not([href^="#"]):not([href^="mailto"])::after {
		content: " (" var(--base-url) attr(href) ")";
	}
	body {
		font-size: 14pt;
	}
	.content {
		width: 90%;
	}
	article {
		width: 100%;
		padding: 0;
		margin: 0 0 10rem 0;
	}
	article.border {
		border: none;
	}
	section {
		padding: 1rem;
		margin: 10rem auto;
	}
	ul.card-tiles {
		grid-template-columns: repeat(1, 1fr);
	}
	ul.image-tiles > li {
		padding: 2rem 0;
	}
	ul.image-tiles > li figure {
		flex-direction: column;
	}
	ul.image-tiles > li figure svg {
		max-width: 8rem;
		max-height: 15rem;
	}
	ul.image-tiles > li figcaption {
		padding: 0 1rem;
		margin: 0 0.5rem;
	}
	ul.image-tiles > li:nth-child(even) figcaption {
		order: unset;
	}
	#pricing {
		grid-template-columns: repeat(1, 1fr);
		flex-direction: column;
		grid-auto-rows: unset;
	}
	#evolving > div {
		grid-template-columns: repeat(1, 1fr);
	}
	h2.svg-heading {
		page-break-after: always;
		break-after: always;
	}
	#pricing-plans,
	ul.card-tiles > li,
	ul.image-tiles > li {
		page-break-inside: avoid;
		break-inside: avoid;
	}
	section,
	#pricing-plans,
	#different ul.card-tiles,
	ul.image-tiles > li,
	footer {
		page-break-before: always;
		break-before: always;
	}
	aside section {
		page-break-before: unset;
		break-before: unset;
	}
	.hidden {
		display: block;
	}
	.hide-visibility {
		opacity: 1;
	}
	#glow-bg {
		display: none;
	}
}