/* Agendly — mobile & nav fixes */

/* ── Nav pill: hug content on desktop ── */
@media (min-width: 56rem) {
	.nav-pill {
		width: auto;
		max-width: min(46rem, calc(100vw - 2rem));
		box-sizing: border-box;
	}

	.nav-pill__links {
		flex-shrink: 0;
	}

	.nav-pill__cta {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

.nav-pill__toggle {
	position: relative;
	flex-shrink: 0;
}

.nav-pill__icon {
	display: block;
}

.nav-pill__icon--close {
	display: none;
}

.nav-pill__toggle[aria-expanded="true"] .nav-pill__icon--open {
	display: none;
}

.nav-pill__toggle[aria-expanded="true"] .nav-pill__icon--close {
	display: block;
}

/* ── Tablet / small desktop: keep CTA inside pill ── */
@media (min-width: 56rem) and (max-width: 72rem) {
	.nav-pill {
		gap: var(--space-md);
		padding-inline: var(--space-sm) var(--space-xs);
	}

	.nav-pill__links {
		gap: var(--space-md);
	}

	.nav-pill__links a {
		font-size: var(--text-xs);
	}

	.nav-pill__cta {
		min-height: 38px;
		padding: var(--space-xs) var(--space-sm);
		font-size: var(--text-xs);
	}
}

/* ── Mobile nav ── */
@media (max-width: 56rem) {
	html {
		scroll-padding-top: 5rem;
	}

	.nav-pill {
		left: var(--space-md);
		right: var(--space-md);
		width: auto;
		max-width: none;
		gap: var(--space-sm);
		padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm);
		background: var(--color-paper);
		border-color: var(--color-rule);
	}

	.nav-pill__links,
	.nav-pill__cta,
	.nav-pill > .btn {
		display: none !important;
	}

	.brand {
		min-width: 0;
		flex: 1 1 auto;
	}

	.brand-logo {
		height: 22px;
		width: auto;
	}

	.nav-pill__toggle {
		display: inline-flex;
		margin-left: auto;
	}

	.hero,
	.biz-hero {
		padding-top: 5.75rem;
	}
}

/* ── Mobile spacing ── */
@media (max-width: 48rem) {
	.section {
		padding-block: var(--space-2xl);
	}

	.section--tight {
		padding-block: var(--space-xl) var(--space-2xl);
	}

	.section__head {
		margin-bottom: var(--space-xl);
	}

	.hero,
	.biz-hero {
		padding-block: 5.75rem var(--space-lg);
	}

	.hero__shell {
		padding: clamp(1.25rem, 4vw, 2rem);
	}

	.features__head {
		margin-bottom: var(--space-xl);
	}

	.audience__grid,
	.features__grid,
	.steps {
		gap: var(--space-md);
	}

	.fcard {
		min-height: 18rem;
	}

	.pricing {
		gap: var(--space-md);
	}

	.faq-layout {
		gap: var(--space-xl);
	}
}

@media (max-width: 40rem) {
	.section {
		padding-block: var(--space-xl);
	}

	.section--tight {
		padding-block: var(--space-lg) var(--space-xl);
	}

	.section__head {
		margin-bottom: var(--space-lg);
	}

	.hero {
		padding-block: 4.75rem var(--space-md);
	}

	.wrap {
		padding-inline: clamp(1rem, 3vw, 1.5rem);
	}

	/* Feature tabs */
	.feattabs__panel {
		padding: var(--space-lg);
	}

	.feattabs__content {
		gap: var(--space-lg);
	}

	.feattabs__copy h3 {
		font-size: var(--text-lg);
	}

	.feattabs__stats {
		flex-direction: column;
		gap: var(--space-xs);
		margin-top: var(--space-lg);
	}

	.ft-stat {
		flex: none;
		width: 100%;
		box-sizing: border-box;
	}

	.ftv__statrow {
		flex-direction: column;
	}

	.ftv__statrow div {
		width: 100%;
		box-sizing: border-box;
	}

	/* Agenda toast on small screens */
	.agenda__toast {
		position: static;
		margin-top: var(--space-md);
		right: auto;
		bottom: auto;
	}

	/* CTA section */
	.cta {
		padding: var(--space-xl);
	}

	.cta h2 {
		font-size: var(--text-xl);
	}

	/* Compare table cards */
	.compare tbody tr {
		margin-bottom: var(--space-sm);
	}

	/* Plan cards */
	.plan {
		padding: var(--space-lg);
	}

	/* Prevent grid children from overflowing */
	.feattabs__copy,
	.feattabs__visual,
	.hero__grid > *,
	.aud-card,
	.fcard,
	.plan {
		min-width: 0;
	}
}