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

:root {

	/* Colours */
	--clr-brand-dgreen   : #0E3629;  /* "Fast-DGreen" — primary heading/text colour, dark hero bands */
	--clr-brand-mgreen   : #0F724A;  /* mid green — accent headline spans, right-hand comparison-table copy */
	--clr-brand-mint     : #4FD8A2;  /* CTA button fill */
	--clr-text-body      : #000000;  /* body copy on white/light card backgrounds */
	--clr-white          : #FFFFFF;
	--clr-bg-page        : #FFFFFF;
	--clr-bg-soft        : #F9F9F9;  /* soft off-white section / card background */
	--clr-bg-card        : #F0F0F0;  /* light grey feature-card background */
	--clr-bg-mint-tint   : #EFFFF9;  /* pale mint tint — hero image overlay, highlighted cards/rows */
	--clr-flag-red       : #D52B1E;  /* decorative flag squares in comparison table */
	--clr-shadow-brand   : rgba(32, 120, 85, 0.5); /* soft brand-green drop shadow used on cards */

	/* Gradients */
	--gradient-hero-overlay : linear-gradient(88deg, rgba(255, 255, 255, 0) 0%, #EFFFF9 100%);

	/* Font families */
	--ff-body : 'Inter', sans-serif;

	/* Font sizes — always rem, always with a px-source comment */
	--fs-2xs  : 1.125rem;   /* 18px ÷ 16 — button label */
	--fs-xs   : 1.375rem;   /* 22px ÷ 16 — comparison table body rows */
	--fs-sm   : 1.5rem;     /* 24px ÷ 16 — body copy, eyebrow text, "YOUR BOOKING WILL INCLUDE" */
	--fs-md   : 1.6875rem;  /* 27px ÷ 16 — card headings */
	--fs-eyebrow : 1.75rem; /* 28px ÷ 16 — hero eyebrow line */
	--fs-lg   : 1.9375rem;  /* 31px ÷ 16 — info-bar stats */
	--fs-xl   : 2rem;       /* 32px ÷ 16 — CTA banner subhead */
	--fs-2xl  : 2.125rem;   /* 34px ÷ 16 — "FLAT FEE" label */
	--fs-3xl  : 2.25rem;    /* 36px ÷ 16 — comparison table column headers */
	--fs-4xl  : 3.75rem;    /* 60px ÷ 16 — section headings */
	--fs-hero : 5.3125rem;  /* 85px ÷ 16 — hero title / CTA banner title */
	--fs-price : 6.25rem;   /* 100px ÷ 16 — "$149" */

	/* Font weights */
	--fw-regular  : 400;
	--fw-medium   : 500;
	--fw-semibold : 600;
	--fw-bold     : 700;

	/* Layout */
	--container-width  : 1596px; /* Figma content width on the 1920px design canvas */
	--container-gutter : 1.5rem;
	--section-padding  : 5rem;

	/* Border radius */
	--radius-sm   : 0.25rem;
	--radius-md   : 0.5rem;
	--radius-card : 0.625rem; /* 10px ÷ 16 — used on every card/panel in this design */
	--radius-pill : 100px;

}

.container {
	width: 100%;
	max-width: var(--container-width) !important;
	margin-inline: auto;
	padding-inline: var(--container-gutter);
	box-sizing: border-box;
}

/* Shared button pattern — reused by every "BOOK NOW" CTA across blocks */
.btn-mint {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.9375rem 2.5rem; /* 15px / 40px ÷ 16 */
	background: var(--clr-brand-mint);
	color: var(--clr-brand-dgreen);
	font-family: var(--ff-body);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	border-radius: var(--radius-md);
	border: none;
	cursor: pointer;
	white-space: nowrap;
}

.btn-mint:hover {
	filter: brightness(0.95);
}