/* ==========================================================================
   GrowthStudioz, launch hero (first on Launchpad)

   Off Adarsh's Figma frames, 6th October 2026.

   Desktop (1440):
     content  1200 wide (120 in from the edges), 80px top and bottom; copy
              640 on the left, campfire 365 on the right, space between
     copy     24px between every part
     heading  DM Sans 800, 56/64, -2px, #0A0A0A; second line #E11D2E
     text     400, 18/28, #545454, 531 wide
     buttons  16px apart; 700 16px, 16/28 padding, 8px corners; red
              #E11D2E with a white arrow 8px after the label; outline
              #F9F9F9 with a dark 1px edge
     ticks    one row, 500 13px, red tick 8px before each
   Phone (390 frame, 20px sides):
     campfire first at half size (183), then the copy; heading 36/44 -1px
     #15171A; text 15/22 #4A4F55; buttons full width, 15px; outline fill
     #F3F6F1; ticks one under another, #4A4F55

   Colours the inspector did not show are sampled from the frames (Adarsh's
   pick). Tablet has no frame: it takes the phone's stacked order with the
   desktop's type, since the 640 copy column and the 365 art cannot share a
   768-1023 row.
   ========================================================================== */

.gs-launch {
	--gs-launch-ink: #0A0A0A;
	--gs-launch-text: var(--gs-text-grey);       /* #545454 */
	--gs-launch-red: var(--gs-red-highlight);    /* #E11D2E */
	--gs-launch-outline: #F9F9F9;

	padding-block: 5rem;                         /* 80 */
}

/* The copy column holds its 640 and the campfire takes what is left. Two
   minmax(0, ...) tracks would share a short row equally instead, and from
   1024 to 1164 that squeezed the copy to 467: the heading broke to three
   lines and the buttons stacked. */
.gs-launch__inner {
	display: grid;
	grid-template-columns: 40rem minmax(0, 22.8125rem);  /* 640, 365 */
	justify-content: space-between;
	align-items: center;
	column-gap: 2rem;
	max-width: 75rem;                            /* 1200 */
	margin-inline: auto;
}

.gs-launch__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;                                 /* 24 */
	min-width: 0;
}

.gs-launch__title {
	margin: 0;
	max-width: none;
	color: var(--gs-launch-ink);
	font-size: 3.5rem;                           /* 56 */
	font-weight: 800;
	line-height: 1.142857;                       /* 64 over 56 */
	letter-spacing: -0.125rem;                   /* -2px */
	/* The mockup breaks only where the words run out ("Launch your D2C /
	   brand" on a phone); base.css's balance would re-break it. */
	text-wrap: wrap;
}

.gs-launch__title-line {
	display: block;
}

.gs-launch__title-line--accent {
	color: var(--gs-launch-red);
}

.gs-launch__body {
	margin: 0;
	max-width: 33.1875rem;                       /* 531 */
	color: var(--gs-launch-text);
	font-size: 1.125rem;                         /* 18 */
	line-height: 1.75rem;                        /* 28 */
}

.gs-launch__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;                                   /* 16 */
}

/* The site's button, at this design's size: 16px bold at 16/28. Figma draws
   the 1px edge inside that padding and CSS adds it outside, so the padding
   gives the border back; that lands on the frame's 254 x 53. */
.gs-launch__btn {
	--gs-btn-size: 1rem;
	--gs-btn-pad-y: calc(1rem - var(--gs-border-width));
	--gs-btn-pad-x: calc(1.75rem - var(--gs-border-width));
	gap: 0.5rem;
	border-radius: 0.5rem;
	font-weight: 700;
	line-height: 1.3;
}

.gs-launch__btn--primary {
	--btn-fill: var(--gs-launch-red);
	--btn-line: var(--gs-launch-red);
	--btn-ink: var(--gs-white);
	--btn-fill-hover: var(--gs-red-deep);
	--btn-ink-hover: var(--gs-white);
}

.gs-launch__btn--outline {
	--btn-fill: var(--gs-launch-outline);
	--btn-line: var(--gs-launch-ink);
	--btn-ink: var(--gs-launch-ink);
	--btn-fill-hover: var(--gs-launch-ink);
	--btn-ink-hover: var(--gs-white);
}

.gs-launch__btn-icon {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
}

.gs-launch__ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.6875rem;                       /* 27 between ticks */
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-launch__tick {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--gs-launch-text);
	font-size: 0.8125rem;                        /* 13 */
	font-weight: var(--gs-weight-medium);
	line-height: 1;
}

.gs-launch__tick-icon {
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	color: var(--gs-launch-red);
}

.gs-launch__media {
	justify-self: end;
	width: 100%;
	max-width: 22.8125rem;                       /* 365 */
}

.gs-launch__art {
	display: block;
	width: 100%;
	height: auto;
	/* WP writes width="1" height="1" on an SVG, so the box comes from the
	   drawing's own proportions instead. */
	aspect-ratio: 377 / 342;
}

/* The brand strip (the division clients band) starts right where the hero's
   own bottom padding ends, as in the frame. Its usual top margin would add
   40 more on top of the hero's 80. Beats the band's single-class margin on
   specificity, so no !important. */
.gs-launch + .gs-clients--band {
	margin-block-start: 0;
}

/* --- tablet and phone: artwork first, at half size -------------------------- */

@media (max-width: 1023.98px) {
	.gs-launch__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.5rem;                         /* 24 */
	}

	.gs-launch__media {
		order: -1;
		justify-self: start;
		max-width: 11.40625rem;                  /* 182.5, half of 365 */
	}
}

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

@media (max-width: 767.98px) {
	.gs-launch {
		--gs-launch-ink: #15171A;
		--gs-launch-text: #4A4F55;
		--gs-launch-outline: #F3F6F1;

		padding-block: 2.5rem;                   /* 40 */
	}

	.gs-launch__title {
		font-size: 2.25rem;                      /* 36 */
		line-height: 1.222222;                   /* 44 over 36 */
		letter-spacing: -0.0625rem;              /* -1px */
	}

	.gs-launch__body {
		font-size: 0.9375rem;                    /* 15 */
		line-height: 1.375rem;                   /* 22 */
	}

	.gs-launch__actions {
		flex-direction: column;
		align-self: stretch;
	}

	.gs-launch__btn {
		--gs-btn-size: 0.9375rem;                /* 15 */
		width: 100%;
	}

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