/* Responsive overrides
   Loaded last on purpose: these media queries override the section
   stylesheets, so keep this <link> at the bottom of the list in index.html. */

@media (max-width: 960px) {
	.nav-links {
		display: none;
	}
	.hero-in {
		grid-template-columns: 1fr;
		gap: 48px;
		padding-top: 96px;
		padding-bottom: 64px;
	}
	.plate {
		margin-right: -32px;
		margin-left: -32px;
	}
	.film {
		width: 100%;
		margin: 0 auto;
	}
	.split {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.feat-grid {
		grid-template-columns: 1fr 1fr;
	}
	.io-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.value-row {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.proof-grid {
		grid-template-columns: 1fr;
	}
	.trust-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.cta-in {
		grid-template-columns: 1fr;
		gap: 44px;
	}
	.dash-peek .card {
		position: relative;
		width: 100%;
		border-radius: 16px;
	}
	.dash-peek {
		height: auto;
	}
	.foot-top {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	section {
		padding: 72px 0;
	}
}
@media (max-width: 560px) {
	/* Sides only — never the `padding` shorthand. `.wrap` and `.hero-in` have the
	   same specificity, so a shorthand here would reset the hero's padding-top
	   set above and drop the hero copy under the sticky header. */
	.wrap {
		padding-left: 20px;
		padding-right: 20px;
	}
	.feat-grid {
		grid-template-columns: 1fr;
	}
	/* Two across rather than one — a logo tile is short, and a single column
	   of twelve would be a very long scroll for very little information. */
	.io-grid {
		grid-template-columns: 1fr 1fr;
	}
	.value-row {
		grid-template-columns: 1fr 1fr;
	}
	.metrics {
		grid-template-columns: 1fr;
	}
	.foot-top {
		grid-template-columns: 1fr;
	}
	.nav-cta .login {
		display: none;
	}
	/* The nav button is the only thing left beside the logo, and at its desktop
	   size it runs past the edge of the bar. Scale it down here only — the
	   desktop size is untouched. The gap is the minimum the logo and the button
	   keep between them once the bar is too narrow to space them out. */
	.nav-in {
		gap: 14px;
	}
	.nav-cta .btn {
		font-size: 13px;
		padding: 9px 14px;
		border-radius: 9px;
		gap: 6px;
	}
	.nav-cta .btn svg {
		width: 15px;
		height: 15px;
	}
	.ad-prompts {
		grid-template-columns: 1fr;
	}
	/* See If It Fits: the menu's 320px floor overflows a 375px screen. Let the
	   dropdown take the whole actions row so the menu can pin to both of its
	   edges and get the full width of the hero column instead. */
	.fit-drop {
		flex: 1 1 100%;
	}
	.fit-menu {
		min-width: 0;
		right: 0;
	}
	.fit-modal {
		padding: 26px 20px 24px;
	}
	.fit-gate {
		width: 94%;
		padding: 16px;
	}
	.fit-gate .row {
		flex-direction: column;
	}
}