#intro {
	padding: calc(var(--spacingLarge) * 3) 0 var(--spacingLarge);
}
@media (min-width: 1100px) {
	#intro {
		padding-top: calc(var(--spacingLarge) * 2);
	}
}

#intro .container {
	display: flex;
	align-items: center;
	color: #FFF;
}
@media (max-width:699px) {
	#intro .container {
		flex-direction: column;
	}
}
#introText {
	max-width: 50ch;
}
h1 {
	color: #FFF;
	font-weight: 600;
	line-height: 1.3;
}
h1 em {
	display: block;
	margin-bottom: 0.1em;
	font: normal 1.5em/1 Caveat, cursive;
	letter-spacing: -0.02em;
}
#introText .button.large {
	margin: var(--spacingSmall) 0;
	margin: 1rem 0;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.button.large + p {
	font-size: 0.7em;
}


#introPic {
	margin-right: calc(var(--spacing) * -1);
}
@media (max-width:699px) {
	#introPic {
		margin-left: calc(var(--spacing) * -1);
	}
}
#introPic img {
	width: 900px;
}

#featureBoxes {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--spacing);
	margin-bottom: var(--spacingLarge);
}
@media (max-width:699px) {
	#featureBoxes {
		display: flex;
		flex-direction: column;
	}
}

#featureBoxes .panel {
	margin: 0;
	padding: 1.6em 2em 2em;
	max-width: 100%;
}
@media (min-width: 700px) {
	.panel.invoicing {
		grid-column-start: span 2;
	}
}
#featureBoxes h3 {
	position: relative;
	margin: 0 0 0.5em;
	padding-left: 1.1em;
}
#featureBoxes h3::before {
	content: "\f571"; /* file-invoice-dollar */
	position: absolute;
	top: 0.25em;
	left: 0;
	color: var(--green);
	font: 0.8em "Font Awesome 6 Free";
}
#featureBoxes .quoting h3::before {
	content: "\f1ec"; /* calculator */
}
#featureBoxes .expenses h3::before {
	content: "\f543"; /* receipt */
}
#featureBoxes .clients h3::before {
	content: "\f2b9"; /* address-book */
	transform: scaleX(85%);
	transform-origin: 0;
}
#featureBoxes .accounting h3::before {
	content: "\f201"; /* chart-line */
	transform: scaleX(85%);
	transform-origin: 0;
}


@media (min-width: 700px) {
	.panel.invoicing ul {
		columns: 2;
	}
}

#featureBoxes li {
	position: relative;
	padding-left: 1em;
}
#featureBoxes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	display: block;
	width: 0.5em;
	height: 0.5em;
	border: var(--border);
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
}
#featureBoxes + div {
	text-align: center;
	margin-bottom: var(--spacingXLarge);
}


#snap {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacingSmall);
	padding: var(--spacingSmall) var(--spacingLarge);
	background: #FFF;
}
#snap img {
	width: 100px;
}
#snap p {
	margin: 0;
}
#snap p strong {
	display: block;
	font-weight: bold;
}
#snap .button {
	white-space: nowrap;
}
@media (max-width:699px) {
	#snap {
		flex-direction: column;
		padding: var(--spacingLarge);
		text-align: center;
	}
}


#slider {
	padding: var(--spacingLarge) 0;
	background: var(--text);
	color: #FFF;
}
#slider .container.slick-initialized .slick-slide {
	display: flex;
	gap: var(--spacing);
	align-items: center;
	justify-content: space-between;
}

#slider .slick-slide img {
	width: 55%;
}
/*@media (min-width: 700px) and (max-width: 1200px) {
	#slider .slick-slide img {
		width: 50%;
	}
}*/
@media (max-width: 699px) {
	#slider .slick-slide img {
		width: 100%;
	}
}
#slider h2 {
	margin: 0 0 var(--spacing);
	max-width: 27em;
	color: #FFF;
	font-size: calc(1rem + 1.5vw);
	line-height: 1.4;
	text-align: left;
}
@media (max-width: 699px) {
	#slider .container.slick-initialized .slick-slide {
		flex-direction: column-reverse;
		gap: 0;
		text-align: center;
	}
	#slider h2 {
		max-width: 60em;
		font-size: calc(1rem + 1.5vw);
		text-align: center;
	}
	#slider h2 br:first-of-type {
		display: none;
	}
}

#slider h2 a {
	position: relative;
	overflow: hidden;
	display: inline-block;
	padding-bottom: 0.1em;
	text-underline-offset: -1em;
	text-decoration-color: var(--greenTint);
	text-decoration-thickness: 1.3em;
	text-decoration-skip-ink: none;
}
#slider h2 a::after {
	/*content: "";*/
	position: absolute;
	bottom: -10px;
	display: block;
	width: 100%;
	height: 0.5em;
	border: 4px solid var(--green);
	border-radius: 100%;
	transform: skew(5deg, -0.5deg);
}
#slider .button.large {
	margin: 0;
}



/* ============================== slick slider ============================== */

.slick-arrow {
	display: block;
	position: absolute;
	top: 50%;
	z-index: 1;
	margin-top: -30px !important;
	width: 60px;
	height: 60px;
	font-size: 0;
}
.slick-arrow {
	background: none;
	border: none;
}
.slick-prev {
	left: calc(var(--spacingSmall) * -0.5);
}
.slick-next {
	right: calc(var(--spacingSmall) * -0.5);
}
@media (max-width: 1700px) {
	.slick-prev {
		left: 0;
	}
	.slick-next {
		right: 0;
	}
}


.slick-arrow::before {
	content: '';
	position: absolute;
	top: 10px;
	width: 30px;
	height: 30px;
	border-top: 2px solid rgba(255,255,255,0.3);
	border-right: 2px solid rgba(255,255,255,0.3);
	filter: drop-shadow(2px -1px rgba(0,0,0,0.3));
}
.slick-prev::before {
	left: 20px;
	transform: rotate(-135deg);
}
.slick-next::before {
	right: 20px;
	transform: rotate(45deg);
}
.slick-arrow::after {
	content: none;
}


.testimonials .spacer {
	padding: 0 calc(var(--spacing) / 2);
}
.testimonials blockquote {
	position: relative;
	margin: 0;
	padding: 0.5em 0.5em 0.5em 2.5em;
}
.testimonials blockquote::before {
	content: "❝";
	position: absolute;
	left: 0;
	font-size: 4em;
	line-height: 0.75;
	opacity: 0.2;
}
.testimonials blockquote p {
	position: relative;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0;
	font-style: italic;
}
.testimonials a {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.7em;
	padding: 0.68em 1.2em 0.95em 0;
	background: linear-gradient(to left, white 10em, transparent);
	font-size: 0.7em;
	font-style: normal;
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--borderColour);
}
.testimonials a::after {
	content: "→";
	position: absolute;
	top: 43%;
	right: 0;
	z-index: 2;
	background: yellow;
	font-family: monospace;
	font-size: 1rem;
	line-height: 0;
}

#testimonials > div:has(.button.large) {
	padding: var(--spacing) 0 var(--spacingXLarge);
	text-align: center;
}


#partners {
	padding: var(--spacingLarge) 0;
	background: #FFF;
}
#partners .container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing);
	justify-content: space-between;
	align-content: center;
}
#partners img {
	height: 1.8rem;
}
@media (max-width: 1150px) {
	#partners .container {
		justify-content: center;
	}
}