/* Breakpoints: 1080 (laptop/tablet-landscape), 782 (tablet), 480 (phone) */

@media (max-width: 1080px) {
	.why-list-wrap { grid-template-columns: minmax(0, 1fr); }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }

	/* The hamburger menu takes over from here (not just at 782px): a full
	   5-item nav plus two header buttons doesn't reliably fit down to 1080px,
	   and text length varies by language (French runs longer than English). */
	.primary-nav { display: none; }
	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

	.primary-nav.is-open {
		display: block;
		position: absolute;
		top: var(--header-height);
		left: 0; right: 0;
		background: #fff;
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-md);
		padding: 12px 0;
	}
	.primary-nav.is-open ul { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-nav.is-open li { border-bottom: 1px solid var(--border); }
	.primary-nav.is-open li:last-child { border-bottom: none; }
	.primary-nav.is-open a { display: block; padding: 14px var(--container-padding); }

	.header-actions .btn-secondary { display: none; }
}

@media (max-width: 900px) {
	.contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
	.hero { min-height: 640px; }
	.section { padding-block: var(--section-padding-y); }
	.section-header { margin-bottom: 36px; }

	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
	.steps { grid-template-columns: 1fr; }
	.pricing-card.is-recommended { transform: none; }
	.pricing-card.is-recommended:hover { transform: translateY(-6px); }

	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }

	body.has-sticky-cta { padding-bottom: 76px; }
	.sticky-cta.is-visible { display: flex; }

	.comparison-table-wrap { -webkit-overflow-scrolling: touch; }
	.comparison-table-scroll-hint { display: block; }
}

@media (max-width: 480px) {
	:root { --container-padding: 18px; }
	.hero { padding-block: 40px 48px; min-height: 580px; }
	.hero-ctas { flex-direction: column; }
	.hero-ctas .btn, .contact-form .btn, .pricing-card .btn { width: 100%; }
	/* Header CTA text length varies by language/content (e.g. French runs
	   longer than English) — hiding it here guarantees the logo + hamburger
	   always fit regardless of locale; the mobile sticky CTA bar and the
	   menu itself already put "View Plans" one tap away. */
	.header-actions .btn-primary { display: none; }
	.plan-price { font-size: 2.1rem; }
	.device-illustration .float-badge { font-size: 0.75rem; padding: 8px 12px; }
	.device-illustration .float-badge--top { top: -10px; left: 10px; }
	.device-illustration .float-badge--bottom { bottom: -10px; right: 10px; }
}