@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800&display=swap');

/* =========================================================
RESET
========================================================= */

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

html{
	scroll-behavior:smooth;
}

body{
	margin:0;
	background:#fff;
	font-family:"Source Sans 3",Arial,sans-serif;
	font-size:18px;
	font-weight:400;
	line-height:1.55;
	color:#333a34;
}

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

button,
input,
textarea,
select{
	font:inherit;
}

a{
	color:inherit;
}

:focus-visible{
	outline:3px solid #111;
	outline-offset:4px;
}

/* =========================================================
SKIP LINK / LANDMARK
========================================================= */

.skip-nav{
	position:relative;
	z-index:9999;
}

.skip-link{
	position:absolute;
	left:1em;
	top:-100px;
	z-index:9999;
	padding:.75em 1em;
	background:#111;
	color:#fff;
	font-weight:700;
	text-decoration:none;
}

.skip-link:focus{
	top:1em;
}

/* =========================================================
PAGE
========================================================= */

.container{
	width:min(1380px,92%);
	margin:0 auto;
}

.standalone-reservations{
	--green:#4f5a44;
	--green-dark:#46513b;
	--dark:#171a18;
	--text:#333a34;
	--secondary:#414841;
	--light:#f5f6f3;
	--border:#d9ddd4;

	width:100%;
	padding:3em 0 0;
	background:#fff;
	color:var(--text);
}

.standalone-reservations h1,
.standalone-reservations h2,
.standalone-reservations h3,
.standalone-reservations p{
	margin-top:0;
}

.standalone-reservations h1,
.standalone-reservations h2,
.standalone-reservations h3{
	color:#111;
}

/* =========================================================
EYEBROW
========================================================= */

.reservation-eyebrow{
	margin:0 0 1em;
	font-size:.78em;
	font-weight:800;
	line-height:1.4;
	letter-spacing:.14em;
	color:var(--green);
	text-transform:uppercase;
}

/* =========================================================
HERO
========================================================= */

.reservation-hero{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
	align-items:center;
	gap:4em;
	margin:0 0 4em;
	min-height:650px;
}

.reservation-hero-content{
	position:relative;
	z-index:2;
	padding:1em 0;
}

#reservationlogo{
	width:78px;
	margin:0 0 1.5em;
}

.reservation-hero h1{
	margin:0 0 .65em;
	font-size:3.6em;
	font-weight:800;
	line-height:1.02;
	letter-spacing:-.045em;
	color:#101010;
}

.reservation-hero h1 span{
	display:block;
	margin-top:.35em;
	font-size:.68em;
	font-weight:500;
	line-height:1.1;
	letter-spacing:-.025em;
	color:#3f4938;
}

.reservation-lead{
	max-width:680px;
	margin:0 0 1.5em;
	font-size:1.12em;
	line-height:1.65;
	color:#3f463f;
}

.reservation-price-line{
	display:flex;
	align-items:baseline;
	gap:.6em;
	margin:0 0 .15em;
}

.reservation-price-line strong{
	font-size:2.7em;
	font-weight:800;
	line-height:1;
	color:#111;
}

.reservation-price-line span{
	font-weight:500;
	color:#333;
}

.reservation-small{
	margin:0 0 1.7em;
	font-size:.94em;
	font-weight:600;
	color:#414741;
}

.reservation-actions{
	display:flex;
	flex-wrap:wrap;
	gap:1em;
}

/* =========================================================
BUTTONS
========================================================= */

.reservation-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:50px;
	padding:.85em 1.8em;
	border-radius:10px;
	font-size:.9em;
	font-weight:800;
	letter-spacing:.025em;
	text-decoration:none;
	text-transform:uppercase;
	transition:
		background-color .2s ease,
		border-color .2s ease,
		transform .2s ease;
}

.reservation-button:hover{
	transform:translateY(-2px);
}

.reservation-button.primary{
	background:var(--green-dark);
	border:2px solid var(--green-dark);
	color:#fff;
}

.reservation-button.primary:hover{
	background:#353f2e;
	border-color:#353f2e;
}

.reservation-button.secondary{
	background:#fff;
	border:2px solid #979d93;
	color:#171a18;
}

.reservation-button.secondary:hover{
	border-color:#3f4938;
}

/* =========================================================
SOFTWARE WINDOW
========================================================= */

.reservation-hero-image{
	position:relative;
	min-width:0;
	width:100%;
}

.software-window{
	position:relative;
	width:100%;
	overflow:hidden;
	background:#fff;
	border:1px solid #cdd2c9;
	border-radius:18px;
	box-shadow:0 25px 60px rgba(0,0,0,.16);
	transform:none !important;
}

.software-window-top{
	position:relative;
	z-index:20;
	display:flex;
	align-items:center;
	gap:7px;
	height:34px;
	padding:0 14px;
	background:#eceee9;
	border-bottom:1px solid #cfd3cc;
}

.software-window-top span{
	width:9px;
	height:9px;
	background:#777d75;
	border-radius:50%;
}

/* =========================================================
SLIDESHOW
========================================================= */

.hero-slideshow{
	position:relative;
	width:100%;
	overflow:hidden;
	transform:none !important;
}

.hero-slides{
	position:relative;
	width:100%;
	aspect-ratio: 3 / 2;
	overflow:hidden;
	background:#fff;
}

.hero-slide{
	position:absolute;
	inset:0;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:
		opacity 1s ease,
		visibility 1s ease;
	transform:none !important;
}

.hero-slide.active{
	z-index:2;
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

.hero-slide img{
	width:100%;
	height:100%;
	object-fit:contain;
	object-position:center;
	background:#fff;
	transform:none !important;
}

/* =========================================================
SLIDESHOW CONTROLS
========================================================= */

.hero-slide-controls{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	z-index:20;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:.35em;
	padding:.65em;
	background:linear-gradient(
		to top,
		rgba(0,0,0,.72),
		rgba(0,0,0,0)
	);
}

.hero-slide-dots{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0;
}

.hero-slide-dot{
	position:relative;
	width:44px;
	height:44px;
	margin:0;
	padding:0;
	background:transparent;
	border:0;
	border-radius:50%;
	cursor:pointer;
}

.hero-slide-dot::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:12px;
	height:12px;
	background:#c8cbc5;
	border:2px solid #fff;
	border-radius:50%;
	transform:translate(-50%,-50%);
	transition:
		background-color .2s ease,
		transform .2s ease;
}

.hero-slide-dot:hover::after,
.hero-slide-dot.active::after{
	background:#fff;
	transform:translate(-50%,-50%) scale(1.25);
}

.hero-slide-dot:focus-visible{
	outline:3px solid #fff;
	outline-offset:-4px;
}

.hero-slide-pause{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:70px;
	min-height:44px;
	padding:.45em .8em;
	background:#111;
	border:2px solid #fff;
	border-radius:6px;
	font-size:.75em;
	font-weight:700;
	color:#fff;
	cursor:pointer;
}

.hero-slide-pause:hover{
	background:#000;
}

.hero-slide-pause:focus-visible{
	outline:3px solid #fff;
	outline-offset:3px;
}

/* =========================================================
VALUE STRIP
========================================================= */

.reservation-value-strip{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	margin:0 0 5em;
	overflow:hidden;
	background:var(--dark);
	border-radius:18px;
}

.reservation-value-strip div{
	padding:1.7em 1.25em;
	text-align:center;
	border-right:1px solid #555b56;
}

.reservation-value-strip div:last-child{
	border-right:0;
}

.reservation-value-strip strong{
	display:block;
	margin:0 0 .15em;
	font-size:1.5em;
	font-weight:800;
	line-height:1.1;
	color:#fff;
}

.reservation-value-strip span{
	display:block;
	font-size:.84em;
	font-weight:600;
	color:#e3e6e1;
}

/* =========================================================
SECTION HEADING
========================================================= */

.reservation-section-heading{
	max-width:800px;
	margin:0 auto 3em;
	text-align:center;
}

.reservation-section-heading h2{
	margin:0 0 .55em;
	font-size:2.6em;
	font-weight:750;
	line-height:1.08;
	letter-spacing:-.035em;
}

.reservation-section-heading p{
	max-width:710px;
	margin:0 auto;
	font-size:1.08em;
	line-height:1.65;
	color:#3f463f;
}

/* =========================================================
CORE FEATURE CARDS
========================================================= */

.reservation-core-features{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.4em;
	margin:0 0 5em;
}

.reservation-core-features .feature-card{
	overflow:hidden;
	background:#fff;
	border:1px solid var(--border);
	border-radius:18px;
	box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.reservation-core-features .feature-card img{
	width:100%;
	aspect-ratio:16 / 10;
	object-fit:cover;
	background:#f4f4f4;
}

.feature-card-content{
	padding:1.6em;
}

.feature-card-content h3{
	margin:0 0 .5em;
	font-size:1.3em;
	font-weight:750;
	line-height:1.2;
}

.feature-card-content p{
	margin:0;
	font-size:.95em;
	line-height:1.65;
	color:#3f463f;
}

/* =========================================================
SOFTWARE FEATURES
========================================================= */

.software-feature{
	display:grid;
	grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
	align-items:center;
	gap:4em;
	margin:0 0 5em;
	padding:3em;
	background:var(--light);
	border-radius:24px;
}

.software-feature.reverse{
	grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
}

.software-feature.reverse .software-feature-image{
	order:2;
}

.software-feature.reverse .software-feature-content{
	order:1;
}

.software-feature-image{
	min-width:0;
}

.software-feature-image img{
	width:100%;
	height:auto;
	max-height:520px;
	object-fit:contain;
	background:#fff;
	border-radius:14px;
	box-shadow:0 12px 35px rgba(0,0,0,.1);
	transform:none !important;
}

.software-feature-content h2{
	margin:0 0 .7em;
	font-size:2.2em;
	font-weight:750;
	line-height:1.12;
	letter-spacing:-.03em;
}

.software-feature-content > p{
	margin:0 0 1.4em;
	font-size:1em;
	line-height:1.7;
	color:#3f463f;
}

/* =========================================================
CHECKLIST
========================================================= */

.reservation-checks{
	display:grid;
	gap:.6em;
	margin:0;
	padding:0;
	list-style:none;
}

.reservation-checks li{
	position:relative;
	margin:0;
	padding-left:1.6em;
	font-size:.96em;
	line-height:1.5;
	color:#303630;
}

.reservation-checks li::before{
	content:"✓";
	position:absolute;
	left:0;
	top:0;
	font-weight:800;
	color:#46513b;
}

/* =========================================================
FEATURE GRID
========================================================= */

.platform-features{
	margin:0 0 5em;
}

.platform-features header{
	max-width:780px;
	margin:0 auto 2.5em;
	text-align:center;
}

.platform-features header h2{
	margin:0;
	font-size:2.4em;
	font-weight:750;
	line-height:1.1;
	letter-spacing:-.035em;
}

.platform-feature-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.25em;
}

.platform-feature-card{
	padding:2em;
	background:#fff;
	border:1px solid var(--border);
	border-radius:16px;
}

.platform-feature-card h3{
	margin:0 0 .55em;
	font-size:1.15em;
	font-weight:750;
	line-height:1.25;
}

.platform-feature-card p{
	margin:0;
	font-size:.92em;
	line-height:1.65;
	color:#3f463f;
}

/* =========================================================
CUSTOM PROGRAMMING
========================================================= */

.custom-feature-section{
	margin:0 0 5em;
	padding:4em;
	background:var(--green-dark);
	border-radius:24px;
	color:#fff;
}

.custom-feature-content{
	max-width:850px;
	margin:0 auto;
	text-align:center;
}

.custom-feature-section .reservation-eyebrow{
	color:#f1f4ed;
}

.custom-feature-section h2{
	margin:0 0 .65em;
	font-size:2.4em;
	font-weight:750;
	line-height:1.1;
	letter-spacing:-.03em;
	color:#fff;
}

.custom-feature-section p{
	max-width:760px;
	margin:0 auto 1em;
	font-size:1em;
	line-height:1.7;
	color:#fff;
}

.custom-feature-highlight{
	margin-top:1.6em !important;
	font-size:1.2em !important;
	font-weight:700;
}

/* =========================================================
WEBSITE FEATURE
========================================================= */

.website-feature{
	background:var(--dark);
}

.website-feature h2{
	color:#fff;
}

.website-feature .reservation-eyebrow{
	color:#e1e6dc;
}

.website-feature .software-feature-content > p{
	color:#f0f2ef;
}

/* =========================================================
OTHER BUSINESSES
========================================================= */

.other-booking-services{
	margin:0 0 5em;
	padding:4em;
	background:var(--light);
	border-radius:24px;
	text-align:center;
}

.other-booking-services > p{
	max-width:760px;
	margin:0 auto 2.5em;
	font-size:1em;
	line-height:1.7;
	color:#3f463f;
}

.other-booking-services h2{
	margin:0 0 .55em;
	font-size:2.3em;
	font-weight:750;
	line-height:1.12;
	letter-spacing:-.03em;
}

.other-booking-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.25em;
}

.other-booking-grid > div{
	padding:2em;
	background:#fff;
	border:1px solid var(--border);
	border-radius:16px;
	text-align:left;
}

.other-booking-grid h3{
	margin:0 0 .55em;
	font-size:1.15em;
	font-weight:750;
	line-height:1.25;
}

.other-booking-grid p{
	margin:0;
	font-size:.92em;
	line-height:1.65;
	color:#3f463f;
}

/* =========================================================
PRICING
========================================================= */

.reservation-pricing{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(340px,.65fr);
	align-items:center;
	gap:4em;
	margin:0 0 5em;
	padding:4em;
	background:#f5f6f3;
	border-radius:24px;
}

.pricing-copy h2{
	margin:0 0 .7em;
	font-size:2.45em;
	font-weight:750;
	line-height:1.1;
	letter-spacing:-.035em;
}

.pricing-copy p{
	max-width:660px;
	margin:0;
	font-size:1.03em;
	line-height:1.7;
	color:#3f463f;
}

.pricing-card{
	padding:2.5em;
	background:#fff;
	border:1px solid var(--border);
	border-radius:20px;
	box-shadow:0 16px 45px rgba(0,0,0,.09);
	text-align:center;
}

.pricing-name{
	margin:0 0 1em;
	font-size:1em;
	font-weight:700;
	color:#202520;
}

.pricing-price{
	font-size:4em;
	font-weight:800;
	line-height:1;
	letter-spacing:-.05em;
	color:#111;
}

.pricing-price sup{
	position:relative;
	top:-.65em;
	margin-right:.06em;
	font-size:.38em;
	font-weight:700;
}

.pricing-period{
	margin:.25em 0 1.5em;
	font-size:.92em;
	font-weight:500;
	color:#363c36;
}

.pricing-card ul{
	display:grid;
	gap:.55em;
	margin:0 0 2em;
	padding:0;
	list-style:none;
	text-align:left;
}

.pricing-card li{
	position:relative;
	padding-left:1.55em;
	font-size:.92em;
	line-height:1.45;
	color:#303630;
}

.pricing-card li::before{
	content:"✓";
	position:absolute;
	left:0;
	top:0;
	font-weight:800;
	color:#46513b;
}

.pricing-card .reservation-button{
	width:100%;
}

/* =========================================================
FINAL CTA
========================================================= */

.reservation-final-cta{
	margin:0;
	padding:5em 2em;
	background:var(--dark);
	border-radius:24px 24px 0 0;
	text-align:center;
	color:#fff;
}

.reservation-final-cta .reservation-eyebrow{
	color:#e1e6dc;
}

.reservation-final-cta h2{
	max-width:800px;
	margin:0 auto .65em;
	font-size:2.6em;
	font-weight:750;
	line-height:1.08;
	letter-spacing:-.035em;
	color:#fff;
}

.reservation-final-cta p{
	max-width:720px;
	margin:0 auto 1.8em;
	font-size:1.03em;
	line-height:1.7;
	color:#f0f2ef;
}

.reservation-final-cta .reservation-button.primary{
	background:#fff;
	border-color:#fff;
	color:#171a18;
}

.reservation-final-cta .reservation-button.primary:hover{
	background:#edf0ea;
	border-color:#edf0ea;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media screen and (max-width:1100px){

	body{
		font-size:17px;
	}

	.reservation-hero{
		gap:2.5em;
	}

	.reservation-hero h1{
		font-size:3.1em;
	}

	.software-feature{
		gap:2.5em;
		padding:2.5em;
	}

	.reservation-pricing{
		gap:2.5em;
		padding:3em;
	}

}

@media screen and (max-width:900px){

	.standalone-reservations{
		padding-top:2em;
	}

	.reservation-hero{
		grid-template-columns:1fr;
		gap:2.5em;
		min-height:0;
	}

	.reservation-hero-content{
		max-width:720px;
	}

	.reservation-hero-image{
		max-width:780px;
		margin:0 auto;
	}

	.reservation-value-strip{
		grid-template-columns:repeat(2,1fr);
	}

	.reservation-value-strip div:nth-child(2){
		border-right:0;
	}

	.reservation-value-strip div:nth-child(-n+2){
		border-bottom:1px solid #555b56;
	}

	.reservation-core-features{
		grid-template-columns:1fr;
		max-width:680px;
		margin-left:auto;
		margin-right:auto;
	}

	.software-feature,
	.software-feature.reverse{
		grid-template-columns:1fr;
		gap:2em;
		padding:2.5em;
	}

	.software-feature.reverse .software-feature-image,
	.software-feature.reverse .software-feature-content{
		order:initial;
	}

	.platform-feature-grid{
		grid-template-columns:repeat(2,1fr);
	}

	.other-booking-grid{
		grid-template-columns:1fr;
	}

	.reservation-pricing{
		grid-template-columns:1fr;
	}

	.pricing-card{
		max-width:520px;
		width:100%;
		margin:0 auto;
	}

}

@media screen and (max-width:650px){

	body{
		font-size:16px;
	}

	.container{
		width:90%;
	}

	.standalone-reservations{
		padding-top:1.5em;
	}

	#reservationlogo{
		width:68px;
		margin-bottom:1.2em;
	}

	.reservation-hero{
		margin-bottom:3em;
	}

	.reservation-hero h1{
		font-size:2.55em;
	}

	.reservation-hero h1 span{
		font-size:.62em;
		line-height:1.15;
	}

	.reservation-lead{
		font-size:1em;
	}

	.reservation-actions{
		flex-direction:column;
	}

	.reservation-button{
		width:100%;
	}

	.hero-slides{
		aspect-ratio:4 / 3;
	}

	.software-window{
		border-radius:12px;
	}

	.reservation-value-strip{
		margin-bottom:4em;
		border-radius:14px;
	}

	.reservation-value-strip div{
		padding:1.35em .75em;
	}

	.reservation-section-heading h2,
	.platform-features header h2{
		font-size:2em;
	}

	.reservation-core-features,
	.platform-features{
		margin-bottom:4em;
	}

	.software-feature,
	.software-feature.reverse{
		margin-bottom:4em;
		padding:2em 1.35em;
		border-radius:18px;
	}

	.software-feature-content h2{
		font-size:1.85em;
	}

	.custom-feature-section,
	.other-booking-services{
		margin-bottom:4em;
		padding:3em 1.4em;
		border-radius:18px;
	}

	.custom-feature-section h2,
	.other-booking-services h2{
		font-size:2em;
	}

	.reservation-pricing{
		margin-bottom:4em;
		padding:2.5em 1.4em;
		border-radius:18px;
	}

	.pricing-copy h2{
		font-size:2em;
	}

	.reservation-final-cta{
		padding:4em 1.4em;
	}

	.reservation-final-cta h2{
		font-size:2.1em;
	}

}

@media screen and (max-width:420px){

	.container{
		width:92%;
	}

	.reservation-hero h1{
		font-size:2.2em;
	}

	.reservation-price-line strong{
		font-size:2.35em;
	}

	.reservation-value-strip strong{
		font-size:1.3em;
	}

	.software-feature{
		padding:1.6em 1em;
	}

	.platform-feature-card,
	.other-booking-grid > div{
		padding:1.5em;
	}

	.pricing-card{
		padding:2em 1.35em;
	}

	.pricing-price{
		font-size:3.5em;
	}

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

	html{
		scroll-behavior:auto;
	}

	*,
	*::before,
	*::after{
		scroll-behavior:auto !important;
		transition-duration:.01ms !important;
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
	}

}