/* ==========================================================================
   GrowthStudioz, pricing (Launchpad first)

   Every desktop value below is read from Adarsh's SVG export of the section
   (Figma "Pricing Section", 1440 wide, 7th October 2026), which carries each
   box, colour and text size exactly. Figma borders sit inside the box, so a
   1px line takes 1px off the padding here.

     band     #F9F9F9 full width, 100 top and bottom. Content follows the page
              width like the bands around it (Adarsh's pick, 7th October:
              1280 at 1440), not the frame's 1200.
     head     centred: red kicker 700 14 +1.5px #E11D2E; 16 to the heading,
              800 40 #0A0A0A, no tracking. 56 between blocks.
     chips    "INCLUDED AT EVERY LEVEL" 700 13 +1px #737373; 12 to the chips:
              white pills 33 tall, 8 16 in, 1px #EAEAEA, 400 13 #0A0A0A, 12
              apart.
     plans    three across, 24 apart, top-aligned (417 / 452 / 447 tall in
              the frame): white, 1px #EAEAEA, 20 corners, 36 in. Label 700 13
              +1px #737373; 10 to the title 800 24; 28 to the price 800 36
              with a 400 14 "/ month"; 28 to the ticks (14 tick, 2px line, 10
              to 400 14 #737373, rows 30 apart); 28 to a full-width button
              (700 15, 48 tall, 1px #0A0A0A, 8 corners). The badged plan: card
              #0A0A0A with a 0 20 40 24% shadow, red label, white title and
              price, #F1F1F1 text, solid red button 700 16 53 tall, and a red
              pill badge across its top edge.
     fit      two across, 32 apart, 16 corners, 36 in: "good fit" white with a
              1px red line and red 8 dots, "not right" 1px #EAEAEA, white to
              #D5D5D5, black dots. Heading 700 18; 20 to the list, 400 14
              #4A4A48, rows 30 apart, 10 from dot to text. A campfire drawing
              (Adarsh's own frames, 66x67 and 69x70) in each top corner.

   Phone: plans first, then the "included" chips, then the two fit boxes,
   as the phone frame orders them; its sizes are in the phone block below.
   ========================================================================== */

.gs-pricing {
	--gs-pricing-ink: #0A0A0A;
	--gs-pricing-muted: #737373;
	--gs-pricing-line: #EAEAEA;
	--gs-pricing-on-dark: #F1F1F1;
	--gs-pricing-red: var(--gs-pm-red);              /* #E11D2E */
	--gs-pricing-ease: cubic-bezier(0.23, 1, 0.32, 1);

	/* Full bleed, as the other bands. */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	padding: 6.25rem var(--gs-gutter-now);            /* 100 */
	background: #F9F9F9;
}

.gs-pricing__inner {
	display: flex;
	flex-direction: column;
	gap: 3.5rem;                                       /* 56 */
	max-width: 82.5rem;                                /* the page width, as the bands around it */
	margin-inline: auto;
}

/* --- head ---------------------------------------------------------------------- */

.gs-pricing__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;                                         /* 16 */
	text-align: center;
}

.gs-pricing__kicker {
	margin: 0;
	max-width: none;
	color: var(--gs-pricing-red);
	font-size: 0.875rem;                               /* 14 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.09375rem;                        /* 1.5px */
	text-transform: uppercase;
}

.gs-pricing__title {
	margin: 0;
	max-width: none;
	color: var(--gs-pricing-ink);
	font-size: 2.5rem;                                 /* 40 */
	font-weight: 800;
	line-height: 1.3;                                  /* 52, the frame's box */
	letter-spacing: 0;
}

/* --- included at every level --------------------------------------------------- */

.gs-pricing__included {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;                                      /* 12 */
}

.gs-pricing__included-label {
	margin: 0;
	max-width: none;
	color: var(--gs-pricing-muted);
	font-size: 0.8125rem;                              /* 13 */
	font-weight: 700;
	line-height: 1.3;                                  /* 17 */
	letter-spacing: 0.0625rem;                         /* 1px */
	text-transform: uppercase;
}

.gs-pricing__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;                                      /* 12 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-pricing__chip {
	margin: 0;
	/* 8 16 in the frame, whose border sits inside the box: 33 tall. */
	padding: calc(0.5rem - var(--gs-border-width)) calc(1rem - var(--gs-border-width));
	border: var(--gs-border-width) solid var(--gs-pricing-line);
	border-radius: 100px;
	background: var(--gs-white);
	color: var(--gs-pricing-ink);
	font-size: 0.8125rem;                              /* 13 */
	line-height: 1.3;                                  /* 17 */
}

/* --- plans --------------------------------------------------------------------- */

.gs-pricing__plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 1.5rem;                                       /* 24 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: calc(2.25rem - var(--gs-border-width));   /* 36 with the line */
	border: var(--gs-border-width) solid var(--gs-pricing-line);
	border-radius: 1.25rem;                            /* 20 */
	background: var(--gs-white);
}

/* The line takes the card's own black, so its text sits 36 in like the others. */
.gs-plan.is-featured {
	border-color: var(--gs-pricing-ink);
	background: var(--gs-pricing-ink);
	box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 0.24);    /* 0 20 40, 24% */
}

/* Across the card's top edge: 13.3 above it, 18.3 from its left. The frame
   scales an 11px pill by 1.112, hence the odd sizes. Offsets are measured
   from inside the card's line, so the line comes off. */
.gs-plan__badge {
	position: absolute;
	top: calc(-0.8338rem - var(--gs-border-width));    /* -13.34 */
	left: calc(1.1458rem - var(--gs-border-width));    /* 18.33 */
	padding: 0.2803rem 0.6951rem;                      /* 4.49 11.12 */
	border-radius: 100px;
	background: var(--gs-pricing-red);
	color: #F9F9F9;
	font-size: 0.7646rem;                              /* 12.23 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.0695rem;                         /* 1.11px */
	text-transform: uppercase;
	white-space: nowrap;
}

.gs-plan__label {
	margin: 0;
	max-width: none;
	color: var(--gs-pricing-muted);
	font-size: 0.8125rem;                              /* 13 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.0625rem;                         /* 1px */
	text-transform: uppercase;
}

/* 3.3:1 on the black card, below AA for 13px; kept as drawn (Adarsh, 7th
   October 2026). */
.gs-plan.is-featured .gs-plan__label {
	color: var(--gs-pricing-red);
}

.gs-plan__title {
	margin: 0.625rem 0 0;                              /* 10 */
	max-width: none;
	color: var(--gs-pricing-ink);
	font-size: 1.5rem;                                 /* 24 */
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
	text-wrap: wrap;
}

/* The frame's 8 between amount and period is set in Figma's narrower
   large-size cut of DM Sans; kept at 8 here. */
.gs-plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 1.75rem 0 0;                               /* 28 */
	max-width: none;
}

.gs-plan__amount {
	color: var(--gs-pricing-ink);
	font-size: 2.25rem;                                /* 36 */
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
}

.gs-plan__period {
	color: var(--gs-pricing-muted);
	font-size: 0.875rem;                               /* 14 */
	line-height: 1.3;
}

.gs-plan.is-featured .gs-plan__title,
.gs-plan.is-featured .gs-plan__amount {
	color: var(--gs-white);
}

.gs-plan.is-featured .gs-plan__period,
.gs-plan.is-featured .gs-plan__feature {
	color: var(--gs-pricing-on-dark);
}

/* Rows 18 tall, 12 apart: 30 from one to the next, as the frame. */
.gs-plan__features {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;                                      /* 12 */
	margin: 1.75rem 0 0;                               /* 28 */
	padding: 0;
	list-style: none;
}

.gs-plan__feature {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;                                     /* 10 */
	margin: 0;
	color: var(--gs-pricing-muted);
	font-size: 0.875rem;                               /* 14 */
	line-height: 1.125rem;                             /* 18 */
}

/* 14 square, centred on the first line. The frame's line is 2px at that
   size; in the icon's 24-unit box that is 2 x 24 / 14. */
.gs-plan__feature .gs-icon {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	margin-block-start: 0.125rem;
	color: var(--gs-pricing-red);
	stroke-width: 3.4286;
}

.gs-plan__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;                                  /* 48 */
	margin-block-start: 1.75rem;                       /* 28 */
	padding: 0.5rem 1.5rem;
	border: var(--gs-border-width) solid var(--gs-pricing-ink);
	border-radius: 0.5rem;                             /* 8 */
	background: transparent;
	color: var(--gs-pricing-ink);
	font-size: 0.9375rem;                              /* 15 */
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease, transform 160ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.gs-plan__btn:hover {
		background: var(--gs-pricing-ink);
		color: var(--gs-white);
	}
}

.gs-plan.is-featured .gs-plan__btn {
	min-height: 3.3125rem;                             /* 53 */
	border-color: var(--gs-pricing-red);
	background: var(--gs-pricing-red);
	color: var(--gs-white);
	font-size: 1rem;                                   /* 16 */
}

@media (hover: hover) and (pointer: fine) {
	.gs-plan.is-featured .gs-plan__btn:hover {
		border-color: #C41827;
		background: #C41827;
	}
}

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

.gs-plan__btn:focus-visible {
	outline: 2px solid var(--gs-pricing-ink);
	outline-offset: 3px;
}

.gs-plan.is-featured .gs-plan__btn:focus-visible {
	outline-color: var(--gs-white);
}

/* --- good fit / not right ------------------------------------------------------ */

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

.gs-fit {
	position: relative;
	padding: calc(2.25rem - var(--gs-border-width));   /* 36 with the line */
	border: var(--gs-border-width) solid var(--gs-pricing-line);
	border-radius: 1rem;                               /* 16 */
}

.gs-fit--yes {
	border-color: var(--gs-pricing-red);
	background: var(--gs-white);
}

.gs-fit--no {
	background: linear-gradient(180deg, var(--gs-white) 0%, #D5D5D5 100%);
}

/* Each drawing's frame where the section places it: the lit fire 66 wide,
   2.1 down and 28.8 in from the right; the logs 69 wide, 0.1 down and 18.8
   in. Both reach into the padding, as drawn; offsets come from inside the
   box's line, so the line comes off. */
.gs-fit__art {
	position: absolute;
	height: auto;
	pointer-events: none;
}

.gs-fit--yes .gs-fit__art {
	top: calc(0.1329rem - var(--gs-border-width));
	right: calc(1.8rem - var(--gs-border-width));
	width: 4.125rem;                                   /* 66 */
}

.gs-fit--no .gs-fit__art {
	top: calc(0rem - var(--gs-border-width));
	right: calc(1.1771rem - var(--gs-border-width));
	width: 4.3125rem;                                  /* 69 */
}

.gs-fit__title {
	margin: 0;
	max-width: calc(100% - 4rem);                      /* clear of the drawing */
	color: var(--gs-pricing-ink);
	font-size: 1.125rem;                               /* 18 */
	font-weight: 700;
	line-height: 1.3;
	/* base.css gives every heading display tracking; at 18 it squeezes. */
	letter-spacing: 0;
}

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

.gs-fit__item {
	position: relative;
	margin: 0;
	padding-inline-start: 1.125rem;                    /* 8 dot + 10 */
	color: #4A4A48;
	font-size: 0.875rem;                               /* 14 */
	line-height: 1.125rem;                             /* 18 */
}

.gs-fit__item::before {
	content: "";
	position: absolute;
	top: 0.3125rem;                                    /* centred on the first line */
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--gs-pricing-red);
}

.gs-fit--no .gs-fit__item::before {
	background: var(--gs-pricing-ink);
}

/* --- below three-across: one plan per row, centred ----------------------------- */

@media (max-width: 1099.98px) {
	.gs-pricing__plans {
		grid-template-columns: minmax(0, 1fr);
		max-width: 32rem;
		width: 100%;
		margin-inline: auto;
		gap: 2rem;
	}
}

@media (max-width: 899.98px) {
	.gs-pricing__fit {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}
}

/* --- phone ----------------------------------------------------------------------

   From Adarsh's phone SVG export (390 wide, 7th October 2026). His pick: the
   frame's sizes, spacing, weights, corners, line widths and shadow; desktop's
   colours, ticks and dots (the frame's green ticks, green edge, red crosses,
   greys and bold lead words are not used). Copy stays the desktop wording.

     band 64 top and bottom, 40 between blocks, left-aligned head: kicker 12,
     12 to the heading 800 32/38 -1px. Plans 24 apart, 16 corners, 24 in;
     label 12, 6 to title 800 20, 24 to price 800 32 + 13 "/ month", 24 to
     ticks (12 tick in a 16 slot, 8 to text, rows 30 apart), 24 to a 48 button
     (1.5px line, 700 15; the badged plan's also 48 / 15). The badge sits
     inside the black card, 24 above its label: 800 11 +1px, 22 tall, 10 in;
     card shadow 0 12 24 15%. Chips 12px, 28 tall, 12 in, 8 apart. Fit boxes
     16 apart: drawing top left, 16 to heading 700 16, 16 to list 13/17,
     items 10 apart, marker in a 16 slot centred on its item, 8 to text.
   ---------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
	.gs-pricing {
		padding-block: 4rem;                           /* 64 */
	}

	.gs-pricing__inner {
		gap: 2.5rem;                                   /* 40 */
	}

	/* The phone frame puts the chips after the plans. */
	.gs-pricing__head { order: 1; }
	.gs-pricing__plans { order: 2; }
	.gs-pricing__included { order: 3; }
	.gs-pricing__fit { order: 4; }

	.gs-pricing__head {
		align-items: flex-start;
		gap: 0.75rem;                                  /* 12 */
		text-align: left;
	}

	.gs-pricing__kicker {
		font-size: 0.75rem;                            /* 12 */
	}

	.gs-pricing__title {
		font-size: 2rem;                               /* 32 */
		line-height: 1.1875;                           /* 38 */
		letter-spacing: -0.0625rem;                    /* -1px */
	}

	/* plans */

	.gs-pricing__plans {
		gap: 1.5rem;                                   /* 24 */
	}

	.gs-plan,
	.gs-fit {
		padding: calc(1.5rem - var(--gs-border-width)); /* 24 with the line */
		border-radius: 1rem;                           /* 16 */
	}

	.gs-plan.is-featured {
		box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.15); /* 0 12 24, 15% */
	}

	/* In the card's flow, above its label. */
	.gs-plan__badge {
		position: static;
		align-self: flex-start;
		margin-block-end: 1.5rem;                      /* 24 */
		padding: 0.2406rem 0.625rem;                   /* 22 tall, 10 in */
		font-size: 0.6875rem;                          /* 11 */
		font-weight: 800;
		letter-spacing: 0.0625rem;                     /* 1px */
	}

	.gs-plan__label {
		font-size: 0.75rem;                            /* 12 */
	}

	.gs-plan__title {
		margin-block-start: 0.375rem;                  /* 6 */
		font-size: 1.25rem;                            /* 20 */
	}

	.gs-plan__price,
	.gs-plan__features {
		margin-block-start: 1.5rem;                    /* 24 */
	}

	.gs-plan__amount {
		font-size: 2rem;                               /* 32 */
	}

	.gs-plan__period {
		font-size: 0.8125rem;                          /* 13 */
	}

	/* A 12 tick centred in a 16 slot, 8 to the text; 2px line = 2 x 24 / 12. */
	.gs-plan__feature {
		gap: 0.5rem;
	}

	.gs-plan__feature .gs-icon {
		width: 0.75rem;
		height: 0.75rem;
		margin: 0.1875rem 0.125rem 0;
		stroke-width: 4;
	}

	.gs-plan__btn,
	.gs-plan.is-featured .gs-plan__btn {
		min-height: 3rem;                              /* 48 */
		margin-block-start: 1.5rem;                    /* 24 */
		font-size: 0.9375rem;                          /* 15 */
	}

	.gs-plan__btn {
		border-width: 0.09375rem;                      /* 1.5px */
	}

	/* included */

	.gs-pricing__included-label {
		font-size: 0.75rem;                            /* 12 */
	}

	.gs-pricing__chips {
		gap: 0.5rem;                                   /* 8 */
	}

	.gs-pricing__chip {
		/* 28 tall: 15.6 of text, the rest padding and line. */
		padding: 0.325rem calc(0.75rem - var(--gs-border-width));
		font-size: 0.75rem;                            /* 12 */
	}

	/* fit */

	.gs-pricing__fit {
		gap: 1rem;                                     /* 16 */
	}

	.gs-fit__art {
		position: static;
		display: block;
		margin-block-end: 1rem;                        /* 16 */
	}

	.gs-fit__title {
		max-width: none;
		font-size: 1rem;                               /* 16 */
	}

	.gs-fit__list {
		gap: 0.625rem;                                 /* 10 */
		margin-block-start: 1rem;                      /* 16 */
	}

	.gs-fit__item {
		padding-inline-start: 1.5rem;                  /* 16 slot + 8 */
		font-size: 0.8125rem;                          /* 13 */
		line-height: 1.0625rem;                        /* 17 */
	}

	/* The dot in the middle of its 16 slot, level with the item's middle. */
	.gs-fit__item::before {
		top: 50%;
		left: 0.25rem;
		transform: translateY(-50%);
	}
}