/* ==========================================================================
   Accounting Engagement Kit — Comprehensive Responsive Breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Laptops & Standard Desktops ( ≤ 1200px )
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.aek-container {
		max-width: 100%;
		padding: 0 24px;
	}

	.aek-hero-heading {
		font-size: 32px;
	}

	.aek-section-heading {
		font-size: 26px;
	}

	.aek-freq-card {
		padding: 28px 16px;
	}

	.aek-model-card {
		padding: 30px 18px 26px;
	}

	.aek-dedicated-grid {
		gap: 24px !important;
	}

	.aek-dedicated-left-pills {
		flex: 0 0 230px !important;
		max-width: 230px !important;
	}

	.aek-dedicated-callout {
		flex: 0 0 200px !important;
		max-width: 200px !important;
	}
}

/* --------------------------------------------------------------------------
   Tablet & Medium Screens ( ≤ 992px )
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.aek-section {
		padding: 45px 0;
	}

	.aek-section-heading {
		font-size: 24px;
		margin-bottom: 32px;
	}

	/* Hero */
	.aek-hero {
		padding: 30px 0 45px;
	}

	.aek-hero-heading {
		font-size: 28px;
	}

	.aek-hero-description {
		font-size: 13.5px;
	}

	.aek-hero-grid {
		gap: 28px !important;
	}

	.aek-hero-badges {
		top: 12px;
		right: 12px;
		gap: 6px;
	}

	.aek-hero-badge {
		padding: 6px 10px;
		font-size: 11px;
	}

	/* Support Frequency */
	.aek-freq-cards {
		gap: 16px !important;
	}

	.aek-freq-card .aek-card-title {
		font-size: 17px;
	}

	/* Models */
	.aek-models-cards {
		gap: 16px !important;
	}

	.aek-model-card .aek-card-title {
		font-size: 18px;
	}

	/* Pay As You Go Banner (Tablet) */
	.aek-banner-grid {
		flex-wrap: wrap !important;
		gap: 28px !important;
		align-items: flex-start !important;
	}

	.aek-banner-image-wrapper {
		flex: 1 1 40% !important;
		max-width: 40% !important;
	}

	.aek-banner-content {
		flex: 1 1 calc(60% - 28px) !important;
		max-width: calc(60% - 28px) !important;
	}

	.aek-banner-content .aek-banner-heading {
		font-size: 24px;
	}

	.aek-banner-cta-floating {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 16px;
		margin-top: 12px;
		text-align: left;
	}

	/* Monthly Capacity (Tablet) */
	.aek-capacity-grid {
		flex-wrap: wrap !important;
		gap: 28px !important;
	}

	.aek-capacity-main-left,
	.aek-capacity-right {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}

	/* Dedicated Section */
	.aek-dedicated-grid {
		flex-wrap: wrap !important;
	}

	.aek-dedicated-left-pills {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.aek-dedicated-pill {
		flex: 1 1 calc(50% - 6px);
	}

	.aek-dedicated-main {
		flex: 1 1 100% !important;
	}

	.aek-dedicated-callout {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		margin-top: 16px;
	}

	/* Table Scroll Container */
	.aek-table-wrapper {
		margin: 0;
	}

	/* Timeline */
	.aek-timeline-step-title {
		font-size: 14px;
	}

	.aek-timeline-step-desc {
		font-size: 11.5px;
	}

}

/* --------------------------------------------------------------------------
   Mobile & Small Tablets ( ≤ 767px )
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.aek-container {
		padding: 0 16px;
	}

	.aek-section {
		padding: 36px 0;
	}

	.aek-section-heading {
		font-size: 22px;
		margin-bottom: 24px;
	}

	/* Hero: Stacks vertically on mobile */
	.aek-hero {
		padding: 20px 0 36px;
	}

	.aek-hero-grid {
		flex-direction: column !important;
		gap: 24px !important;
	}

	.aek-hero-content,
	.aek-hero-media {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}

	.aek-hero-heading {
		font-size: 24px;
		margin-bottom: 14px;
	}

	.aek-hero-description {
		font-size: 13px;
	}

	.aek-hero-badges {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 14px;
	}

	/* Frequency Cards Stack */
	.aek-freq-cards {
		flex-direction: column !important;
		gap: 16px !important;
	}

	.aek-freq-card {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		padding: 24px 18px;
	}

	.aek-recommend-card {
		flex-direction: column;
		text-align: center;
		padding: 16px 20px;
		border-radius: 24px;
		gap: 10px;
	}

	.aek-recommend-info {
		text-align: center;
	}

	/* Support Models Stack */
	.aek-models-cards {
		flex-direction: column !important;
		gap: 16px !important;
	}

	.aek-model-card {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		padding: 28px 20px;
	}

	/* Pay As You Go Banner */
	.aek-banner-grid {
		flex-direction: column !important;
		gap: 24px !important;
	}

	.aek-banner-image-wrapper,
	.aek-banner-content,
	.aek-banner-cta-floating {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}

	.aek-banner-content .aek-banner-heading {
		font-size: 22px;
	}

	/* Monthly Capacity */
	.aek-capacity-card-container {
		padding: 20px;
	}

	.aek-capacity-grid {
		flex-direction: column !important;
		gap: 24px !important;
	}

	.aek-capacity-main-left,
	.aek-capacity-right {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}

	.aek-capacity-options {
		flex-wrap: wrap !important;
	}

	.aek-hour-card {
		flex: 1 1 calc(50% - 6px) !important;
		max-width: calc(50% - 6px) !important;
	}

	/* Dedicated Accountant */
	.aek-dedicated-heading {
		font-size: 22px;
	}

	.aek-dedicated-pill {
		flex: 1 1 100%;
	}

	/* Timeline Steps Stack */
	.aek-timeline-steps {
		flex-direction: column !important;
		gap: 20px !important;
	}

	.aek-timeline-step {
		flex: 1 1 100% !important;
		padding: 0;
	}

	.aek-timeline-arrow {
		transform: rotate(90deg);
		padding: 0;
		margin: -8px auto;
	}

	/* Workflow Image Container */
	.aek-workflow-image-container {
		padding: 0;
	}
}

/* --------------------------------------------------------------------------
   Small Mobile Phones ( ≤ 480px )
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.aek-hero-heading {
		font-size: 22px;
	}

	.aek-section-heading {
		font-size: 20px;
	}

	.aek-capacity-options {
		flex-direction: column !important;
	}

	.aek-hour-card {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
}