/* ==========================================================================
   Promises (gs/promises), Launchpad, between the Mid CTA and Pricing

   From Adarsh's export "Promises Section-desktop.svg" (1440 x 1263),
   7th October 2026. His picks: content at the page width (1280 at 1440, as
   Results and Pricing; the frame's is 1200), the number-to-word dash drawn as
   a short line, copy as drawn except the "campaigns" typo, the grey relaunch
   label kept as drawn.

   Desktop: white band, 100 above and below, 56 between blocks.
   Head: kicker 700 14 +1.5px #E11D2E caps; 16; heading 800 40/48 #0A0A0A.
   Promises three across, 32 apart, a 1px #EAEAEA line down the right of the
   first two: label 700 11 +1px #737373 caps; 16; title 700 22; 16; text
   400 14/22 #737373.
   Team: title 700 22; 8; line 400 14 #737373; 32; five cards 16 apart
   (225.6 : 227.6 x 4), radius 12, 20 in, 195.5 tall. Lead card black: badge
   36 square radius 8 #E11D2E, "LL" 700 14 white; 8; title 900 13 #F1F1F1; 8;
   text 400 12/18 #F1F1F1. Division cards #F9F9F9 with a 1px edge in the
   division's colour: logo lockup 61 tall at the top, title 700 13 #0A0A0A, 8,
   text 400 12/18 #737373 at the bottom.
   Relaunch card: 1px #E11D2E, radius 24, #FFF8F8 to white, 24 in, two equal
   columns 80 apart, both centred top to bottom. Left: label 700 16 / 0.56em
   #7B8187 caps; 24; heading 800 40/48 black; 24; text 400 18/27 #4A4F55;
   24; black button full width, 69 tall, radius 16, 700 16 #F1F1F1 and a 14
   Lucide arrow-right. Right: pain points 56 tall, 16 apart, white, 1px
   #DDDDDD, radius 12, shadow 0 4 12 at 3%; a 24 circle #C8412B at 10% with a
   red alert mark, 20 in; 16; text 500 16 #15171A.

   Phone (up to 767): his "Promises-Mobile.svg" (390), with his picks:
   desktop's greys, and the relaunch card keeps its button and all four pain
   points (the frame drops the button and points 3-4). See the phone block at
   the end. Tablet (768-1199): provisional, no frame.
   ========================================================================== */

.gs-promises {
	--gs-promises-ink: #0A0A0A;
	--gs-promises-muted: #737373;
	--gs-promises-line: #EAEAEA;
	--gs-promises-red: var(--gs-pm-red);                 /* #E11D2E */

	/* Full bleed, as the bands around it: 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: 4rem var(--gs-gutter-now);                  /* phone: 64 */
	background: #FFFFFF;
}

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

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

.gs-promises__head {
	display: flex;
	flex-direction: column;
	gap: 1rem;                                           /* 16 */
}

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

.gs-promises__title {
	margin: 0;
	max-width: none;
	color: var(--gs-promises-ink);
	font-size: 2rem;                                     /* phone: 32 */
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0;
	text-wrap: balance;
}

/* --- the three promises -------------------------------------------------------- */

.gs-promises__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-promises__item {
	display: flex;
	flex-direction: column;
	gap: 1rem;                                           /* 16 */
	max-width: none;
	margin: 0;
}

/* Stacked: the lines between promises run across, under each but the last. */
.gs-promises__item:not(:last-child) {
	padding-block-end: 1.5rem;
	border-block-end: 1px solid var(--gs-promises-line);
}

.gs-promises__label {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	max-width: none;
	color: var(--gs-promises-muted);
	font-size: 0.6875rem;                                /* 11 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.0625rem;                           /* 1 */
	text-transform: uppercase;
}

/* The frame's typed dash, drawn instead. */
.gs-promises__rule {
	flex: none;
	width: 0.625rem;                                     /* 10 */
	height: 1px;
	background: currentColor;
}

.gs-promises__item-title {
	margin: 0;
	max-width: none;
	color: var(--gs-promises-ink);
	font-size: 1.375rem;                                 /* 22 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

.gs-promises__item-text {
	margin: 0;
	/* Stacked on tablets, a full-width line ran ~100 characters. */
	max-width: 65ch;
	color: var(--gs-promises-muted);
	font-size: 0.875rem;                                 /* 14 */
	line-height: 1.375rem;                               /* 22 */
	text-wrap: pretty;
}

/* --- your launch team --------------------------------------------------------- */

.gs-promises__team {
	display: flex;
	flex-direction: column;
	gap: 2rem;                                           /* 32 */
}

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

.gs-promises__team-title {
	margin: 0;
	max-width: none;
	color: var(--gs-promises-ink);
	font-size: 1.375rem;                                 /* 22 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

.gs-promises__team-line {
	margin: 0;
	max-width: none;
	color: var(--gs-promises-muted);
	font-size: 0.875rem;                                 /* 14 */
	line-height: 1.3;
}

/* Phone: two to a row, the lead card across both. */
.gs-promises__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-promises__card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	max-width: none;
	margin: 0;
	/* 20 in from the outer edge: the 1px line plus 19. */
	padding: 1.1875rem;
	border: 1px solid var(--gs-promises-edge, var(--gs-promises-line));
	border-radius: 0.75rem;                              /* 12 */
	background: #F9F9F9;
}

.gs-promises__card--lead {
	grid-column: 1 / -1;
	gap: 0.5rem;                                         /* 8 */
	border-color: #000000;
	background: #000000;
	color: #F1F1F1;
}

.gs-promises__badge {
	display: grid;
	place-items: center;
	width: 2.25rem;                                      /* 36 */
	height: 2.25rem;
	border-radius: 0.5rem;                               /* 8 */
	background: var(--gs-promises-red);
	color: #FFFFFF;
	font-size: 0.875rem;                                 /* 14 */
	font-weight: 700;
	line-height: 1;
}

/* The lockups are cut 61 tall with the logo at their top-left, so every card
   draws them at the frame's size. A logo uploaded later shows at the same
   height, shrinking only if it would run wider than the card. */
.gs-promises__logo {
	display: block;
	align-self: flex-start;
	width: auto;
	max-width: 100%;
	height: 3.8125rem;                                   /* 61 */
	object-fit: contain;
	object-position: left top;
}

.gs-promises__card-copy {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;                                         /* 8 */
	margin-block-start: auto;
}

.gs-promises__card-title {
	margin: 0;
	max-width: none;
	color: var(--gs-promises-ink);
	font-size: 0.8125rem;                                /* 13 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

.gs-promises__card-text {
	margin: 0;
	max-width: none;
	color: var(--gs-promises-muted);
	font-size: 0.75rem;                                  /* 12 */
	line-height: 1.125rem;                               /* 18 */
}

.gs-promises__card--lead .gs-promises__card-title {
	color: #F1F1F1;
	font-weight: 900;
}

.gs-promises__card--lead .gs-promises__card-text {
	color: #F1F1F1;
}

/* --- relaunch card -------------------------------------------------------------- */

.gs-promises__relaunch {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	padding: 1.25rem;                                    /* phone: 20 */
	border: 1px solid var(--gs-promises-red);
	border-radius: 1.5rem;                               /* 24 */
	background: linear-gradient(180deg, #FFF8F8 0%, #FFFFFF 100%);
}

.gs-promises__relaunch-copy {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;                                         /* 24 */
	min-width: 0;
}

/* #7B8187 on #FFF8F8 is 3.8:1, under AA's 4.5 at this size. Kept as drawn
   (Adarsh, 7th October 2026). */
.gs-promises__relaunch-kicker {
	margin: 0;
	max-width: none;
	color: #7B8187;
	font-size: 0.875rem;                                 /* phone: 14 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.56em;
	text-transform: uppercase;
}

.gs-promises__relaunch-title {
	margin: 0;
	max-width: none;
	color: #000000;
	font-size: 1.75rem;                                  /* phone: 28 */
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0;
	/* Not base.css's balance: both frames break it "Stuck at a plateau? We do
	   / relaunches too.", which plain wrapping gives at their widths. The
	   seeded copy keeps "We do" together (a no-break space), so narrower or
	   in-between widths break at the question mark instead; pretty stops a
	   lone last word. */
	text-wrap: pretty;
}

.gs-promises__relaunch-text {
	margin: 0;
	max-width: none;
	color: #4A4F55;
	font-size: 1rem;                                     /* phone: 16 */
	line-height: 1.5;
	text-wrap: pretty;
}

.gs-promises__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;                                       /* 10 */
	width: 100%;
	/* 69 tall: 21 of text, 23 above and below, the 1px line. Sides only 12:
	   the label needs 207 and a 320 phone leaves 214. */
	padding: 1.4375rem 0.75rem;
	border: 1px solid #000000;
	border-radius: 1rem;                                 /* 16 */
	background: #000000;
	color: #F1F1F1;
	font-size: 1rem;                                     /* 16 */
	font-weight: 700;
	line-height: 1.3125;                                 /* 21 */
	text-decoration: none;
	touch-action: manipulation;
	transition:
		transform var(--gs-dur-press) var(--gs-ease-out),
		background-color var(--gs-dur-hover) ease,
		border-color var(--gs-dur-hover) ease,
		color var(--gs-dur-hover) ease;
}

.gs-promises__btn svg {
	flex: none;
	width: 0.875rem;                                     /* 14 */
	height: 0.875rem;
}

/* `a.` in front: base.css's a:not(.gs-btn):hover (0,2,1) turns link text the
   accent red, which would leave red text on the black. */
a.gs-promises__btn:hover,
a.gs-promises__btn:focus {
	color: #F1F1F1;
	text-decoration: none;
}

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

.gs-promises__btn:focus-visible {
	outline: 0.125rem solid #0A0A0A;
	outline-offset: 0.1875rem;
}

/* Red on hover, as the site's other black buttons. Mouse only. */
@media (hover: hover) and (pointer: fine) {
	a.gs-promises__btn:hover {
		border-color: var(--gs-promises-red);
		background: var(--gs-promises-red);
		color: #FFFFFF;
	}
}

.gs-promises__points {
	display: flex;
	flex-direction: column;
	gap: 1rem;                                           /* 16 */
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

/* Not links, so no hover: a hover would say they can be clicked. */
.gs-promises__point {
	display: flex;
	align-items: center;
	gap: 1rem;                                           /* 16 */
	min-height: 3.5rem;                                  /* 56 */
	max-width: none;
	margin: 0;
	padding: 0.5rem 1.1875rem;                           /* 20 in with the line */
	border: 1px solid #DDDDDD;
	border-radius: 0.75rem;                              /* 12 */
	background: #FFFFFF;
	box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 0.031);
	color: #15171A;
	font-size: 1rem;                                     /* 16 */
	font-weight: 500;
	line-height: 1.3;
}

.gs-promises__alert {
	display: grid;
	flex: none;
	place-items: center;
	width: 1.5rem;                                       /* 24 */
	height: 1.5rem;
	border-radius: 50%;
	background: rgb(200 65 43 / 0.102);                  /* #C8412B at 10% */
	color: var(--gs-promises-red);
}

.gs-promises__alert svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* "16-week", "30-min": never broken at the hyphen. */
.gs-promises__nowrap {
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	a.gs-promises__btn:active {
		transform: none;
	}
}

/* --- tablet (provisional) ------------------------------------------------------- */

@media (min-width: 768px) {
	.gs-promises {
		padding-block: 5rem;                             /* 80 */
	}

	.gs-promises__inner {
		gap: 3.5rem;                                     /* 56 */
	}

	.gs-promises__title {
		font-size: 2.5rem;                               /* 40 */
	}

	.gs-promises__cards {
		gap: 1rem;
	}

	.gs-promises__relaunch {
		padding: 1.5rem;
	}

	.gs-promises__relaunch-kicker {
		font-size: 1rem;                                 /* 16 */
	}

	.gs-promises__relaunch-title {
		font-size: 2.5rem;                               /* 40 */
	}

	.gs-promises__relaunch-text {
		font-size: 1.125rem;                             /* 18 */
	}

	/* Stacked, the button keeps the frame's width rather than running across
	   the whole card. */
	.gs-promises__btn {
		max-width: 33.4375rem;                           /* 535 */
	}
}

@media (min-width: 900px) {
	/* Four division cards across, the lead card above them. */
	.gs-promises__cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- desktop: the frame ---------------------------------------------------------- */

@media (min-width: 1024px) {
	.gs-promises {
		padding-block: 6.25rem;                          /* 100 */
	}

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

	/* Side by side: the lines run down the right of the first two. */
	.gs-promises__item:not(:last-child) {
		padding-block-end: 0;
		padding-inline-end: 1.5rem;
		border-block-end: 0;
		border-inline-end: 1px solid var(--gs-promises-line);
	}
}

@media (min-width: 1200px) {
	/* Two columns only from here: at 1024 each was 367 wide, the heading took
	   three lines and every pain point two. */
	.gs-promises__relaunch {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		column-gap: 5rem;                                /* 80 */
	}

	.gs-promises__btn {
		max-width: none;
	}

	/* All five in one row, the lead card a touch narrower as drawn. */
	.gs-promises__cards {
		grid-template-columns: minmax(0, 225.6fr) repeat(4, minmax(0, 227.6fr));
	}

	.gs-promises__card {
		min-height: 12.221rem;                           /* 195.5 */
	}

	.gs-promises__card--lead {
		grid-column: auto;
	}
}

/* --- phone: the frame ------------------------------------------------------------

   From "Promises-Mobile.svg" (390 x 2212), 7th October 2026. Sizes, spacing
   and shapes are the frame's; colours stay desktop's (Adarsh's pick).
   48 above and below. Kicker 700 12; 12; heading 800 32/38, plain wrapping so
   it breaks as drawn ("Three promises we put / in writing."). 40.
   Promises one under another, 24 apart, each under a 3px line, 16 from the
   top of the line to the label 700 10; 12; title 700 18; 12; text 13/20.
   40. Team heading 600 32 / -1.5px; 8; line 14; 32; cards one per row,
   full width, 195.5 tall, 16 apart, the desktop card inside. 40.
   Relaunch card radius 16, 20 in: label 700 11 / 2px; 16; heading 800 20/26;
   16; text 13/20; 16; button 48 tall (not in the frame: his pick keeps it);
   16; pain points 36 tall, 8 apart, radius 8, no shadow, 14 in, a 16 circle,
   10, text 500 12.
   ------------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.gs-promises {
		padding-block: 3rem;                             /* 48 */
	}

	.gs-promises__head {
		gap: 0.75rem;                                    /* 12 */
	}

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

	.gs-promises__title {
		line-height: 1.1875;                             /* 38 */
		text-wrap: wrap;
	}

	.gs-promises__item,
	.gs-promises__item:not(:last-child) {
		gap: 0.75rem;                                    /* 12 */
		padding-block: 0.8125rem 0;                      /* 16 from the top, the line included */
		border-block-start: 3px solid var(--gs-promises-line);
		border-block-end: 0;
	}

	.gs-promises__label {
		font-size: 0.625rem;                             /* 10 */
	}

	.gs-promises__item-title {
		font-size: 1.125rem;                             /* 18 */
	}

	.gs-promises__item-text {
		font-size: 0.8125rem;                            /* 13 */
		line-height: 1.25rem;                            /* 20 */
	}

	.gs-promises__team-title {
		font-size: 2rem;                                 /* 32 */
		font-weight: 600;
		letter-spacing: -0.09375rem;                     /* -1.5 */
	}

	.gs-promises__cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;                                       /* 16 */
	}

	.gs-promises__card {
		min-height: 12.221rem;                           /* 195.5 */
	}

	.gs-promises__relaunch {
		gap: 1rem;                                       /* 16 */
		padding: 1.1875rem;                              /* 20 with the line */
		border-radius: 1rem;                             /* 16 */
	}

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

	.gs-promises__relaunch-kicker {
		font-size: 0.6875rem;                            /* 11 */
		letter-spacing: 0.125rem;                        /* 2 */
	}

	.gs-promises__relaunch-title {
		font-size: 1.25rem;                              /* 20 */
		line-height: 1.3;                                /* 26 */
	}

	.gs-promises__relaunch-text {
		font-size: 0.8125rem;                            /* 13 */
		line-height: 1.25rem;                            /* 20 */
	}

	/* 48 tall, the radius of the rows under it. */
	.gs-promises__btn {
		padding: 0.8125rem 0.75rem;
		border-radius: 0.5rem;                           /* 8 */
		font-size: 0.9375rem;                            /* 15 */
		line-height: 1.25rem;                            /* 20 */
	}

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

	.gs-promises__point {
		gap: 0.625rem;                                   /* 10 */
		min-height: 2.25rem;                             /* 36 */
		padding: 0.25rem 0.8125rem;                      /* 14 in with the line */
		border-radius: 0.5rem;                           /* 8 */
		box-shadow: none;
		font-size: 0.75rem;                              /* 12 */
	}

	.gs-promises__alert {
		width: 1rem;                                     /* 16 */
		height: 1rem;
	}

	/* A touch larger than the circle so the mark keeps the frame's height. */
	.gs-promises__alert svg {
		width: 1.125rem;
		height: 1.125rem;
	}
}