/* ==========================================================================
   GrowthStudioz, FAQ

   A heading and a list of questions that open onto their answers (Adarsh,
   1st October 2026, Performance Marketing).

   Off the Figma inspector:
     desktop  heading: the section title (64px), centred, in a 70px line; 181
              under the band above, 56 to the list
              list: 1201 wide, two columns of 584.5, 32 between; rows 20 apart
     row      white, 38 tall: 10 padding, a 0.7px #C5C5C5 rule under it (inside
              the 38), shadow 0 4 20 at 5% black
              question: DM Sans 400, 14px, black, in an 18px line
              mark: a 17px black disc with a white plus
     phone    heading "FAQs" 32px, on the left, in a 42px line; 32 under the
              band above, 24 to the list; one column 367 wide (11.5 from the
              screen's edges), the rows touching

   The frames only show the rows closed. Open, the answer sits under its
   question in grey and the plus becomes a minus.
   ========================================================================== */

.gs-faq {
	padding-block: var(--gs-section-pad);
}

.gs-faq__inner {
	max-width: 75.0625rem;                         /* 1201px */
	margin-inline: auto;
}

.gs-faq__title {
	margin: 0 0 3.5rem;                            /* 56px */
	color: #000;
	line-height: 1.09375;                          /* 70 over 64 */
	text-align: center;
}

/* Two headings, one per width, when the page sets a separate phone one. */
.gs-faq__title-phone {
	display: none;
}

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

.gs-faq__col {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;                                  /* 20px */
	min-width: 0;
}

.gs-faq__item {
	max-width: none;
	border-block-end: 0.7px solid #C5C5C5;
	background: var(--gs-white);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.gs-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	max-width: none;
	/* The rule sits inside the row's 38, so its thickness comes off the
	   padding under the text. */
	padding: 0.625rem 0.625rem calc(0.625rem - 0.7px);  /* 10px */
	color: #000;
	font-size: 0.875rem;                           /* 14px */
	font-weight: var(--gs-weight-regular);
	line-height: 1.2857;                           /* 18 over 14 */
}

summary.gs-faq__q {
	cursor: pointer;
	/* No disclosure triangle: the plus is the affordance. */
	list-style: none;
}

summary.gs-faq__q::-webkit-details-marker {
	display: none;
}

summary.gs-faq__q:focus-visible {
	outline: 2px solid var(--gs-ink);
	outline-offset: 2px;
}

.gs-faq__icon {
	flex: none;
	width: 1.0625rem;                              /* 17px */
	height: 1.0625rem;
	color: #111111;
}

/* Open: the upright stroke folds flat into the level one, leaving a minus. */
.gs-faq__icon-v {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.gs-faq__item[open] .gs-faq__icon-v {
	transform: scaleY(0);
}

.gs-faq__a {
	/* In line with the question, and clear of the mark's column. */
	padding: 0.125rem 2.6875rem 0.875rem 0.625rem;
	color: #545454;
	font-size: 0.875rem;                           /* 14px */
	line-height: 1.5;
}

.gs-faq__a p {
	margin: 0 0 0.5rem;
	max-width: none;
}

.gs-faq__a p:last-child {
	margin-block-end: 0;
}

/* The answer eases in. It is already in place and readable without this:
   the animation only softens its arrival. */
.gs-faq__item[open] > .gs-faq__a {
	animation: gs-faq-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes gs-faq-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

/* --- empty (editors only) ------------------------------------------------- */

.gs-faq--empty {
	display: grid;
	place-items: center;
	min-height: 160px;
	padding: var(--gs-space-6);
	border: 1px dashed var(--gs-border);
	background: var(--gs-surface-alt);
	color: var(--gs-body);
}

.gs-faq--empty p {
	margin: 0;
	max-width: none;
}

/* --- desktop --------------------------------------------------------------
   181 between the band above and the heading, where the site's gap is 80.
   The band above brings its own 40, so this one brings the other 141. */

@media (min-width: 768px) {
	.gs-faq {
		padding-block-start: 8.8125rem;            /* 141px */
	}
}

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

@media (max-width: 767px) {
	/* 32 under the band above: it brings 22.5, this brings the other 9.5. */
	.gs-faq {
		padding-block-start: calc(2rem - var(--gs-section-pad));
	}

	/* 11.5 from the screen's edges, a little wider than the page's gutter. */
	.gs-faq__inner {
		margin-inline: calc(0.71875rem - var(--gs-gutter-now));
	}

	.gs-faq__title {
		margin-block-end: 1.5rem;                  /* 24px */
		line-height: 1.3125;                       /* 42 over 32 */
		text-align: start;
	}

	.gs-faq__title-wide {
		display: none;
	}

	.gs-faq__title-phone {
		display: inline;
	}

	/* One list, the rows touching. */
	.gs-faq__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.gs-faq__col {
		gap: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-faq__item[open] > .gs-faq__a {
		animation: none;
	}
}

/* --- "launch" (Launchpad, 6th October 2026) ---------------------------------
   The same rows under a smaller, heavier heading, the page's section heading
   (DM Sans 800 40/48 -1.5px #0A0A0A, as Pillars), read off the frame; 100 of
   white above and below, as the bands around it. Last on the page, so the
   bottom 100 is the space to the footer. */

.gs-faq--launch {
	padding-block: 6.25rem;                        /* 100 */
}

.gs-faq--launch .gs-faq__title {
	color: #0A0A0A;
	font-size: 2.5rem;                             /* 40 */
	font-weight: 800;
	line-height: 1.2;                              /* 48 */
	letter-spacing: -0.09375rem;                   /* -1.5px */
}

@media (max-width: 767px) {
	/* 45 above and below, the phone section step, as Pillars. */
	.gs-faq--launch {
		padding-block: 2.8125rem;
	}

	/* Scaled as the page's other headings are on a phone. */
	.gs-faq--launch .gs-faq__title {
		color: #15171A;
		font-size: 1.75rem;                        /* 28 */
		line-height: 1.2857;                       /* 36 */
		letter-spacing: -0.0625rem;
	}
}