/* ==========================================================================
   GrowthStudioz, why launches stall (Launchpad first)

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

   Desktop (1440):
     band     white, 100 top and bottom; 56 between the top row and the cards
     width    the stats row's and the pillars': 1320 at most, so all three
              share one left edge (the frame's 1200 would sit 40 in from both)
     top row  the illustration (450.63 x 407) on the left, the copy column
              (588) on the right, spread apart as the frame's space-between
              row is, the copy centred against the art
     copy     kicker DM Sans 700 14 uppercase +1.5px #E11D2E; 16; heading
              800 64/70 -3.02px #0A0A0A, its ending red at 900 (red at every
              size, his pick over the frame's black on desktop); 16; line 400
              16 #737373
     cards    four to a row, 24 apart; 24 padding, 16 between the parts, 12
              corners, 1px #EAEAEA, #FFF8F8 into white; an 80 icon, the quote
              500 16 #0A0A0A, the label 700 13 uppercase #E11D2E. Every card
              in a row as tall as the tallest, the label right under its quote

   Figma lists these texts at "100%" line height, but its own boxes measure
   1.3 (the line is 42 tall over two lines, the quote 63 over three), so 1.3
   is what is set.

   Tablet: the art goes above the copy below 1024, the cards two to a row
   below 1240 (the pillars' break, so the page changes shape in one place).
   Phone: from Adarsh's phone frame (see the phone block). Quotes are italic
   there only; desktop's are upright.
   ========================================================================== */

.gs-problem {
	--gs-problem-ink: #0A0A0A;
	--gs-problem-text: #737373;
	--gs-problem-red: var(--gs-red-highlight);        /* #E11D2E */
	--gs-problem-line: #EAEAEA;

	/* Full bleed, same fix as the stats row and the pillars: 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: 6.25rem var(--gs-gutter-now);             /* 100 */
	background: var(--gs-white);
}

.gs-problem__inner {
	display: flex;
	flex-direction: column;
	gap: 3.5rem;                                       /* 56 */
	max-width: 82.5rem;                                /* 1320 */
	margin-inline: auto;
}

/* --- top row: art, then copy ------------------------------------------------- */

.gs-problem__top {
	display: grid;
	grid-template-columns: minmax(0, 28.1644rem) minmax(0, 36.75rem);   /* 450.63, 588 */
	justify-content: space-between;
	align-items: center;
	column-gap: 3rem;                                  /* the least it closes to */
}

/* No art: the copy takes the row on its own. */
.gs-problem__top--text {
	grid-template-columns: minmax(0, 36.75rem);
}

.gs-problem__art-img {
	display: block;
	width: 100%;
	height: auto;
}

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

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

/* 64 at the frame's width, easing down as the copy column narrows so the
   longest line ("launches fail, with") always fits it. */
.gs-problem__title {
	margin: 0;
	max-width: none;
	color: var(--gs-problem-ink);
	font-size: clamp(2.5rem, 4.9231vw, 4rem);          /* 64 from 1300 up */
	font-weight: 800;
	line-height: 1.09375;                              /* 70 */
	letter-spacing: -0.0472em;                         /* -3.02px at 64 */
}

.gs-problem__accent {
	color: var(--gs-problem-red);
	font-weight: 900;
}

.gs-problem__intro {
	margin: 0;
	max-width: none;
	color: var(--gs-problem-text);
	font-size: 1rem;                                   /* 16 */
	line-height: 1.3;
}

/* --- pain-point cards -------------------------------------------------------- */

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

.gs-pain {
	display: flex;
	flex-direction: column;
	gap: 1rem;                                         /* 16 */
	margin: 0;
	padding: 1.5rem;                                   /* 24 */
	border: var(--gs-border-width) solid var(--gs-problem-line);
	border-radius: 0.75rem;                            /* 12 */
	background: linear-gradient(180deg, #FFF8F8 0%, var(--gs-white) 100%);
}

.gs-pain__icon {
	display: block;
	width: 5rem;                                       /* 80 */
	height: 5rem;
	object-fit: contain;
}

.gs-pain__quote {
	margin: 0;
	max-width: none;
	color: var(--gs-problem-ink);
	font-size: 1rem;                                   /* 16 */
	font-weight: 500;
	line-height: 1.3;
}

.gs-pain__label {
	margin: 0;
	max-width: none;
	color: var(--gs-problem-red);
	font-size: 0.8125rem;                              /* 13 */
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

/* --- below four-across: two to a row ----------------------------------------- */

@media (max-width: 1239.98px) {
	.gs-problem__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- tablet: art above the copy ---------------------------------------------- */

@media (max-width: 1023.98px) {
	.gs-problem {
		padding-block: 4.5rem;                         /* 72, as the pillars */
	}

	.gs-problem__top {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.5rem;                               /* 40 */
	}

	.gs-problem__art {
		justify-self: center;
		width: min(28.1644rem, 100%);
	}

	.gs-problem__title {
		font-size: 3rem;                               /* 48 */
		line-height: 1.125;
	}
}

/* --- phone (Adarsh's phone frame, 6th October 2026) --------------------------
   Content 350 at 390. 48 above and below; art full width, 32 to the copy,
   copy lines 12 apart, 32 to the cards. Kicker 700 12 +1.5px; heading 800
   32/38 -1px #15171A, its ending red at 900; line 400 14/20 #4A4F55. Cards
   two to a row 12 apart, 16 padding, 12 between the parts, border #DCDFD8;
   icon stays 80; quote 500 ITALIC 14/20 #15171A; label 700 11. The phone's
   own ink and border, not desktop's (breakpoint values kept apart). */

@media (max-width: 767.98px) {
	.gs-problem {
		--gs-problem-ink: #15171A;
		--gs-problem-text: #4A4F55;
		--gs-problem-line: #DCDFD8;

		padding-block: 3rem;                           /* 48 */
	}

	.gs-problem__inner {
		gap: 2rem;                                     /* 32 */
	}

	.gs-problem__top {
		row-gap: 2rem;                                 /* 32 */
	}

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

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

	.gs-problem__title {
		font-size: 2rem;                               /* 32 */
		line-height: 1.1875;                           /* 38 */
		letter-spacing: -0.0625rem;                    /* -1px */
		/* Plain wrapping, as the frame breaks it ("92% of new launches / fail,
		   with us 65% / succeed!"); base.css balances headings, which split it
		   differently. */
		text-wrap: wrap;
	}

	.gs-problem__intro {
		font-size: 0.875rem;                           /* 14 */
		line-height: 1.25rem;                          /* 20 */
	}

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

	.gs-pain {
		gap: 0.75rem;                                  /* 12 */
		padding: 1rem;                                 /* 16 */
	}

	.gs-pain__quote {
		font-size: 0.875rem;                           /* 14 */
		font-style: italic;
		line-height: 1.25rem;                          /* 20 */
	}

	.gs-pain__label {
		font-size: 0.6875rem;                          /* 11 */
	}
}