/* ==========================================================================
   GrowthStudioz, free launch call (Launchpad first)

   Off Adarsh's Figma inspector, 6th October 2026 ("booking-section-desktop"
   and its card, "Component 1"):

     band     #15171A, 112 top and bottom; the pitch and the card 44 apart.
              1320 at most, the page's own width (the frame's 140 sides would
              put it 60 in from every band above).
     pitch    kicker 700 12 +1.44px uppercase #A9AEB3; heading 700 56/110%
              -1.5px #EEF0EC; line 400 19/150% #A9AEB3; points: a 32 ring
              (1px #2A2E33), 16 to its text, title 700 16/140% #EEF0EC over a
              line 400 14/140% #A9AEB3. 28 between the parts, 20 between the
              points.
     card     white, 34 padding (412 inside), the three blocks 24 apart.
              Progress: one 5px segment per step, 6 apart, red #E11D2E as they
              are reached, #EBEDE7 before; 16 down to "STEP 1 OF 4" (700 12
              +0.96px uppercase), 8 to the question (700 24/125% #15171A).
              Choices 10 apart: 16 padding, 14 corners, 1.5px #DCDFD8, an 18
              ring; picked: red edge, red at 13%, a 10 dot. Buttons row 54
              tall; Continue 16/26 padding, 8 corners, red, 700 17 #F1F1F1;
              20 down to the small line, 400 13 centred.
     after    the bar turns green; a tick in a ringed green circle, the
              thank-you, a rule, and "Prefer WhatsApp? Message us".

     fields   label 600 12/16 #737773, 8 to the box: 50 tall, 10 corners, 1px
              #E5E8E2, 14 in; text 14/20, placeholder #9CA09C. Slider thumb
              22, 1px #E5E8E2; its scale 16 under it, 400 10/14 #9CA09C.
              Back 700 12/18 #171717.
     thanks   bar green #13835D; 78 down, a 64 green circle in an 80 halo;
              32 to "You're on the list!" (700 28/34 #171717); 12 to the line
              (400 14/22 #737773); a rule; 29 to the WhatsApp link (700 14/20,
              underlined).

   The step count and the small line are #6E747A, not the frame's #7B8187:
   at 12-13px that is 4.1:1 on white, under the 4.5 small text needs. The
   placeholders and the slider scale keep the frame's #9CA09C: hints beside
   real labels, and decoration.

   Phone: PROVISIONAL until Adarsh's phone frame (stacked, scaled).
   ========================================================================== */

.gs-booking {
	--gs-booking-band: #15171A;
	--gs-booking-light: #EEF0EC;
	--gs-booking-mute: #A9AEB3;
	--gs-booking-ink: #15171A;
	--gs-booking-grey: #6E747A;
	--gs-booking-label: #737773;
	--gs-booking-line: #DCDFD8;
	--gs-booking-field-line: #E5E8E2;
	--gs-booking-hint: #9CA09C;
	--gs-booking-text: #171717;
	--gs-booking-track: #EBEDE7;
	--gs-booking-red: var(--gs-pm-red);              /* #E11D2E */
	--gs-booking-green: #13835D;
	--gs-booking-ease: cubic-bezier(0.23, 1, 0.32, 1);

	/* Full bleed, as the other bands: cancel main's gutter, lift core's
	   max-width cap, put the gutter back inside. */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	padding: 7rem var(--gs-gutter-now);               /* 112 */
	/* A jump here (#launch-call) stops clear of the fixed header. */
	scroll-margin-top: 4rem;
	background: var(--gs-booking-band);
	color: var(--gs-booking-light);
}

.gs-booking__inner {
	display: grid;
	grid-template-columns: minmax(0, 39.75rem) 30rem;  /* 636, 480 */
	justify-content: space-between;
	align-items: start;
	column-gap: 2.75rem;                               /* 44 */
	max-width: 82.5rem;                                /* 1320 */
	margin-inline: auto;
}

/* --- the pitch --------------------------------------------------------------- */

.gs-booking__pitch {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;                                      /* 28 */
}

.gs-booking__kicker {
	margin: 0;
	max-width: none;
	color: var(--gs-booking-mute);
	font-size: 0.75rem;                                /* 12 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.09rem;                           /* 1.44px */
	text-transform: uppercase;
}

.gs-booking__title {
	margin: 0;
	max-width: none;
	color: var(--gs-booking-light);
	font-size: 3.5rem;                                 /* 56 */
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.09375rem;                       /* -1.5px */
}

.gs-booking__intro {
	margin: 0;
	max-width: none;
	color: var(--gs-booking-mute);
	font-size: 1.1875rem;                              /* 19 */
	line-height: 1.5;
}

.gs-booking__points {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;                                      /* 20 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-booking__point {
	display: flex;
	align-items: center;
	gap: 1rem;                                         /* 16 */
	margin: 0;
}

.gs-booking__num {
	display: grid;
	place-items: center;
	flex: none;
	width: 2rem;                                       /* 32 */
	height: 2rem;
	border: var(--gs-border-width) solid #2A2E33;
	border-radius: 50%;
	color: var(--gs-booking-light);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.gs-booking__point-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.gs-booking__point-title {
	color: var(--gs-booking-light);
	font-size: 1rem;                                   /* 16 */
	font-weight: 700;
	line-height: 1.4;
}

.gs-booking__point-line {
	color: var(--gs-booking-mute);
	font-size: 0.875rem;                               /* 14 */
	line-height: 1.4;
}

/* --- the card ---------------------------------------------------------------- */

.gs-booking__card {
	padding: 2.125rem;                                 /* 34 */
	border-radius: 1.5rem;
	background: var(--gs-white);
	color: var(--gs-booking-ink);
}

.gs-booking__form {
	display: flex;
	flex-direction: column;
}

/* Sent: the thank-you replaces it. Needed because display:flex above outranks
   the browser's own [hidden] rule. */
.gs-booking__form[hidden] {
	display: none;
}

/* Progress: one segment per step. The red grows in from the left as a step is
   reached (transform only), so moving on reads as filling the bar. */
.gs-booking__bar {
	display: flex;
	gap: 0.375rem;                                     /* 6 */
	margin-block-end: 1rem;                            /* 16 */
}

.gs-booking__seg {
	position: relative;
	flex: 1;
	height: 0.3125rem;                                 /* 5 */
	overflow: hidden;
	border-radius: 100px;
	background: var(--gs-booking-track);
}

.gs-booking__seg::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--gs-booking-red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 300ms var(--gs-booking-ease);
}

.gs-booking__seg.is-on::after {
	transform: scaleX(1);
}

.gs-booking__bar.is-done .gs-booking__seg::after {
	background: var(--gs-booking-green);
}

/* A step: its heading, its fields, its buttons, 24 apart. */
.gs-booking__step {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;                                       /* 24 */
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* With the script, one step at a time. Without it every step shows, one
   under the other, and the form still sends. */
.gs-booking__step + .gs-booking__step {
	margin-block-start: 2.5rem;
}

.gs-booking__form.is-stepped .gs-booking__step + .gs-booking__step {
	margin-block-start: 0;
}

.gs-booking__step[hidden] {
	display: none;
}

/* Moving on comes in from the right, going back from the left: the
   direction says which way you went. 220ms strong ease-out, under the 300 a
   form step can take before it feels slow. */
.gs-booking__step.is-in {
	animation: gs-booking-in 220ms var(--gs-booking-ease) both;
}

.gs-booking__step.is-in.is-back {
	animation-name: gs-booking-in-back;
}

@keyframes gs-booking-in {
	from {
		opacity: 0;
		transform: translateX(0.75rem);
	}
}

@keyframes gs-booking-in-back {
	from {
		opacity: 0;
		transform: translateX(-0.75rem);
	}
}

.gs-booking__head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;                                       /* 8 */
}

.gs-booking__count {
	margin: 0;
	max-width: none;
	color: var(--gs-booking-grey);
	font-size: 0.75rem;                                /* 12 */
	font-weight: 700;
	line-height: 1.3333;                               /* 16 */
	letter-spacing: 0.06rem;                           /* 0.96px */
	text-transform: uppercase;
}

.gs-booking__q {
	margin: 0;
	max-width: none;
	color: var(--gs-booking-ink);
	font-size: 1.5rem;                                 /* 24 */
	font-weight: 700;
	line-height: 1.25;                                 /* 30 */
	letter-spacing: 0;
	text-wrap: wrap;
}

.gs-booking__q:focus {
	outline: none;
}

/* --- step 1: the choices ----------------------------------------------------- */

.gs-booking__options {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;                                     /* 10 */
}

.gs-booking__opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;                                         /* 16 */
	/* 53 tall, as the frame: Figma's border sits inside the box. */
	padding: calc(1rem - 0.09375rem) 1rem;
	border: 0.09375rem solid var(--gs-booking-line);   /* 1.5 */
	border-radius: 0.875rem;                           /* 14 */
	background: var(--gs-white);
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.gs-booking__opt:hover {
		border-color: #B9BEC3;
	}
}

.gs-booking__opt:has(:checked) {
	border-color: var(--gs-booking-red);
	background: rgb(225 29 46 / 0.13);
}

.gs-booking__opt:has(:focus-visible) {
	outline: 2px solid var(--gs-booking-ink);
	outline-offset: 2px;
}

/* The real radio, kept for the keyboard (arrow keys move the pick) and for
   screen readers, drawn by the ring beside it. */
.gs-booking__radio-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.gs-booking__radio {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.125rem;                                   /* 18 */
	height: 1.125rem;
	border: 0.09375rem solid var(--gs-booking-line);
	border-radius: 50%;
	background: var(--gs-white);
	transition: border-color 150ms ease;
}

/* The dot grows in from 60%, never from nothing. */
.gs-booking__radio::after {
	content: "";
	width: 0.625rem;                                   /* 10 */
	height: 0.625rem;
	border-radius: 50%;
	background: var(--gs-booking-ink);
	opacity: 0;
	transform: scale(0.6);
	transition: transform 150ms var(--gs-booking-ease), opacity 150ms ease;
}

.gs-booking__radio-input:checked + .gs-booking__radio {
	border-color: var(--gs-booking-ink);
}

.gs-booking__radio-input:checked + .gs-booking__radio::after {
	opacity: 1;
	transform: scale(1);
}

.gs-booking__opt-text {
	color: var(--gs-booking-ink);
	font-size: 1rem;                                   /* 16 */
	font-weight: 500;
	line-height: 1.3;
}

/* --- steps 2 to 4: fields ---------------------------------------------------- */

.gs-booking__fields {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;                                       /* 24 */
}

.gs-booking__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;                                      /* 12 */
}

.gs-booking__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;                                       /* 8 */
	min-width: 0;
}

.gs-booking__label {
	color: var(--gs-booking-label);
	font-size: 0.75rem;                                /* 12 */
	font-weight: 600;
	line-height: 1.3333;                               /* 16 */
}

.gs-booking__budget-out {
	font-weight: inherit;
}

.gs-booking__control {
	width: 100%;
	height: 3.125rem;                                  /* 50 */
	padding: 0 0.875rem;                               /* 14 */
	border: var(--gs-border-width) solid var(--gs-booking-field-line);
	border-radius: 0.625rem;                           /* 10 */
	background: var(--gs-white);
	color: var(--gs-booking-text);
	font: inherit;
	font-size: 0.875rem;                               /* 14 */
	line-height: 1.4286;                               /* 20 */
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.gs-booking__control::placeholder {
	color: var(--gs-booking-hint);
	opacity: 1;
}

.gs-booking__control:focus {
	outline: none;
	border-color: var(--gs-booking-ink);
	box-shadow: 0 0 0 0.1875rem rgb(21 23 26 / 0.08);
}

.gs-booking__control[aria-invalid="true"] {
	border-color: var(--gs-booking-red);
}

/* Lucide chevron-down, drawn by the box itself so the select stays a native
   one (keyboard, phone picker) with the frame's arrow. */
.gs-booking__select {
	padding-inline-end: 2.75rem;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 1.125rem;
	cursor: pointer;
}

/* The budget slider: a 5px track, red up to the thumb, a 22 white thumb. The
   red is placed against the thumb's own travel (the track less a thumb), so
   it ends under the thumb's centre at every value. */
.gs-booking__range {
	--gs-booking-reach: calc(0.6875rem + (100% - 1.375rem) * var(--gs-booking-fill, 25) / 100);

	width: 100%;
	height: 1.375rem;
	margin: 0.5rem 0 0;
	background: transparent;
	appearance: none;
	cursor: pointer;
}

.gs-booking__range::-webkit-slider-runnable-track {
	height: 0.3125rem;
	border-radius: 100px;
	background: linear-gradient(to right, var(--gs-booking-red) 0 var(--gs-booking-reach), var(--gs-booking-track) var(--gs-booking-reach) 100%);
}

.gs-booking__range::-webkit-slider-thumb {
	width: 1.375rem;                                   /* 22 */
	height: 1.375rem;
	margin-top: -0.53125rem;                           /* centred on the 5px track */
	border: var(--gs-border-width) solid var(--gs-booking-field-line);
	border-radius: 50%;
	background: var(--gs-white);
	box-shadow: 0 0.0625rem 0.25rem rgb(21 23 26 / 0.18);
	appearance: none;
}

.gs-booking__range::-moz-range-track {
	height: 0.3125rem;
	border-radius: 100px;
	background: var(--gs-booking-track);
}

.gs-booking__range::-moz-range-progress {
	height: 0.3125rem;
	border-radius: 100px;
	background: var(--gs-booking-red);
}

.gs-booking__range::-moz-range-thumb {
	width: 1.375rem;
	height: 1.375rem;
	border: var(--gs-border-width) solid var(--gs-booking-field-line);
	border-radius: 50%;
	background: var(--gs-white);
	box-shadow: 0 0.0625rem 0.25rem rgb(21 23 26 / 0.18);
}

.gs-booking__range:focus {
	outline: none;
}

.gs-booking__range:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--gs-booking-ink);
	outline-offset: 2px;
}

.gs-booking__range:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--gs-booking-ink);
	outline-offset: 2px;
}

.gs-booking__ticks {
	display: flex;
	justify-content: space-between;
	margin-block-start: 0.5rem;                        /* 16 from the track, with the field's 8 */
	color: var(--gs-booking-hint);
	font-size: 0.625rem;                               /* 10 */
	line-height: 1.4;                                  /* 14 */
}

/* Honeypot: off the page, not display:none, which some bots skip. */
.gs-booking__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- buttons ----------------------------------------------------------------- */

.gs-booking__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.375rem;                              /* 54 */
}

.gs-booking__back {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--gs-booking-text);
	font: inherit;
	font-size: 0.75rem;                                /* 12 */
	font-weight: 700;
	line-height: 1.5;                                  /* 18 */
	cursor: pointer;
	transition: color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.gs-booking__back:hover {
		color: var(--gs-booking-red);
	}
}

.gs-booking__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-inline-start: auto;
	padding: 1rem 1.625rem;                            /* 16 26 */
	border: 0;
	border-radius: 0.5rem;                             /* 8 */
	background: var(--gs-booking-red);
	color: #F1F1F1;
	font: inherit;
	font-size: 1.0625rem;                              /* 17 */
	font-weight: 700;
	line-height: 1.3;                                  /* 54 tall, as the frame */
	cursor: pointer;
	transition: background-color 150ms ease, transform 160ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.gs-booking__btn:hover {
		background: #C41827;
	}
}

.gs-booking__btn:active {
	transform: scale(0.97);
}

.gs-booking__btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.gs-booking__back:focus-visible,
.gs-booking__btn:focus-visible {
	outline: 2px solid var(--gs-booking-ink);
	outline-offset: 2px;
}

.gs-booking__status {
	margin: 1rem 0 0;
	max-width: none;
	color: var(--gs-booking-red);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}

.gs-booking__status:empty {
	display: none;
}

.gs-booking__note {
	margin: 1.25rem 0 0;                               /* 20 */
	max-width: none;
	color: var(--gs-booking-grey);
	font-size: 0.8125rem;                              /* 13 */
	line-height: 1.3;
	text-align: center;
}

.gs-booking__note-last {
	display: block;
}

/* The second line belongs to the last step only. */
.gs-booking__form.is-stepped:not(.is-last) .gs-booking__note-last {
	display: none;
}

/* --- after sending ----------------------------------------------------------- */

.gs-booking__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.gs-booking__done[hidden] {
	display: none;
}

.gs-booking__done.is-in {
	animation: gs-booking-done 260ms var(--gs-booking-ease) both;
}

@keyframes gs-booking-done {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
}

.gs-booking__done .gs-booking__bar {
	align-self: stretch;
	/* 78 to the halo, which is drawn 8 outside the circle's own box. */
	margin-block-end: 5.375rem;
}

.gs-booking__tick {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--gs-booking-green);
	box-shadow: 0 0 0 0.5rem #DFF3EA;                  /* the 80 halo */
	color: var(--gs-white);
	font-size: 1.5rem;
}

.gs-booking__done-title {
	margin: 2.5rem 0 0;                                /* 32 from the halo */
	max-width: none;
	color: var(--gs-booking-text);
	font-size: 1.75rem;                                /* 28 */
	font-weight: 700;
	line-height: 1.2143;                               /* 34 */
	letter-spacing: -0.0125rem;
}

.gs-booking__done-title:focus {
	outline: none;
}

.gs-booking__done-text {
	max-width: none;
	margin: 0.75rem 0 0;                               /* 12 */
	color: var(--gs-booking-label);
	font-size: 0.875rem;                               /* 14 */
	line-height: 1.5714;                               /* 22 */
}

.gs-booking__wa {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	align-self: stretch;
	justify-content: center;
	margin-block-start: 2rem;
	padding-block: 1.8125rem 0.5rem;                   /* 29 under the rule */
	border-top: var(--gs-border-width) solid #EAEAEA;
	color: var(--gs-booking-text);
	font-size: 0.875rem;                               /* 14 */
	font-weight: 700;
	line-height: 1.4286;                               /* 20 */
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- tablet: the card under the pitch ----------------------------------------
   Below 1100 the pitch would get under 420 beside a 480 card (340 at 1024),
   which squeezes the 56px heading onto three lines. */

@media (max-width: 1099.98px) {
	.gs-booking {
		padding-block: 4.5rem;
	}

	.gs-booking__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 3rem;
	}

	.gs-booking__card {
		width: 100%;
		max-width: 36rem;
	}
}

/* --- phone (provisional, see the header) ------------------------------------- */

@media (max-width: 767.98px) {
	.gs-booking {
		padding-block: 3rem;
	}

	.gs-booking__inner {
		row-gap: 2.5rem;
	}

	.gs-booking__pitch {
		gap: 1.25rem;
	}

	.gs-booking__title {
		font-size: 2.25rem;
		letter-spacing: -0.0625rem;
	}

	.gs-booking__intro {
		font-size: 1rem;
	}

	.gs-booking__card {
		padding: 1.5rem 1.25rem;
		border-radius: 1.25rem;
	}

	.gs-booking__q {
		font-size: 1.375rem;
	}
}

@media (max-width: 359.98px) {
	.gs-booking__pair {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- reduced motion: fades only ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gs-booking__step.is-in,
	.gs-booking__step.is-in.is-back,
	.gs-booking__done.is-in {
		animation: gs-booking-fade 160ms ease-out both;
	}

	.gs-booking__seg::after,
	.gs-booking__radio::after {
		transition: none;
	}

	@keyframes gs-booking-fade {
		from {
			opacity: 0;
		}
	}
}