/*!
Theme Name: Hustly SaaS
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hustly-saas
*/

/*--------------------------------------------------------------
# Web Fonts (Self-Hosted)
--------------------------------------------------------------*/

/* Montserrat - Headings */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('./fonts/montserrat-v31-latin-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('./fonts/montserrat-v31-latin-300italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/montserrat-v31-latin-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./fonts/montserrat-v31-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('./fonts/montserrat-v31-latin-500italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./fonts/montserrat-v31-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('./fonts/montserrat-v31-latin-600italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/montserrat-v31-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/montserrat-v31-latin-700italic.woff2') format('woff2');
}

/* Cabin - Body */
@font-face {
    font-family: 'Cabin';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/cabin-v35-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Cabin';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/cabin-v35-latin-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Cabin';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./fonts/cabin-v35-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Cabin';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('./fonts/cabin-v35-latin-500italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Cabin';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./fonts/cabin-v35-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Cabin';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('./fonts/cabin-v35-latin-600italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Cabin';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/cabin-v35-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Cabin';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/cabin-v35-latin-700italic.woff2') format('woff2');
}

/*--------------------------------------------------------------
# CSS Variables - Light Mode (default)
--------------------------------------------------------------*/

:root {
	/* Background colors */
	--color-bg-primary: #ffffff;
	--color-bg-secondary: #F7F3FC;
	--color-bg-header: #DC822E;
	--color-icon: #BF5F5C;
	--color-separator: #FFE1D0;
	--color-divider: #E3C9E9;
	
	/* Text colors */
	--color-text-primary: #050505;
	--color-text-secondary: #666666;
	--color-text-muted: #999999;
	--color-text-dark: #050505;
	--color-text-gray: #5e5e5e;
	
	/* Brand colors */
	--color-orange: #DC822E;
	--color-white: #FFFFFF;
	--color-accent: #8f27a6;
	--color-accent-hover: #AA5BBC;
	--color-accent-dark: #7C0099;
	--box-shadow-button: 2px 4px 8px -1px rgba(124, 37, 143, 0.66);
	--box-shadow-card: 0px 6px 18px rgba(0, 0, 0, 0.1);
	
	/* Badge/Promo colors */
	--color-green: #DDF8EB;
	--color-green-text: #1F7A4D;
	
	/* Table cell colors */
	--color-cell-bg-green: #23ff8d;
	--color-cell-bg-green-orange: #d3f8bf;
	--color-cell-bg-orange: #FFF6CC;
	--color-cell-bg-red: #F7B6B6;
	--color-cell-bg-neutral: #EFEFEF;
	
	/* Border colors */
	--color-border: #eeeeee;
	--color-border-dark: #cccccc;
	--color-border-table: #ddd;
	--card-border: solid #f3e6db 1px;
	--card-border-radius: 8px;
	
	/* Typography */
	--font-heading: "Montserrat", sans-serif;
	--font-body: "Cabin", sans-serif;
	
	/* Logo - change URL here to swap logos */
	--logo-url: url('https://staging.hustly.website/wp-content/uploads/2026/02/Hustly-whitef-transparentbg.webp');
}

/*--------------------------------------------------------------
# CSS Variables - Dark Mode
--------------------------------------------------------------*/
html.dark-mode {
	--color-bg-primary: #ffffff;
	--color-bg-secondary: #F7F3FC;
	--color-bg-header: #DC822E;
	--color-icon: #BF5F5C;
	--color-separator: #FFE1D0;
	--color-divider: #E3C9E9;
	--color-text-primary: #050505;
	--color-text-wg: #666666;
	--color-text-muted: #999999;
	--color-accent: #8f27a6;
	--color-accent-hover: #AA5BBC;
	--color-border: #eeeeee;
	--color-border-dark: #cccccc;
	--box-shadow-button: 2px 4px 8px -1px rgba(124, 37, 143, 0.66);
	--box-shadow-card: 0px 6px 18px rgba(0, 0, 0, 0.1);
	--logo-url: url('https://staging.hustly.website/wp-content/uploads/2026/02/Hustly-orangef-transparentbg.webp');
}

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	background: var(--color-bg-primary);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0.5px;
}

main { display: block; }

h1, h2, h3, h4, h5, h6 { 
	clear: both;
	font-family: var(--font-heading);
	margin: 0;
}

h1, h2, h3 {
	color: var(--color-orange);
}

p { margin-bottom: 1.5em; }

a {
	color: var(--color-accent);
	background-color: transparent;
	text-decoration: none;
}

a:hover, a:focus, a:active {
	color: var(--color-accent-hover);
}

img {
	border-style: none;
	height: auto;
	max-width: 100%;
}

button, input, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000000;
	width: 100%;
	background: var(--color-bg-header);
	border-bottom: 1px solid var(--color-border);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1% 12.5%;
	width: 100%;
}

/*--------------------------------------------------------------
# Logo (CSS Background)
--------------------------------------------------------------*/
.site-logo {
	display: block;
	width: 150px;
	height: 50px;
	background-image: var(--logo-url);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	flex-shrink: 0;
}

/*--------------------------------------------------------------
# Dark Mode Toggle
--------------------------------------------------------------*/
.dark-mode-toggle {
	background: transparent;
	border: 1px solid var(--color-border-dark);
	border-radius: 6px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin-right: 1.5rem;
	color: var(--color-text-primary);
	transition: background 0.2s, border-color 0.2s;
}

.dark-mode-toggle:hover {
	background: var(--color-bg-secondary);
}

.dark-mode-toggle .icon-moon {
	display: none;
}

html.dark-mode .dark-mode-toggle .icon-sun {
	display: none;
}

html.dark-mode .dark-mode-toggle .icon-moon {
	display: block;
}

.dark-mode-toggle.hidden {
	display: none;
}

/*--------------------------------------------------------------
# Hamburger Menu Toggle
--------------------------------------------------------------*/
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	padding: 10px;
	cursor: pointer;
}

.menu-toggle .bar {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-text-primary);
	transition: transform 0.3s, opacity 0.3s;
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.main-navigation {
	display: flex;
	margin-left: auto;
}

.main-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	gap: 2.5rem;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	color: var(--color-white);
	font-size: 1.4em;
	padding: 0.5rem 0;
	font-weight: 500;
	transition: color 0.2s;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--color-accent);
}

/* Dropdown arrow */
.main-navigation .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 6px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.2s;
}

/* Dropdown menus */
.main-navigation ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--color-bg-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	padding: 0.5rem 0;
	z-index: 99999;
	flex-direction: column;
	gap: 0;
}

.main-navigation ul ul li {
	width: 100%;
}

.main-navigation ul ul a {
	padding: 0.75rem 1.25rem;
	white-space: nowrap;
	color: var(--color-accent);
}

.main-navigation ul ul a:hover {
	background: var(--color-bg-secondary);
}

/* Show dropdown on hover */
.main-navigation li:hover > ul,
.main-navigation li.focus > ul {
	display: flex;
}

.main-navigation li:hover > a::after {
	transform: rotate(180deg);
}

/* Nested dropdowns */
.main-navigation ul ul ul {
	top: 0;
	left: 100%;
}

/*--------------------------------------------------------------
# Hero Banner
--------------------------------------------------------------*/
.hero-banner {
	padding: 0;
	/*background-image: url('/wp-content/themes/hustly-saas/images/hustlybanneranim.svg');
	background-repeat: no-repeat;
	background-position: center;*/
}

.hero-inner {
	display: flex;
	align-items: center;
	margin: 0 auto;
	padding: 0;
}

/* Column 1: Content */
.hero-content {
	flex: 0 0 57%;
    text-align: left;
    overflow: visible; 
    min-width: 0; 
}

/* Column 2: Image */
.hero-image {
	flex: 0 0 43%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-image img {
	width: 75%;
	height: auto;
	display: block;
	opacity: 0.33;
}

.hero-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
	z-index: 1;
}

/* Hero Title */
.hero-title {
	font-family: var(--font-heading);
	font-size: 2.8em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-orange);
	margin: 0.25em 0;
}

/*--------------------------------------------------------------
# Hero Features
--------------------------------------------------------------*/
 
/* Hero Footer - Now a separate row below hero-inner */
.hero-footer {
    max-width: 1320px;
    margin: 0 0 0 0;
    padding: 1em 0 1em 0;
    overflow: visible;
}
 
/* Hero Features - 4 column grid of cards */
.hero-features {
    margin: 1em 0 0 0;
    padding: 0;
    z-index: 9999;
    position: relative;
    width: max-content; 
}

.hero-feature-card {
	display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 0.25em 0.5em;
}

.hero-feature-card-title {
	display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
}
 
/* Feature icon in cards */
.hero-features .feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
 
.hero-features .feature-icon svg {
    fill: var(--color-icon);
	height: 1em;
	width: 1em;
}
 
/* Feature text in cards */
.hero-features .feature-text {
    font-family: var(--font-body);
    font-size: 1em;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
}
 
/* Subtitle styling (the nested span) */
.hero-features .feature-text span {
    display: block;
    font-size: 0.82em;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-top: 0.25em;
}
 
 
/*--------------------------------------------------------------
# Hero Footer - Mobile & Tablet (max-width: 991px)
--------------------------------------------------------------*/
@media screen and (max-width: 991px) {
    .hero-footer {
        padding: 0 1.5em 1.5em 1.5em;
    }
 
    .hero-features {
        gap: 1em;
    }

 
    .hero-features .feature-icon {
    }
 
    .hero-features .feature-icon svg {
    }
 
    .hero-features .feature-text {
        font-size: 0.95em;
    }
 
    .hero-features .feature-text span {
        font-size: 0.8em;
    }
}

.feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.5em;
	flex-shrink: 0;
}

.feature-icon svg {
	fill: var(--color-icon);
}

.feature-text {
	font-family: var(--font-body);
	font-size: 1.6em;
	font-weight: 700;
	color: #000;
}

/* Hero Pricing */
.hero-pricing {
	margin: 0.5em 0;
	line-height: 2em;
}

.price-old {
	margin-bottom: 2px;
}

.price-old .strikethrough {
	text-decoration: line-through;
	color: #999;
	font-size: 0.85em;
}

.promo-badge {
	background: var(--color-green);
	color: var(--color-green-text);
	font-family: var(--font-body);
	font-size: 0.9em;
	font-weight: 600;
	padding: 0.1em 0.45em;
	border-radius: 4px;
	margin-left: 0.4em;
	display: inline-block;
}

.price-new {
	font-family: var(--font-body);
	font-size: 1.4em;
	color: var(--color-accent);
}

.price-from {
	font-size: 0.8em;
}

.price-large {
	font-size: 1.85em;
}

.price-small {
	font-size: 0.8em;
}

/* Hero CTA Buttons */
.hero-cta {
	margin-top: 1em;
}

.btn-primary {
	display: inline-block;
	background: var(--color-accent);
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-body);
	font-size: 1.72em;
	font-weight: 700;
	padding: 0.25em 0.5em;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.33);
	box-shadow: var(--box-shadow-button);
	text-decoration: none;
	transition: all 0.2s;
}

.btn-primary:hover,
.btn-primary:focus {
	background: var(--color-accent-dark);
	color: #fff;
	border-color: rgba(127, 7, 153, 0.44);
}

.btn-secondary {
	display: block;
	margin-top: 0.5em;
	background: transparent;
	color: var(--color-accent);
	font-family: var(--font-body);
	font-size: 1.25em;
	font-weight: 700;
	text-decoration: underline;
	padding: 0;
	transition: color 0.2s;
}

.btn-secondary:hover,
.btn-secondary:focus {
	color: var(--color-accent-hover);
}

/*--------------------------------------------------------------
# Section Divider
--------------------------------------------------------------*/
.section-divider {
	max-width: 1320px;
	margin: 0;
	padding: 1em 0;
}

.section-divider hr {
	border: none;
	border-top: 1px solid var(--color-divider);
	margin: 0;
}

/*--------------------------------------------------------------
# Compare Section
--------------------------------------------------------------*/
.compare-section {
	background: var(--color-bg-primary);
	padding: 0;
	max-width: 1320px;
}

.compare-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 0 2em 0;
}

.compare-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	padding: 0 1em;
}

.compare-subtitle {
	font-family: var(--font-body);
	font-size: 1.6em;
	font-weight: 600;
	color: #000;
	line-height: 1.3;
	margin: 0 0 6px 0;
}

.compare-title {
	font-family: var(--font-heading);
	font-size: 2.2em;
	font-weight: 700;
	color: var(--color-orange);
	line-height: 1.3;
	margin: 0 0 0 0;
}

/* Tab Navigation */
.compare-nav-label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.2em;
	width: 100%;
	text-align: center;
	color: var(--color-text-gray);
	margin-bottom: 0.5em;
}

.compare-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	margin: 0 auto 1.25em auto;
	max-width: 480px;
	width: 100%;
}

.compare-tab-btn {
	background-color: var(--color-bg-primary);
	color: var(--color-accent);
	padding: 4px 8px;
	font-family: var(--font-body);
	font-size: 1.2em;
	font-weight: 700;
	border: 1px solid var(--color-accent);
	margin-left: 2px;
	cursor: pointer;
	flex: 1;
	box-shadow: var(--box-shadow-button);
	transition: all 0.2s;
}

.compare-tab-btn:first-child {
	margin-left: 0;
	border-radius: 4px 0 0 4px;
}

.compare-tab-btn:last-child {
	border-radius: 0 4px 4px 0;
}

.compare-tab-btn.active,
.compare-tab-btn:hover {
	background-color: var(--color-accent);
	color: #fff;
}

/* Tab Content */
.compare-content {
	width: 100%;
	overflow-x: auto;
	margin-top: 20px;
}

.compare-tab-panel {
	display: none;
}

.compare-tab-panel.active {
	display: block;
}

/* Comparison Table */
.compare-table {
	width: 100%;
	border-collapse: collapse;
}

.compare-table th,
.compare-table td {
	padding: 4px 10px;
	height: 44px;
	text-align: center;
	vertical-align: middle;
	line-height: 1em;
	font-size: 1em;
	border: 1px solid var(--color-border-table);
}

.compare-table th {
	background-color: #f2f2f2;
	font-weight: 700;
	font-size: 1.25em;
	min-width: 5em;
}

.compare-table td {
	width: 8em;
}

.compare-table td:first-child {
	text-align: right;
	font-weight: 700;
	width: 12em;
	font-size: 1.1em;
}

/* Table Header Cell Variants */
.compare-table th.cell-empty {
	background-color: transparent;
	border-top-color: white;
	border-left-color: white;
}

.compare-table th.cell-hustly {
	background-color: var(--color-orange);
	color: #fff;
}

.compare-table th.cell-other {
	font-weight: 700;
	background-color: #fff;
}

/* Table Cell Colors */
.compare-table td.cell-green {
	background-color: var(--color-cell-bg-green);
	color: #000;
}

.compare-table td.cell-green-orange {
	background-color: var(--color-cell-bg-green-orange);
	color: #000;
}

.compare-table td.cell-orange {
	background-color: var(--color-cell-bg-orange);
	color: #000;
}

.compare-table td.cell-red {
	background-color: var(--color-cell-bg-red);
	color: #000;
}

.compare-table td.cell-neutral {
	background-color: var(--color-cell-bg-neutral);
	color: #000;
}

/* Table Subtext */
.cell-subtext {
	font-size: 0.75em;
	color: gray;
}

.cell-subtext-hustly {
	font-size: 0.75em;
}

/* Period Toggle */
.period-toggle {
	color: gray;
	text-decoration: none;
	font-weight: 700;
	cursor: pointer;
	margin: 0 0.25em;
	transition: color 0.2s;
}

.period-toggle.active,
.period-toggle:hover {
	color: var(--color-accent);
}

/* Performance Features Small Text */
.features-small {
	font-size: 1em;
	display: flex;
	flex-direction: column;
	text-align: left;
	justify-content: center;
	line-height: 1.4em;
}

/* Tooltip */
.compare-tooltip {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}

.compare-tooltip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	margin-left: 2px;
	cursor: help;
	background-color: var(--color-accent);
	color: #fff;
	border-radius: 50%;
	font-size: 0.6em;
	font-weight: 700;
}

.compare-tooltip-text {
	visibility: hidden;
	width: 160px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	padding: 6px;
	position: absolute;
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 10;
	font-weight: 400;
}

.compare-tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}

.compare-tooltip:hover .compare-tooltip-text {
	visibility: visible;
	opacity: 1;
}

/* Compare Footer */
.compare-footer {
	font-family: var(--font-body);
	font-size: 1.32em;
	font-weight: 600;
	text-align: center;
	margin-top: 1.5em;
	padding: 0 1em;
}

/*--------------------------------------------------------------
# Features Section (3-column cards)
--------------------------------------------------------------*/
.features-section {
	background: var(--color-bg-primary);
	padding: 0;
	max-width: 1320px;
}

.features-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2em 0;
}

.features-title {
	font-family: var(--font-heading);
	font-size: 2em;
	font-weight: 700;
	color: var(--color-orange);
	text-align: center;
	margin: 0 0 1.5em 0;
}

.features-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2em;
	width: 100%;
}

.feature-card {
	flex: 1 1 280px;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  	padding: 1.5em;
  	background-color: var(--color-bg-secondary);
  	border: var(--card-border);
	border-radius: var(--card-border-radius);
}

.feature-card-header {
	display: flex;
	align-items: center;
	margin-bottom: 0.5em;
}

.feature-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-right: 0.5em;
	flex-shrink: 0;
}

.feature-card-icon svg {
	width: 28px;
	height: 28px;
	fill: var(--color-icon);
}

.feature-card-title {
	font-family: var(--font-body);
	font-size: 1.3em;
	font-weight: 700;
	color: #000;
}

.feature-card-body {
	font-family: var(--font-body);
	font-size: 1em;
	line-height: 1.6;
	color: var(--color-text-primary);
	margin: 0;
}

.feature-card-body strong {
	font-weight: 700;
}

/*--------------------------------------------------------------
# Locations Section
--------------------------------------------------------------*/
.locations-section {
	background: var(--color-bg-primary);
	padding: 0;
	max-width: 1320px;
}

.locations-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2em 0;
	text-align: center;
}

.locations-subtitle {
	font-family: var(--font-heading);
	font-size: 1.8em;
	font-weight: 700;
	color: var(--color-orange);
	margin: 0 0 0.25em 0;
}

.locations-description {
	font-family: var(--font-body);
	font-size: 1.2em;
	color: var(--color-text-primary);
	max-width: 800px;
	margin: 0 0 1.5em 0;
	line-height: 1.5;
}

.locations-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5em;
	width: 100%;
	margin-bottom: 1.5em;
}

.location-item {
	flex: 1 1 150px;
	max-width: 180px;
	text-align: center;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
	padding: 1.5em;
	background-color: var(--color-bg-secondary);
  	border: var(--card-border);
	border-radius: var(--card-border-radius);
}

.location-flag-icon {
	font-size: 2rem;
}

.location-region {
	font-family: var(--font-heading);
	font-size: 1.2em;
	font-weight: 700;
	color: #000;
	margin: 0 0 0.25em 0;
}

.location-city {
	font-family: var(--font-body);
	font-size: 0.95em;
	color: var(--color-text-secondary);
}

.locations-cdn {
	font-family: var(--font-body);
	font-size: 1.3em;
	font-weight: 600;
	color: var(--color-orange);
	margin: 0;
}

/*--------------------------------------------------------------
# CTA Section (centered buttons)
--------------------------------------------------------------*/
.cta-section {
	background: var(--color-bg-primary);
	padding: 0;
	max-width: 1320px;
	margin: 0 auto;
}

.cta-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2em 4em;
	text-align: center;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials-section {
	background: var(--color-bg-primary);
	padding: 0;
	max-width: 1320px;
}

.testimonials-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2em 0;
}

.testimonials-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5em;
	width: 100%;
}

.testimonial-card {
	flex: 1 1 300px;
	max-width: 400px;
	padding: 1.5em;
	display: flex;
	flex-direction: column;
	margin-right: 1em;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  	padding: 1.5em;
  	background-color: var(--color-bg-secondary);
  	border: var(--card-border);
	border-radius: var(--card-border-radius);
}

.testimonial-text {
	font-family: var(--font-body);
	font-size: 1em;
	line-height: 1.6;
	color: var(--color-text-primary);
	margin: 0 0 1em 0;
	font-style: italic;
}

.testimonial-footer {
	display: flex;
	align-items: center;
	margin-top: auto;
}

.testimonial-image {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 1em;
	flex-shrink: 0;
}

.testimonial-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonial-author {
	display: flex;
	flex-direction: column;
}

.testimonial-name {
	font-family: var(--font-body);
	font-size: 1em;
	font-weight: 700;
	color: #000;
}

.testimonial-role {
	font-family: var(--font-body);
	font-size: 0.9em;
	color: var(--color-text-secondary);
}

/*--------------------------------------------------------------
# Testimonials Carousel Mode (.is-carousel)
--------------------------------------------------------------*/

/* Viewport - the visible window that clips content */
.testimonials-viewport {
	width: 100%;
	overflow: hidden;
}

/* Track - horizontal strip holding all cards */
.testimonials-track {
	display: flex;
	flex-wrap: nowrap;
	will-change: transform;
}

/* Cards in carousel - fixed width, no shrink */
.testimonials-section.is-carousel .testimonial-card {
	flex-shrink: 0;
	box-sizing: border-box;
}

/* Dots Navigation */
.testimonial-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 1.5em;
	padding: 0.5em 0;
}

.testimonial-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: none;
	background: var(--color-border-dark);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, transform 0.2s;
}

.testimonial-dot:hover {
	background: var(--color-accent-hover);
}

.testimonial-dot.active {
	background: var(--color-accent);
	transform: scale(1.2);
}

/*--------------------------------------------------------------
# Developer Section
--------------------------------------------------------------*/
.developer-section {
	background: var(--color-bg-primary);
	padding: 0;
	max-width: 1320px;
}

.developer-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2em 4em;
	text-align: center;
}

.developer-subtitle {
	font-family: var(--font-heading);
	font-size: 1.6em;
	font-weight: 700;
	color: var(--color-orange);
	margin: 0 0 0.25em 0;
}

.developer-title {
	font-family: var(--font-heading);
	font-size: 2em;
	font-weight: 700;
	color: #000;
	margin: 0 0 1.5em 0;
	max-width: 800px;
}

/*--------------------------------------------------------------
# Tools Section (logo grid)
--------------------------------------------------------------*/
.tools-section {
	background: var(--color-bg-primary);
	padding: 0;
	max-width: 1320px;
}

.tools-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2em 0;
	text-align: center;
}

.tools-title {
	font-family: var(--font-heading);
	font-size: 1.8em;
	font-weight: 700;
	color: var(--color-orange);
	margin: 0 0 1.5em 0;
}

.tools-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2em;
	width: 100%;
}

.tool-logo {
	flex: 1 1 120px;
	max-width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tool-logo img {
	max-width: 100%;
	height: auto;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: all 0.3s;
}

.tool-logo img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/*--------------------------------------------------------------
# Desktop Styles (min-width: 992px)
--------------------------------------------------------------*/
@media screen and (min-width: 992px) {
	main {
		padding: 0 12.5%;
		margin-bottom: 10%;
	}
	.hero-title {
		text-wrap: nowrap;
	}

	.features-grid {
		flex-wrap: nowrap;
	}

	.feature-card {
		flex: 1;
		max-width: none;
	}

	.locations-grid {
		flex-wrap: nowrap;
	}

	.location-item {
		flex: 1;
		max-width: none;
	}

	.testimonials-grid {
		flex-wrap: nowrap;
	}

	.testimonial-card {
		flex: 1;
		max-width: none;
	}

	/* Carousel mode - 3 cards visible */
	.testimonials-section.is-carousel .testimonial-card {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}
}

/*--------------------------------------------------------------
# Mobile & Tablet (max-width: 991px)
--------------------------------------------------------------*/
@media screen and (max-width: 991px) {
	/* Header Mobile */
	.header-inner {
		padding: 2.5%;
		flex-wrap: wrap;
	}

	.site-logo {
		order: 1;
	}

	main {
		padding: 0 5%;
		margin-bottom: 20%;
	}


	.dark-mode-toggle {
		order: 2;
		margin-right: auto;
		margin-left: 1rem;
	}

	.dark-mode-toggle.hidden + .menu-toggle {
		margin-left: auto;
	}

	.menu-toggle {
		display: flex;
		order: 3;
	}

	.main-navigation {
		display: none;
		order: 4;
		width: 100%;
		flex-basis: 100%;
		padding-top: 1rem;
		margin-left: 0;
	}

	.main-navigation.toggled {
		display: block;
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-navigation li {
		width: 100%;
		border-bottom: 1px solid var(--color-border);
	}

	.main-navigation li:last-child {
		border-bottom: none;
	}

	.main-navigation a {
		padding: 1rem 0;
	}

	/* Mobile dropdowns */
	.main-navigation ul ul {
		position: static;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 0 1.5rem;
		background: var(--color-bg-secondary);
		display: none;
	}

	.main-navigation li.toggled-on > ul {
		display: block;
	}

	.main-navigation ul ul a {
		padding: 0.75rem 0;
	}

	.main-navigation ul ul a:hover {
		background: transparent;
	}

	/* Hero Mobile */
	.hero-inner {
		flex-direction: column;
	}

	.hero-image {
		display: none;
	}

	.hero-content {
		flex: 0 0 100%;
		width: 100%;
		padding: 1.5em 0;
		text-align: center;
	}

	.hero-title {
		font-size: 2em;
		text-align: center;
		padding: 0em;
	}

	.hero-features {
		padding: 0 0 1em 0;
	}

	.hero-features li {
		justify-content: center;
	}

	.hero-features li:nth-child(1)::after,
	.hero-features li:nth-child(2)::after {
		left: 50%;
		transform: translateX(-50%);
	}


	.feature-text {
		font-size: 1.3em;
		line-height: 1.5em;
	}

	.hero-pricing {
		text-align: center;
		font-size: 1.3em;
		margin: -0.5em 0 0 0;
	}

	.price-new {
		font-size: 1.1em;
	}

	.hero-cta {
		text-align: center;
		margin-top: 0;
	}

	.btn-primary {
		font-size: 1.5em;
		line-height: 1em;
		padding: 0.25em 0.5em;
	}

	.btn-secondary {
		font-size: 1.2em;
		margin-top: 0.5em;
	}

	/* Section Divider Mobile */
	.section-divider {
		padding: 15px 1.5em;
	}

	/* Compare Section Mobile */
	.compare-inner {
		padding: 0 0 2em 0;
	}

	.compare-subtitle {
		font-size: 1.4em;
	}

	.compare-title {
		font-size: 1.5em;
	}

	.compare-tabs {
		width: 90%;
	}

	.compare-content {
		overflow-x: scroll;
	}

	/* Features Section Mobile */
	.features-inner {
		padding: 1.5em 0;
	}

	.features-title {
		font-size: 1.6em;
	}

	.features-grid {
		gap: 1.5em;
	}

	.feature-card {
		align-items: center;
		text-align: center;
	}

	.feature-card-header {
		justify-content: center;
	}

	/* Locations Section Mobile */
	.locations-inner {
		padding: 1.5em 0;
	}

	.locations-subtitle {
		font-size: 1.4em;
	}

	.locations-description {
		font-size: 1em;
	}

	.locations-grid {
		gap: 1em;
	}

	.locations-cdn {
		font-size: 1.1em;
	}

	/* CTA Section Mobile */
	.cta-inner {
		padding: 1em;
	}

	/* Testimonials Section Mobile */
	.testimonials-inner {
		padding: 1.5em 0;
	}

	.testimonials-grid {
		gap: 1em;
	}

	/* Carousel mode - 1 card visible */
	.testimonials-section.is-carousel .testimonial-card {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Developer Section Mobile */
	.developer-inner {
		padding: 1.5em 0;
	}

	.developer-subtitle {
		font-size: 1.3em;
	}

	.developer-title {
		font-size: 1.5em;
	}

	/* Tools Section Mobile */
	.tools-inner {
		padding: 1.5em;
	}

	.tools-title {
		font-size: 1.4em;
	}

	.tool-logo {
		flex: 0 0 45%;
	}
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
	background: var(--color-bg-secondary);
	width: 100%;
}

/* Footer Tagline */
.footer-tagline {
	padding: 2em 0 1em 0;
}

.footer-tagline-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 4em;
	text-align: center;
}

.footer-tagline-text {
	font-family: var(--font-heading);
	font-size: 1.5em;
	font-weight: 700;
	margin: 0;
}



.footer-links-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2em;
}

.footer-column {
	flex: 1 1 200px;
	min-width: 180px;
}

.footer-column-title {
	font-family: var(--font-heading);
	font-size: 1.1em;
	font-weight: 700;
	color: var(--color-orange);
	margin: 0 0 0.75em 0;
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu li {
	margin-bottom: 0.5em;
}

.footer-menu a {
	font-family: var(--font-body);
	font-size: 0.95em;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color 0.2s;
	display: inline-flex;
	align-items: center;
}

.footer-menu a:hover {
	color: var(--color-accent);
}

/* Footer menu with icons */
.footer-menu-icons a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.footer-menu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.footer-menu-icon svg {
	width: 14px;
	height: 14px;
	fill: var(--color-accent);
}

/* Footer Social Icons */
.footer-social {
	display: flex;
	gap: 0.75em;
	margin-top: 1em;
}

.footer-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-accent);
	transition: background 0.2s, transform 0.2s;
}

.footer-social-icon:hover {
	background: var(--color-accent-hover);
	transform: scale(1.1);
}

.footer-social-icon svg {
	width: 18px;
	height: 18px;
	fill: #fff;
}

/* Footer Copyright */
.footer-copyright {
	border-top: 1px solid var(--color-divider);
	padding: 1.5em 0;
}

.footer-copyright-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 4em;
	text-align: center;
}

.footer-copyright p {
	font-family: var(--font-body);
	font-size: 0.9em;
	color: var(--color-text-muted);
	margin: 0;
}

.footer-copyright a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.footer-copyright a:hover {
	color: var(--color-accent);
}

/*--------------------------------------------------------------
# Footer - Desktop (min-width: 992px)
--------------------------------------------------------------*/
@media screen and (min-width: 992px) {
	.footer-links-inner {
		flex-wrap: nowrap;
	}

	.footer-column {
		flex: 1;
	}

	/* Footer Links */
	.footer-links {
		padding: 1em 0 2em 0;
	}
}

/*--------------------------------------------------------------
# Footer - Mobile & Tablet (max-width: 991px)
--------------------------------------------------------------*/
@media screen and (max-width: 991px) {
	/* Footer Links */
	.footer-links {
		padding: 1em 4% 2em 4%;
	}

	.footer-tagline-inner {
		padding: 0 1.5em;
	}

	.footer-tagline-text {
		font-size: 1.2em;
	}

	.footer-links-inner {
		padding: 0;
		gap: 1.5em;
	}

	.footer-column {
		flex: 1 1 45%;
		min-width: 140px;
	}

	.footer-copyright-inner {
		padding: 0 1.5em;
	}
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
.hidden {
	display: none !important;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/*--------------------------------------------------------------
# Posts and Pages
--------------------------------------------------------------*/
.post, .page {
	margin: 0 0 1.5em;
}

.entry-content, .entry-summary, .page-content {
	margin: 1.5em 0 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* ==========================================
   Pricing Page
========================================== */

/* Container */
.hst_page_title  {
	font-weight: 700;
	text-align: center;
	font-size: 2em;
}

h3.hustly-centered-bold{
	font-weight: 600;
	text-align: center;
	margin-top: 0.5em;
}

h5.hustly-centered-bold{
	font-weight: 600;
	text-align: center;
	margin-top: 1em;
	color: #000;
}

hr.hustly-purple-hr{
	background-color: #E3C9E9 !important;
	margin-top: 1em !important;
}

/* Period selector */
.hst_pctable_period-selector {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em;
	border-radius: 4px;
	margin: 0em auto 1em auto;
	width: 18em;
}
.hst_pctable_periodBtn {
	color: #8f27a6;
	padding: 2px;
	font-size: 1.2em;
	font-weight: bold;
	border: solid 1px #8f27a6;
	margin-left: 2px;
	cursor: pointer;
	flex: 1;
	box-shadow: 2px 2px 6px -1px rgba(124, 37, 143, 0.66);
}
.hst_pctable_periodBtn.hst_pctable_active { background-color: #8f27a6; color: #fff; }
.hst_pctable_periodBtn:hover{ background-color: #8f27a6; color: #fff; cursor: pointer; }

/* Cards layout */
.hst_pctable_cards { display: flex; flex-direction: column; gap: 1.5em; }
@media (min-width: 768px) { .hst_pctable_cards { flex-direction: row; } }
.hst_pctable_card {
	flex: 1;
	border: solid #f3e6db 1px;
	border-radius: 0.5em;
	background-color: #F7F3FC;
	margin: 0 10px;
	padding: 0.75em 1em;
}

/* Plan title & features */
.hst_pctable_plan-title {
	padding: 0.4em;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 1.33em;
	color: #DC822E;
	text-align: left;
}
.hst_pctable_plan-features-highlight {
	text-align: left;
	font-family: "Cabin", Sans-serif;
	font-size: 1.1em;
	font-weight: 500;
	line-height: 1.5em;
	letter-spacing: 0.5px;
	color: #000;
	margin: 0 0.5em 0.75em 0.5em;
	background-color: #FFF6CC;
	padding: 0.25em 1em;
	text-align: center;
	border-radius: 4px;
	border: solid 1px #F4DAC0;
}
.hst_pctable_plan-features {
	text-align: left;
	font-family: "Cabin", Sans-serif;
	font-size: 1.05em;
	font-weight: 200;
	line-height: 1.5em;
	letter-spacing: 0.5px;
	color: #515151;
	margin: 0 0.5em 1em 0.5em;
}

/* Trigger */
	.Hustly-plans-tooltip-icon {
	border: none;
	color: #8F27A6;       /* icon color */
	background-color: transparent;
	position: relative;
	display: inline-block;
	padding: 1px 1px;
	vertical-align: top;
	cursor: pointer;
	line-height: 1em;
	}

	/* One FA icon, nice baseline alignment */
	.Hustly-plans-tooltip-icon i {
	font-size: 0.9em;      /* tweak to taste */
	line-height: 1;
	vertical-align: -2px; /* aligns with text */
	color: currentColor;  /* inherit purple */
	}

	/* Bubble (unchanged) */
	.Hustly-plans-tooltip-message {
	font-size: 0.9em !important;
	text-align: left;
	position: absolute;
	left: 50%;
	bottom: 125%;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	transition: opacity .15s ease-in-out, visibility .15s ease-in-out;
	z-index: 20;
	background: #1f1f1f; color: #fff;
	padding: 8px 10px; border-radius: 6px;
	white-space: normal; max-width: 260px; width: max-content;
	box-shadow: 0 6px 16px rgba(0,0,0,.2);
	}
	.Hustly-plans-tooltip-message::after{
	content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
	border:6px solid transparent; border-top-color:#1f1f1f;
	}
	.Hustly-plans-tooltip-icon:hover .Hustly-plans-tooltip-message,
	.Hustly-plans-tooltip-icon:focus .Hustly-plans-tooltip-message,
	.Hustly-plans-tooltip-icon:focus-within .Hustly-plans-tooltip-message{
	visibility:visible; opacity:1;
	}

	/* Pricing blocks */
	.hst_pctable_price-main{ display: inline-flex; align-items: flex-end; font-size: 1.1em; font-weight: 600; }
	.hst_pctable_pricing-info { display: none; color: #515151; font-weight: 600; margin: 0 0.5em 0.5em 0.5em; }
	.hst_pctable_pricing-info.active { display: block; }
	.hst_pctable_price-currency { font-size: 1.44em; font-weight: 200; color: #505050; text-align: left; }
	.hst_pctable_price-period { font-size: 0.4em; color: #505050; }
	.hst_pctable_price-note { font-size: 0.9em; margin-top: -1.25em; color: #505050; }

	.hst_pctable_price-compare{ display:flex; align-items:center; gap:0.5em; margin: 0 0 0.25em 0; line-height:1.2; }
	.hst_pctable_price-was{ color:#707070; font-weight:500; font-size: 1.25em; }
	.hst_pctable_sale-badge{
	display:inline-block; background:#DDF8EB; color:#1F7A4D; font-family:"Cabin", Sans-serif;
	font-size:0.95em; font-weight:600; padding:0.1em 0.5em; border-radius:4px; white-space:nowrap;
	}

	.hst_pctable_price-value { display: inline-flex; align-items: baseline; line-height: 1; color: #DC822E; margin:0 0.125em 0 0.25em; }
	.hst_pctable_price-symbol { font-size: 1.44em; line-height: 1; position: relative; top: -0.5em; }
	.hst_pctable_price-cents{ line-height: 1; font-size: 1.8em; }
	.hst_pctable_price-int { font-size: 2.7em; font-weight: 700; line-height: 1; margin: 0 1px; }

	/* Select button */
	.hst_pctable_select-btn {
	display: inline-block; padding: 0.25em 1em; border-radius: 0.25em; text-decoration: none;
	background-color: #8F27A6; color: #FFFFFF !important; font-family: "Cabin", Sans-serif;
	font-size: 1.2em; font-weight: 600; text-shadow: 0px 0px 10px rgba(0,0,0,0.3);
	margin: 0.5em auto 1em auto; width: 90%;
	}
	.hst_pctable_select-btn-container{ margin: auto; text-align: center; }
	.hst_pctable_price-subtext { font-family: 'Cabin', sans-serif; font-size: 1em; font-weight: 500; color: #696969; line-height: 1.5em; margin-top: 0.75em; }

	/* Hide native scrollbars on the table container */
	#hustly-plans-table-container {
	display: block;
	overflow-x: auto;
	-ms-overflow-style: none;  /* IE/Edge */
	scrollbar-width: none;     /* Firefox */
	margin: 4px 10px;
	}
	#hustly-plans-table-container::-webkit-scrollbar { display: none; } /* Chrome/Safari */

	/* Custom (pure-HTML) scrollbar above the table, mobile only */
	.hustly-custom-scrollbar {
	position: relative;
	height: 12px;
	margin: 8px 10px;
	background: #f5f5f7;
	border-radius: 6px;
	display: none; /* hidden on desktop by default */
	user-select: none;
	touch-action: none;
	}
	.hustly-custom-scrollbar .thumb {
	position: absolute; top: 0; left: 0; height: 100%;
	background: #DC822E; border-radius: 6px; width: 40px; cursor: pointer;
	}
	@media (max-width: 991px) { .hustly-custom-scrollbar { display: block; } }

	/* Table styles */
	.hustly-plans-container{ position:relative; }
	.hustly-plans-table-scroll-buttons{
	width: 100%; display: flex; justify-content: space-between; position: absolute; top: 12%; height: 0;
	}
	.tg  {border-spacing:0;}
	.tg td{border-color:black;border-style:solid;border-width:1px;font-family:"Cabin", sans-serif;font-size:14px; overflow:hidden;padding:10px 5px;word-break:normal;}
	.tg th{border-color:black;border-style:solid;border-width:1px;font-family:"Cabin", sans-serif;font-size:14px; font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
	.tg .tg-mc38{background-color:#F7F3FC;color:#DC822E;border-color:#ffffff;text-align:center;vertical-align:middle;font-size: 0.9em;font-family: "Cabin", Sans-serif;}
	.tg .tg-feature-cell-container{background-color:#ffffff;border-color:#ffffff;text-align:left;vertical-align:middle;font-size: 1em;padding: 0.5em;}
	.tg .tg-feature-cell-container-alt{background-color:#F7F3FC;border-color:#ffffff;text-align:left;vertical-align:middle;font-size: 1em;padding: 0.5em;}
	.tg .tg-feature-cell-additional-text{color: #515151;font-weight: 500;font-family: 'Cabin', sans-serif;}
	.tg .tg-full-row{background-color:#F6E0CB;border-color:#ffffff;text-align:left;vertical-align:middle;padding:0.5em;font-size: 1.25em;font-weight: 700;}
	.tg .tg-oe15{background-color:#ffffff;border-color:#ffffff;text-align:center;vertical-align:middle;font-size: 1.1em;font-weight: 500;}
	.tg .tg-lz2u{background-color:#F7F3FC;border-color:#ffffff;text-align:center;vertical-align:middle;font-size: 1.1em;font-weight: 500;}
	.tg-feature-title{ font-size: 1.2em; font-weight: 600; font-family: 'Cabin', sans-serif; }
	.tg-feature-check { color: #29CB6C; }

	table.tg.hst-plan-details-table {
	margin: 1em auto;
	table-layout: fixed;
	border: 1px solid #f3e6db;
	border-radius: 0.5em;
	}

	@media screen and (max-width: 991px) {
	.hst_pctable_pricing { max-width: 100%; margin: 0 auto; padding: 0.5em 0.5em 120px 0.5em; }
	table.tg{ width: 800px; } /* wider than viewport -> horizontal scroll on mobile */
	.hustly-plans-table-col-feature{ width: 14%; }
	}
	@media screen and (min-width: 992px) {
	.hst_pctable_pricing { width: 1200px; margin: 0 auto; padding: 0.5em 1em 120px 1em; }
	table.tg{ width: 100%; }  /* fits on desktop -> no horizontal scroll */
	.hustly-plans-table-col-feature{ width: 43%; }
	}

	@media screen and (max-width: 991px) { .hustly-plans-table-col-feature{ width: 14%; } }
	@media screen and (min-width: 992px) { .hustly-plans-table-col-feature{ width: 43%; } }

	@media screen and (max-width: 991px) { .hustly-plans-table-col-plan{ width: 16%; } }
	@media screen and (min-width: 992px) { .hustly-plans-table-col-plan{ width: 19%; } }

	@media screen and (max-width: 991px) { .hustly-plans-table-scroll-buttons{ visibility: visible; } }
	@media screen and (min-width: 992px) { .hustly-plans-table-scroll-buttons{ visibility: hidden; } }

/*--------------------------------------------------------------
# Single Post
--------------------------------------------------------------*/

/* Main Container */
.single-post-main {
	background: var(--color-bg-primary);
}

/* Post Banner */
.post-banner {
	background: var(--color-bg-secondary);
	padding: 2.5em 0;
}

.post-banner-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 4em;
}

.post-categories {
	margin-bottom: 0.75em;
}

.post-categories a {
	font-family: var(--font-body);
	font-size: 0.9em;
	color: var(--color-accent);
	text-decoration: none;
	transition: color 0.2s;
}

.post-categories a:hover {
	color: var(--color-accent-hover);
}

.post-title {
	font-family: var(--font-heading);
	font-size: 2.4em;
	font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.3;
	margin: 0;
}

/* Post Content Section */
.post-content-section {
	padding: 2.5em 0 0 0;
	box-shadow: var(--box-shadow-card);
}

.post-content-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0;
	display: flex;
	gap: 3em;
}

/* Main Content Column */
.post-main-content {
	flex: 1;
	min-width: 0;
}

.post-excerpt {
	font-family: var(--font-body);
	font-size: 1.1em;
	line-height: 1.7;
	color: var(--color-text-primary);
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px solid var(--color-divider);
}

.post-body {
	font-family: var(--font-body);
	font-size: 1em;
	line-height: 1.8;
	color: var(--color-text-primary);
}

.post-body p {
	margin-bottom: 1.5em;
}

.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5 {
	margin-top: 1.5em;
	margin-bottom: 0.75em;
	color: var(--color-text-dark);
}

.post-body h3 {
	font-size: 1.5em;
}

.post-body h5 {
	font-size: 1.2em;
}

.post-body a {
	color: var(--color-accent);
	text-decoration: underline;
}

.post-body a:hover {
	color: var(--color-accent-hover);
}

.post-body img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	margin: 1em 0;
}

.post-body ol,
.post-body ul {
	margin: 1em 0 1.5em 1.5em;
	list-style: decimal;
}

.post-body ul {
	list-style: disc;
}

.post-body li {
	margin-bottom: 0.5em;
}

/* Post Footer */
.post-footer {
	margin-top: 3em;
	padding-top: 2em;
	border-top: 1px solid var(--color-divider);
}

.post-author-box {
	display: flex;
	align-items: center;
	margin-bottom: 1.5em;
}

.post-author-info {
	flex: 1;
}

.post-author-name {
	font-family: var(--font-heading);
	font-size: 1.1em;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 0.25em 0;
}

.post-author-bio {
	font-family: var(--font-body);
	font-size: 0.95em;
	color: var(--color-text-secondary);
	margin: 0;
}

/* Share Buttons */
.post-share,
.sidebar-share {
	display: flex;
	gap: 0.5em;
}

.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	transition: transform 0.2s, opacity 0.2s;
}

.share-btn:hover {
	transform: scale(1.1);
	opacity: 0.9;
}

.share-btn svg {
	width: 20px;
	height: 20px;
	fill: #fff;
}

.share-facebook {
	background: linear-gradient(135deg, #3b5998, #4267b2);
}

.share-twitter {
	background: linear-gradient(135deg, #1da1f2, #0d8ecf);
}

.share-linkedin {
	background: linear-gradient(135deg, #0077b5, #005e93);
}

/* Post Comments */
.post-comments {
	margin-top: 3em;
	padding-top: 2em;
	border-top: 1px solid var(--color-divider);
}

/* Sidebar */
.post-sidebar {
	flex: 0 0 300px;
	width: 300px;
}

.sidebar-author-box {
	background: var(--color-bg-secondary);
	border-radius: 8px;
	padding: 1.5em;
	margin-bottom: 1.5em;
}

.sidebar-author-name {
	font-family: var(--font-heading);
	font-size: 1.1em;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 0.5em 0;
}

.sidebar-author-bio {
	font-family: var(--font-body);
	font-size: 0.9em;
	color: var(--color-text-secondary);
	margin: 0;
	line-height: 1.5;
}

.sidebar-share {
	margin-bottom: 2em;
}

/* Recent Posts Sidebar */
.sidebar-recent-posts {
	background: var(--color-bg-secondary);
	border-radius: 8px;
	padding: 1.5em;
}

.sidebar-title {
	font-family: var(--font-heading);
	font-size: 1.1em;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 1em 0;
}

.recent-posts-list {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.recent-post-item {
	display: flex;
	gap: 1em;
	padding-bottom: 1.25em;
	border-bottom: 1px solid var(--color-divider);
}

.recent-post-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.recent-post-thumbnail {
	flex: 0 0 80px;
	width: 80px;
	height: 60px;
	overflow: hidden;
	border-radius: 4px;
}

.recent-post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recent-post-info {
	flex: 1;
	min-width: 0;
}

.recent-post-title {
	font-family: var(--font-body);
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 0.5em 0;
}

.recent-post-title a {
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color 0.2s;
}

.recent-post-title a:hover {
	color: var(--color-accent);
}

.recent-post-readmore {
	font-family: var(--font-body);
	font-size: 0.85em;
	color: var(--color-accent);
	text-decoration: none;
}

.recent-post-readmore:hover {
	color: var(--color-accent-hover);
}

/*--------------------------------------------------------------
# Single Post - Desktop (min-width: 992px)
--------------------------------------------------------------*/
@media screen and (min-width: 992px) {
	.post-content-inner {
		flex-direction: row;
	}

	.post-sidebar {
		display: block;
	}

	/* Hide mobile author/share in footer on desktop */
	.post-footer .post-author-box,
	.post-footer .post-share {
		display: none;
	}
}

/*--------------------------------------------------------------
# Single Post - Mobile & Tablet (max-width: 991px)
--------------------------------------------------------------*/
@media screen and (max-width: 991px) {
	.post-banner-inner {
		padding: 0 1.5em;
	}

	.post-title {
		font-size: 1.8em;
	}

	.post-content-section {
		padding: 1.5em 0 3em 0;
	}

	.post-content-inner {
		padding: 0 1.5em;
		flex-direction: column;
		gap: 2em;
	}

	.post-main-content {
		order: 1;
	}

	.post-sidebar {
		order: 2;
		flex: 1;
		width: 100%;
	}

	/* Hide sidebar author/share on mobile - show in footer instead */
	.sidebar-author-box,
	.sidebar-share {
		display: none;
	}

	/* Show footer author/share on mobile */
	.post-footer .post-author-box,
	.post-footer .post-share {
		display: flex;
	}

	.recent-post-thumbnail {
		flex: 0 0 70px;
		width: 70px;
		height: 50px;
	}

	.recent-post-title {
		font-size: 0.9em;
	}
}

/*--------------------------------------------------------------
# FAQs
--------------------------------------------------------------*/


.hlp_faq_title  {
        font-weight: 700;
        text-align: center;
        font-size: 2em;
        margin-top: 20px;
    }
.hlp_faq_container {
	max-width: 800px;
	margin: 20px auto;
	line-height: 1.5;
}
.hlp_faq_search {
	margin-bottom: 20px;
	text-align: center;
}
.hlp_faq_search input[type="text"] {
	width: 60%;
	border: 1px solid #ccc;
	border-radius: 4px;
	height: 3em
}
.hlp_faq_search button {
	padding: 5px 20px;
	font-size: 1.25em;
	border: none;
	border-radius: 4px;
	background-color: #8F27A6;
	font-family: "Cabin", Sans-serif;
	font-weight: 600;
	color: white;
	cursor: pointer;
}
.hlp_faq_search button:hover {
	background-color: #8F27A6;
}
.hlp_faq_list {
	list-style: none;
	padding: 0;
	margin:0;
}
.hlp_faq_item {
	margin-bottom: 12px;
	border-bottom: 1px solid #eee;
	padding: 1em;
	background: #F7F3FC;
}
.hlp_faq_question {
	font-weight: bold;
	font-size: 1.1em;
	font-family: "Montserrat", Sans-serif;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.hlp_faq_icon {
	color: #8F27A6;
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	border-style: solid;
	border-width: 0.15em 0.15em 0 0;
	border-color: currentColor;
	transform: rotate(45deg);        /* ► */
	transition: transform 0.2s ease;
	vertical-align: middle;
	margin-left: 0.3em;
}
.hlp_faq_icon.opened {
transform: rotate(135deg);       /* ▼ */
}
.hlp_faq_answer {
	display: none;
}
.hlp_faq_answer_text{
	font-family: "Cabin", Sans-serif;
	font-size: 1.1em;
	padding: 0.5em 0;
}
.hlp_faq_highlight {
	background-color: #F6E0CB;
}

/*--------------------------------------------------------------
# Archive Pages (Categories, Tags, Authors, Dates)
--------------------------------------------------------------*/

/* Main Container */
.archive-main {
	background: var(--color-bg-primary);
}

/* Archive Banner */
.archive-banner {
	background: var(--color-bg-secondary);
	padding: 2.5em 0;
}

.archive-banner-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0;
}

.archive-type {
	font-family: var(--font-body);
	font-size: 0.9em;
	font-weight: 600;
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.5em;
}

.archive-title {
	font-family: var(--font-heading);
	font-size: 2.4em;
	font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.3;
	margin: 0;
}

.archive-description {
	font-family: var(--font-body);
	font-size: 1.1em;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0.75em 0 0 0;
	max-width: 700px;
}

/* Archive Content Section */
.archive-content-section {
	padding: 2.5em 0 4em 0;
}

.archive-content-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0;
	display: flex;
	gap: 3em;
}

/* Posts Grid */
.archive-posts {
	flex: 1;
	min-width: 0;
}

.posts-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em;
}

/* Post Card */
.post-card {
	background: var(--color-bg-secondary);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s, transform 0.2s;
}

.post-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.post-card-thumbnail {
	display: block;
	width: 100%;
	height: 180px;
	overflow: hidden;
}

.post-card-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.post-card:hover .post-card-thumbnail img {
	transform: scale(1.05);
}

.post-card-content {
	padding: 1.25em;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.post-card-categories {
	font-family: var(--font-body);
	font-size: 0.8em;
	margin-bottom: 0.5em;
}

.post-card-categories a {
	color: var(--color-accent);
	text-decoration: none;
}

.post-card-categories a:hover {
	color: var(--color-accent-hover);
}

.post-card-title {
	font-family: var(--font-heading);
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 0.5em 0;
}

.post-card-title a {
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color 0.2s;
}

.post-card-title a:hover {
	color: var(--color-accent);
}

.post-card-excerpt {
	font-family: var(--font-body);
	font-size: 0.9em;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0 0 1em 0;
	flex: 1;
}

.post-card-readmore {
	font-family: var(--font-body);
	font-size: 0.9em;
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
	transition: color 0.2s;
}

.post-card-readmore:hover {
	color: var(--color-accent-hover);
}

/* Pagination */
.archive-pagination {
	margin-top: 3em;
	display: flex;
	justify-content: center;
}

.archive-pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75em;
	font-family: var(--font-body);
	font-size: 0.95em;
	font-weight: 600;
	color: var(--color-text-primary);
	background: var(--color-bg-secondary);
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.2s;
}

.archive-pagination .page-numbers:hover {
	background: var(--color-accent);
	color: #fff;
}

.archive-pagination .page-numbers.current {
	background: var(--color-accent);
	color: #fff;
}

.archive-pagination .prev,
.archive-pagination .next {
	padding: 0 1em;
}

/* No Posts */
.no-posts {
	text-align: center;
	padding: 4em 2em;
	background: var(--color-bg-secondary);
	border-radius: 8px;
}

.no-posts h2 {
	font-family: var(--font-heading);
	font-size: 1.5em;
	color: var(--color-text-primary);
	margin: 0 0 0.5em 0;
}

.no-posts p {
	font-family: var(--font-body);
	color: var(--color-text-secondary);
	margin: 0;
}

/* Archive Sidebar */
.archive-sidebar {
	flex: 0 0 300px;
	width: 300px;
}

.sidebar-widget {
	background: var(--color-bg-secondary);
	border-radius: 8px;
	padding: 1.5em;
	margin-bottom: 1.5em;
}

.sidebar-widget:last-child {
	margin-bottom: 0;
}

.sidebar-title {
	font-family: var(--font-heading);
	font-size: 1.1em;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 1em 0;
}

/* Sidebar Categories */
.sidebar-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-categories li {
	padding: 0.5em 0;
	border-bottom: 1px solid var(--color-divider);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sidebar-categories li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sidebar-categories li:first-child {
	padding-top: 0;
}

.sidebar-categories a {
	font-family: var(--font-body);
	font-size: 0.95em;
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color 0.2s;
}

.sidebar-categories a:hover {
	color: var(--color-accent);
}

.cat-count {
	font-family: var(--font-body);
	font-size: 0.85em;
	color: var(--color-text-muted);
}

/*--------------------------------------------------------------
# Archive - Desktop (min-width: 992px)
--------------------------------------------------------------*/
@media screen and (min-width: 992px) {
	.archive-content-inner {
		flex-direction: row;
	}

	.archive-sidebar {
		display: block;
	}

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

/*--------------------------------------------------------------
# Archive - Mobile & Tablet (max-width: 991px)
--------------------------------------------------------------*/
@media screen and (max-width: 991px) {
	.archive-banner-inner {
		padding: 0 1.5em;
	}

	.archive-title {
		font-size: 1.8em;
	}

	.archive-content-section {
		padding: 1.5em 0 3em 0;
	}

	.archive-content-inner {
		padding: 0 1.5em;
		flex-direction: column;
		gap: 2em;
	}

	.posts-grid {
		grid-template-columns: 1fr;
		gap: 1.5em;
	}

	.post-card-thumbnail {
		height: 200px;
	}

	.archive-sidebar {
		flex: 1;
		width: 100%;
	}

	.archive-pagination .page-numbers {
		min-width: 36px;
		height: 36px;
		font-size: 0.9em;
	}

	.archive-pagination .prev,
	.archive-pagination .next {
		padding: 0 0.75em;
		font-size: 0.85em;
	}
}


/*--------------------------------------------------------------
# Compare WP Hosts - Mobile & Tablet (max-width: 991px)
--------------------------------------------------------------*/

h1.compare-wp-page-title{
    font-weight: 700; text-align: center; font-size: 2em; margin-top: 10px;
  }
  h3.hustly-compare-subtitle{ text-align: center; font-weight: 600; }
  h4.hustly-compare-feature-highlight-cards-subtitle{
    text-align: center; font-weight: 600; margin-bottom: 1em;
  }
  hr.hustly-compare-hosts-element{ background-color: #E3C9E9 !important; margin: 1.5em auto !important; }

  @media screen and (max-width: 1199px) {
    h1.compare-wp-page-title{ font-size: 1.5em; }
    .compare-wp-plans-nav-top-container { margin: 1em 0; }
    h3.compare-wp-plans-nav-title { text-align: center; }
  }
  @media screen and (min-width: 1200px) {
    .compare-wp-plans-nav-top-container { margin: 1em 5em; }
  }

  h3.compare-wp-plans-nav-title { margin: 0.5em 0 0 0; font-size: 1.2em; color: #000; }
  .compare-wp-plans-nav-container { margin-top: 0; padding-top: 0; display: block; margin-bottom: 0.5em; font-size: 1.15em; }
  a.compare-wp-plans-nav-links { cursor: pointer; font-weight: 700; text-decoration: underline; }
  a.compare-wp-plans-nav-links.active { cursor: text; text-decoration: none; }
  .compare-wp-plans-nav-links-number { text-decoration: none !important; }

  .hustly-compare-lp-container { }
  .hustly-compare-lp-tabbed-navigation-label {
    font-weight: bold; font-size: 1.2em; margin: auto; width: 100%; text-align: center; color: #5e5e5e;
  }
  .hustly-compare-lp-tabbed-navigation {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border-radius: 4px; margin: auto;
  }
  @media (max-width: 1024px) { .hustly-compare-lp-tabbed-navigation { width: 90%; } }
  @media (min-width: 1024px) { .hustly-compare-lp-tabbed-navigation { width: 100%; max-width: 480px; } }
  .hustly-compare-lp-tab-button {
    background: #fff; color: #8f27a6; padding: 4px 8px; font-size: 1.2em; font-weight: bold;
    border: 1px solid #8f27a6; margin-left: 2px; cursor: pointer; flex: 1; box-shadow: 2px 2px 6px -1px rgba(124, 37, 143, 0.66);
  }
  .hustly-compare-lp-tab-button.active { background: #8f27a6; color: #fff; }
  .hustly-compare-lp-tab-button:hover { background: #8f27a6; color: #fff; cursor: pointer; }

  /* parent + inner scroller */
  .hustly-compare-lp-tab-content { display: block; margin: 20px 0 0 0; position: relative; overflow: visible; }

  /* Custom PURE-HTML scrollbar (visible only on mobile) */
  .custom-scrollbar {
    position: relative; height: 12px; margin: 10px 0 6px; background: #f5f5f7; border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); display: none; touch-action: none;
  }
  .custom-scrollbar .custom-thumb {
    position: absolute; top: 0; left: 0; height: 100%; background: #DC822E; border-radius: 6px; width: 40px; cursor: grab;
  }
  @media (max-width: 1024px) { .custom-scrollbar { display: block; } }

  /* Bottom scroller (native bar hidden) */
  .lp-scroll-wrap { overflow-x: auto; overflow-y: hidden; border-radius: 6px; scrollbar-width: none; }
  .lp-scroll-wrap::-webkit-scrollbar { display: none; }

  /* Pricing tables */
  .hustly-compare-lp-table { width: 100%; border-collapse: collapse; background-color: #FFF; }
  .hustly-compare-lp-table th, .hustly-compare-lp-table td { padding: 4px 10px; height: 44px; text-align: center; }
  th.empty-cell{ background-color: white; }
  .hustly-compare-lp-table th { background: #f2f2f2; font-weight: bold; border: 1px solid #ddd; }
  .hustly-compare-lp-table td:first-child {
    text-align: right; font-weight: bold; width: 6em; font-size: 1.1em; border: 1px solid #ddd;
  }
  .hustly-compare-lp-table td { width: 8em; }
  .hustly-compare-lp-table td.green { background: #23ff8d; color: #000; }
  .hustly-compare-lp-table td.green-orange { background: #d3f8bf; color: #000; }
  .hustly-compare-lp-table td.orange { background: #FFF6CC; color: #000; }
  .hustly-compare-lp-table td.red { background: #F7B6B6; color: #000; }
  .hustly-compare-lp-table td.na { background: #EFEFEF; color: #000; }
  .hustly-compare-lp-table th { line-height: 1em; min-width: 5em; vertical-align: middle; font-size: 1.25em; }
  .hustly-compare-lp-table td { line-height: 1em; font-size: 1em; width: 10em; vertical-align: middle; border: 1px solid #ddd; }
  .hustly-compare-lp-table th.wp-other-cell { font-weight: bold; background: #FFF; }
  .hustly-compare-lp-table th.hustly-cell { background: #DC822E; color: #FFF; }
  .hustly-compare-lp-table th.empty-cell { background: #fff; border-top: 1px solid #fff; border-left: 1px solid #fff; }

  .cell-compare-subtext, .hostingplan-cell-subtext { font-size: 0.75em; color: gray; }
  .hostingplan-cell-subtext-hustly { font-size: 0.75em; }
  .hustly-comp-features-small-text { font-size: 1em; display: flex; text-align: left; justify-content: center; line-height: 1.4em; }
  .hustly-wp-compare-why-hustly { font-size: 1.32em; font-weight: 600; text-align: center; }
  .period-toggle { color: gray !important; text-decoration: none; font-weight: bold; cursor: pointer; margin: 0 0.25em; }
  .period-toggle.active, .period-toggle:hover { color: #8f27a6 !important; }

  /* Tooltip (for Per Site Locations / Site Isolation labels) */
  .hustly-comp-lp-tooltip { position: relative; display: inline-flex; vertical-align: middle; }
  .hustly-comp-lp-tooltip-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5em; height: 1.5em; margin-left: 2px; cursor: help;
    background-color: #8f27a6; color: #fff; border-radius: 50%; font-size: 0.6em;
  }
  .hustly-comp-lp-tooltip-text {
    visibility: hidden; width: 180px; background: #333; color: #fff; text-align: center; border-radius: 4px;
    padding: 6px; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
    opacity: 0; transition: opacity 0.3s; z-index: 10;
  }
  .hustly-comp-lp-tooltip-text::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
    border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent;
  }
  .hustly-comp-lp-tooltip:hover .hustly-comp-lp-tooltip-text { visibility: visible; opacity: 1; }

  /* Feature highlight cards */
  .hustly-compare-feature-highlight-cards-container { margin: 1em auto 2em auto; max-width: 1200px; }
  .hustly-compare-feature-highlight-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; }
  .hustly-compare-feature-highlight-cards-card { background: #fff; box-shadow: 0px 12px 34px 0px rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 1.5em; }
  .hustly-compare-feature-highlight-cards-card-icon-title { color: #DC822E; display: flex; align-items: center; gap: 0.5em; }
  .hustly-compare-feature-highlight-cards-icon { font-size: 1.4em; color: #BF5F5C; line-height: 1; display: flex; align-items: center; justify-content: center; }
  .hustly-compare-feature-highlight-cards-card-title { font-size: 1.2em; font-weight: bold; margin: 0; }
  .hustly-compare-feature-highlight-cards-card-body { font-size: 1em; line-height: 1.5; }
  @media (max-width: 768px) { .hustly-compare-feature-highlight-cards { grid-template-columns: 1fr; } }

  .hustly-compare-features-description-container { margin: 2em auto; max-width: 1000px; display: flex; flex-direction: column; gap: 1.5em; }
  .hustly-compare-features-description-item { display: flex; align-items: flex-start; background: #fff; padding: 1.25em; border-radius: 8px; box-shadow: var(--box-shadow-card); }
  .hustly-compare-features-description-icon { font-size: 1.8em; color: #BF5F5C; margin-right: 1em; flex-shrink: 0; }
  .hustly-compare-features-description-text { font-size: 1em; line-height: 1.6; color: #333; }
  .hustly-compare-features-description-button-wrapper { text-align: center; margin-top: 1.2em; }

  /* BUTTON/LINK SIMPLIFICATION */
  /* Primary button (GET STARTED) — no hover animation, only darker on click */
  .hustly-compare-features-description-button-primary {
    display: inline-block; background-color: #8f27a6; color: #fff !important; padding: 0.9em 2em;
    font-size: 1.1em; font-weight: bold; text-decoration: none; border-radius: 6px; border: none;
    box-shadow: none; transition: none; cursor: pointer;
  }
  .hustly-compare-features-description-button-primary:hover { background-color: #8f27a6 ; color: #fff !important;}
  .hustly-compare-features-description-button-primary:active { background-color: #721d84; color: #fff !important; }

  /* Secondary link (SEE HUSTLY PLANS & PRICING) — flat link */
  .hustly-compare-features-description-button-secondary {
    background: none !important; color: #8f27a6 !important; font-weight: bold;
    text-decoration: underline; box-shadow: none !important; border: none !important; padding: 0;
    transition: none !important; cursor: pointer;
  }
  .hustly-compare-features-description-button-secondary:hover {
    color: #721d84 !important; text-decoration: underline; background: none !important;
  }

  .hustly-compare-money-back-text{ text-align: center; }

/*--------------------------------------------------------------
# Support Page
--------------------------------------------------------------*/

/* Main Container */
.support-main {
    background: var(--color-bg-primary);
}

/* Support Banner */
.support-banner {
    background: var(--color-bg-secondary);
    padding: 3em 0;
    text-align: center;
}

.support-banner-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

.support-title {
    font-family: var(--font-heading);
    font-size: 2.5em;
    font-weight: 700;
    color: var(--color-orange);
    margin: 0 0 0.5em 0;
}

.support-subtitle {
    font-family: var(--font-body);
    font-size: 1.1em;
    color: var(--color-text-primary);
    line-height: 1.6;
    margin: 0;
}

.support-subtitle a {
    color: var(--color-accent);
    text-decoration: none;
}

.support-subtitle a:hover {
    color: var(--color-accent-hover);
}

/* Support Info */
.support-info {
    padding: 2em 0;
    text-align: center;
}

.support-info-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

.support-info p {
    font-family: var(--font-body);
    font-size: 1em;
    color: var(--color-text-secondary);
    margin: 0;
}

.support-info a {
    color: var(--color-accent);
    text-decoration: none;
}

.support-info a:hover {
    color: var(--color-accent-hover);
}

/* Divider */
.support-divider {
    padding: 0;
}

.support-divider-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

.support-divider hr {
    border: none;
    border-top: 1px solid var(--color-divider);
    margin: 0;
}

/* Form Section */
.support-form-section {
    padding: 2em 0 0 0;
}

.support-form-inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
}

.support-form-title {
    font-family: var(--font-heading);
    font-size: 1.8em;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5em 0;
}

.support-form-description {
    font-family: var(--font-body);
    font-size: 0.95em;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 1.5em 0;
}

/* Form Styles */
.support-form {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-label {
    font-family: var(--font-body);
    font-size: 0.95em;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5em;
}

.form-label .required {
    color: #e74c3c;
}

.form-input,
.form-textarea {
    font-family: var(--font-body);
    font-size: 1em;
    padding: 0.75em 1em;
    border: 1px solid var(--color-border-dark);
    border-radius: 4px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(143, 39, 166, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    width: 100%;
    padding: 0.75em 1.5em;
    font-size: 1.1em;
    cursor: pointer;
}

.form-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Message Styles */
.support-message {
    padding: 1em;
    border-radius: 4px;
    margin-bottom: 1em;
    font-family: var(--font-body);
    font-size: 0.95em;
}

.support-message.success {
    background: var(--color-green);
    color: var(--color-green-text);
    border: 1px solid var(--color-green-text);
}

.support-message.error {
    background: #fdeaea;
    color: #c0392b;
    border: 1px solid #e74c3c;
}

/* reCAPTCHA Notice */
.recaptcha-notice {
    font-family: var(--font-body);
    font-size: 0.8em;
    color: var(--color-text-muted);
    text-align: center;
    margin: 1em 0 0 0;
}

.recaptcha-notice a {
    color: var(--color-text-muted);
    text-decoration: underline;
}

.recaptcha-notice a:hover {
    color: var(--color-accent);
}

/*--------------------------------------------------------------
# Support Page - Mobile (max-width: 991px)
--------------------------------------------------------------*/
@media screen and (max-width: 991px) {
    .support-banner-inner,
    .support-info-inner,
    .support-divider-inner,
    .support-form-inner {
        padding: 0 1.5em;
    }

    .support-banner {
        padding: 2em 0;
    }

    .support-title {
        font-size: 2em;
    }

    .support-subtitle {
        font-size: 1em;
    }

    .support-form-section {
        padding: 1.5em 0 3em 0;
    }

    .support-form-title {
        font-size: 1.5em;
    }
}