/* ============================================================
   MOBILE RESPONSIVE ENHANCEMENTS — v3.7.24
   ------------------------------------------------------------
   v3.7.18: Top Deals popup mobile rebuild + /compare/ horizontal scroll
   v3.7.19: /blog/ index categories grid + Write-for-us banner
   v3.7.20: Newsletter heading white + popup CTA <button> reset + Hero tablet
   v3.7.22: Hero floating cards no-overflow on tablet
   v3.7.23: Compare plans modal + compare mobile rebuilt as cards
   v3.7.24:
    20. Provider card "Show Best Plans" — plans now grouped by
        hosting type with header label + count badge per group,
        matching the structure used everywhere else on the site.
        Mobile converts each plan row to a stacked card.

   This file is loaded AFTER main.css so its rules win on equal
   specificity.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOUCH TARGETS — minimum 44x44px for any tappable element
   ------------------------------------------------------------ */
@media (max-width: 768px) {
	.hexp-btn,
	.hexp-btn-primary,
	.hexp-btn-secondary,
	.hexp-quiz-answer,
	.hexp-cta,
	.hexp-coupon-btn,
	.hexp-tab-btn,
	.hexp-popup-btn,
	.hexp-coupon-card .btn,
	.hexp-newsletter-form button,
	.hexp-search-input,
	a.button,
	button.button {
		min-height: 44px;
		padding: 12px 18px;
		font-size: 15px;
		line-height: 1.3;
	}

	/* Inputs — iOS will auto-zoom on input <16px font-size. Avoid that. */
	input[type="text"],
	input[type="email"],
	input[type="search"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	textarea,
	select {
		font-size: 16px !important;
		min-height: 44px;
		box-sizing: border-box;
	}
}

/* ------------------------------------------------------------
   2. TABLES — horizontal scroll wrapper instead of overflow
   ------------------------------------------------------------ */
@media (max-width: 768px) {
	.hexp-table-wrap,
	.hexp-comparison-table-wrap,
	.hexp-plan-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 -16px; /* extend to screen edges so swipe feels natural */
		padding: 0 16px;
	}

	.hexp-table,
	.hexp-comparison-table,
	.hexp-plan-table {
		min-width: 540px; /* ensure table is wide enough to be useful */
	}

	/* Visual hint: subtle right-side fade so users know the table scrolls */
	.hexp-table-wrap::after {
		content: '';
		position: sticky;
		right: 0;
		top: 0;
		bottom: 0;
		width: 24px;
		background: linear-gradient(to right, transparent, rgba(255,255,255,0.95));
		pointer-events: none;
	}
}

/* ------------------------------------------------------------
   3. QUIZ — fix narrow-screen padding & answer button layout
   ------------------------------------------------------------ */
@media (max-width: 480px) {
	.hexp-quiz-wrap,
	.hexp-quiz-container {
		padding: 16px 12px;
	}

	.hexp-quiz-question {
		padding: 18px 14px;
	}

	.hexp-quiz-question-title {
		font-size: 18px !important;
		line-height: 1.35;
	}

	.hexp-quiz-answer {
		padding: 14px 16px;
		font-size: 14.5px;
	}

	.hexp-quiz-answer-label {
		font-size: 14.5px;
	}

	.hexp-quiz-progress {
		font-size: 12px;
	}

	/* Result card — let it use full width on small screens */
	.hexp-quiz-result-card,
	.hexp-quiz-runner-card {
		padding: 18px 14px;
	}

	.hexp-quiz-plans {
		grid-template-columns: 1fr !important;
		gap: 10px;
	}
}

/* ------------------------------------------------------------
   4. NAVIGATION — mobile menu reachability
   ------------------------------------------------------------ */
@media (max-width: 900px) {
	.hexp-nav-link {
		padding: 12px 16px;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.hexp-mobile-toggle {
		min-width: 44px;
		min-height: 44px;
		padding: 10px;
	}

	/* Header logo doesn't shrink below readable */
	.hexp-logo,
	.site-title {
		max-width: 60vw;
	}
}

/* ------------------------------------------------------------
   5. CARDS — readable spacing on small screens
   ------------------------------------------------------------ */
@media (max-width: 640px) {
	.hexp-company-card,
	.hexp-coupon-card,
	.hexp-plan-card,
	.hexp-review-card {
		padding: 16px 14px;
	}

	.hexp-company-card .hexp-card-title,
	.hexp-coupon-card .hexp-card-title {
		font-size: 17px;
	}

	.hexp-company-card .hexp-rating,
	.hexp-coupon-card .hexp-rating {
		font-size: 13px;
	}

	/* Pros/Cons stack vertically */
	.hexp-pros-cons {
		grid-template-columns: 1fr !important;
		gap: 14px;
	}

	/* Comparison cards stack instead of side-by-side */
	.hexp-comparison-cards {
		grid-template-columns: 1fr !important;
	}
}

/* ------------------------------------------------------------
   6. POPUPS / MODALS — mobile-friendly sizing
   ------------------------------------------------------------ */
@media (max-width: 640px) {
	.hexp-popup,
	.hexp-modal,
	.hexp-newsletter-popup {
		width: calc(100% - 24px);
		max-width: 100%;
		max-height: calc(100vh - 32px);
		max-height: calc(100dvh - 32px); /* dynamic vh for mobile browsers */
		margin: 16px auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.hexp-popup-close {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ------------------------------------------------------------
   7. TYPOGRAPHY — readability on phones
   ------------------------------------------------------------ */
@media (max-width: 480px) {
	body {
		font-size: 15px;
		line-height: 1.6;
	}

	h1 { font-size: 26px !important; line-height: 1.25; }
	h2 { font-size: 22px !important; line-height: 1.3; }
	h3 { font-size: 18px !important; line-height: 1.35; }

	/* Tighter prose margins so paragraphs don't waste vertical space */
	.hexp-content p,
	.entry-content p {
		margin-bottom: 14px;
	}
}

/* ------------------------------------------------------------
   8. PERFORMANCE — disable heavy effects on small screens
   ------------------------------------------------------------ */
@media (max-width: 768px) {
	/* Drop shadow rendering is expensive on mobile GPUs — soften it */
	.hexp-card,
	.hexp-coupon-card,
	.hexp-plan-card {
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	/* Disable hover transitions on touch devices */
	@media (hover: none) {
		.hexp-card:hover,
		.hexp-btn:hover,
		.hexp-quiz-answer:hover {
			transform: none !important;
		}
	}
}

/* ------------------------------------------------------------
   9. RTL specific mobile tweaks
   ------------------------------------------------------------ */
@media (max-width: 640px) {
	.is-rtl .hexp-table-wrap {
		margin: 0 -16px;
	}

	.is-rtl .hexp-quiz-answer {
		text-align: right;
	}
}

/* ------------------------------------------------------------
   10. FOOTER — stack columns on narrow screens
   ------------------------------------------------------------ */
@media (max-width: 768px) {
	.hexp-footer-grid,
	.site-footer .widget-area {
		grid-template-columns: 1fr !important;
		gap: 24px;
		text-align: center;
	}

	.hexp-footer-bottom {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}
}

/* ============================================================
   11. TOP DEALS POPUP (3-card / 2-card) — full mobile rebuild
   ------------------------------------------------------------
   The desktop popup has 3 cards in a row at ~980px wide. On
   mobile it stacks to 1 column (existing rule), but the inner
   padding, header sizes, countdown, logos and CTA were all
   sized for desktop and overflowed/looked cramped on phones.
   ============================================================ */
@media (max-width: 768px) {
	/* Allow popup to scroll from the top instead of being center-pinned */
	.hexp-deals-popup-overlay {
		padding: 12px;
		align-items: flex-start;
	}
	.hexp-deals-popup-inner {
		padding: 22px 16px 18px;
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: 14px;
	}

	/* Bigger close target (WCAG ≥44px) */
	.hexp-deals-popup-close {
		top: 8px; right: 8px;
		width: 38px; height: 38px;
		font-size: 14px;
	}
	html[dir=rtl] .hexp-deals-popup-close { right: auto; left: 8px; }

	/* Header — smaller, padded so close button doesn't overlap */
	.hexp-deals-popup-header { margin-bottom: 12px; }
	.hexp-deals-popup-header h2 {
		font-size: 17px;
		line-height: 1.3;
		padding: 0 32px;
	}
	.hexp-deals-popup-header p { font-size: 12.5px; }

	/* Countdown — compact */
	.hexp-deals-countdown { gap: 4px; margin-bottom: 14px; }
	.hexp-deals-cd-cell {
		padding: 5px 10px;
		min-width: 52px;
	}
	.hexp-deals-cd-cell .num { font-size: 17px; }
	.hexp-deals-cd-cell .lbl { font-size: 11px; }
	.hexp-deals-cd-sep { font-size: 16px; }

	/* Cards — stack and tighten */
	.hexp-deals-popup-cards-2 .hexp-deals-cards,
	.hexp-deals-popup-cards-3 .hexp-deals-cards {
		grid-template-columns: 1fr !important;
		gap: 12px;
	}
	.hexp-deals-card {
		padding: 16px 14px 0;
		gap: 8px;
	}
	.hexp-deals-rank {
		top: 8px; left: 8px;
		font-size: 11px;
	}
	html[dir=rtl] .hexp-deals-rank { left: auto; right: 8px; }
	.hexp-deals-best-tag {
		font-size: 11px;
		padding: 4px 8px;
	}
	.hexp-deals-card.is-best .hexp-deals-logo { margin-top: 18px; }

	/* Logo — readable but bounded */
	.hexp-deals-popup-overlay .hexp-deals-logo { min-height: 50px; }
	.hexp-deals-popup-overlay .hexp-deals-logo img {
		max-height: 40px;
		max-width: 160px;
	}
	.hexp-deals-logo-text { font-size: 16px; }

	/* Rating + badges */
	.hexp-deals-rating-num { font-size: 18px; }
	.hexp-deals-badges {
		gap: 6px;
		flex-wrap: wrap;
		justify-content: center;
	}
	.hexp-deals-badge { font-size: 11px; padding: 3px 8px; }

	/* Description text */
	.hexp-deals-text {
		font-size: 13px;
		padding: 0 4px;
		text-align: center;
		line-height: 1.45;
	}

	/* CTA — full width thumb-reach */
	.hexp-deals-visit {
		display: flex;
		width: calc(100% - 4px);
		justify-content: center;
		padding: 12px 16px;
		font-size: 14px;
		margin: 6px 2px 0;
		min-height: 44px;
	}
	.hexp-deals-users {
		font-size: 11.5px;
		margin: 8px 0 12px;
	}
}

/* Very narrow phones (iPhone SE etc.) */
@media (max-width: 380px) {
	.hexp-deals-popup-header h2 { font-size: 15.5px; padding: 0 30px; }
	.hexp-deals-cd-cell { padding: 5px 7px; min-width: 44px; }
	.hexp-deals-cd-cell .num { font-size: 15px; }
	.hexp-deals-popup-overlay .hexp-deals-logo img { max-width: 140px; }
}

/* ============================================================
   12. COMPARE PAGE (/compare/?ids=…) — 2/3/4 companies on mobile
   ------------------------------------------------------------
   Desktop layout uses a fixed first column (200px) for the row
   label + N equal columns for the companies. On mobile the
   existing rule collapsed everything to 1fr which made each
   company stack as a separate row — breaking the comparison.

   New approach:
     • Header cards stack vertically (cleaner than a horizontal
       scroll for company info).
     • Comparison tables get horizontal scroll with the row
       label (Founded / Uptime / etc.) sticky on the left so the
       user always knows what column means what.
   ============================================================ */
/* ============================================================
   v3.7.145 — Compare page mobile redesign.

   Previous behavior (v3.7.140 and earlier): the mobile breakpoint
   stacked the company header cards vertically (one per row), then
   left the data tables below as horizontal grids. Result: when
   visitors looked at "Founded: 1996 | 2004", they couldn't tell
   which number belonged to which company because the header was
   no longer aligned with the data columns.

   New behavior: header row uses the SAME grid template as the data
   rows, so the company logos sit directly above their respective
   data columns. Both the header and the data tables scroll
   horizontally inside their own container. Sticky-left label
   column (data rows) keeps the row's attribute name visible.

   Also fixes: the previous `overflow-x: auto` was being weakened
   by `overflow: hidden` shorthand from main.css line 9331.
   Setting both `overflow-x: auto` and `overflow-y: visible`
   explicitly to override the shorthand.
   ============================================================ */
@media (max-width: 900px) {
	/* HERO + container — pull tables to viewport edges so swipe is full-width */
	.hexp-compare-section .hexp-container {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* HEADER ROW: keep companies side-by-side, matching the data
	   row grid below. Smaller logos / tighter padding so two cards
	   fit comfortably even on narrow phones. */
	.hexp-compare-header-row,
	.hexp-compare-header-row[data-cols="2"],
	.hexp-compare-header-row[data-cols="3"],
	.hexp-compare-header-row[data-cols="4"] {
		/* Same grid columns as the data rows below — so logos align
		   with their data columns. Min-width matches data rows so
		   the header scrolls horizontally in lockstep. */
		display: grid;
		gap: 0;
		padding: 0;
		margin-bottom: 18px;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		border-radius: 10px;
		border: 1px solid #e5e7eb;
		/* Override the desktop position:sticky — sticky inside an
		   overflow:auto container doesn't behave well, plus the
		   horizontal-scrolling pattern doesn't need a sticky top. */
		position: static !important;
		box-shadow: none;
	}
	.hexp-compare-header-row[data-cols="2"] {
		grid-template-columns: 130px minmax(140px, 1fr) minmax(140px, 1fr) !important;
		min-width: 460px;
	}
	.hexp-compare-header-row[data-cols="3"] {
		grid-template-columns: 130px repeat(3, minmax(130px, 1fr)) !important;
		min-width: 580px;
	}
	.hexp-compare-header-row[data-cols="4"] {
		grid-template-columns: 120px repeat(4, minmax(115px, 1fr)) !important;
		min-width: 700px;
	}
	/* Spacer cell stays — matches the sticky label column below.
	   Used to be hidden but we need it now so the company cards
	   align with the data columns to the right of the sticky label. */
	.hexp-compare-header-row .hexp-compare-spacer {
		display: block;
		position: sticky;
		left: 0;
		background: #f8fafc;
		border-right: 1px solid #e2e8f0;
		z-index: 2;
	}
	html[dir=rtl] .hexp-compare-header-row .hexp-compare-spacer {
		left: auto;
		right: 0;
		border-right: 0;
		border-left: 1px solid #e2e8f0;
	}

	.hexp-compare-company-cell {
		padding: 14px 10px;
		gap: 6px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-right: 1px solid #f1f5f9;
	}
	.hexp-compare-company-cell:last-child { border-right: 0; }
	.hexp-cmp-logo img {
		max-height: 32px;
		max-width: 110px;
	}
	.hexp-cmp-rating-num { font-size: 20px; }
	.hexp-cmp-rating-stars { font-size: 11px; }
	.hexp-cmp-price { font-size: 12px; }
	.hexp-cmp-price strong { font-size: 16px; }
	.hexp-cmp-cta {
		width: 100%;
		justify-content: center;
		padding: 9px 12px;
		min-height: 38px;
		font-size: 12px;
	}
	.hexp-cmp-review-link { font-size: 11.5px; }

	/* COMPARISON TABLES: horizontal scroll with sticky labels.
	   `overflow-x: auto` + explicit `overflow-y: visible` to override
	   the `overflow: hidden` shorthand from main.css line 9331. */
	.hexp-compare-table {
		display: block;
		overflow-x: auto !important;
		overflow-y: visible !important;
		-webkit-overflow-scrolling: touch;
		border-radius: 10px;
		background: #fff;
		/* Soft right-edge fade as scroll hint */
		background-image:
			linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
			linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 0 100%,
			radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.08), rgba(0,0,0,0)),
			radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.08), rgba(0,0,0,0)) 0 100%;
		background-repeat: no-repeat;
		background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
		background-attachment: local, local, scroll, scroll;
	}

	/* Force grid rows to keep their grid layout AND have a min-width.
	   Min-widths match the header row exactly so columns line up
	   visually as the user scrolls horizontally. */
	.hexp-compare-table[data-cols="2"] .hexp-cmp-row {
		grid-template-columns: 130px minmax(140px, 1fr) minmax(140px, 1fr) !important;
		min-width: 460px;
	}
	.hexp-compare-table[data-cols="3"] .hexp-cmp-row {
		grid-template-columns: 130px repeat(3, minmax(130px, 1fr)) !important;
		min-width: 580px;
	}
	.hexp-compare-table[data-cols="4"] .hexp-cmp-row {
		grid-template-columns: 120px repeat(4, minmax(115px, 1fr)) !important;
		min-width: 700px;
	}

	/* Sticky label column — stays visible while scrolling horizontally */
	.hexp-cmp-label {
		position: sticky;
		left: 0;
		background: #f8fafc;
		z-index: 2;
		border-right: 1px solid #e2e8f0;
		padding: 12px 12px;
		font-size: 12.5px;
		font-weight: 700;
	}
	html[dir=rtl] .hexp-cmp-label {
		left: auto;
		right: 0;
		border-right: 0;
		border-left: 1px solid #e2e8f0;
	}
	.hexp-cmp-row:nth-child(even) .hexp-cmp-label { background: #f1f5f9; }

	.hexp-cmp-cell {
		padding: 12px 10px;
		font-size: 12.5px;
		gap: 4px;
		text-align: center;
		justify-content: center;
		/* Each cell shows a tiny brand badge below the value on
		   mobile, derived from the data-company attribute on the
		   cell. Renders as a tiny gray chip — secondary visual
		   association in case the visitor scrolled past the
		   sticky header. */
	}
	.hexp-cmp-cell strong { font-size: 13px; }

	/* Bars + badges shrink */
	.hexp-cmp-bar { max-width: 70px; height: 6px; }
	.hexp-cmp-bar-label { font-size: 11.5px; min-width: 28px; }
	.hexp-cmp-tag { font-size: 10.5px; padding: 2px 7px; }

	/* Group titles tighter */
	.hexp-compare-group-title {
		font-size: 18px !important;
		margin: 24px 0 10px;
	}

	/* Pros/cons & signatures stack — explicit override of the
	   existing 900px rule (already does this, kept for clarity) */
	.hexp-compare-signatures[data-cols="2"],
	.hexp-compare-signatures[data-cols="3"],
	.hexp-compare-signatures[data-cols="4"],
	.hexp-compare-features[data-cols="2"],
	.hexp-compare-features[data-cols="3"],
	.hexp-compare-features[data-cols="4"],
	.hexp-compare-proscons[data-cols="2"],
	.hexp-compare-proscons[data-cols="3"],
	.hexp-compare-proscons[data-cols="4"] {
		grid-template-columns: 1fr;
	}

	/* Final CTA — buttons stack */
	.hexp-compare-final-cta { padding: 22px 18px; }
	.hexp-compare-final-cta h3 { font-size: 18px; }
	.hexp-compare-final-buttons { flex-direction: column; }
	.hexp-compare-final-btn {
		width: 100%;
		justify-content: center;
		min-height: 44px;
	}
}

/* Even tighter on phones */
@media (max-width: 480px) {
	.hexp-compare-section .hexp-container {
		padding-left: 10px;
		padding-right: 10px;
	}
	.hexp-compare-table[data-cols="2"] .hexp-cmp-row,
	.hexp-compare-header-row[data-cols="2"] {
		/* v3.7.146 — Match the cols=3/cols=4 narrow-phone tightening
		   pattern so the cols=2 case (most common: 2-company compare)
		   also gets a tighter layout under 480px. Sticky-label column
		   is now 110px (was 130px at 900px breakpoint) and value
		   columns minimum is 130px each — fits 2 companies in a
		   460px-wide table on iPhone SE viewport (375px) with light
		   horizontal scroll. */
		grid-template-columns: 110px minmax(130px, 1fr) minmax(130px, 1fr) !important;
		min-width: 430px;
	}
	.hexp-compare-table[data-cols="3"] .hexp-cmp-row {
		grid-template-columns: 110px repeat(3, minmax(115px, 1fr)) !important;
		min-width: 530px;
	}
	.hexp-compare-table[data-cols="4"] .hexp-cmp-row {
		grid-template-columns: 100px repeat(4, minmax(100px, 1fr)) !important;
		min-width: 620px;
	}
	.hexp-compare-hero h1 { font-size: 22px !important; }
	.hexp-compare-subtitle { font-size: 13.5px; }
}

/* ============================================================
   13. BLOG INDEX (/blog/) — categories grid + write-for-us banner
   ------------------------------------------------------------
   On phones the existing rules kept the category grid at 1fr 1fr
   but each card had 22px side padding + a 54px icon + 16px gap,
   which on a 380px viewport (after the container's 24px side
   padding) left only ~46px for the category name — so labels
   like "Digital Marketing", "Marketing", "Server", "Technology"
   were getting clipped off the right edge.

   Fix:
    • Tighten container side padding on these blog sections.
    • Shrink card padding, icon, and gap so 2-up actually fits.
    • Auto fall back to 1 column on the narrowest phones.
    • Stack the "Write for us" banner vertically with full-width
      CTA so the email + button never overflow.
   ============================================================ */
@media (max-width: 768px) {
	/* Tighter container padding for blog sections specifically (don't
	   touch other pages). Frees ~24px of horizontal room for cards. */
	.hexp-blog-categories .hexp-container,
	.hexp-blog-write-for-us .hexp-container,
	.hexp-blog-latest .hexp-container {
		padding-left: 14px;
		padding-right: 14px;
	}
	.hexp-blog-categories { padding: 36px 0 18px; }

	/* Category cards — slimmer so 2-up fits on a phone */
	.hexp-blog-cat-card {
		padding: 12px 14px;
		gap: 10px;
		min-height: 72px;
		border-radius: 12px;
	}
	.hexp-blog-cat-icon {
		width: 40px;
		height: 40px;
		font-size: 16px;
		border-radius: 10px;
	}
	.hexp-blog-cat-name {
		font-size: 14.5px;
		line-height: 1.25;
		word-break: break-word;
	}
	.hexp-blog-cat-count { font-size: 11.5px; }
}

@media (max-width: 480px) {
	.hexp-blog-cat-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px;
	}
	.hexp-blog-cat-card {
		padding: 11px 12px;
		gap: 8px;
		min-height: 66px;
	}
	.hexp-blog-cat-icon {
		width: 36px;
		height: 36px;
		font-size: 15px;
		border-radius: 9px;
	}
	.hexp-blog-cat-name {
		font-size: 13.5px;
		line-height: 1.22;
	}
	.hexp-blog-cat-count {
		font-size: 11px;
		margin-top: 2px;
	}
}

/* Very narrow phones (iPhone SE, ~320–360px) — fall back to a
   single column. Two columns become too cramped to read. */
@media (max-width: 360px) {
	.hexp-blog-cat-grid {
		grid-template-columns: 1fr !important;
		gap: 9px;
	}
	.hexp-blog-cat-card {
		padding: 14px 16px;
		min-height: 70px;
	}
	.hexp-blog-cat-icon {
		width: 42px;
		height: 42px;
		font-size: 17px;
	}
	.hexp-blog-cat-name { font-size: 15px; }
}

/* "Write for us" banner — stack vertically on phones so the long
   email address + the CTA button never push past the viewport */
@media (max-width: 640px) {
	.hexp-write-banner {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		padding: 18px 16px;
		gap: 14px;
	}
	html[dir=rtl] .hexp-write-banner { text-align: right; align-items: flex-end; }
	.hexp-write-banner-icon {
		width: 46px; height: 46px;
		font-size: 18px;
	}
	.hexp-write-banner-text {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		font-size: 14px;
		width: 100%;
	}
	html[dir=rtl] .hexp-write-banner-text { align-items: flex-end; }
	.hexp-write-banner-text strong { font-size: 16px; }
	.hexp-write-banner-text a {
		font-size: 13.5px;
		word-break: break-all;
		max-width: 100%;
	}
	.hexp-write-banner-btn {
		width: 100%;
		justify-content: center;
		min-height: 44px;
		padding: 12px 20px;
	}
}

/* ============================================================
   14. NEWSLETTER HEADING — explicit white color
   ------------------------------------------------------------
   The newsletter section sets `color: white` on the wrapper, but
   the `<h2>` was inheriting from the global heading color in
   themes/plugins (some block themes inject a default dark heading
   color via :root variables). Lock it explicitly to white so it
   can't be overridden by stray globals or editor styles.
   ============================================================ */
.hexp-newsletter-text h2 { color: #ffffff !important; }

/* ============================================================
   15. TOP DEALS POPUP — `<button>` variant of `.hexp-deals-visit`
   ------------------------------------------------------------
   When a coupon code exists for a card, the CTA renders as a
   `<button class="hexp-deals-visit hexp-tp-show-code">` instead
   of the plain `<a>`. Browsers add their own default styles
   (border, font-family, background) to <button> that don't apply
   to <a>, so we reset them here to keep both elements visually
   identical.
   ============================================================ */
button.hexp-deals-visit {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	/* Hide the trophy icon's transform animation we use for arrows */
}
button.hexp-deals-visit:hover { color: #fff; }
button.hexp-deals-visit:focus-visible {
	outline: 3px solid rgba(96, 165, 250, .55);
	outline-offset: 2px;
}

/* ============================================================
   16. HERO — keep visual visible on tablet (768–1100px)
   ------------------------------------------------------------
   The current rule at max-width:1100px hides the entire visual
   stack (.hexp-hero-visual { display: none }) which makes the
   right side blank on iPads / large tablets. We want the visual
   to STAY visible on tablet — just smaller — and only disappear
   on actual phone widths.

   v3.7.22 refinement:
   The floating cards used negative offsets (left: -8% / right: -8%)
   that pushed them OUTSIDE the visual column. On desktop with a
   wide right column this looked airy; on tablet (~400px wide
   right column) the "82% OFF" card was bleeding off the viewport
   edge. We now constrain the visual to its column with positive
   inset offsets and add `overflow: hidden` so nothing ever leaks
   out — same look, no overflow.
   ============================================================ */
@media (max-width: 1100px) and (min-width: 768px) {
	/* Re-show the visual that the existing rule hid. The negation
	   selector matches the standard hero card stack (the orbit
	   variant is something else and stays handled separately). */
	.hexp-hero-visual:not(.hexp-hero-orbit) {
		display: grid !important;
		max-width: 280px;
		height: 290px;
		/* Keep cards inside their column — no more bleed-off-screen */
		overflow: visible;
	}

	/* More text room, less visual room — text needs the breathing
	   space more than the decorative card stack does. */
	.hexp-hero-inner {
		grid-template-columns: 1.6fr 1fr !important;
		gap: 28px;
	}

	/* Slightly tighter typography on tablet */
	.hexp-hero h1 { font-size: 38px; }
	.hexp-hero p { font-size: 16px; max-width: 100%; }
	.hexp-hero { padding: 60px 0 80px; }

	/* Shrink the center "Expert's Choice" card so the floating
	   cards on either side have room without going off-screen */
	.hexp-hero-center-card { width: 160px; padding: 14px; }
	.hexp-hero-center-card h3 { font-size: 14.5px; }
	.hexp-hero-center-card .price { font-size: 22px; }
	.hexp-hero-center-card .badge { font-size: 9px; padding: 2.5px 7px; }

	.hexp-float-card { padding: 7px 10px; font-size: 11px; }
	.hexp-float-card i { width: 22px; height: 22px; font-size: 10px; }

	/* Pull floating cards FULLY INSIDE the column. Positive offsets
	   only — no more negative bleed. The cards now hug the inside
	   edges of the visual area instead of poking out. */
	.hexp-float-card.fc-1 { top: 4%; left: 0; right: auto; }
	.hexp-float-card.fc-2 { top: 50%; right: 0; left: auto; transform: translateY(-50%); }
	.hexp-float-card.fc-3 { bottom: 4%; left: 4%; right: auto; }

	/* Soften the orbs so they don't dominate the smaller area */
	.orb-1 { width: 150px; height: 150px; opacity: 0.35; }
	.orb-2 { width: 120px; height: 120px; opacity: 0.22; }
}

/* Override the float keyframes on tablet so fc-2 keeps its
   centered transform (the keyframes set transform:translateY(0)
   which would wipe out our translateY(-50%) above). */
@media (max-width: 1100px) and (min-width: 768px) {
	.hexp-float-card.fc-2 {
		animation: hexp-float-tablet 5s ease-in-out infinite 1s;
	}
	@keyframes hexp-float-tablet {
		0%, 100% { transform: translateY(-50%); }
		50%      { transform: translateY(calc(-50% + 8px)); }
	}
}

/* Smaller tablet (640–767px) — visual still fits but compact */
@media (max-width: 767px) and (min-width: 640px) {
	.hexp-hero-visual:not(.hexp-hero-orbit) {
		display: grid !important;
		max-width: 240px;
		height: 250px;
	}
	.hexp-hero-inner {
		grid-template-columns: 1.5fr 1fr !important;
		gap: 20px;
	}
	.hexp-hero h1 { font-size: 30px; }
	.hexp-hero p { font-size: 14.5px; }
	.hexp-hero-center-card { width: 145px; padding: 12px; }
	.hexp-hero-center-card h3 { font-size: 13.5px; }
	.hexp-hero-center-card .price { font-size: 19px; }
	.hexp-hero-center-card .badge { font-size: 8.5px; padding: 2.5px 6px; }
	.hexp-float-card { padding: 6px 9px; font-size: 10.5px; }
	.hexp-float-card i { width: 20px; height: 20px; font-size: 9px; }
	.hexp-float-card.fc-1 { top: 2%; left: 0; right: auto; }
	.hexp-float-card.fc-2 { top: 50%; right: 0; left: auto; transform: translateY(-50%); animation: hexp-float-tablet 5s ease-in-out infinite 1s; }
	.hexp-float-card.fc-3 { bottom: 2%; left: 2%; right: auto; }
	.orb-1 { width: 130px; height: 130px; opacity: 0.32; }
	.orb-2 { width: 110px; height: 110px; opacity: 0.2; }
}

/* ============================================================
   17. COMPARE PAGE — "Number of Plans" trigger button
   ------------------------------------------------------------
   Cell becomes a clickable button that opens the plans popup.
   Matches the visual weight of plain numeric cells but adds an
   external-link icon hint so visitors know it's interactive.
   ============================================================ */
.hexp-cmp-plans-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--hexp-gray-200, #e2e8f0);
	border-radius: 8px;
	padding: 6px 10px;
	font-family: inherit;
	font-size: 13px;
	color: var(--hexp-navy-dark, #0f172a);
	cursor: pointer;
	transition: all .18s ease;
	line-height: 1.2;
	white-space: nowrap;
}
.hexp-cmp-plans-trigger:hover,
.hexp-cmp-plans-trigger:focus-visible {
	background: var(--hexp-blue-50, #eff6ff);
	border-color: var(--hexp-primary, #2563eb);
	color: var(--hexp-primary, #2563eb);
	transform: translateY(-1px);
	outline: none;
}
.hexp-cmp-plans-trigger strong { font-weight: 800; font-size: 14.5px; }
.hexp-cmp-plans-trigger i {
	font-size: 10.5px;
	opacity: .6;
	transition: opacity .18s ease;
}
.hexp-cmp-plans-trigger:hover i { opacity: 1; }

/* RTL — keep icon spacing tidy */
html[dir=rtl] .hexp-cmp-plans-trigger { flex-direction: row-reverse; }

/* ============================================================
   18. PLANS MODAL — full-screen-on-mobile, centered-on-desktop
   ============================================================ */
.hexp-cmp-plans-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.hexp-cmp-plans-modal[hidden] { display: none; }

.hexp-cmp-plans-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
	animation: hexpPlansBackdropIn .2s ease-out;
}
@keyframes hexpPlansBackdropIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.hexp-cmp-plans-modal-box {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: 16px;
	width: 100%;
	max-width: 960px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	display: flex;
	flex-direction: column;
	box-shadow: 0 30px 80px rgba(15, 23, 42, .3);
	overflow: hidden;
	animation: hexpPlansBoxIn .25s ease-out;
}
@keyframes hexpPlansBoxIn {
	from { opacity: 0; transform: translateY(10px) scale(.98); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.hexp-cmp-plans-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 23, 42, .06);
	color: var(--hexp-navy-dark, #0f172a);
	cursor: pointer;
	font-size: 16px;
	display: grid;
	place-items: center;
	transition: background .15s ease;
	z-index: 2;
}
.hexp-cmp-plans-modal-close:hover { background: rgba(15, 23, 42, .12); }
html[dir=rtl] .hexp-cmp-plans-modal-close { right: auto; left: 14px; }

.hexp-cmp-plans-modal-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 56px 18px 24px;
	border-bottom: 1px solid var(--hexp-gray-100, #f1f5f9);
}
html[dir=rtl] .hexp-cmp-plans-modal-header { padding: 22px 24px 18px 56px; }
.hexp-cmp-plans-modal-logo {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	background: var(--hexp-gray-50, #f8fafc);
	border-radius: 10px;
	padding: 6px;
}
.hexp-cmp-plans-modal-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.hexp-cmp-plans-modal-header h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--hexp-navy-dark, #0f172a);
	margin: 0 0 4px;
	line-height: 1.2;
}
.hexp-cmp-plans-modal-sub {
	margin: 0;
	font-size: 13.5px;
	color: var(--hexp-gray-500, #64748b);
}

.hexp-cmp-plans-modal-body {
	padding: 18px 24px;
	overflow-y: auto;
	flex: 1;
	-webkit-overflow-scrolling: touch;
}

.hexp-cmp-plans-group { margin-bottom: 22px; }
.hexp-cmp-plans-group:last-child { margin-bottom: 0; }
.hexp-cmp-plans-group-header { margin-bottom: 10px; }
.hexp-cmp-plans-group-header h3 {
	font-size: 15.5px;
	font-weight: 800;
	color: var(--hexp-navy-dark, #0f172a);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	letter-spacing: -.2px;
}
.hexp-cmp-plans-group-count {
	background: var(--hexp-blue-50, #eff6ff);
	color: var(--hexp-primary, #2563eb);
	font-size: 11.5px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 99px;
	min-width: 22px;
	text-align: center;
}

.hexp-cmp-plans-table-wrap {
	border: 1px solid var(--hexp-gray-100, #f1f5f9);
	border-radius: 10px;
	overflow: hidden;
}

.hexp-cmp-plans-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}
.hexp-cmp-plans-table thead th {
	background: var(--hexp-gray-50, #f8fafc);
	color: var(--hexp-gray-500, #64748b);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--hexp-gray-100, #f1f5f9);
	white-space: nowrap;
}
html[dir=rtl] .hexp-cmp-plans-table thead th { text-align: right; }
.hexp-cmp-plans-table tbody td {
	padding: 12px;
	border-bottom: 1px solid var(--hexp-gray-100, #f1f5f9);
	color: var(--hexp-navy-dark, #0f172a);
	vertical-align: middle;
}
.hexp-cmp-plans-table tbody tr:last-child td { border-bottom: 0; }
.hexp-cmp-plans-table tbody tr.is-best {
	background: linear-gradient(90deg, rgba(34, 197, 94, .06), transparent);
}
.hexp-cmp-plans-table .col-plan { font-weight: 700; }
.hexp-cmp-plans-table .col-price strong {
	font-size: 16px;
	font-weight: 800;
	color: var(--hexp-navy-dark, #0f172a);
}
.hexp-cmp-plans-table .col-price small {
	font-size: 11px;
	color: var(--hexp-gray-500, #64748b);
	font-weight: 500;
}
.hexp-cmp-plans-table .col-cta { text-align: right; white-space: nowrap; }
html[dir=rtl] .hexp-cmp-plans-table .col-cta { text-align: left; }

.hexp-cmp-plan-best-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #10b981;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 99px;
	margin-left: 6px;
}
html[dir=rtl] .hexp-cmp-plan-best-badge { margin-left: 0; margin-right: 6px; }

.hexp-cmp-plan-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--hexp-primary, #2563eb);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 99px;
	text-decoration: none;
	transition: all .15s ease;
	white-space: nowrap;
}
.hexp-cmp-plan-cta:hover {
	background: var(--hexp-navy, #1e3a8a);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}
.hexp-cmp-plan-cta i { font-size: 10px; }
html[dir=rtl] .hexp-cmp-plan-cta i { transform: scaleX(-1); }

.hexp-cmp-plans-modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	border-top: 1px solid var(--hexp-gray-100, #f1f5f9);
	background: var(--hexp-gray-50, #f8fafc);
	flex-wrap: wrap;
}
.hexp-cmp-plans-modal-review-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--hexp-gray-500, #64748b);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.hexp-cmp-plans-modal-review-link:hover { color: var(--hexp-primary, #2563eb); }
.hexp-cmp-plans-modal-visit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hexp-primary, #2563eb);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 11px 22px;
	border-radius: 99px;
	text-decoration: none;
	transition: all .15s ease;
	min-height: 44px;
	box-sizing: border-box;
}
.hexp-cmp-plans-modal-visit:hover {
	background: var(--hexp-navy, #1e3a8a);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(37, 99, 235, .35);
}
html[dir=rtl] .hexp-cmp-plans-modal-visit i { transform: scaleX(-1); }

/* MOBILE — full-screen modal, card-style plan rows */
@media (max-width: 768px) {
	.hexp-cmp-plans-modal { padding: 0; }
	.hexp-cmp-plans-modal-box {
		max-width: 100%;
		max-height: 100vh;
		max-height: 100dvh;
		height: 100%;
		border-radius: 0;
	}
	.hexp-cmp-plans-modal-header {
		padding: 16px 50px 14px 16px;
		gap: 12px;
	}
	html[dir=rtl] .hexp-cmp-plans-modal-header { padding: 16px 16px 14px 50px; }
	.hexp-cmp-plans-modal-logo { width: 44px; height: 44px; }
	.hexp-cmp-plans-modal-header h2 { font-size: 18px; }
	.hexp-cmp-plans-modal-sub { font-size: 12.5px; }
	.hexp-cmp-plans-modal-close { top: 10px; right: 10px; width: 36px; height: 36px; }
	html[dir=rtl] .hexp-cmp-plans-modal-close { right: auto; left: 10px; }

	.hexp-cmp-plans-modal-body { padding: 14px; }

	/* Card-style table rows: convert table to stacked cards */
	.hexp-cmp-plans-table-wrap { border: 0; border-radius: 0; }
	.hexp-cmp-plans-table,
	.hexp-cmp-plans-table thead,
	.hexp-cmp-plans-table tbody,
	.hexp-cmp-plans-table tr,
	.hexp-cmp-plans-table td { display: block; width: 100%; }
	.hexp-cmp-plans-table thead { display: none; }
	.hexp-cmp-plans-table tbody tr {
		border: 1px solid var(--hexp-gray-100, #f1f5f9);
		border-radius: 12px;
		padding: 12px 14px;
		margin-bottom: 10px;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 6px 12px;
		align-items: start;
	}
	.hexp-cmp-plans-table tbody tr.is-best {
		border-color: rgba(16, 185, 129, .4);
		box-shadow: 0 0 0 2px rgba(16, 185, 129, .1);
	}
	.hexp-cmp-plans-table tbody td {
		border: 0;
		padding: 0;
		font-size: 13px;
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.hexp-cmp-plans-table tbody td::before {
		content: attr(data-label) ":";
		color: var(--hexp-gray-500, #64748b);
		font-size: 11.5px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .3px;
		margin-right: 4px;
		min-width: 60px;
	}
	html[dir=rtl] .hexp-cmp-plans-table tbody td::before { margin-right: 0; margin-left: 4px; }
	/* Plan name spans both columns */
	.hexp-cmp-plans-table tbody td.col-plan {
		grid-column: 1 / -1;
		font-size: 15px;
		font-weight: 800;
		padding-bottom: 6px;
		border-bottom: 1px dashed var(--hexp-gray-100, #f1f5f9);
		margin-bottom: 4px;
	}
	.hexp-cmp-plans-table tbody td.col-plan::before { display: none; }
	/* Price more prominent on mobile */
	.hexp-cmp-plans-table tbody td.col-price strong { font-size: 17px; }
	/* CTA spans both columns at the bottom */
	.hexp-cmp-plans-table tbody td.col-cta {
		grid-column: 1 / -1;
		text-align: center;
		margin-top: 6px;
	}
	.hexp-cmp-plans-table tbody td.col-cta::before { display: none; }
	.hexp-cmp-plan-cta { width: 100%; justify-content: center; min-height: 44px; padding: 11px 18px; }

	/* Footer — stack buttons */
	.hexp-cmp-plans-modal-footer {
		flex-direction: column-reverse;
		align-items: stretch;
		padding: 14px;
	}
	.hexp-cmp-plans-modal-visit,
	.hexp-cmp-plans-modal-review-link {
		justify-content: center;
		text-align: center;
	}
	.hexp-cmp-plans-modal-visit { width: 100%; }
}

/* ============================================================
   19. COMPARE PAGE — REMOVED in v3.7.146.
   ------------------------------------------------------------
   This section used to rebuild the compare layout as a vertical
   card stack with one card per row, designed in v3.7.18 because
   horizontal-scroll felt clunky at the time. Mohamed reverted
   to horizontal-scroll in v3.7.145 — the entire stacked layout
   was overriding the new horizontal-scroll rules in Section 12
   above (with !important on display/grid-template-columns/
   min-width), forcing data rows back into single-column blocks
   and breaking the company-to-cell alignment.

   The horizontal-scroll layout from Section 12 (lines ~410-580)
   is the canonical mobile compare layout now. Don't re-add a
   stacked layout here without explicitly removing or weakening
   the Section 12 overrides — the two approaches conflict.
   ============================================================ */

/* ============================================================
   21. QUIZ — Upgrade Suggestion Card (v3.7.28)
   ------------------------------------------------------------
   Shown below the main quiz CTA when the recommended plan can't
   fully satisfy a visitor preference (e.g. unlimited emails) but
   a higher-tier plan from the same company can.
   ============================================================ */
.hexp-quiz-upgrade {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%);
	border: 1px solid #fbbf24;
	border-radius: 12px;
	padding: 14px 16px;
	margin-top: 14px;
}
.hexp-quiz-upgrade-icon {
	font-size: 24px;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 2px;
}
.hexp-quiz-upgrade-body { flex: 1; min-width: 0; }
.hexp-quiz-upgrade-label {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #92400e;
	margin-bottom: 4px;
}
.hexp-quiz-upgrade-name {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
}
.hexp-quiz-upgrade-price {
	font-size: 14px;
	font-weight: 700;
	color: #b45309;
	margin-left: 6px;
}
html[dir=rtl] .hexp-quiz-upgrade-price { margin-left: 0; margin-right: 6px; }
.hexp-quiz-upgrade-reason {
	font-size: 13px;
	color: #78350f;
	margin: 4px 0 8px;
	line-height: 1.45;
}
.hexp-quiz-upgrade-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f59e0b;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 99px;
	text-decoration: none;
	transition: all .15s ease;
}
.hexp-quiz-upgrade-cta:hover {
	background: #d97706;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(245, 158, 11, .3);
}
.hexp-quiz-upgrade-cta i { font-size: 10px; }
html[dir=rtl] .hexp-quiz-upgrade-cta i { transform: scaleX(-1); }

@media (max-width: 480px) {
	.hexp-quiz-upgrade { flex-direction: column; gap: 10px; padding: 12px 14px; }
	.hexp-quiz-upgrade-cta { width: 100%; justify-content: center; min-height: 40px; }
}

/* ============================================================
   20. PROVIDER CARD — plans grouped by hosting type
   ------------------------------------------------------------
   The "Show Best Plans" expand on each provider card now renders
   a labeled section per hosting type (Shared / WP / Cloud / VPS
   / etc) — matching the structure used on the company review page
   and in the /compare/ plans modal. Each group has a header with
   the type name + plan count, then a normal plans table beneath.
   ============================================================ */
.hexp-plans-by-type {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.hexp-plans-type-group {
	/* No background or border — let the inner table provide structure.
	   Visual separation comes from the gap above + the type header. */
}
.hexp-plans-type-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	margin-bottom: 8px;
	background: linear-gradient(180deg, var(--hexp-blue-50, #eff6ff) 0%, transparent 100%);
	border-left: 3px solid var(--hexp-primary, #2563eb);
	border-radius: 6px;
}
html[dir=rtl] .hexp-plans-type-header {
	border-left: 0;
	border-right: 3px solid var(--hexp-primary, #2563eb);
}
.hexp-plans-type-title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--hexp-navy-dark, #0f172a);
	letter-spacing: -.2px;
	line-height: 1.3;
}
.hexp-plans-type-count {
	background: var(--hexp-primary, #2563eb);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 99px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Mobile — convert the inline plans table to stacked card rows
   inside each type group (same approach as the /compare/ modal). */
@media (max-width: 768px) {
	.hexp-plans-type-header {
		padding: 9px 12px;
		margin-bottom: 6px;
	}
	.hexp-plans-type-title { font-size: 13.5px; }
	.hexp-plans-type-count { font-size: 11px; padding: 2.5px 8px; }

	.hexp-plans-table-inline,
	.hexp-plans-table-inline thead,
	.hexp-plans-table-inline tbody,
	.hexp-plans-table-inline tr,
	.hexp-plans-table-inline td { display: block; width: 100%; }
	.hexp-plans-table-inline thead { display: none; }
	.hexp-plans-table-inline tbody tr {
		border: 1px solid var(--hexp-gray-100, #f1f5f9);
		border-radius: 10px;
		padding: 12px 14px;
		margin-bottom: 8px;
		background: #fff;
	}
	.hexp-plans-table-inline tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 4px 0;
		border: 0;
		font-size: 13px;
	}
	.hexp-plans-table-inline tbody td::before {
		content: attr(data-label);
		color: var(--hexp-gray-500, #64748b);
		font-size: 11.5px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .3px;
	}
	.hexp-plans-table-inline tbody td.plan-name {
		justify-content: flex-start;
		gap: 8px;
		font-size: 14.5px;
		font-weight: 700;
		padding-bottom: 8px;
		margin-bottom: 4px;
		border-bottom: 1px dashed var(--hexp-gray-100, #f1f5f9);
	}
	.hexp-plans-table-inline tbody td.plan-name::before { display: none; }
	.hexp-plans-table-inline tbody td:last-child {
		padding-top: 8px;
		margin-top: 4px;
		border-top: 1px dashed var(--hexp-gray-100, #f1f5f9);
	}
	.hexp-plans-table-inline tbody td:last-child::before { display: none; }
	.hexp-plans-table-inline .view-plan-btn {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 40px;
		padding: 10px 16px;
	}
}

/* ============================================================
   v3.7.34 — AI Explanation card on quiz result page
   Yellow-tinted card with subtle gradient, robot emoji icon,
   appears after the engine "Why X fits you" reasons list.
   ============================================================ */
.hexp-quiz-ai-explain {
	margin: 18px 0;
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border: 1px solid #fde68a;
	border-radius: 12px;
	padding: 16px 20px;
	box-shadow: 0 2px 6px rgba(245, 158, 11, .08);
}
.hexp-quiz-ai-explain-head {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(245, 158, 11, .15);
}
.hexp-quiz-ai-explain-icon {
	font-size: 22px; line-height: 1;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	background: rgba(245, 158, 11, .15); border-radius: 50%;
}
.hexp-quiz-ai-explain-title {
	font-size: 13.5px; font-weight: 700; color: #92400e;
	letter-spacing: .2px;
}
.hexp-quiz-ai-explain-body {
	color: #1f2937; font-size: 14.5px; line-height: 1.75;
}
.hexp-quiz-ai-explain-body p {
	margin: 0 0 10px;
}
.hexp-quiz-ai-explain-body p:last-child { margin-bottom: 0; }

/* RTL: the card already reads right-to-left in Arabic locales */
[dir="rtl"] .hexp-quiz-ai-explain-head {
	flex-direction: row;
}

@media (max-width: 600px) {
	.hexp-quiz-ai-explain { padding: 14px 16px; margin: 14px 0; }
	.hexp-quiz-ai-explain-icon { width: 32px; height: 32px; font-size: 18px; }
	.hexp-quiz-ai-explain-title { font-size: 13px; }
	.hexp-quiz-ai-explain-body { font-size: 14px; line-height: 1.7; }
}

/* ============================================================
   v3.7.141 — Opt-in horizontal-scroll mode for the
   .hexp-plans-table-inline tables in provider-card.php.

   The default mobile behavior (set ~line 1473 above) is to break
   the table into vertical card-style rows with data-label headers.
   Mohamed prefers the desktop table layout preserved on mobile
   with horizontal scroll inside the wrapper, since the visitor
   then sees the same column comparison they see on desktop and
   the table is a familiar product-comparison pattern.

   The override is opt-in via the new wrapper class
   `.hexp-plans-scroll-mobile-v2`. Any table NOT wrapped in that
   class keeps its current vertical-card mobile behavior. This
   keeps the change isolated.
   ============================================================ */
@media (max-width: 768px) {
	/* The wrapper itself does the scrolling.
	   -webkit-overflow-scrolling for momentum scroll on iOS. */
	.hexp-plans-scroll-mobile-v2 {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		/* Visible scrollbar on mobile so users know it's scrollable */
		scrollbar-width: thin;
		scrollbar-color: var(--hexp-primary, #2563EB) #f1f5f9;
		/* Soft right-edge fade as a visual hint that more content
		   exists offscreen. Mask only on the right; keep the left
		   edge sharp so the first column reads cleanly. */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
		        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
		padding-right: 24px;
		margin-right: -8px;  /* allow the fade to bleed off the card edge */
	}
	.hexp-plans-scroll-mobile-v2::-webkit-scrollbar {
		height: 6px;
	}
	.hexp-plans-scroll-mobile-v2::-webkit-scrollbar-track {
		background: #f1f5f9;
		border-radius: 3px;
	}
	.hexp-plans-scroll-mobile-v2::-webkit-scrollbar-thumb {
		background: var(--hexp-primary, #2563EB);
		border-radius: 3px;
	}

	/* Restore desktop table layout INSIDE the scroll wrapper.
	   The default mobile rules above turn `display:block` on the
	   table parts; here we revert that just for tables inside this
	   wrapper. `display: revert` would also work but is less reliable
	   across older mobile browsers — explicit values are safer. */
	.hexp-plans-scroll-mobile-v2 .hexp-plans-table-inline {
		display: table;
		min-width: 720px; /* enough to fit Plan/Space/CPU/RAM/OS/Price/Score/CTA without crushing */
		width: 100%;
	}
	.hexp-plans-scroll-mobile-v2 .hexp-plans-table-inline thead {
		display: table-header-group;
	}
	.hexp-plans-scroll-mobile-v2 .hexp-plans-table-inline tbody {
		display: table-row-group;
	}
	.hexp-plans-scroll-mobile-v2 .hexp-plans-table-inline tr {
		display: table-row;
		border: 0;
		border-radius: 0;
		padding: 0;
		margin: 0;
		background: transparent;
	}
	.hexp-plans-scroll-mobile-v2 .hexp-plans-table-inline td {
		display: table-cell;
		width: auto;
		padding: 14px 12px !important;
		border-top: 1px solid #f3f4f6 !important;
		border-bottom: 0;
		font-size: 13px;
		justify-content: flex-start; /* default flexbox alignment was overriding cell text */
	}
	/* Hide the data-label pseudo-element prefix in scroll mode —
	   the column headers (thead) handle labeling instead. */
	.hexp-plans-scroll-mobile-v2 .hexp-plans-table-inline tbody td::before {
		display: none !important;
		content: none !important;
	}
	/* Plan-name cell — restore the un-stacked styling */
	.hexp-plans-scroll-mobile-v2 .hexp-plans-table-inline tbody td.plan-name {
		justify-content: flex-start;
		font-size: 14px;
		font-weight: 700;
		padding-bottom: 14px !important;
		margin-bottom: 0;
		border-bottom: 0;
		white-space: nowrap;
	}
	/* Last-cell (CTA button) — un-stack and shrink to natural width */
	.hexp-plans-scroll-mobile-v2 .hexp-plans-table-inline tbody td:last-child {
		padding-top: 14px !important;
		margin-top: 0;
		border-top: 1px solid #f3f4f6 !important;
		text-align: right;
	}
	.hexp-plans-scroll-mobile-v2 .hexp-plans-table-inline .view-plan-btn {
		width: auto;
		display: inline-flex;
		min-height: 0;
		padding: 9px 18px !important;
		font-size: 12.5px !important;
		white-space: nowrap;
	}
	/* Header cells stay visible (default mobile rule hides thead) */
	.hexp-plans-scroll-mobile-v2 .hexp-plans-table-inline thead {
		display: table-header-group !important;
	}
	.hexp-plans-scroll-mobile-v2 .hexp-plans-table-inline th {
		display: table-cell;
		padding: 10px 12px !important;
		font-size: 11px !important;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		white-space: nowrap;
	}
	/* Override the .hexp-plans-detail{ overflow-x:auto } in main.css
	   line ~4646 so that the scroll happens on OUR wrapper, not the
	   outer container — otherwise the soft-edge fade would appear in
	   the wrong place. */
	.hexp-plans-detail:has(.hexp-plans-scroll-mobile-v2) {
		overflow-x: visible;
	}
	.hexp-plans-detail:has(.hexp-plans-scroll-mobile-v2) .hexp-plans-table-inline {
		min-width: 0; /* defer to the v2 wrapper's min-width */
	}
}

/* RTL — reverse the scroll fade-edge direction */
html[dir=rtl] .hexp-plans-scroll-mobile-v2 {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent 100%);
	        mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent 100%);
	padding-right: 0;
	padding-left: 24px;
	margin-right: 0;
	margin-left: -8px;
}

/* ============================================================
   v3.7.141 — Home page horizontal scroll defense.

   The body already has `overflow-x: clip` (main.css line ~63),
   but Mohamed reported horizontal swipe on the home page on
   mobile despite that rule. Possible escape paths:
     - A descendant with `position: absolute` + negative offset
       that escapes its containing block
     - A flex/grid child with `min-width` larger than viewport
     - A 3rd-party embed (Facebook iframe, ad pixel) that loaded
       wider than its container
     - An image that hasn't loaded yet but reserved a fixed width

   Defense: clip horizontal overflow on each top-level home page
   section at mobile breakpoints. Sections are isolated from each
   other so a leak in one doesn't bleed into the page. We avoid
   `overflow-x: hidden` because that creates a scroll-context that
   breaks `position: sticky` descendants — but none of the home
   page sections have sticky descendants, so `clip` is the safer
   primitive (no layout side effects, just visual clipping).

   Targeting top-level sections by class so the rule is explicit
   about what gets clipped — a blanket `body > *` would also
   affect admin bars, popups, modal backdrops, etc.
   ============================================================ */
@media (max-width: 1100px) {
	.hexp-hero,
	.hexp-explore-section,
	.hexp-quiz-banner,
	.hexp-providers-section,
	.hexp-trust-v2,
	.hexp-exclusives-section,
	.hexp-newsletter-section,
	.hexp-articles-section,
	.hexp-footer {
		max-width: 100vw;
		overflow-x: clip;
	}
}

/* For iOS Safari versions that don't support `overflow-x: clip`
   (Safari < 16), the `max-width: 100vw` above plus this fallback
   `overflow-x: hidden` provide the same effective clipping. The
   browser uses the last-supported value, so newer Safari uses
   `clip`, older Safari uses `hidden`. */
@supports not (overflow-x: clip) {
	@media (max-width: 1100px) {
		.hexp-hero,
		.hexp-explore-section,
		.hexp-quiz-banner,
		.hexp-providers-section,
		.hexp-trust-v2,
		.hexp-exclusives-section,
		.hexp-newsletter-section,
		.hexp-articles-section,
		.hexp-footer {
			overflow-x: hidden;
		}
	}
}

/* Belt-and-braces: enforce that any image inside a home page
   section can't exceed its own container's width. The universal
   `img { max-width: 100% }` in main.css line 67 covers most
   cases, but some plugins inject inline `width=""` HTML attrs
   that beat the CSS rule (HTML attrs are typed properties, not
   CSS, so `width: ###` as an attribute wins over a `max-width`
   CSS rule when there's no explicit `width` CSS rule). Adding
   `width: auto` on the CSS side neutralizes the HTML attr. */
@media (max-width: 768px) {
	.hexp-hero img,
	.hexp-explore-section img,
	.hexp-providers-section img,
	.hexp-trust-v2 img,
	.hexp-exclusives-section img,
	.hexp-articles-section img {
		max-width: 100% !important;
		width: auto !important;
		height: auto !important;
	}
}