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

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

   Desktop (1440):
     band     full width, #F9F9F9, 100 top and bottom; 56 between the
              heading, the cards and the line under them
     width    the stats row's: 80 to 1360 at 1440, 1320 at most (his pick
              over the frame's 120 in with the cards centred 20 further in)
     heading  769 wide; DM Sans 800 40/48 -1.5px #0A0A0A; 16 under it the
              line, 400 16/26 #737373
     cards    four to a row, 20 apart both ways; white, 16 corners, 1px
              #EAEAEA, shadow 0 10 20 at 2% black, 32 padding, 20 between
              photo and text; at least 400 tall (the frame fixes 400, which
              the first card's text overruns), every card in a row as tall
              as the tallest
     photo    211 x 160 in the frame, 12 corners, cropped to fill
     text     title 700 18px #0A0A0A; 8 under it 14/22 #737373 (read off
              the screenshots: no inspector for it)
     line     under the cards (his section SVG export, 7th October 2026):
              53 below them, centred, 600 48/62 -2.176px #0A0A0A on two
              lines ("All packed into a / 26 WEEK launch plan."), the red
              words #E11D2E at 900; phone 32 below, 600 32/42 -1.5px with
              the red words at 600, as drawn
   Tablet and large phones (600 up): two to a row. Phones under 600 (his
   pick, no frame): one to a row.
   ========================================================================== */

.gs-pillars {
	--gs-pillars-ink: #0A0A0A;
	--gs-pillars-text: #737373;
	--gs-pillars-line: #EAEAEA;

	/* Full bleed, same fix as the clients band and the stats row: 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: #F9F9F9;
}

.gs-pillars__inner {
	display: flex;
	flex-direction: column;
	gap: 3.5rem;                                       /* 56 */
	max-width: 82.5rem;                                /* 1320, as the stats row */
	margin-inline: auto;
}

/* The frame's box is 769, but the browser sets DM Sans 800 a little wider
   than Figma does (the heading measures 801), and 769 broke it onto two
   lines. 820 keeps it on one, as drawn. */
.gs-pillars__head {
	display: flex;
	flex-direction: column;
	gap: 1rem;                                         /* 16 */
	max-width: 51.25rem;                               /* 820 */
}

.gs-pillars__title {
	margin: 0;
	max-width: none;
	color: var(--gs-pillars-ink);
	font-size: 2.5rem;                                 /* 40 */
	font-weight: 800;
	line-height: 1.2;                                  /* 48 */
	letter-spacing: -0.09375rem;                       /* -1.5px */
}

.gs-pillars__intro {
	margin: 0;
	color: var(--gs-pillars-text);
	font-size: 1rem;                                   /* 16 */
	line-height: 1.625rem;                             /* 26 */
}

/* 53 under the cards: the column's 56 gap less 3. */
.gs-pillars__note {
	margin: -0.1875rem 0 0;
	max-width: none;
	color: var(--gs-pillars-ink);
	font-size: 3rem;                                   /* 48 */
	font-weight: 600;
	line-height: 3.875rem;                             /* 62 */
	letter-spacing: -0.136rem;                         /* -2.176px */
	text-align: center;
	text-wrap: balance;
}

.gs-pillars__note-accent {
	color: var(--gs-pm-red);                           /* #E11D2E */
	font-weight: 900;
}

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

.gs-pillar {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;                                      /* 20 */
	min-height: 25rem;                                 /* 400 */
	margin: 0;
	padding: 2rem;                                     /* 32 */
	border: var(--gs-border-width) solid var(--gs-pillars-line);
	border-radius: 1rem;                               /* 16 */
	background: var(--gs-white);
	box-shadow: 0 0.625rem 1.25rem rgb(0 0 0 / 0.02);
}

.gs-pillar__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 211 / 160;
	object-fit: cover;
	border-radius: 0.75rem;                            /* 12 */
}

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

.gs-pillar__title {
	margin: 0;
	color: var(--gs-pillars-ink);
	font-size: 1.125rem;                               /* 18 */
	font-weight: 700;
	line-height: 1.3;                                  /* 23 */
	letter-spacing: 0;
	/* Plain wrapping, as the frame breaks them ("Positioning and Launch /
	   Strategy"); base.css balances headings, which split them differently. */
	text-wrap: wrap;
}

.gs-pillar__text {
	margin: 0;
	color: var(--gs-pillars-text);
	font-size: 0.875rem;                               /* 14 */
	line-height: 1.375rem;                             /* 22 */
}

.gs-pillars--empty {
	padding-block: 2.5rem;
}

/* --- below four-across: two to a row ------------------------------------------
   Four cards need about 1240 of screen before their photos and titles get
   cramped (each card's text column under ~190, against the frame's 211). */

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

	.gs-pillar {
		min-height: 0;
	}
}

/* --- tablet ------------------------------------------------------------------- */

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

/* --- phone: one to a row ---------------------------------------------------------- */

@media (max-width: 767.98px) {
	.gs-pillars {
		--gs-pillars-ink: #15171A;

		padding-block: 2.8125rem;                      /* 45, the phone section step */
	}

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

	.gs-pillars__head {
		gap: 0.75rem;
	}

	/* Scaled as the hero's heading is on a phone (56 to 36). */
	.gs-pillars__title {
		font-size: 1.75rem;                            /* 28 */
		line-height: 1.2857;                           /* 36 */
		letter-spacing: -0.0625rem;
	}

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

	.gs-pillars__note {
		margin-block-start: 0;                         /* 32, the column's gap */
		font-size: 2rem;                               /* 32 */
		line-height: 2.625rem;                         /* 42 */
		letter-spacing: -0.09375rem;                   /* -1.5px */
	}

	.gs-pillars__note-accent {
		font-weight: 600;
	}

	.gs-pillars__grid {
		gap: 1rem;
	}

	.gs-pillar {
		padding: 1.5rem;                               /* 24 */
		gap: 1rem;
	}
}

/* One to a row on phones (his pick). Kept to phones proper: from 600 up, two
   still fit, and one would make each card 700 wide and 650 tall. */
@media (max-width: 599.98px) {
	.gs-pillars__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}