@media (max-width: 960px) {
	.pv-grid--6 {
		grid-template-columns: repeat(2, 1fr);
	}

	.pv-live .pv-feature-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	/* Mobile section rhythm is set by re-pointing the spacing token, NOT by
	   restating padding on .pv-section. A .pv-section rule here would have the
	   same specificity as (but come later than) the per-section padding in
	   sections.css, silently discarding every production-matched section gap
	   below this breakpoint. Redefining the token lets sections that opt out of
	   the default keep their own value at every width, while sections that use
	   the default still tighten up on mobile. */
	:root {
		--pv-section-spacing: var(--pv-section-spacing-mobile);
	}

	/* The three sections below keep a larger bottom gap than the mobile default,
	   each confirmed against popventure.com at 390px: production tightens these
	   boundaries on mobile, but not all the way down to the section default. */

	/* → 93px to "Alone you are one voice." (.pv-force has padding-top: 0). */
	.pv-fund {
		padding-bottom: 93px;
	}

	/* → 144px to "Built. Registered. Live." (+ .pv-live's own 24px padding-top). */
	.pv-launch {
		padding-bottom: 120px;
	}

	/* padding-bottom: 26px confirmed via popventure.com mobile — combined with
	   .pv-share's own 24px top padding, matches production's 50px button-to-button
	   gap between "Become a Founding Venturer" and "Share Pop Venture" on mobile. */
	.pv-beginning {
		padding-bottom: 26px;
	}

	.pv-grid--2,
	.pv-grid--3 {
		grid-template-columns: 1fr;
	}

	.pv-hero {
		padding-top: 56px;
		padding-bottom: 40px;
	}

	.pv-hero__scroll {
		margin-top: 32px;
	}

	/* The base rule already wraps; forcing a column here stretched the two pills
	   to full width and made this *sticky* bar 187px tall on a 390px screen.
	   popventure.com keeps it a wrapping row (156px): the status line takes one
	   line, the two buttons share the next. */
	.pv-ticker .pv-container {
		justify-content: center;
		text-align: center;
	}

	.pv-ticker__left {
		justify-content: center;
	}

	.pv-footer__top {
		flex-direction: column;
		gap: 24px;
	}

	.pv-footer__nav {
		gap: 40px;
	}

	.pv-ring {
		width: 160px;
		height: 160px;
	}

	.pv-card {
		padding: 28px;
	}

	.pv-modal {
		padding: 28px;
	}
}

@media (max-width: 480px) {
	.pv-grid--6 {
		grid-template-columns: 1fr;
	}

	.pv-live .pv-feature-list {
		grid-template-columns: 1fr;
	}

	.pv-btn-row {
		flex-direction: column;
		width: 100%;
	}

	.pv-btn {
		width: 100%;
	}

	/* Exception to the two rules above: the ticker is a sticky bar, and
	   popventure.com keeps its two small pills side by side at this width rather
	   than stacking them full-width down the screen. */
	.pv-ticker .pv-btn-row {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
	}

	.pv-ticker .pv-btn {
		width: auto;
	}

	/* Our display face sets these labels ~13px wider per button than the Inter
	   production renders them in, which is just enough to push the second pill
	   onto its own row and add ~30px to a bar that is stuck to the top of the
	   screen. Trimming the side padding (not the type) buys the row back. */
	.pv-ticker .pv-btn--sm {
		padding-left: 14px;
		padding-right: 14px;
	}

	.pv-ticker .pv-btn-row {
		gap: 10px;
	}
}