/* ------------------------------------------------------------
   19. RESPONSIVE — 1024px & 640px
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.ord-nav { display: none; }
	.ord-burger { display: inline-flex; }

	.ord-hero-inner {
		grid-template-columns: 1fr;
		gap: 60px;
	}

	.ord-hero-visual { max-width: 620px; margin: 0 auto; width: 100%; }

	.ord-usecase-grid,
	.ord-problems-grid,
	.ord-page .prototype-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ord-sales-inner,
	.ord-why-inner,
	.ord-portal-inner,
	.ord-revenue-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.ord-sales-copy { text-align: center; }
	.ord-sales-copy .ord-section-desc { margin: 0 auto 28px; }
	.ord-sales-copy .ord-sales-stats { text-align: left; }

	.ord-pricing-grid { grid-template-columns: repeat(2, 1fr); }

	.ord-price-card--popular { transform: none; }

	.ord-timeline-step {
		grid-template-columns: 1fr;
		gap: 16px;
		padding-left: 70px;
	}

	.ord-timeline::before {
		left: 22px;
		transform: none;
	}

	.ord-timeline-node {
		left: 22px;
		transform: translate(-50%, -50%);
	}

	.ord-timeline-step:nth-child(odd) .ord-timeline-card,
	.ord-timeline-step:nth-child(even) .ord-timeline-card {
		grid-column: 1;
		text-align: left;
	}
}

@media (max-width: 640px) {
	/* Section + hero rhythm and the header height live in 40-compact.css. */
	.ord-container { padding: 0 18px; }

	/* Hero grid tracks are `1fr` (min = min-content), so the rotating headline
	   — `display:inline-block` with a JS-locked width — used to force the single
	   column wider than the container and clip the whole hero on the right.
	   `min-width: 0` lets the tracks shrink; wrapping the rotating phrase keeps
	   it inside the column instead of pushing past the viewport edge. */
	.ord-hero-copy,
	.ord-hero-visual { min-width: 0; }

	.ord-rotating {
		white-space: normal;
		overflow-wrap: break-word;
	}

	.ord-hero-actions .ord-btn { width: 100%; }

	.ord-usecase-grid,
	.ord-problems-grid,
	.ord-page .prototype-grid {
		grid-template-columns: 1fr;
	}

	.ord-stack-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ord-system-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ord-stack-foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ord-sales-stats { grid-template-columns: 1fr 1fr; gap: 12px; }

	.ord-stat { padding: 14px; }
	.ord-stat-num { font-size: 1.4rem; }

	.ord-chart-bars { height: 170px; }
	.ord-chart-col-label { font-size: 0.62rem; }

	.ord-float-chip { padding: 8px 10px; }
	.ord-float-chip--1 { right: 0; top: -14px; }
	.ord-float-chip--2 { left: -4px; }
	.ord-float-chip--3 { right: 8px; }

	.ord-pricing-grid { grid-template-columns: 1fr; }
	.ord-price-card--popular { transform: none; }

	.ord-portal-feats { grid-template-columns: 1fr; }

	.ord-countdown { flex-wrap: wrap; justify-content: center; }
	.ord-cd-cell { min-width: 60px; }

	.ord-footer-bottom-inner { justify-content: center; text-align: center; }

	.ord-timeline-banner,
	.ord-timeline-support { flex-direction: column; align-items: flex-start; }

	.ord-browser-stats,
	.ord-browser-cards { grid-template-columns: repeat(3, 1fr); }
	.ord-browser-body { padding: 16px; }

	.ord-header-inner { padding: 0 16px; }
	.ord-header-actions .ord-btn--navcta { display: none; }

	.ord-check-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
	.ord-check-nav { flex-direction: column; align-items: stretch; }
	.ord-check-nav .ord-btn { width: 100%; }
	.ord-check-nav [data-ord-check-next] { margin-left: 0; }
	.ord-check-score-row { flex-direction: column; align-items: stretch; gap: 10px; }
	.ord-check-result-actions { flex-direction: column; }
	.ord-check-result-actions .ord-btn { width: 100%; }

	.ord-revenue-live,
	.ord-revenue-loss { padding: 20px 18px 18px; }
	.ord-revenue-total-value { font-size: 1.85rem; }
	.ord-revenue-row { grid-template-columns: 44px 1fr auto; gap: 9px; padding: 9px 11px; }
	.ord-revenue-row-body strong { font-size: 0.8rem; }
	.ord-revenue-row-amount { font-size: 0.84rem; }
	.ord-revenue-loss-foot .ord-btn { width: 100%; }
}