/* ===========================================
	This file is for use by page creators,
	to add custom CSS specific to their design.
=========================================== */

.gap-8 {
	gap: 2rem;
}

/* Hero */

.hero-button {
background-image: linear-gradient(156deg, #4240c2,#df45ff);
border: outset 2px #c395ff;
border-radius: 8px;
transition: cubic-bezier(.47,0,.74,.71) 300ms background;
background-size: 140% 100%;
background-position: center left;
}
.hero-button:hover {
background-position: center right;
}

.hero-author-byline picture {
	width: min(4.5rem, 12.5vw);
	width: clamp(45px, 12.5vw, 4rem);
}

[data-section-id="1705588347986"] .section.section.background-image {
	background-image: linear-gradient(90deg, transparent, var(--section-bg-color)),var(--section-bg-image);
}

/* Intro section */
[data-section-id="1705169055813"] .section.background-image {
	background-image: linear-gradient(1deg, rgb(212 238 252 / 65%), rgb(196 235 255 / 92%)),var(--section-bg-image);
	background-blend-mode: lighten;
}
.intro-product-img {
	max-width: 19rem;
}
.intro-product-img picture::after {
	display: block;
	font-size: 1.125rem;
	font-weight: 600;
	color: rgb(var(--rgb-neutral-dark));
	height: auto;
	line-height: 1;
	text-align: center;
	width: 100%;
	position: relative;
}

.healy > picture::after {
	content: "Healy";
	top: -1rem;
}
.maghealy > picture::after {
	content: "MagHealy";
	top: -0.7rem;
	left: -0.5rem;
}
.intro-product-img.maghealy img {
	filter: drop-shadow(5px -1px 5px #858B93);
}
@media (min-width: 640px) {
	.intro-product-img.maghealy img {
		filter: drop-shadow(8px -1px 9px #858B93);
	}
	.maghealy > picture::after {
		top: -1rem;
	}
}


/* 4 questions */
.section.healy-intro-questions {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
}
@media (min-width: 1024px) {
	.section.healy-intro-questions {
		display: grid;
		grid-template-columns: 1fr calc(696px + (-1024px + 100vw)/3) 1fr;
		grid-template-rows: calc(65rem - (100vw - 1024px)/4) min-content;
	}
	.questions-wrapper > .blocktype-text {
		width: 50%;
	}
	.healy-intro-questions .blocktype-cta {
		grid-column-start: 2;
	}
	#block-1705597924954 {
		align-self: end;
		margin-bottom: min(20%, 4rem);
	}
}
@media (min-width: 1620px) {
	.section.healy-intro-questions {
		grid-template-columns: 1fr calc(960px + (-1440px + 100vw)/3) 1fr;
		grid-template-rows: max(calc(50rem - (100vw - 1620px)/4),600px) min-content;
	}
}

/* bullets */
.bullets-primary-muted,
.bullets-primary-muted .prose {
--tw-prose-bullets: rgba( var(--rgb-primary), 0.6 );
}

/* Image */
.offset-shadow {filter: drop-shadow(10px 10px 0px #91d2ed);}

/* FAQ section */

.section.faqs.background-gradient {
	background-image: linear-gradient(34deg, rgb(122 249 250 / 86%), rgb(242 255 255 / 70%)),linear-gradient(332deg, #5581f4, #e0f0ff);
}

/* FAQ component */
.faq {
	padding-bottom: 0.5rem;
	max-width: 50rem;
}
.faq .accordion-summary {
list-style: none;
}
.faq .accordion-summary::-webkit-details-marker {
display: none;
}
.faq .accordion-summary::marker {
display: none;
}
.faq summary:focus {
outline: none;
}
.faq .accordion-summary::before,
.faq .accordion-content::before {
display: table-cell;
font-family: var(--font-family-display);
font-weight: 700;
font-size: 2.25rem;
padding-right: 0.5rem;
padding-left: 1rem;
line-height: 1;
vertical-align: top;
}
.faq .accordion-summary::before {
color: rgba( var(--rgb-primary));
content: "Q.";
}
.faq .accordion-content::before {
content: "A.";
color: rgb(var(--rgb-action));
padding-top: 0.5rem;
}
.faq[open] .accordion-toggle svg {
transform: rotate(
90deg);
}
.faq .toggle-close,
.faq .toggle-open {
font-variant: small-caps;
text-transform: lowercase;
}
.faq[open] .toggle-open {
display: none;
}
.faq[open] .toggle-close {
display: inline;
}
.faq .accordion-toggle {
	color: rgba( var(--rgb-action));
}

/* For / Against */
.bullet-check {
--bullet-icon-size: 1em;
--bullet-icon-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd' /%3E%3C/svg%3E");
--bullet-icon-transform: translateY(-0.33em);
}
.bullet-ban {
--bullet-icon-size: 1em;
--bullet-icon-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
--bullet-icon-transform: translateY(-0.33em);
}
.bullet-star {
--bullet-icon-size: 1em;
--bullet-icon-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.645c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
--bullet-icon-transform: translateY(-0.4em);
}

.bullet-green {
	--bullet-icon-color: #10B981;
}
.bullet-red {
	--bullet-icon-color: #F43F5E;
}


/* Testimonials carousel */
.carousel {
	--carousel-item-width: 67vw;
	--carousel-items-shown: 1;
	--carousel-gap: 2rem;
	display: flex;
	flex-direction: row;
	height: -moz-max-content;
	height: max-content;
	max-height: -moz-max-content;
	max-height: max-content;
	overflow: auto;
	scroll-snap-points-y: repeat(100%); /* old specification */
	scroll-snap-type: x mandatory;
	scroll-snap-align: left;
	scroll-behavior: smooth;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	padding-left: 1rem;
	padding-right: 1rem;
	gap: var(--carousel-gap);
}
.carousel::-webkit-scrollbar {
	display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.carousel .blocktype-testimonial {
	min-width: var(--carousel-item-width);
	scroll-snap-align: center;
	filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
}

.carousel .blocktype-testimonial:first-of-type {
	margin-left: calc(50vw - var(--carousel-item-width)/2);
}
.carousel .blocktype-testimonial:last-of-type {
	margin-right: calc(50vw - var(--carousel-item-width)/2);
}

@supports (scroll-padding: calc(100vw - var(--carousel-item-width))) {
	.carousel {
		scroll-padding: calc(
				(
						100vw - (
								var(--carousel-item-width) * var(--carousel-items-shown)
								+ var(--carousel-gap) * ( var(--carousel-items-shown) - 1 )
						) 
				) / 2 
		);
		padding-left: 0;
		padding-right: 0;
	}
	.carousel .blocktype-testimonial:first-of-type {
		scroll-snap-align: start;
	}
}

@media (min-width: 640px) {
	.carousel {
			--carousel-item-width: 50vw;
	}   
}
@media (min-width: 1024px) {
	.carousel {
			--carousel-item-width: 40vw;
			--carousel-items-shown: 2;
	}
}
@media (min-width: 1440px) {
	.carousel {
			--carousel-item-width: 27vw;
			--carousel-items-shown: 3;
	}
}

/* dim carousel items at edge */
@supports (background: linear-gradient(var(--overlay-gradient-direction), rgb(0 11 24 / 40%), 24%, rgb(0 11 24 / 0%))) {
	div#section-1705585638221 {
			position: relative;
	}
	.carousel::before,
	.carousel::after {
			content: "";
			position: absolute;
			top: 0px;
			bottom: 0px;
			width: 5%;
			z-index: 3;
			background: linear-gradient(var(--overlay-gradient-direction), rgb(0 11 24 / 40%), 24%, rgb(0 11 24 / 0%));
	}
	.carousel::before {
			left: 0;
			--overlay-gradient-direction: to right;
	}
	.carousel::after {
			right: 0;
			--overlay-gradient-direction: to left
	}   
}


/* Carousel nav */
.carousel-nav button.next,
.carousel-nav button.prev {
	display: block;
	--carousel-button-width: 2rem;
	width: var(--carousel-button-width);
	height: auto;
	position: absolute;
	top: 50%;
	z-index: 5;
	color: #07fefd;
	background: #002f3c;
	border-radius: var(--carousel-button-width);
	padding: calc(var(--carousel-button-width)/10);
	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
}
.carousel-nav button.next {
	right: calc(var(--carousel-button-width)/4);
	left: auto;
}
.carousel-nav button.prev {
	left: calc(var(--carousel-button-width)/4);
	right: auto;
}

.carousel-nav ol {
	display: flex;
	flex-direction: row;
	gap: 0.25rem;
}
.carousel-nav ol li {
	list-style: none;
}
.carousel-nav ol li a {
	display: block;
	height: 0.8rem;
	width: 0.8rem;
	border: 2px solid white;
	border-radius: 100%;
}
.carousel-nav ol li.selected a {
	background: white;
}


.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}