/*!
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: optional;
    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: #FCF6F4;
	--color-bg-secondary: #F7F3FC;
	--color-bg-tertiary: #FFFFFF;
	--color-bg-header: #DC822E;
	--color-icon: #DC822E;
	--color-separator: #FFE1D0;
	--color-divider: #E3C9E9;
	
	/* Text colors */
	--color-text-primary: #050505;
	--color-text-secondary: #3D3D3D;
	--color-text-muted: #424242;
	--color-text-dark: #050505;
	--color-text-gray: #3D3D3D;
	
	/* 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('/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('/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-secondary);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0.5px;
}


#page.site {
	width: calc(100% - 48px);
	max-width: 1920px;
	margin: 12px auto;
	background: var(--color-bg-primary);
	border-radius: 20px;
	box-shadow: var(--box-shadow-card);
}



@media screen and (max-width: 991px) {
	#page.site {
		width: 96%;
		margin: 10px auto;
		border-radius: 0;
		box-shadow: none;
		box-shadow: var(--box-shadow-card);
	}

	.site-header,
	.site-footer {
		border-radius: 0;
	}
}

main { 
	display: block; 
	background-color: var(--color-bg-primary);
}

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);
	border-radius: 20px 20px 0 0;
	border-bottom: 0;
}

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

@media screen and (max-width: 991px) {
	.site-header  {
		border-radius: 10px 10px 0 0;
	}
}

/* ==========================================================
   Header account actions
   ========================================================== */

.header-inner {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.main-navigation {
	align-items: center;
}

.main-navigation > ul {
	gap: 2rem;
}

.main-navigation a {
	font-size: 1.15em;
}

.nav-account-actions {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-left: 2rem;
	padding-left: 2rem;
}

/* Vertical divider */
.nav-account-actions::before {
	content: "";
	position: absolute;
	left: 0;
	top: 20%;
	width: 1px;
	height: 60%;
	background: var(--color-white);
	opacity: 0.45;
}

.main-navigation .nav-login,
.main-navigation .nav-signup {
	color: var(--color-white);
	font-weight: 500;
	white-space: nowrap;
}

.main-navigation .nav-signup {
	padding: 0.5rem 1.4rem;
	border: 1px solid var(--color-white);
	border-radius: 6px;
}

.main-navigation .nav-signup:hover,
.main-navigation .nav-signup:focus {
	background: var(--color-white);
	color: var(--color-bg-header);
}

@media screen and (max-width: 991px) {
	.nav-account-actions {
		margin: 1rem 0 0;
		padding: 0;
		gap: 1rem;
	}

	.nav-account-actions::before {
		display: none;
	}

	.main-navigation .nav-login {
		padding: 0.75rem 0;
	}

	.main-navigation .nav-signup {
		padding: 0.65rem 1.25rem;
		text-align: center;
	}
}

/*--------------------------------------------------------------
# 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: var(--color-accent);
	border: none;
	padding: 10px;
	cursor: pointer;
}

.menu-toggle .bar {
	display: block;
	width: 24px;
	height: 3px;
	background-color: var(--color-bg-tertiary);
	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-orange);
	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-white);
}

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

/* 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 50%;
    text-align: left;
    overflow: visible; 
    min-width: 0; 
}

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

.hero-image picture {
	display: block;
	width: 100%;
}

.hero-image img {
	width: 100%;
	height: auto;
	display: block;
}

.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 {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: var(--font-heading);
	font-size: clamp(2.4rem, 3.2vw, 4.0rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.025em;
	margin: 1rem 0 1.35rem 0;
}

/* shared textured text treatment */
.hero-title-accent,
.hero-title-main {
	display: inline-block;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* orange striped fill */
.hero-title-accent {
	background-image:
		repeating-linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.16) 0px,
			rgba(255, 255, 255, 0.16) 3px,
			rgba(0, 0, 0, 0.04) 3px,
			rgba(0, 0, 0, 0.04) 6px,
			rgba(255, 255, 255, 0.08) 6px,
			rgba(255, 255, 255, 0.08) 9px
		),
		linear-gradient(
			to bottom,
			#e08a3a 0%,
			#DC822E 45%,
			#c97322 100%
		);
}

/* dark striped fill */
.hero-title-main {
	background-image:
		repeating-linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.28) 0px,
			rgba(255, 255, 255, 0.28) 3px,
			rgba(0, 0, 0, 0.32) 3px,
			rgba(0, 0, 0, 0.32) 6px,
			rgba(255, 255, 255, 0.12) 6px,
			rgba(255, 255, 255, 0.12) 9px
		),
		linear-gradient(
			to bottom,
			#181818 0%,
			#101010 45%,
			#181818 100%
		);
	margin-top: -0.15em;
}

/*--------------------------------------------------------------
# Hero Features
--------------------------------------------------------------*/
 
/* Hero Footer - Now a separate row below hero-inner */
.hero-footer {
    margin: 0 0 0 0;
    padding: 1em 0 1em 0;
    overflow: visible;
}
 
/* Hero Features - 4 column grid of cards */

.hero-features {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;

	width: auto;
	margin: 0;
	padding: 0;
}

.hero-feature-card {
	display: flex;
	align-items: center;
	padding: 0.15rem 0;
}


.hero-feature-card-title {
	display: flex;
	align-items: center;
	overflow: visible;
	z-index: 5000;
	position: relative;
}
 
/* Feature icon in cards */
.hero-features .feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;
	margin-right: 0.8rem;

	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	box-shadow: var(--box-shadow-card);

	color: var(--color-icon);
	flex-shrink: 0;
}

/* SVG icons used by the four hero feature bullets */
.hero-features .feature-icon svg {
    display: block;
    width: 21px;
    height: 21px;
    fill: currentColor;
}


/* Feature text in cards */
.hero-features .feature-text {
	font-family: var(--font-body);
	font-size: 1.44rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-text-primary);
}
 
/* 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-text {
        font-size: 1.1em;
        text-align: left;
    }
 
    .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 PRICING + CTA CARD
   ========================================================== */

.hero-offer {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hero-offer-card {
	display: flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	padding: 1rem 1.25rem;
	background: var(--color-white);
	border: var(--card-border);
	border-radius: 14px;
	box-shadow: var(--box-shadow-card);
	z-index: 10000;
}

/* --------------------------
   Price area
   -------------------------- */

.hero-offer-price {
	display: flex;
	flex-direction: column;
	justify-content: center;

	min-width: 300px;
}

/* Old price + promo badge */

.hero-offer .price-old {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 0.55rem;

	margin: 0 0 0.35rem 0;

	line-height: 1.2;
}

.hero-offer .strikethrough {
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 500;

	color: var(--color-text-muted);

	text-decoration: line-through;
}

/* Existing brand promo colours retained */

.hero-offer .promo-badge {
	display: inline-flex;
	align-items: center;

	margin: 0;

	padding: 0.3rem 0.6rem;

	background: var(--color-green);
	color: var(--color-green-text);

	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;

	line-height: 1;

	border-radius: 5px;
}

/* --------------------------
   New price
   -------------------------- */

.hero-offer .price-new {
	display: flex;
	align-items: baseline;

	margin: 0;

	font-family: var(--font-body);
	color: var(--color-accent);

	line-height: 1;
	white-space: nowrap;
}

.hero-offer .price-from {
	margin-right: 0.3rem;

	font-size: 1.05rem;
	font-weight: 400;
}

.hero-offer .price-currency {
	margin-right: 0.05rem;

	font-size: 1.2rem;
	font-weight: 600;
}

.hero-offer .price-main {
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -0.04em;
}

.hero-offer .price-decimal {
	font-size: 0.62em;
	letter-spacing: 0;
}

.hero-offer .price-period {
	margin-left: 0.35rem;

	font-size: 1rem;
	font-weight: 500;
}

/* --------------------------
   Divider between price/CTA
   -------------------------- */

.hero-offer-divider {
	width: 1px;
	height: 78px;

	margin: 0 1.5rem;

	background: var(--color-divider);

	flex-shrink: 0;
}

/* --------------------------
   CTA
   -------------------------- */

.hero-offer-cta {
	display: flex;
	align-items: center;
}

.hero-offer .hero-offer-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 220px;

	padding: 0.8rem 1.5rem;

	background: var(--color-accent);
	color: var(--color-white);

	font-family: var(--font-body);
	font-size: 1.5rem;
	font-weight: 700;

	line-height: 1;

	border: 1px solid rgba(0, 0, 0, 0.33);
	border-radius: 6px;

	box-shadow: var(--box-shadow-button);

	text-decoration: none;

	transition:
		background 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.hero-offer .hero-offer-button:hover,
.hero-offer .hero-offer-button:focus {
	background: var(--color-accent-dark);
	color: var(--color-white);

	transform: translateY(-1px);
}

/* --------------------------
   Plans & Pricing text link
   -------------------------- */

.hero-offer .hero-pricing-link {
	display: inline-flex;
	align-items: center;

	gap: 0.4rem;

	margin-top: 0.7rem;
	padding: 0;

	background: transparent;

	color: var(--color-accent);

	font-family: var(--font-body);
	font-size: 1.25em;
	font-weight: 700;

	text-decoration: underline;

	box-shadow: none;
	border: 0;
}

.hero-offer .hero-pricing-link:hover,
.hero-offer .hero-pricing-link:focus {
	color: var(--color-accent-hover);
}

.hero-offer .pricing-link-arrow {
	display: inline-block;

	text-decoration: none;

	transition: transform 0.2s ease;
}

.hero-offer .hero-pricing-link:hover .pricing-link-arrow {
	transform: translateX(4px);
}

/* ==========================================================
   HERO PRICING + CTA CARD
   ========================================================== */

.hero-offer {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hero-offer-card {
	display: flex;
	align-items: center;
	min-width: 0;

	width: fit-content;
	max-width: 100%;

	padding: 1rem 1.25rem;

	background: var(--color-white);

	border: var(--card-border);
	border-radius: 14px;

	box-shadow: var(--box-shadow-card);
}

/* --------------------------
   Price area
   -------------------------- */

.hero-offer-price {
	display: flex;
	flex-direction: column;
	justify-content: center;

	flex: 1 1 280px;
	min-width: 0;
}

/* Old price + promo badge */

.hero-offer .price-old {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 0.55rem;

	margin: 0 0 0.35rem 0;

	line-height: 1.2;
}

.hero-offer .strikethrough {
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 500;

	color: var(--color-text-muted);

	text-decoration: line-through;
}

/* Existing brand promo colours retained */

.hero-offer .promo-badge {
	display: inline-flex;
	align-items: center;

	margin: 0;

	padding: 0.3rem 0.6rem;

	background: var(--color-green);
	color: var(--color-green-text);

	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;

	line-height: 1;

	border-radius: 5px;
}

/* --------------------------
   New price
   -------------------------- */

.hero-offer .price-new {
	display: flex;
	align-items: baseline;

	margin: 0;

	font-family: var(--font-body);
	color: var(--color-accent);

	line-height: 1;
	white-space: nowrap;
}

.hero-offer .price-from {
	margin-right: 0.3rem;

	font-size: 1.05rem;
	font-weight: 400;
}

.hero-offer .price-currency {
	margin-right: 0.05rem;

	font-size: 1.2rem;
	font-weight: 600;
}

.hero-offer .price-main {
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -0.04em;
}

.hero-offer .price-decimal {
	font-size: 0.62em;
	letter-spacing: 0;
}

.hero-offer .price-period {
	margin-left: 0.35rem;

	font-size: 1rem;
	font-weight: 500;
}

/* --------------------------
   Divider between price/CTA
   -------------------------- */

.hero-offer-divider {
	width: 1px;
	height: 78px;

	margin: 0 clamp(0.7rem, 1.2vw, 1.5rem);

	background: var(--color-divider);

	flex-shrink: 0;
}

/* --------------------------
   CTA
   -------------------------- */

.hero-offer-cta {
	display: flex;
	align-items: center;

	flex: 0 1 220px;
	min-width: 0;
}

.hero-offer .hero-offer-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-width: 0;

	padding: 0.8rem clamp(0.85rem, 1.2vw, 1.5rem);
	white-space: nowrap;

	background: var(--color-accent);
	color: var(--color-white);

	font-family: var(--font-body);
	font-size: 1.35rem;
	font-weight: 700;

	line-height: 1;

	border: 1px solid rgba(0, 0, 0, 0.33);
	border-radius: 6px;

	box-shadow: var(--box-shadow-button);

	text-decoration: none;

	transition:
		background 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.hero-offer .hero-offer-button:hover,
.hero-offer .hero-offer-button:focus {
	background: var(--color-accent-dark);
	color: var(--color-white);

	transform: translateY(-1px);
}

/* --------------------------
   Plans & Pricing text link
   -------------------------- */

.hero-offer .hero-pricing-link {
	display: inline-flex;
	align-items: center;

	gap: 0.4rem;

	margin-top: 0.7rem;
	padding: 0;

	background: transparent;

	color: var(--color-accent);

	font-family: var(--font-body);
	font-size: 1.25em;
	font-weight: 700;

	text-decoration: underline;

	box-shadow: none;
	border: 0;
}

.hero-offer .hero-pricing-link:hover,
.hero-offer .hero-pricing-link:focus {
	color: var(--color-accent-hover);
}

.hero-offer .pricing-link-arrow {
	display: inline-block;

	text-decoration: none;

	transition: transform 0.2s ease;
}

.hero-offer .hero-pricing-link:hover .pricing-link-arrow {
	transform: translateX(4px);
}

@media screen and (max-width: 991px) {

	.hero-offer {
		width: 100%;
		align-items: stretch;
	}

	.hero-offer-card {
		width: 100%;

		flex-direction: column;
		align-items: stretch;

		gap: 0.75rem;

		padding: 1rem;
	}

	.hero-offer-price {
		flex: none;
		min-width: 0;
		width: 100%;
	}

	.hero-offer-divider {
		width: 100%;
		height: 1px;

		margin: 0;

		background: var(--color-divider);
	}

	.hero-offer-cta {
		flex: none;
		width: 100%;
		min-width: 0;
	}

	.hero-offer .hero-offer-button {
		width: 100%;
		min-width: 0;

		padding: 0.9rem 1rem;
	}

	.hero-offer .hero-pricing-link {
		align-self: flex-start;
	}

}

@media screen and (max-width: 520px) {

	.hero-offer .price-old {
		align-items: flex-start;
	}

	.hero-offer .price-main {
		font-size: 2.6rem;
	}

	.hero-offer .price-period {
		font-size: 0.9rem;
	}

}

/* 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 {
	margin: 0;
	padding: 1em 0;
}

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

/* ==========================================================
   Homepage below-fold rendering
   ========================================================== */
@supports (content-visibility: auto) {
	.home .features-section,
	.home .hosting-lifecycle-section,
	.home .locations-section,
	.home .testimonials-section,
	.home .developer-section,
	.home .tools-section {
		content-visibility: auto;
		contain-intrinsic-size: auto 520px;
	}
}

/*--------------------------------------------------------------
# Compare Section
--------------------------------------------------------------*/

.compare-section {
	position: relative;
	padding: 0.5em 0 0.5em 0;

	background:var(--color-bg-primary);
}

.compare-inner {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;

	padding: 0;
}


/*--------------------------------------------------------------
# Comparison Heading
--------------------------------------------------------------*/

.compare-header {
	display: flex;
	justify-content: center;

	width: 100%;

	padding: 0 1rem;
}

.compare-heading-row {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.compare-heading-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	flex-shrink: 0;

	background: var(--color-bg-tertiary);
	color: var(--color-orange);

	border: var(--card-border);
	border-radius: 50%;

	box-shadow: var(--box-shadow-card);
}

.compare-heading-icon svg {
	width: 26px;
	height: 26px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.compare-heading-copy {
	min-width: 0;
}

h5.compare-pre-title {
	font-family: var(--font-body);

	font-size: 1.33em;
	font-weight: 600;

	text-align: center;

	line-height: 1.05;
	letter-spacing: -0.035em;

	color: var(--color-bg-header);

	margin: 0 auto 0.2em auto;
}


.compare-title {
	font-family: var(--font-heading);

	font-size: 2.5em;
	font-weight: 700;

	line-height: 1.05;
	letter-spacing: -0.035em;

	color: var(--color-text-primary);

	margin: 0 0 0.5em 0;;
}

.compare-nav-label {
	font-family: var(--font-body);

	font-size: 1.05rem;
	font-weight: 400;

	line-height: 1.35;

	color: var(--color-text-primary);

	margin: 0.45rem 0 0;

	text-align: center;
}


/*--------------------------------------------------------------
# Comparison Tabs
--------------------------------------------------------------*/

.compare-tabs {
	display: flex;
	align-items: stretch;

	width: min(650px, calc(100% - 2rem));

	margin: 0.8rem auto 0.75rem;

	background: var(--color-bg-tertiary);

	border: 1px solid var(--color-border-dark);
	border-radius: 999px;

	overflow: hidden;

	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.compare-tab-btn {
	flex: 1 1 0;

	min-width: 0;

	margin: 0;
	padding: 0.6rem 1rem;

	background: transparent;
	color: var(--color-accent);

	border: 0;
	border-right: 1px solid var(--color-border-dark);
	border-radius: 0;

	box-shadow: none;

	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 700;

	cursor: pointer;

	transition:
		background 0.2s ease,
		color 0.2s ease;
}

.compare-tab-btn:last-child {
	border-right: 0;
}

.compare-tab-btn.active,
.compare-tab-btn:hover,
.compare-tab-btn:focus-visible {
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.12),
			rgba(0, 0, 0, 0.04)
		),
		var(--color-orange);

	color: var(--color-white);
}


/*--------------------------------------------------------------
# Tab Content / Progressive Enhancement
--------------------------------------------------------------*/

.compare-content {
	width: 100%;
	margin: 0;
	overflow: visible;
}

.compare-tab-panel {
	display: block;
	width: 100%;
	margin: 0;
}

/*
 * SEO-safe progressive enhancement:
 * every comparison panel remains fully server-rendered in the HTML.
 * The tiny .js marker is added in <head> before first layout, so only
 * the active panel participates in layout for normal browser visits.
 * With JavaScript disabled, all comparison content remains visible.
 */
html.js .compare-tab-panel:not(.active) {
	display: none;
}

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

/*--------------------------------------------------------------
# Monthly / Annual Price Rows
--------------------------------------------------------------*/

.price-row {
	display: table-row;
}

/* Monthly is the initial UI state; both rows remain in the source HTML. */
html.js .price-annual {
	display: none;
}

html.js body.show-annual .price-monthly {
	display: none;
}

html.js body.show-annual .price-annual {
	display: table-row;
}


/*--------------------------------------------------------------
# Comparison Table Wrapper
--------------------------------------------------------------*/

.compare-table-viewport {
	width: 100%;

	/*
	 * Enough top room for BEST VALUE badge,
	 * but considerably tighter than before.
	 */
	padding: 3rem 0.3rem 0.3rem;

	overflow-x: auto;
	overflow-y: hidden;

	-webkit-overflow-scrolling: touch;
}


/*--------------------------------------------------------------
# Comparison Table
--------------------------------------------------------------*/

.compare-table {
	width: 100%;
	min-width: 1050px;

	table-layout: fixed;

	border-collapse: separate;
	border-spacing: 0;

	background: var(--color-bg-tertiary);

	border: 1px solid var(--color-border);
	border-radius: 14px;

	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07);
}

.compare-table th,
.compare-table td {
	position: relative;

	height: 46px;

	padding: 0.4rem 0.55rem;

	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 500;

	line-height: 1.15;

	text-align: center;
	vertical-align: middle;

	border-right: 1px solid rgba(5, 5, 5, 0.09);
	border-bottom: 1px solid rgba(5, 5, 5, 0.09);
	
}

.compare-table th:last-child,
.compare-table td:last-child {
	border-right: 0;
}

.compare-table tbody tr:last-child td {
	border-bottom: 0;
}


/* First column */

.compare-table th:first-child,
.compare-table td:first-child {
	width: 170px;
}

.compare-table th.cell-empty {
	background: var(--color-bg-tertiary);

	border-radius: 14px 0 0 0;
}


/*--------------------------------------------------------------
# Host Headers
--------------------------------------------------------------*/

.compare-table th {
	height: 54px;

	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}

.compare-table th.cell-other {
	background: var(--color-bg-tertiary);
	color: var(--color-text-primary);

	font-weight: 700;
}

.compare-table th:last-child {
	border-radius: 0 14px 0 0;
}

.compare-host-name {
	display: block;

	font-family: var(--font-body);

	font-size: 1rem;
	font-weight: 700;

	line-height: 1.1;
}

.compare-host-plan {
	display: block;

	margin-top: 0.15rem;

	font-size: 0.8rem;
	font-weight: 400;

	line-height: 1.1;

	color: var(--color-text-secondary);
}


/*--------------------------------------------------------------
# Hustly Highlighted Column
--------------------------------------------------------------*/

.compare-table th.cell-hustly {
	z-index: 4;

	overflow: visible;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.10),
			rgba(0, 0, 0, 0.03)
		),
		var(--color-orange);

	color: var(--color-white);

	border-top: 2px solid var(--color-orange);
	border-left: 2px solid var(--color-orange);
	border-right: 2px solid var(--color-orange);
	border-bottom-color: rgba(255, 255, 255, 0.25);
}


/*
 * Extends the orange header slightly upward.
 */

.compare-table th.cell-hustly::before {
	content: "";

	position: absolute;

	left: -2px;
	right: -2px;
	top: -8px;

	height: 10px;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.10),
			rgba(0, 0, 0, 0.03)
		),
		var(--color-orange);

	border: 2px solid var(--color-orange);
	border-bottom: 0;

	border-radius: 14px 14px 0 0;
}

.compare-table .cell-hustly .compare-host-name {
	font-size: 1.22rem;
}

.compare-table .cell-hustly .compare-host-plan {
	font-size: 0.88rem;
	font-weight: 600;

	color: var(--color-white);
}


/* Orange outline down Hustly column */

.compare-table tbody td:nth-child(2) {
	z-index: 2;

	border-left: 2px solid var(--color-orange);
	border-right: 2px solid var(--color-orange);
}

.compare-table tbody tr:last-child td:nth-child(2) {
	border-bottom: 2px solid var(--color-orange);

	border-radius: 0 0 14px 14px;
}


/*--------------------------------------------------------------
# Best Value Badge
--------------------------------------------------------------*/

.best-value-badge {
	position: absolute;

	z-index: 8;

	left: 50%;
	top: -32px;

	transform: translateX(-50%);

	display: inline-flex;
	align-items: center;

	gap: 0.35rem;

	padding: 0.35rem 0.7rem;

	background: var(--color-bg-tertiary);
	color: var(--color-orange);

	border: var(--card-border);
	border-radius: 999px;

	box-shadow: var(--box-shadow-card);

	font-size: 0.72rem;
	font-weight: 700;

	line-height: 1;

	white-space: nowrap;
}


/*--------------------------------------------------------------
# Feature Label Column
--------------------------------------------------------------*/

.compare-feature-label {
	background: var(--color-bg-tertiary);

	text-align: left !important;

	font-weight: 400 !important;
}

.compare-feature-label-inner {
	display: flex;
	align-items: center;

	gap: 0.55rem;
}

.compare-feature-copy {
	display: flex;
	flex-direction: column;

	min-width: 0;

	font-size: 0.96rem;

	line-height: 1.15;

	color: var(--color-text-primary);
}

.compare-feature-copy strong {
	font-weight: 700;
}


/*--------------------------------------------------------------
# Feature Row Icons
--------------------------------------------------------------*/

.compare-row-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	flex-shrink: 0;

	color: var(--color-accent);

	background:
		linear-gradient(
			rgba(143, 39, 166, 0.06),
			rgba(143, 39, 166, 0.06)
		),
		var(--color-bg-tertiary);

	border: var(--card-border);
	border-radius: 50%;
}

.compare-row-icon svg {
	width: 17px;
	height: 17px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/*--------------------------------------------------------------
# Monthly / Yearly Links
--------------------------------------------------------------*/

.compare-periods {
	display: flex;
	align-items: center;

	gap: 0.2rem;

	margin-top: 0.1rem;

	white-space: nowrap;

	font-size: 0.7rem;
	font-weight: 400;

	color: var(--color-text-secondary);
}

.period-toggle {
	color: var(--color-text-secondary);

	text-decoration: none;

	font-weight: 500;

	cursor: pointer;

	margin: 0;
}

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

	text-decoration: underline;
}


/*--------------------------------------------------------------
# Cell Colours
--------------------------------------------------------------*/

.compare-table td.cell-green {
	background:
		color-mix(
			in srgb,
			var(--color-cell-bg-green) 12%,
			var(--color-white)
		);

	color: var(--color-green-text);
}

.compare-table td.cell-green-orange {
	background:
		color-mix(
			in srgb,
			var(--color-cell-bg-green-orange) 40%,
			var(--color-white)
		);

	color: var(--color-text-primary);
}

.compare-table td.cell-orange {
	background:
		color-mix(
			in srgb,
			var(--color-cell-bg-orange) 55%,
			var(--color-white)
		);

	color: var(--color-text-primary);
}

.compare-table td.cell-red {
	background:
		color-mix(
			in srgb,
			var(--color-cell-bg-red) 35%,
			var(--color-white)
		);

	color: #b42318;
}

.compare-table td.cell-neutral {
	background:
		color-mix(
			in srgb,
			var(--color-cell-bg-neutral) 60%,
			var(--color-white)
		);

	color: var(--color-text-primary);
}


/*--------------------------------------------------------------
# Performance Feature Lines
--------------------------------------------------------------*/

.features-small {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	gap: 0.18rem;

	width: max-content;
	max-width: 100%;

	margin: 0 auto;

	font-size: 0.82rem;

	line-height: 1.05;

	text-align: left;
}

.compare-feature-line {
	display: flex;
	align-items: center;

	gap: 0.3rem;

	white-space: nowrap;
}

.compare-check,
.compare-cross {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex-shrink: 0;

	font-weight: 700;

	line-height: 1;
}

.compare-check {
	color: var(--color-green-text);
}

.compare-cross {
	color: #b42318;
}

.compare-single-mark {
	font-size: 1.15rem;
}


/*--------------------------------------------------------------
# Comparison Tooltips
--------------------------------------------------------------*/

.compare-tooltip {
	position: relative;

	display: inline-flex;
	align-items: center;

	gap: 0.25rem;
}

.compare-tooltip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 1.25rem;
	height: 1.25rem;

	cursor: help;

	background: var(--color-accent);
	color: var(--color-white);

	border-radius: 50%;

	font-size: 0.62rem;
	font-weight: 700;
}

.compare-tooltip-text {
	position: absolute;

	z-index: 20;

	left: 50%;
	bottom: calc(100% + 8px);

	transform: translateX(-50%);

	width: 190px;

	padding: 0.45rem 0.55rem;

	visibility: hidden;

	opacity: 0;

	background: var(--color-text-primary);
	color: var(--color-white);

	border-radius: 6px;

	font-size: 0.75rem;
	font-weight: 400;

	line-height: 1.3;

	text-align: center;

	transition: opacity 0.2s ease;
}

.compare-tooltip-text::after {
	content: "";

	position: absolute;

	top: 100%;
	left: 50%;

	transform: translateX(-50%);

	border: 5px solid transparent;
	border-top-color: var(--color-text-primary);
}

.compare-tooltip:hover .compare-tooltip-text,
.compare-tooltip:focus-within .compare-tooltip-text {
	visibility: visible;

	opacity: 1;
}


/*--------------------------------------------------------------
# Comparison Footer
--------------------------------------------------------------*/

.compare-footer {
	margin: 1.5rem 0 0 0;

	font-family: var(--font-body);

	font-size: 1.25rem;
	font-weight: 600;

	line-height: 1.35;

	text-align: center;

	color: var(--color-text-secondary);
}

.compare-footer a {
	font-weight: 700;
}


/*--------------------------------------------------------------
# Compare Section - Mobile
--------------------------------------------------------------*/

@media screen and (max-width: 991px) {


	h5.compare-pre-title {
		font-size: 1.25em;
	}

	.compare-section {
	}

	.compare-header {
		padding: 0;
	}

	.compare-heading-row {
		gap: 0.65rem;
	}

	.compare-heading-icon {
		width: 42px;
		height: 42px;
	}

	.compare-heading-icon svg {
		width: 22px;
		height: 22px;
	}

	.compare-title {
		font-size: 1.75em;
		text-align: center;
		margin: 0;
	}

	.compare-nav-label {
		margin-top: 0.35rem;

		font-size: 0.92rem;
	}

	.compare-tabs {
		width: calc(100% - 1rem);

		margin-top: 0.65rem;
		margin-bottom: 0.5rem;
	}

	.compare-tab-btn {
		padding: 0.55rem 0.4rem;

		font-size: 0.88rem;
	}

	.compare-table-viewport {
		width: 100%;

		padding-top: 1.65rem;

		overflow-x: auto;
		overflow-y: hidden;
	}

	.compare-table {
		min-width: 1050px;
	}

	/*
	 * IMPORTANT:
	 * First column is NOT sticky.
	 * The entire table scrolls horizontally together.
	 */
	.compare-table th:first-child,
	.compare-table td:first-child {
		position: static;

		left: auto;

		z-index: auto;
	}

	.compare-footer {
		margin-top: 0.55rem;

		font-size: 0.88rem;
	}
}
/*--------------------------------------------------------------
# Features Section (3-column cards)
--------------------------------------------------------------*/

.features-section {
	background: var(--color-bg-primary);
	padding: 0;
}

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

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

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


/* ==========================================================
   Feature Card
   ========================================================== */

.feature-card {
	position: relative;

	flex: 1 1 280px;
	max-width: 360px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	min-height: 220px;

	padding: 1.5em;

	overflow: hidden;

	text-align: left;

	background:
		linear-gradient(
			145deg,
			var(--color-bg-secondary) 0%,
			var(--color-bg-tertiary) 68%,
			var(--color-bg-primary) 100%
		);

	border: 1px solid var(--color-border);
	border-radius: 14px;

	box-shadow: var(--box-shadow-card);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}


/* Orange -> purple upper border */

.feature-card::before {
	content: "";

	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 4px;

	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 72%,
			var(--color-accent) 100%
		);
}


/* ==========================================================
   Header / Icon
   ========================================================== */

.feature-card-header {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;

	gap: 0.85em;

	width: 100%;

	margin-bottom: 1em;
}


.feature-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 46px;

	width: 46px;
	height: 46px;

	margin: 0;

	background: var(--color-white);

	border: 1px solid var(--color-border);
	border-radius: 11px;

	box-shadow: var(--box-shadow-card);

	color: var(--color-icon);
}


.feature-card-icon svg {
	width: 21px;
	height: 21px;

	fill: var(--color-icon);
}


/* ==========================================================
   Title
   ========================================================== */

.feature-card-title {
	font-family: var(--font-heading);

	font-size: 1.18em;
	font-weight: 700;

	line-height: 1.3;

	color: var(--color-text-primary);
}


/* ==========================================================
   Body
   ========================================================== */

.feature-card-body {
	position: relative;
	z-index: 1;

	margin: 0;

	font-family: var(--font-body);

	font-size: 1em;
	line-height: 1.65;

	color: var(--color-text-secondary);
}


.feature-card-body strong {
	font-weight: 700;
	color: var(--color-text-primary);
}


/* ==========================================================
   Hover
   ========================================================== */

.feature-card:hover {
	transform: translateY(-4px);

	border-color: var(--color-divider);

	box-shadow:
		0 10px 26px rgba(0, 0, 0, 0.11);
}


/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
	.feature-card {
		transition: none;
	}
}

/* --------------------------------------------------------------
# Locations Section
-------------------------------------------------------------- */

.locations-section {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-primary);
	padding: 0;
}

.locations-inner {
	position: relative;
	isolation: isolate;
}

.locations-map-bg {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;
	max-width: none;

	object-fit: contain;
	object-position: center center;

	opacity: 0.125;
	pointer-events: none;
	z-index: 0;
}

.locations-inner::after {
	display: none;
}

.locations-subtitle,
.locations-description,
.locations-grid,
.locations-cdn,
.locations-inner > .cta-section {
	position: relative;
	z-index: 1;
}

.locations-subtitle{
	text-align: center;
	font-size: 2em;
}

.locations-description{
	text-align: center;
	font-size: 1.2em;
  	font-weight: bold;
}

.locations-cdn{
	text-align: center;
	font-size: 1.2em;
  	font-weight: bold;
}

/*
 * Location card layout.
 * Desktop/tablet use flex; the existing phone rule below
 * switches this to a two-column grid.
 */
.locations-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	width: 100%;
	margin-bottom: 1.5rem;
}

@media screen and (max-width: 620px) {
	.locations-map-bg {
		width: 125%;
		height: 100%;
		left: -12.5%;
		right: auto;
		opacity: 0.25;
	}

	.locations-inner::after {
		top: 2.6rem;
		right: 0.2rem;

		width: 150px;
		height: 150px;

		opacity: 0.025;
	}
}

.location-item {
	position: relative;
	overflow: hidden;
	flex: 1 1 150px;
	max-width: 180px;
	padding: 1rem;
	text-align: center;
	background:
		linear-gradient(
			145deg,
			var(--color-bg-secondary) 0%,
			var(--color-bg-tertiary) 68%,
			var(--color-bg-primary) 100%
		);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: var(--box-shadow-card);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.location-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 72%,
			var(--color-accent) 100%
		);
}

.location-item::after {
	content: "";
	position: absolute;
	top: -52px;
	right: -48px;
	width: 95px;
	height: 95px;
	border-radius: 50%;
	background: var(--color-orange);
	opacity: 0.045;
	pointer-events: none;
}

.location-item:hover {
	transform: translateY(-3px);
	border-color: var(--color-divider);
	box-shadow: var(--box-shadow-card);
}

.location-flag-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 38px;
	margin: 0.2rem auto 0.7rem;
	padding: 5px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 9px;
	box-shadow: var(--box-shadow-card);
}

.location-flag-icon svg {
	display: block;
	width: 36px;
	height: 24px;
	border-radius: 3px;
}

.location-region {
	position: relative;
	z-index: 1;
	font-family: var(--font-heading);
	font-size: 1.15em;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 0.35em 0;
}

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

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

@media screen and (max-width: 991px) {
	.locations-section {
		padding: 0;
	}

	.locations-section::before {
		top: -20px;
		right: -170px;
		width: 430px;
		height: 215px;
		opacity: 0.07;
	}

	.locations-grid {
		gap: 1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.location-item {
		transition: none;
	}
}

/*--------------------------------------------------------------
# CTA Section (centered buttons)
--------------------------------------------------------------*/
.cta-section {
	background: var(--color-bg-primary);
	padding: 0;
	margin: 1em auto 0.5em auto;
}

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

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials-subtitle {
	font-family: var(--font-heading);
	font-size: 1.6em;
	font-weight: 700;
	color: var(--color-orange);
	margin: 0 0 0.25em 0;
	text-align: center;
}

.testimonials-section {
	position: relative;
	overflow: hidden;
	padding: 0;
}

.testimonials-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	padding: 1em 0;
}

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

.testimonial-card {
	position: relative;
	overflow: hidden;
	flex: 1 1 300px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 1.5em;
	background:
		linear-gradient(
			145deg,
			var(--color-bg-secondary) 0%,
			var(--color-bg-tertiary) 68%,
			var(--color-bg-primary) 100%
		);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: var(--box-shadow-card);
}

.testimonial-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 72%,
			var(--color-accent) 100%
		);
}

.testimonial-card::after {
	content: "";
	position: absolute;
	top: -95px;
	right: -75px;
	width: 145px;
	height: 145px;
	border-radius: 50%;
	background: var(--color-orange);
	opacity: 0.045;
	pointer-events: none;
}

.testimonial-text {
	position: relative;
	z-index: 1;
	font-family: var(--font-body);
	font-size: 1em;
	line-height: 1.7;
	color: var(--color-text-secondary);
	margin: 0 0 1.25em 0;
	font-style: italic;
}

.testimonial-footer {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--color-divider);
}

.testimonial-image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-right: 0.9em;
	padding: 3px;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--box-shadow-card);
}

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

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

.testimonial-name {
	font-family: var(--font-heading);
	font-size: 0.95em;
	font-weight: 700;
	color: var(--color-text-primary);
}

.testimonial-role {
	margin-top: 0.15rem;
	font-family: var(--font-body);
	font-size: 0.88em;
	line-height: 1.35;
	color: var(--color-text-secondary);
}

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

.testimonials-viewport {
	width: 100%;
	overflow: hidden;
	padding: 0.35rem 0.25rem 0.75rem;
}

.testimonials-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 1.5rem;
	width: 100%;
	will-change: transform;
}

.testimonials-section.is-carousel .testimonial-card {
	flex: 0 0 calc((100% - 3rem) / 3);
	max-width: none;
	box-sizing: border-box;
}

/* JS clones use this marker; keep them visually identical. */
.testimonials-section.is-carousel .testimonial-card.is-carousel-clone {
	pointer-events: none;
}

.testimonial-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 1.1em;
	padding: 0.25em 0;
}

.testimonial-dot {
	width: 9px;
	height: 9px;
	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.25);
}

@media screen and (max-width: 991px) and (min-width: 621px) {
	.testimonials-section.is-carousel .testimonial-card {
		flex-basis: calc((100% - 1.5rem) / 2);
	}
}

@media screen and (max-width: 620px) {
	.testimonials-track {
		gap: 1rem;
	}

	.testimonials-section.is-carousel .testimonial-card {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.testimonials-track {
		scroll-behavior: auto;
	}
}

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

.developer-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	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: var(--color-text-primary);
}

/*--------------------------------------------------------------
# Tools Section (infinite logo carousel)
--------------------------------------------------------------*/
.tools-section {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-primary);
	padding: 0;
}

.tools-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	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-viewport {
	width: 100%;
	overflow: hidden;
	padding: 0.35rem 0.25rem 0.75rem;
}

.tools-grid,
.tools-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 1.25rem;
	width: 100%;
	will-change: transform;
}

/* Six logos visible at once on desktop. */
.tools-section.is-carousel .tool-logo {
	flex: 0 0 calc((100% - 6.25rem) / 6);
	max-width: none;
	min-width: 0;
	height: 105px;
	margin: 0;
	padding: 0.85rem 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--box-shadow-card);
	box-sizing: border-box;
}

.tools-section.is-carousel .tool-logo.is-carousel-clone {
	pointer-events: none;
}

.tool-logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 58px;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.tool-logo:hover img,
.tool-logo:focus-within img {
	filter: grayscale(0%);
	opacity: 1;
	transform: scale(1.04);
}

.tools-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 1em;
	padding: 0.25em 0;
}

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

.tools-dot:hover,
.tools-dot:focus {
	background: var(--color-accent-hover);
}

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

/* Four logos visible on tablet. */
@media screen and (max-width: 991px) and (min-width: 621px) {
	.tools-section.is-carousel .tool-logo {
		flex-basis: calc((100% - 3.75rem) / 4);
		height: 96px;
	}
}

/* Three logos visible on phones. */
@media screen and (max-width: 620px) {
	.tools-grid,
	.tools-track {
		gap: 0.8rem;
	}

	.tools-section.is-carousel .tool-logo {
		flex-basis: calc((100% - 1.6rem) / 3);
		height: 84px;
		padding: 0.65rem;
		border-radius: 10px;
	}

	.tool-logo img {
		max-height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tools-track {
		scroll-behavior: auto;
	}

	.tool-logo img {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Desktop Styles (min-width: 992px)
--------------------------------------------------------------*/
@media screen and (min-width: 992px) {
	main {
		padding: 0 12.5%;
		margin-bottom: 5%;
	}
	.hero-title {
		text-wrap: nowrap;
		overflow: visible;
		z-index: 5000;
		position: relative;
	}

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

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

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

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

}

@media screen and (max-width: 620px) {

	.feature-card {
		padding: 1.25em;
		border-radius: 12px;
	}

	.feature-card-icon {
		flex-basis: 42px;

		width: 42px;
		height: 42px;

		border-radius: 10px;
	}

	.feature-card-icon svg {
		width: 19px;
		height: 19px;
	}

	.feature-card-title {
		font-size: 1.08em;
	}
}


/* Compact location cards on phones: two cards per row. */
@media screen and (max-width: 620px) {
	.locations-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.8rem;
		align-items: stretch;
	}

	.location-item {
		width: auto;
		max-width: none;
		min-width: 0;
		padding: 0.8rem 0.45rem;
		border-radius: 12px;
	}

	.location-flag-icon {
		width: 44px;
		height: 32px;
		margin: 0.1rem auto 0.5rem;
		padding: 4px;
		border-radius: 8px;
	}

	.location-flag-icon svg {
		width: 30px;
		height: 20px;
	}

	.location-region {
		font-size: 0.95em;
		line-height: 1.25;
		margin-bottom: 0.3em;
	}

	.location-city {
		font-size: 0.82em;
		line-height: 1.3;
	}

	/*
	 * If there is an odd number of locations, center the final card
	 * instead of leaving it awkwardly aligned to the left.
	 */
	.location-item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 0.4rem);
	}
}

/*--------------------------------------------------------------
# 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;

		position: absolute;
		top: 100%;
		left: 0;
		right: 0;

		width: 100%;
		margin: 0;
		padding: 1rem 2.5%;

		background: var(--color-bg-header);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

		z-index: 999999;
	}

	.main-navigation.toggled {
		display: flex;
		flex-direction: column;

		max-height: calc(100vh - 70px);
		overflow-y: auto;
	}

	.main-navigation > ul {
		width: 100%;

		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

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

	/* Dropdown/submenu */
	.main-navigation ul ul {
		position: static;

		top: auto;
		left: auto;

		width: 100%;
		min-width: 0;

		padding: 0 0 0 1rem;

		background: var(--color-orange);

		box-shadow: none;
		border-radius: 0;

		flex-direction: column;
		gap: 0;
	}

	/* JS adds .toggled-on when dropdown is tapped */
	.main-navigation li.toggled-on > ul {
		display: flex;
	}

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

	.main-navigation li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	}

	.main-navigation a {
		color: var(--color-white);
		padding: 1rem 0;
	}

	.nav-account-actions {
		width: 100%;
	}
	/* Hero Mobile */
	.hero-inner {
		flex-direction: column;
	}

	.hero-image {
		display: none;
	}

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

	.hero-title {
        font-size: 2.25em;
        text-align: center;
        padding: 0;
        width: 100%;
        align-items: center;
        gap: 0.05em;
    }

    .hero-title-accent,
    .hero-title-main {
        text-align: center;
        max-width: 100%;
    }

    .hero-title-main {
        margin-top: 0;
    }

	.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;
	}


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

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

	.features-grid {
		gap: 1.25em;
	}

	.feature-card {
		align-items: flex-start;
		text-align: left;

		min-height: 0;
	}

	.feature-card-header {
		justify-content: flex-start;
	}

	/* Locations Section Mobile */
	.locations-inner {
		padding: 0.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;
	}

	/* Developer Section Mobile */
	.developer-inner {
	}

	.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 {
	position: relative;
	overflow: hidden;
	width: 100%;
	background:
		radial-gradient(circle at 10% 0%, rgba(220, 130, 46, 0.09), transparent 30%),
		radial-gradient(circle at 90% 75%, rgba(143, 39, 166, 0.07), transparent 32%),
		linear-gradient(
			145deg,
			var(--color-bg-secondary) 0%,
			var(--color-bg-primary) 100%
		);
	border-top: 1px solid var(--color-divider);
	border-radius: 0 0 20px 20px;
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 72%,
			var(--color-accent) 100%
		);
}

.footer-tagline {
	padding: 2.5rem 0 1.75rem;
}

.footer-tagline-inner {
	width: 100%;
	margin: 0;
	padding: 0 12.5%;
	text-align: left;
}

.footer-tagline-text {
	font-family: var(--font-heading);
	font-size: clamp(1.35rem, 2vw, 1.8rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text-primary);
	margin: 0;
}

.footer-links {
	padding: 0 0 2.5rem;
}

.footer-links-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
	width: 100%;
	margin: 0;
	padding: 0 12.5%;
}

.footer-column {
	min-width: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--color-divider);
}

.footer-column-title {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-orange);
	margin: 0 0 0.85rem 0;
}

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

.footer-menu li {
	margin-bottom: 0.55rem;
}

.footer-menu a {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition:
		color 0.18s ease,
		transform 0.18s ease;
}

.footer-menu a:hover,
.footer-menu a:focus {
	color: var(--color-accent);
	transform: translateX(3px);
}

.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 {
	display: flex;
	gap: 0.65rem;
	margin-top: 1rem;
}

.footer-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	box-shadow: var(--box-shadow-card);
	color: var(--color-accent);
	transition:
		transform 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease;
}

.footer-social-icon:hover,
.footer-social-icon:focus {
	color: var(--color-accent-hover);
	border-color: var(--color-divider);
	transform: translateY(-2px);
}

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

.footer-copyright {
	padding: 1.35rem 0;
	border-top: 1px solid var(--color-divider);
	background: rgba(255, 255, 255, 0.18);
}

.footer-copyright-inner {
	width: 100%;
	margin: 0;
	padding: 0 12.5%;
	text-align: left;
}

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

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

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

@media screen and (max-width: 991px) {
	.footer-tagline {
		padding: 2rem 0 1.5rem;
	}

	.footer-tagline-inner,
	.footer-links-inner,
	.footer-copyright-inner {
		padding-left: 5%;
		padding-right: 5%;
	}

	.footer-links-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media screen and (max-width: 620px) {
	.footer-links-inner {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.footer-column {
		padding-top: 0.9rem;
	}

	.footer-tagline-text {
		font-size: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.footer-menu a,
	.footer-social-icon {
		transition: none;
	}
}

/*--------------------------------------------------------------
# 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
========================================== */
.hst_page_title {
	position: relative;
	overflow: hidden;
	padding: 1em 0 0.5em 0;
	font-family: var(--font-heading);
	font-size: 2.25em;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	color: var(--color-orange);
}

.hst_pctable_pricing {
	width: 100%;
	margin: 0;
	padding: 0 0 5rem;
}
h3.hustly-centered-bold,
h5.hustly-centered-bold {
	font-family: var(--font-heading);
	font-weight: 700;
	text-align: center;
	color: var(--color-text-primary);
}
h3.hustly-centered-bold { margin-top: 1.75rem; font-size: 1.55rem; }
h5.hustly-centered-bold { margin-top: 1.5rem; font-size: 1rem; }
hr.hustly-purple-hr {
	height: 1px;
	margin: 1.5rem 0 !important;
	background: var(--color-divider) !important;
	border: 0;
}
.hst_pctable_period-selector {
	display: flex;
	align-items: stretch;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 1.5rem;
	padding: 4px;
	gap: 4px;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	box-shadow: var(--box-shadow-card);
}
.hst_pctable_periodBtn {
	flex: 1 1 auto;
	min-width: 90px;
	margin: 0;
	padding: 0.55rem 1rem;
	background: transparent;
	color: var(--color-accent);
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}
.hst_pctable_periodBtn.hst_pctable_active,
.hst_pctable_periodBtn:hover,
.hst_pctable_periodBtn:focus {
	background: var(--color-accent);
	color: var(--color-white);
}
.hst_pctable_cards {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
@media screen and (min-width: 768px) {
	.hst_pctable_cards { flex-direction: row; }
}
.hst_pctable_card {
	position: relative;
	overflow: hidden;
	flex: 1;
	margin: 0;
	padding: 1.5rem;
	background: linear-gradient(145deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 68%, var(--color-bg-primary) 100%);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: var(--box-shadow-card);
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.hst_pctable_card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange) 72%, var(--color-accent) 100%);
}
.hst_pctable_card:hover {
	transform: translateY(-3px);
	border-color: var(--color-divider);
}
.hst_pctable_plan-title {
	padding: 0;
	margin: 0 0 0.45rem;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--color-orange);
	text-align: left;
}
.hst_pctable_plan-features-highlight {
	margin: 0 0 1rem;
	padding: 0.45rem 0.7rem;
	background: var(--color-cell-bg-orange);
	border: 1px solid var(--color-separator);
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-text-primary);
	text-align: left;
}
.hst_pctable_plan-features {
	margin: 0 0 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0.2px;
	color: var(--color-text-secondary);
	text-align: left;
}
.hst_pctable_plan-features b { color: var(--color-text-primary); }

.Hustly-plans-tooltip-icon {
	position: relative;
	display: inline-block;
	padding: 1px;
	vertical-align: top;
	border: 0;
	background: transparent;
	color: var(--color-accent);
	cursor: pointer;
	line-height: 1;
}
.Hustly-plans-tooltip-icon i,
.Hustly-plans-tooltip-icon .hst-pricing-tooltip-icon {
	display: inline-block;
	width: 15px;
	height: 15px;
	font-size: 0.9em;
	line-height: 1;
	vertical-align: -2px;
	color: currentColor;
}

.Hustly-plans-tooltip-icon .hst-pricing-tooltip-icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.Hustly-plans-tooltip-message {
	position: absolute;
	left: 50%;
	bottom: 125%;
	z-index: 20;
	visibility: hidden;
	opacity: 0;
	width: max-content;
	max-width: 260px;
	padding: 8px 10px;
	transform: translateX(-50%);
	background: var(--color-text-primary);
	color: var(--color-white);
	border-radius: 8px;
	box-shadow: var(--box-shadow-card);
	font-size: 0.9em !important;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}
.Hustly-plans-tooltip-message::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--color-text-primary);
}
.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;
}

.hst_pctable_price-main { display: inline-flex; align-items: flex-end; font-size: 1.1em; font-weight: 600; }
.hst_pctable_pricing-info { display: none; margin: 0 0 0.75rem; color: var(--color-text-secondary); font-weight: 600; }
.hst_pctable_pricing-info.active { display: block; }
.hst_pctable_price-currency { font-size: 1.35em; font-weight: 500; color: var(--color-text-secondary); text-align: left; }
.hst_pctable_price-period { font-size: 0.4em; color: var(--color-text-secondary); }
.hst_pctable_price-note { margin-top: -1rem; font-size: 0.88em; color: var(--color-text-secondary); }
.hst_pctable_price-compare { display: flex; align-items: center; gap: 0.5em; margin: 0 0 0.25em; line-height: 1.2; }
.hst_pctable_price-was { color: var(--color-text-muted); font-weight: 500; font-size: 1.1em; }
.hst_pctable_sale-badge {
	display: inline-block;
	padding: 0.2em 0.55em;
	background: var(--color-green);
	color: var(--color-green-text);
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: 0.88em;
	font-weight: 600;
	white-space: nowrap;
}
.hst_pctable_price-value { display: inline-flex; align-items: baseline; margin: 0 0.125em 0 0; color: var(--color-orange); line-height: 1; }
.hst_pctable_price-symbol { position: relative; top: -0.5em; font-size: 1.35em; line-height: 1; }
.hst_pctable_price-cents { font-size: 1.7em; line-height: 1; }
.hst_pctable_price-int { margin: 0 1px; font-size: 2.7em; font-weight: 700; line-height: 1; }

.hst_pctable_select-btn-container { margin-top: auto; text-align: center; }
.hst_pctable_select-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0.5rem auto 0;
	padding: 0.75rem 1rem;
	background: var(--color-accent);
	color: var(--color-white) !important;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 7px;
	box-shadow: var(--box-shadow-button);
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease;
}
.hst_pctable_select-btn:hover,
.hst_pctable_select-btn:focus {
	background: var(--color-accent-dark);
	transform: translateY(-1px);
}
.hst_pctable_price-subtext {
	margin-top: 0.75em;
	font-family: var(--font-body);
	font-size: 0.95em;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-text-secondary);
}

#hustly-plans-table-container {
	display: block;
	overflow-x: auto;
	margin: 1rem 0;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: var(--box-shadow-card);
	-ms-overflow-style: none;
	scrollbar-width: none;
}
#hustly-plans-table-container::-webkit-scrollbar { display: none; }

.hustly-custom-scrollbar {
	position: relative;
	display: none;
	height: 12px;
	margin: 10px 0;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	user-select: none;
	touch-action: none;
}
.hustly-custom-scrollbar .thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 100%;
	background: linear-gradient(90deg, var(--color-orange), var(--color-accent));
	border-radius: 999px;
	cursor: pointer;
}
.hustly-plans-container { position: relative; }
.hustly-plans-table-scroll-buttons {
	position: absolute;
	top: 12%;
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 0;
}

.tg { border-spacing: 0; }
.tg td,
.tg th {
	overflow: hidden;
	padding: 10px 7px;
	border: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: 14px;
	word-break: normal;
}
.tg th { font-weight: 600; }
.tg .tg-mc38 {
	background: var(--color-bg-secondary);
	color: var(--color-orange);
	text-align: center;
	vertical-align: middle;
	font-size: 0.9em;
	font-family: var(--font-body);
}
.tg .tg-feature-cell-container {
	background: var(--color-bg-tertiary);
	text-align: left;
	vertical-align: middle;
	font-size: 1em;
	padding: 0.6em;
}
.tg .tg-feature-cell-container-alt {
	background: var(--color-bg-secondary);
	text-align: left;
	vertical-align: middle;
	font-size: 1em;
	padding: 0.6em;
}
.tg .tg-feature-cell-additional-text { color: var(--color-text-secondary); font-weight: 500; font-family: var(--font-body); }
.tg .tg-full-row {
	background:
		linear-gradient(90deg, rgba(220, 130, 46, 0.14) 0%, rgba(143, 39, 166, 0.07) 100%),
		var(--color-bg-tertiary);
	color: var(--color-text-primary);
	text-align: left;
	vertical-align: middle;
	padding: 0.65em;
	font-size: 1.05em;
	font-weight: 700;
	border-top-color: var(--color-divider);
	border-bottom-color: var(--color-divider);
}

.tg .tg-full-row .hst-pricing-section-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 0.45rem;
	vertical-align: -4px;
	color: var(--color-orange);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tg .tg-oe15 { background: var(--color-bg-tertiary); text-align: center; vertical-align: middle; font-size: 1.05em; font-weight: 500; }
.tg .tg-lz2u { background: var(--color-bg-secondary); text-align: center; vertical-align: middle; font-size: 1.05em; font-weight: 500; }
.tg-feature-title { font-size: 1.1em; font-weight: 700; font-family: var(--font-body); color: var(--color-text-primary); }
.tg-feature-check { color: var(--color-green-text); }

table.tg.hst-plan-details-table {
	margin: 0;
	table-layout: fixed;
	border: 0;
	border-radius: 14px;
}

@media screen and (max-width: 991px) {
	.hst_page_title { 
		margin-top: 1.25rem;
		padding: 1rem 0rem;
		font-size: 2em;
	}
	.hst_pctable_pricing { width: 100%; margin: 0; padding: 0 0 4rem; }
	.hst_pctable_period-selector { width: 100%; }
	.hst_pctable_periodBtn { min-width: 0; padding: 0.55rem 0.5rem; }
	.hustly-custom-scrollbar { display: block; }
	table.tg { width: 800px; }
	.hustly-plans-table-col-feature { width: 14%; }
	.hustly-plans-table-col-plan { width: 16%; }
	.hustly-plans-table-scroll-buttons { visibility: visible; }
}
@media screen and (min-width: 992px) {
	table.tg { width: 100%; }
	.hustly-plans-table-col-feature { width: 43%; }
	.hustly-plans-table-col-plan { width: 19%; }
	.hustly-plans-table-scroll-buttons { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
	.hst_pctable_card,
	.hst_pctable_select-btn { transition: none; }
}

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

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

/* Post Banner */
.post-banner {
	position: relative;
	overflow: hidden;
	padding: 3.5rem 0;
	background:
		linear-gradient(
			135deg,
			var(--color-bg-secondary) 0%,
			var(--color-bg-primary) 100%
		);
	border-bottom: 1px solid var(--color-divider);
}

.post-banner::before {
	content: "";
	position: absolute;
	top: -330px;
	right: 4%;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: var(--color-orange);
	opacity: 0.08;
	pointer-events: none;
}

.post-banner::after {
	content: "";
	position: absolute;
	right: 28%;
	bottom: -220px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0.055;
	pointer-events: none;
}

.post-banner-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 0 12.5%;
}

.post-categories {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.45rem 0.75rem;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	box-shadow: var(--box-shadow-card);
	font-family: var(--font-body);
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--color-text-muted);
}

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

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

.post-title {
	max-width: 1000px;
	margin: 0;
	font-family: var(--font-heading);
	font-size: 2.5em;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--color-text-primary);
}

/* Post Content Section */
.post-content-section {
	padding: 3rem 0 4.5rem;
	background:
		linear-gradient(
			180deg,
			var(--color-bg-primary) 0%,
			var(--color-bg-secondary) 100%
		);
	box-shadow: none;
}

.post-content-inner {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	width: 100%;
	margin: 2em 0 0 0;
	padding: 0 12.5%;
}

/* Main Content Column */
.post-main-content {
	position: relative;
	overflow: hidden;
	flex: 1;
	min-width: 0;
	padding: 2.25rem;
	background:
		linear-gradient(
			145deg,
			var(--color-bg-tertiary) 0%,
			var(--color-bg-primary) 100%
		);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: var(--box-shadow-card);
}

.post-main-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 72%,
			var(--color-accent) 100%
		);
}

.post-excerpt {
	position: relative;
	overflow: hidden;
	margin: 0 0 1rem;
	padding: 1.3rem;
	background:
		linear-gradient(
			145deg,
			var(--color-bg-secondary) 0%,
			var(--color-bg-tertiary) 100%
		);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--box-shadow-card);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-text-secondary);
}

.post-excerpt::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 72%,
			var(--color-accent) 100%
		);
}

.post-excerpt p {
	margin: 0;
}

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

.post-body p {
	margin: 0 0 1.5rem;
}

.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5 {
	margin-top: 1.8em;
	margin-bottom: 0.75em;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text-dark);
}

.post-body h2 {
	font-size: 1.7em;
}

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

.post-body h4 {
	font-size: 1.25em;
}

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

.post-body a {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

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

.post-body img {
	max-width: 100%;
	height: auto;
	margin: 1.5em 0;
	border-radius: 10px;
	box-shadow: var(--box-shadow-card);
}

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

.post-body ol {
	list-style: decimal;
}

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

.post-body li {
	margin-bottom: 0.55em;
	padding-left: 0.2em;
}

.post-body blockquote {
	margin: 1.75em 0;
	padding: 1.1em 1.3em;
	background:
		linear-gradient(
			135deg,
			var(--color-bg-secondary) 0%,
			var(--color-bg-tertiary) 100%
		);
	border-left: 4px solid var(--color-orange);
	border-radius: 0 10px 10px 0;
}

.post-body blockquote p:last-child {
	margin-bottom: 0;
}

.post-body pre {
	overflow-x: auto;
	padding: 1rem 1.2rem;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: 10px;
}

.post-body table {
	width: 100%;
	margin: 1.5rem 0;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: 10px;
}

.post-body th,
.post-body td {
	padding: 0.75rem;
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

.post-body th {
	font-weight: 700;
	background: var(--color-bg-secondary);
}

.post-body th:last-child,
.post-body td:last-child {
	border-right: 0;
}

.post-body tr:last-child td {
	border-bottom: 0;
}

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

/* Retained for templates/widgets that may still output author details */
.post-author-box {
	display: flex;
	align-items: center;
	margin-bottom: 1.5em;
}

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

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

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

/* Share Buttons */
.post-share,
.sidebar-share {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.post-share .share-btn,
.sidebar-share .share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	box-shadow: var(--box-shadow-card);
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		opacity 0.18s ease;
}

.post-share .share-btn:hover,
.post-share .share-btn:focus,
.sidebar-share .share-btn:hover,
.sidebar-share .share-btn:focus {
	transform: translateY(-2px);
	opacity: 1;
	box-shadow: 0 7px 16px rgba(0, 0, 0, 0.15);
}

.post-share .share-btn svg,
.sidebar-share .share-btn svg {
	width: 18px;
	height: 18px;
	fill: var(--color-white);
}

.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: 2.5em;
	padding-top: 2em;
	border-top: 1px solid var(--color-divider);
}

.comments-area {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text-primary);
}

.comments-title,
.comment-reply-title {
	margin: 0 0 1.25rem;
	font-family: var(--font-heading);
	font-size: clamp(1.05rem, 1.35vw, 1.35rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-text-primary);
}

.comments-title span { color: var(--color-orange); }

.comment-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.comment-list .comment,
.comment-list .pingback,
.comment-list .trackback {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-body {
	position: relative;
	overflow: hidden;
	padding: 1.25rem;
	background: linear-gradient(145deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--box-shadow-card);
}

.comment-body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange) 72%, var(--color-accent) 100%);
}

.comment-meta { margin-bottom: 0.8rem; }

.comment-author {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.comment-author .avatar {
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 2px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	box-shadow: var(--box-shadow-card);
}

.comment-author .fn {
	font-family: var(--font-heading);
	font-style: normal;
	font-weight: 700;
	color: var(--color-text-primary);
}

.comment-author .says {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.comment-metadata {
	margin: 0.35rem 0 0 3.25rem;
	font-size: 0.82rem;
	color: var(--color-text-muted);
}
.comment-metadata a { color: var(--color-text-muted); text-decoration: none; }
.comment-metadata a:hover,
.comment-metadata a:focus { color: var(--color-accent); }

.comment-content {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-primary);
}
.comment-content p:last-child { margin-bottom: 0; }

.reply { margin-top: 0.9rem; }
.comment-reply-link {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.7rem;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 7px;
	box-shadow: var(--box-shadow-card);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
}
.comment-reply-link:hover,
.comment-reply-link:focus {
	color: var(--color-accent-hover);
	border-color: var(--color-divider);
}

.comment-list .children {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1rem 0 0 1.5rem;
	padding: 0 0 0 1rem;
	border-left: 2px solid var(--color-divider);
	list-style: none;
}

.comment-navigation {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 1rem 0;
	font-size: 0.9rem;
	font-weight: 700;
}
.comment-navigation a { color: var(--color-accent); text-decoration: none; }
.comment-navigation a:hover,
.comment-navigation a:focus { color: var(--color-accent-hover); }

.no-comments {
	margin: 1rem 0 0;
	padding: 0.8rem 1rem;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	color: var(--color-text-secondary);
}

.comment-respond {
	position: relative;
	overflow: hidden;
	margin-top: 2rem;
	padding: 1.4rem;
	background: linear-gradient(145deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--box-shadow-card);
}

.comment-respond::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange) 72%, var(--color-accent) 100%);
}

.comment-form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.comment-form-comment,
.comment-notes,
.logged-in-as,
.comment-form-cookies-consent,
.form-submit { grid-column: 1 / -1; }

.comment-form p { margin: 0; }

.comment-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.75rem 0.85rem;
	background: var(--color-white);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border-dark);
	border-radius: 8px;
	outline: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.comment-form textarea { min-height: 160px; resize: vertical; }
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(143, 39, 166, 0.10);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9rem;
	color: var(--color-text-secondary);
}
.comment-form-cookies-consent input {
	flex: 0 0 auto;
	width: auto;
	margin-top: 0.25rem;
}
.comment-form-cookies-consent label {
	margin: 0;
	font-weight: 500;
	color: var(--color-text-secondary);
}

.form-submit .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.15rem;
	background: var(--color-accent);
	color: var(--color-white);
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 7px;
	box-shadow: var(--box-shadow-button);
	font-family: var(--font-body);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}
.form-submit .submit:hover,
.form-submit .submit:focus {
	background: var(--color-accent-dark);
	transform: translateY(-1px);
}

@media screen and (max-width: 620px) {
	.comment-list .children {
		margin-left: 0.5rem;
		padding-left: 0.75rem;
	}
	.comment-form { grid-template-columns: 1fr; }
	.comment-respond,
	.comment-body { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.comment-form input,
	.comment-form textarea,
	.form-submit .submit { transition: none; }
}

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

/* Retained for templates/widgets that may still output author details */
.sidebar-author-box {
	margin-bottom: 1.5em;
	padding: 1.5em;
	background:
		linear-gradient(
			145deg,
			var(--color-bg-secondary) 0%,
			var(--color-bg-tertiary) 100%
		);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--box-shadow-card);
}

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

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

.sidebar-share {
	margin: 0 0 1rem;
	padding: 1rem;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--box-shadow-card);
}

/* Recent Posts Sidebar */
.sidebar-recent-posts {
	position: relative;
	overflow: hidden;
	padding: 1.3rem;
	background:
		linear-gradient(
			145deg,
			var(--color-bg-secondary) 0%,
			var(--color-bg-tertiary) 100%
		);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--box-shadow-card);
}

.sidebar-recent-posts::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 72%,
			var(--color-accent) 100%
		);
}

.sidebar-recent-posts .sidebar-title {
	margin: 0 0 1rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--color-divider);
	font-family: var(--font-heading);
	font-size: 1.05em;
	font-weight: 700;
	color: var(--color-text-primary);
}

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

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

.recent-post-item:first-child {
	padding-top: 0;
}

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

.recent-post-thumbnail {
	flex: 0 0 76px;
	width: 76px;
	height: 56px;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: var(--box-shadow-card);
}

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

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

.recent-post-title {
	margin: 0 0 0.35em 0;
	font-family: var(--font-body);
	font-size: 0.92em;
	font-weight: 700;
	line-height: 1.35;
}

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

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

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

.recent-post-readmore:hover,
.recent-post-readmore:focus {
	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;
		position: sticky;
		top: 100px;
		align-self: flex-start;
	}

	/* 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 {
		padding: 2.7rem 0;
	}

	.post-banner-inner {
		padding: 0 5%;
	}

	.post-title {
		font-size: clamp(1.9rem, 7vw, 2.5rem);
	}

	.post-content-section {
		padding: 2rem 0 3.5rem;
	}

	.post-content-inner {
		margin: 2.5% 0 0 0;
		padding: 0 2.5%;
		flex-direction: column;
		gap: 1.5rem;
	}

	.post-main-content {
		order: 1;
		width: 100%;
		padding: 1em;
	}

	.post-sidebar {
		position: static;
		order: 2;
		flex: none;
		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-basis: 70px;
		width: 70px;
		height: 52px;
	}

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

@media screen and (max-width: 620px) {
	.post-banner {
		padding: 2.2rem 0;
	}

	.post-main-content {
		padding: 1em;
		border-radius: 12px;
	}

	.post-body {
		font-size: 1rem;
		line-height: 1.75;
	}

	.post-body h2 {
		font-size: 1.45em;
	}

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

	.post-excerpt,
	.sidebar-recent-posts {
		border-radius: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.post-share .share-btn,
	.sidebar-share .share-btn {
		transition: none;
	}
}

/*--------------------------------------------------------------
# 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 {
	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 {
	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(3, 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;
		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
--------------------------------------------------------------*/

/*
 * Comparison tables are rendered directly by PHP. JavaScript progressively
 * enhances the Professional / Expert / Agency tables into native hidden-state tabs.
 */
.compare-wp-page {
	position: relative;
	background: var(--color-bg-primary);
}

.compare-wp-page section[id],
.compare-wp-page article[id] {
	scroll-margin-top: 100px;
}

/* Hero */
.compare-wp-hero {
	position: relative;
	overflow: hidden;
	padding: 3.25rem 0 2.4rem;
}

.compare-wp-hero::before,
.compare-wp-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.compare-wp-hero::before {
	top: -10rem;
	right: -8rem;
	width: 28rem;
	height: 28rem;
	background: var(--color-orange);
	opacity: 0.055;
}

.compare-wp-hero::after {
	left: 8%;
	bottom: -9rem;
	width: 18rem;
	height: 18rem;
	background: var(--color-accent);
	opacity: 0.035;
}

.compare-wp-hero-inner {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	text-align: center;
}

.compare-wp-eyebrow,
.compare-wp-section-kicker,
.compare-wp-plan-kicker {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	color: var(--color-orange);
}

h1.compare-wp-page-title {
	margin: 0.4rem auto 0.85rem;
	font-family: var(--font-heading);
	font-size: 2.5em;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.04em;
	color: var(--color-text-primary);
}

h1.compare-wp-page-title span {
	color: var(--color-orange);
}

.compare-wp-hero-copy {
	max-width: 900px;
	margin: 0 auto;
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--color-text-secondary);
}

.compare-wp-jump-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem;
	margin: 1.5rem auto 0;
}

.compare-wp-jump-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 0.9rem;
	background: var(--color-bg-tertiary);
	color: var(--color-accent);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.045);
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.compare-wp-jump-nav a:hover,
.compare-wp-jump-nav a:focus {
	color: var(--color-accent-hover);
	border-color: var(--color-divider);
	transform: translateY(-1px);
}

.compare-wp-divider {
	padding: 1rem 0;
}

/* Main comparison blocks */
.compare-wp-comparison-section {
	padding: 0;
}

.compare-wp-section-header,
.compare-wp-answer-header {
	max-width: 940px;
	margin: 0 auto 1.25rem;
	text-align: center;
}

.compare-wp-section-header h2,
.compare-wp-answer-header h2,
.compare-wp-feature-cards-wrap > h2,
.compare-wp-final-cta h2 {
	margin: 0.3rem 0 0.55rem;
	font-family: var(--font-heading);
	font-size: 2em;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.03em;
	color: var(--color-text-primary);
}

.compare-wp-section-header p,
.compare-wp-answer-header p,
.compare-wp-final-cta p {
	margin: 0 auto;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--color-text-secondary);
}

.compare-wp-plan-tabs {
	display: flex;
	align-items: stretch;
	width: min(650px, calc(100% - 2rem));
	margin: 1.2rem auto 1.5rem;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border-dark);
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.compare-wp-plan-tab {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0.6rem 1rem;
	background: transparent;
	color: var(--color-accent);
	border: 0;
	border-right: 1px solid var(--color-border-dark);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.compare-wp-plan-tab:last-child {
	border-right: 0;
}

.compare-wp-plan-tab.active,
.compare-wp-plan-tab:hover,
.compare-wp-plan-tab:focus-visible {
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.12),
			rgba(0, 0, 0, 0.04)
		),
		var(--color-orange);
	color: var(--color-white);
}

.compare-wp-plan-tab:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -3px;
}

.compare-wp-tab-panel[hidden] {
	display: none;
}

/* Individual plan tables */
.compare-wp-plan-block {
	position: relative;
	margin: 0 0 2rem;
	padding: 1.15rem;
	background:
		linear-gradient(145deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 62%, var(--color-bg-primary) 100%);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.065);
}

.compare-wp-plan-block::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange) 72%, var(--color-accent) 100%);
	border-radius: 16px 16px 0 0;
}

.compare-wp-plan-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.25rem;
	padding: 0.25rem 0.15rem 0.8rem;
}

.compare-wp-plan-heading h3 {
	margin: 0.12rem 0 0;
	font-family: var(--font-heading);
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-text-primary);
}

.compare-wp-plan-kicker {
	font-size: 0.76rem;
}

.compare-wp-back-link {
	flex-shrink: 0;
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
}

.compare-wp-scroll-hint {
	margin: 0 0 0.55rem;
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--color-text-muted);
}

.lp-scroll-wrap {
	width: 100%;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	border-radius: 13px;
	padding-top: 8px;
	scrollbar-color: var(--color-orange) var(--color-bg-secondary);
	scrollbar-width: thin;
}

.lp-scroll-wrap::-webkit-scrollbar {
	height: 10px;
}

.lp-scroll-wrap::-webkit-scrollbar-track {
	background: var(--color-bg-secondary);
	border-radius: 999px;
}

.lp-scroll-wrap::-webkit-scrollbar-thumb {
	background: linear-gradient(90deg, var(--color-orange), var(--color-accent));
	border-radius: 999px;
}

/* Table styling mirrors the homepage comparison table. */
.hustly-compare-lp-table {
	width: 100%;
	min-width: 1050px;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: 13px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.045);
	overflow: visible;
}

.hustly-compare-lp-table th,
.hustly-compare-lp-table td {
	position: relative;
	height: 46px;
	padding: 0.48rem 0.55rem;
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid rgba(5, 5, 5, 0.09);
	border-bottom: 1px solid rgba(5, 5, 5, 0.09);
}

.hustly-compare-lp-table th:last-child,
.hustly-compare-lp-table td:last-child {
	border-right: 0;
}

.hustly-compare-lp-table tbody tr:last-child td {
	border-bottom: 0;
}

.hustly-compare-lp-table th:first-child,
.hustly-compare-lp-table td:first-child {
	width: 175px;
}

.hustly-compare-lp-table th {
	height: 58px;
	background: var(--color-bg-tertiary);
	color: var(--color-text-primary);
	font-size: 1rem;
	font-weight: 700;
}

.hustly-compare-lp-table th.empty-cell {
	background: var(--color-bg-tertiary);
	border-radius: 13px 0 0 0;
}

.hustly-compare-lp-table th.wp-other-cell:last-child {
	border-radius: 0 13px 0 0;
}

.hustly-compare-lp-table th.hustly-cell {
	z-index: 3;
	background:
		linear-gradient(135deg, rgba(255,255,255,0.11), rgba(0,0,0,0.035)),
		var(--color-orange);
	color: var(--color-white);
	border-top: 2px solid var(--color-orange);
	border-left: 2px solid var(--color-orange);
	border-right: 2px solid var(--color-orange);
	border-bottom-color: rgba(255,255,255,0.28);
	font-size: 1.12rem;
}

.hustly-compare-lp-table th.hustly-cell::before {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	top: -7px;
	height: 8px;
	background:
		linear-gradient(135deg, rgba(255,255,255,0.11), rgba(0,0,0,0.035)),
		var(--color-orange);
	border: 2px solid var(--color-orange);
	border-bottom: 0;
	border-radius: 13px 13px 0 0;
}

.hustly-compare-lp-table tbody td:nth-child(2) {
	z-index: 2;
	border-left: 2px solid var(--color-orange);
	border-right: 2px solid var(--color-orange);
}

.hustly-compare-lp-table tbody tr:last-child td:nth-child(2) {
	border-bottom: 2px solid var(--color-orange);
	border-radius: 0 0 13px 13px;
}

.hostingplan-cell-subtext,
.hostingplan-cell-subtext-hustly {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.15;
}

.hostingplan-cell-subtext {
	color: var(--color-text-secondary);
}

.hostingplan-cell-subtext-hustly {
	color: var(--color-white);
}

.hustly-compare-lp-table td.hustly-comp-features {
	background: var(--color-bg-tertiary);
	color: var(--color-text-primary);
	font-weight: 700;
	text-align: left;
}

.cell-compare-subtext {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.compare-price-monthly td:first-child,
.compare-price-annual td:first-child {
	color: var(--color-text-primary);
}

.hustly-compare-lp-table td.green {
	background: #ecfbf3;
	color: var(--color-green-text);
}

.hustly-compare-lp-table td.green-orange {
	background: #eef9e8;
	color: var(--color-text-primary);
}

.hustly-compare-lp-table td.orange {
	background: #fff9dd;
	color: var(--color-text-primary);
}

.hustly-compare-lp-table td.red {
	background: #fce7e7;
	color: #b42318;
}

.hustly-compare-lp-table td.na {
	background: var(--color-bg-secondary);
	color: var(--color-text-secondary);
}

/* Table label tooltips contain explanatory UI copy, not hidden page sections. */
.hustly-comp-lp-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.hustly-comp-lp-tooltip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	background: var(--color-accent);
	color: var(--color-white);
	border-radius: 50%;
	font-size: 0.55rem;
	cursor: help;
}

.hustly-comp-lp-tooltip-text {
	position: absolute;
	z-index: 15;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	width: 210px;
	padding: 0.5rem 0.6rem;
	background: var(--color-text-primary);
	color: var(--color-white);
	border-radius: 7px;
	box-shadow: var(--box-shadow-card);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.35;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.18s ease;
}

.hustly-comp-lp-tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--color-text-primary);
}

.hustly-comp-lp-tooltip:hover .hustly-comp-lp-tooltip-text,
.hustly-comp-lp-tooltip:focus-within .hustly-comp-lp-tooltip-text {
	visibility: visible;
	opacity: 1;
}

/* Summary cards under each host group */
.compare-wp-feature-cards-wrap {
	padding: 0.7rem 0 0.4rem;
}

.compare-wp-feature-cards-wrap > h2 {
	font-size: 1.5em;
	text-align: center;
	margin-bottom: 1.5rem;
}

.compare-wp-feature-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.35rem;
}

.compare-wp-feature-card {
	position: relative;
	overflow: hidden;
	min-width: 0;
	padding: 1.4rem;
	background:
		linear-gradient(145deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 68%, var(--color-bg-primary) 100%);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: var(--box-shadow-card);
}

.compare-wp-feature-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange) 72%, var(--color-accent) 100%);
}

.compare-wp-feature-card-header {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.8rem;
}

.compare-wp-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	background: var(--color-white);
	color: var(--color-orange);
	border: 1px solid var(--color-border);
	border-radius: 11px;
	box-shadow: var(--box-shadow-card);
}

.compare-wp-feature-icon svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.compare-wp-feature-card h3 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text-primary);
}

.compare-wp-feature-card p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.62;
	color: var(--color-text-secondary);
}

.compare-wp-feature-card strong {
	color: var(--color-text-primary);
}

/* Bottom question / answer sections */
.compare-wp-answer-section {
	position: relative;
	overflow: hidden;
	padding: 2.75rem 0;
}

.compare-wp-answer-section-alt {
	margin-left: 0;
	margin-right: 0;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border-radius: 18px;
	background:
		radial-gradient(circle at 92% 18%, rgba(220,130,46,0.08), transparent 24%),
		radial-gradient(circle at 8% 82%, rgba(143,39,166,0.055), transparent 25%),
		linear-gradient(145deg, var(--color-bg-secondary), var(--color-bg-primary));
}

.compare-wp-answer-header {
	margin-bottom: 2rem;
}

.compare-wp-answer-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem 2.3rem;
	align-items: start;
}

.compare-wp-answer-item {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	min-width: 0;
}

.compare-wp-answer-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.68);
}

.compare-wp-answer-icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.compare-wp-answer-icon.icon-purple { color: #8154c7; background: #f0eafd; }
.compare-wp-answer-icon.icon-green  { color: #2f9c63; background: #e5f5eb; }
.compare-wp-answer-icon.icon-red    { color: #de4d5d; background: #fde9ec; }
.compare-wp-answer-icon.icon-blue   { color: #3183d7; background: #e5f1fc; }
.compare-wp-answer-icon.icon-orange { color: #dc822e; background: #fff0e2; }
.compare-wp-answer-icon.icon-teal   { color: #169b93; background: #e1f5f3; }

.compare-wp-answer-item h3 {
	margin: 0 0 0.35rem;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text-primary);
}

.compare-wp-answer-item p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.58;
	color: var(--color-text-secondary);
}

.compare-wp-answer-item strong {
	font-weight: 700;
	color: var(--color-text-primary);
}

.compare-wp-answer-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	width: fit-content;
	max-width: 100%;
	margin: 2.25rem auto 0;
	padding: 0.75rem 1.25rem;
	background: rgba(255,255,255,0.78);
	border: 1px solid rgba(255,255,255,0.96);
	border-radius: 999px;
	box-shadow: 0 7px 20px rgba(0,0,0,0.065);
	color: var(--color-text-secondary);
	font-size: 0.95rem;
	text-align: center;
}

.compare-wp-answer-footer > span:first-child {
	color: var(--color-orange);
	font-size: 1.15rem;
	line-height: 1;
}

.compare-wp-answer-footer strong {
	color: var(--color-orange);
}

/* Final CTA */
.compare-wp-final-cta {
	max-width: 900px;
	margin: 0 auto;
	padding: 1em 0;
	text-align: center;
}

.compare-wp-final-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	margin-top: 1.35rem;
}

.compare-wp-final-actions .btn-primary {
	padding: 0.55rem 1.25rem;
	font-size: 1.25rem;
}

.compare-wp-final-actions .btn-secondary {
	font-size: 1rem;
}

@media screen and (max-width: 1100px) {
	.compare-wp-feature-cards,
	.compare-wp-answer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 991px) {
	.compare-wp-hero {
		padding: 2.4rem 0 1.8rem;
	}

	.compare-wp-answer-section-alt {
		margin-left: 0;
		margin-right: 0;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.compare-wp-comparison-section {
		padding-top: 0.9rem;
	}

	.compare-wp-plan-block {
		padding: 1rem 0.75rem 0.8rem;
		border-radius: 14px;
	}

	.compare-wp-plan-heading {
		padding-left: 0.15rem;
		padding-right: 0.15rem;
	}
}

@media screen and (max-width: 700px) {
	h1.compare-wp-page-title {
		font-size: 2rem;
	}

	.compare-wp-hero-copy,
	.compare-wp-section-header p,
	.compare-wp-answer-header p {
		font-size: 1rem;
	}

	.compare-wp-jump-nav {
		gap: 0.5rem;
	}

	.compare-wp-jump-nav a {
		font-size: 0.84rem;
		padding: 0.5rem 0.7rem;
	}

	.compare-wp-plan-tabs {
		width: 100%;
		margin-top: 1rem;
		margin-bottom: 1.2rem;
	}

	.compare-wp-plan-tab {
		padding: 0.55rem 0.4rem;
		font-size: 0.88rem;
	}

	.compare-wp-plan-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.35rem;
	}

	.compare-wp-plan-heading h3 {
		font-size: 1.15rem;
	}

	.compare-wp-feature-cards,
	.compare-wp-answer-grid {
		grid-template-columns: 1fr;
	}

	.compare-wp-answer-section {
		padding-top: 2.1rem;
		padding-bottom: 2.1rem;
	}

	.compare-wp-answer-grid {
		gap: 1.45rem;
	}

	.compare-wp-answer-item {
		grid-template-columns: 50px minmax(0, 1fr);
		gap: 0.85rem;
	}

	.compare-wp-answer-icon {
		width: 48px;
		height: 48px;
	}

	.compare-wp-answer-icon svg {
		width: 22px;
		height: 22px;
	}

	.compare-wp-answer-footer {
		width: 100%;
		border-radius: 14px;
		padding: 0.8rem 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.compare-wp-jump-nav a,
	.compare-wp-plan-tab {
		transition: none;
	}
}

/*--------------------------------------------------------------
# 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;
    }
}


/* ==========================================================
   Documentation Page
   ========================================================== */

.documentation-page {
	position: relative;
	padding: 0;
	margin-bottom: 0;

	background:
		linear-gradient(
			180deg,
			var(--color-bg-secondary) 0,
			var(--color-bg-primary) 320px
		);

	color: var(--color-text-primary);
}


/* ==========================================================
   Documentation Hero
   ========================================================== */

.documentation-hero {
	position: relative;

	overflow: hidden;

	border-bottom: 1px solid var(--color-divider);
}


/* Orange glow */

.documentation-hero::before {
	content: "";

	position: absolute;

	top: -250px;
	right: 5%;

	width: 520px;
	height: 520px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			var(--color-orange) 0%,
			transparent 70%
		);

	opacity: 0.11;

	pointer-events: none;
}


/* Purple glow */

.documentation-hero::after {
	content: "";

	position: absolute;

	left: 40%;
	bottom: -210px;

	width: 340px;
	height: 340px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			var(--color-accent) 0%,
			transparent 70%
		);

	opacity: 0.07;

	pointer-events: none;
}


.documentation-hero-inner {
	position: relative;

	z-index: 1;

	width: 100%;

	margin: 0;

	padding: 2em 12.5% 2em 12.5%;
}


.documentation-title {
	margin: 0;

	font-family: var(--font-heading);

	font-size: 2em;

	font-weight: 700;

	line-height: 1.05;

	letter-spacing: -0.03em;

	color: var(--color-orange);
}


/* ==========================================================
   Main Layout
   ========================================================== */

.documentation-layout {
	display: grid;

	grid-template-columns:
		240px
		minmax(0, 1fr);

	gap: 2.5rem;

	width: 100%;

	margin: 0;

	padding: 3rem 12.5% 4.5rem;
}


/* ==========================================================
   Sidebar
   ========================================================== */

.documentation-sidebar {
	min-width: 0;
}


.documentation-nav {
	position: sticky;

	top: 100px;

	padding: 1.25rem;

	background:
		linear-gradient(
			145deg,
			var(--color-bg-secondary),
			var(--color-white)
		);

	border: 1px solid var(--color-border);

	border-radius: 14px;

	box-shadow: var(--box-shadow-card);
}


.documentation-nav-label {
	display: block;

	margin-bottom: 0.9rem;

	font-family: var(--font-heading);

	font-size: 0.78rem;

	font-weight: 700;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	color: var(--color-accent);
}


.documentation-nav ul {
	display: flex;

	flex-direction: column;

	gap: 0.2rem;

	margin: 0;

	padding: 0;

	list-style: none;
}


.documentation-nav li {
	margin: 0;

	padding: 0;
}


.documentation-nav a {
	display: block;

	padding: 0.7rem 0.75rem;

	border-radius: 8px;

	font-family: var(--font-body);

	font-size: 0.92rem;

	font-weight: 600;

	line-height: 1.35;

	color: var(--color-text-secondary);

	text-decoration: none;

	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease;
}


.documentation-nav a:hover,
.documentation-nav a:focus {
	background: var(--color-white);

	color: var(--color-accent);

	transform: translateX(3px);
}


/* ==========================================================
   Documentation Sections
   ========================================================== */

.documentation-sections {
	display: flex;

	flex-direction: column;

	gap: 1.5rem;

	min-width: 0;
}


.documentation-section {
	position: relative;

	overflow: hidden;

	scroll-margin-top: 110px;

	background:
		linear-gradient(
			135deg,
			var(--color-bg-secondary) 0%,
			var(--color-white) 58%
		);

	border: 1px solid var(--color-border);

	border-radius: 14px;

	box-shadow: var(--box-shadow-card);
}


/* Subtle brand line */

.documentation-section::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 4px;

	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 72%,
			var(--color-accent) 100%
		);
}


/* ==========================================================
   Section Header
   ========================================================== */

.documentation-section-header {
	display: flex;

	align-items: center;

	gap: 1rem;

	padding: 1.35rem 1.5rem 1.15rem;

	border-bottom: 1px solid var(--color-divider);
}


.documentation-section-number {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	flex: 0 0 auto;

	width: 40px;
	height: 40px;

	background: var(--color-white);

	border: 1px solid var(--color-border);

	border-radius: 10px;

	box-shadow: var(--box-shadow-card);

	font-family: var(--font-heading);

	font-size: 0.82rem;

	font-weight: 700;

	color: var(--color-orange);
}


.documentation-section-header h2 {
	margin: 0;

	font-family: var(--font-heading);

	font-size: 1.25rem;

	font-weight: 700;

	line-height: 1.35;

	color: var(--color-text-primary);
}


/* ==========================================================
   Article List
   ========================================================== */

.documentation-links {
	margin: 0;

	padding: 0;

	list-style: none;
}


.documentation-links li {
	margin: 0;

	padding: 0;

	border-bottom: 1px solid var(--color-border);
}


.documentation-links li:last-child {
	border-bottom: 0;
}


.documentation-links a {
	display: grid;

	grid-template-columns:
		42px
		minmax(0, 1fr)
		28px;

	align-items: center;

	gap: 0.75rem;

	min-height: 58px;

	padding: 0.65rem 1.25rem;

	color: var(--color-text-primary);

	text-decoration: none;

	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		padding-left 0.18s ease;
}


/* Item number */

.documentation-link-number {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 30px;
	height: 30px;

	border-radius: 8px;

	background: var(--color-bg-secondary);

	font-family: var(--font-heading);

	font-size: 0.76rem;

	font-weight: 700;

	color: var(--color-orange);
}


.documentation-link-text {
	min-width: 0;

	font-family: var(--font-body);

	font-size: 1rem;

	font-weight: 600;

	line-height: 1.4;
}


.documentation-link-arrow {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	font-size: 1.2rem;

	font-weight: 700;

	color: var(--color-accent);

	transition: transform 0.18s ease;
}


/* ==========================================================
   List Hover
   ========================================================== */

.documentation-links a:hover,
.documentation-links a:focus {
	background:
		linear-gradient(
			90deg,
			var(--color-white) 0%,
			var(--color-bg-secondary) 100%
		);

	color: var(--color-accent);

	padding-left: 1.4rem;
}


.documentation-links a:hover .documentation-link-arrow,
.documentation-links a:focus .documentation-link-arrow {
	transform: translateX(4px);
}


.documentation-links a:focus-visible {
	outline: 2px solid var(--color-accent);

	outline-offset: -2px;
}


/* ==========================================================
   Tablet
   ========================================================== */

@media screen and (max-width: 991px) {

	.documentation-hero-inner {
		padding: 2em 2.5%;
	}


	.documentation-layout {
		display: block;

		padding: 2rem 5% 3.5rem;
	}


	.documentation-sidebar {
		margin-bottom: 1.5rem;
	}


	.documentation-nav {
		position: static;

		padding: 1rem;

		overflow-x: auto;
	}


	.documentation-nav-label {
		margin-bottom: 0.7rem;
	}


	.documentation-nav ul {
		flex-direction: row;

		gap: 0.5rem;

		width: max-content;
	}


	.documentation-nav a {
		padding: 0.6rem 0.85rem;

		background: var(--color-white);

		border: 1px solid var(--color-border);

		white-space: nowrap;
	}


	.documentation-nav a:hover,
	.documentation-nav a:focus {
		transform: none;
	}

}


/* ==========================================================
   Mobile
   ========================================================== */

@media screen and (max-width: 620px) {

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


	.documentation-sections {
		gap: 1rem;
	}


	.documentation-section {
		border-radius: 12px;
	}


	.documentation-section-header {
		align-items: flex-start;

		padding: 1.1rem;
	}


	.documentation-section-number {
		width: 36px;
		height: 36px;

		border-radius: 8px;
	}


	.documentation-section-header h2 {
		font-size: 1.08rem;
	}


	.documentation-links a {
		grid-template-columns:
			32px
			minmax(0, 1fr)
			20px;

		gap: 0.65rem;

		min-height: 54px;

		padding:
			0.7rem
			0.8rem;
	}


	.documentation-link-number {
		width: 28px;
		height: 28px;

		font-size: 0.7rem;
	}


	.documentation-link-text {
		font-size: 0.94rem;
	}


	.documentation-links a:hover,
	.documentation-links a:focus {
		padding-left: 0.8rem;
	}



}


/* ==========================================================
   Reduced motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.documentation-nav a,
	.documentation-links a,
	.documentation-link-arrow {
		transition: none;
	}

}


/* ==========================================================
   Resource Center
   ========================================================== */

.resource-center-page {
	padding: 0;
	margin-bottom: 0;
	background: var(--color-bg-primary);
}


/* ==========================================================
   Resource Center Hero
   ========================================================== */

.resource-center-hero {
	position: relative;
	overflow: hidden;

	background: var(--color-bg-secondary);

	border-bottom: 1px solid var(--color-divider);
}


/* Subtle branded background decoration */

.resource-center-hero::before {
	content: "";

	position: absolute;

	width: 420px;
	height: 420px;

	top: -290px;
	right: 7%;

	border-radius: 50%;

	background: var(--color-orange);

	opacity: 0.08;
}


.resource-center-hero::after {
	content: "";

	position: absolute;

	width: 240px;
	height: 240px;

	right: 25%;
	bottom: -190px;

	border-radius: 50%;

	background: var(--color-accent);

	opacity: 0.06;
}


.resource-center-hero-inner {
	position: relative;

	z-index: 1;

	width: 100%;

	margin: 0;

	padding: 4rem 12.5% 3.75rem;
}


.resource-center-eyebrow {
	display: inline-block;

	margin-bottom: 0.6rem;

	font-family: var(--font-body);

	font-size: 0.85rem;
	font-weight: 700;

	letter-spacing: 0.08em;

	color: var(--color-accent);
}


.resource-center-title {
	margin: 0 0 0.8rem;

	max-width: 800px;

	font-family: var(--font-heading);

	font-size: clamp(2.6rem, 4vw, 3.8rem);

	font-weight: 700;

	line-height: 1.05;

	letter-spacing: -0.03em;

	color: var(--color-orange);
}


.resource-center-intro {
	max-width: 690px;

	margin: 0;

	font-family: var(--font-body);

	font-size: 1.1rem;

	line-height: 1.65;

	color: var(--color-text-secondary);
}


/* ==========================================================
   Resource Grid
   ========================================================== */

.resource-center-content {
	width: 100%;

	margin: 0;

	padding: 3rem 12.5% 4.5rem;
}


.resource-center-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 1.5rem;
}


/* ==========================================================
   Resource Card
   ========================================================== */

.resource-card {
	position: relative;

	display: flex;

	flex-direction: column;

	min-height: 275px;

	padding: 1.65rem;

	overflow: hidden;

	background: var(--color-bg-secondary);

	border: 1px solid var(--color-border);

	border-radius: 14px;

	box-shadow: var(--box-shadow-card);

	color: var(--color-text-primary);

	text-decoration: none;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}


/* Orange → purple brand line */

.resource-card::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 4px;

	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 70%,
			var(--color-accent) 100%
		);
}


/* Very subtle glow in corner */

.resource-card::after {
	content: "";

	position: absolute;

	width: 140px;
	height: 140px;

	top: -90px;
	right: -75px;

	border-radius: 50%;

	background: var(--color-orange);

	opacity: 0.06;

	pointer-events: none;
}


/* ==========================================================
   Card Content
   ========================================================== */

.resource-card-label {
	position: relative;

	z-index: 1;

	display: inline-block;

	align-self: flex-start;

	margin-bottom: 0.8rem;

	font-family: var(--font-body);

	font-size: 0.76rem;

	font-weight: 700;

	letter-spacing: 0.08em;

	color: var(--color-accent);
}


.resource-card-title {
	position: relative;

	z-index: 1;

	margin: 0 0 0.7rem;

	font-family: var(--font-heading);

	font-size: 1.4rem;

	font-weight: 700;

	line-height: 1.25;

	color: var(--color-text-primary);
}


.resource-card-description {
	position: relative;

	z-index: 1;

	margin: 0 0 1.6rem;

	font-family: var(--font-body);

	font-size: 1rem;

	line-height: 1.6;

	color: var(--color-text-secondary);
}


.resource-card-link {
	position: relative;

	z-index: 1;

	display: inline-flex;

	align-items: center;

	gap: 0.4rem;

	margin-top: auto;

	font-family: var(--font-body);

	font-size: 1rem;

	font-weight: 700;

	color: var(--color-accent);
}


.resource-card-arrow {
	display: inline-block;

	font-size: 1.2rem;

	line-height: 1;

	transition: transform 0.2s ease;
}


/* ==========================================================
   Hover
   ========================================================== */

.resource-card:hover,
.resource-card:focus {
	color: var(--color-text-primary);

	border-color: var(--color-divider);

	transform: translateY(-4px);

	box-shadow:
		0 10px 26px rgba(0, 0, 0, 0.12);
}


.resource-card:hover .resource-card-arrow,
.resource-card:focus .resource-card-arrow {
	transform: translateX(4px);
}


.resource-card:focus-visible {
	outline: 2px solid var(--color-accent);

	outline-offset: 3px;
}


/* ==========================================================
   Tablet
   ========================================================== */

@media screen and (max-width: 991px) {

	.resource-center-hero-inner {
		padding: 3rem 5%;
	}


	.resource-center-content {
		padding: 2rem 5% 3.5rem;
	}


	.resource-center-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* ==========================================================
   Mobile
   ========================================================== */

@media screen and (max-width: 620px) {

	.resource-center-title {
		font-size: 2.2rem;
	}


	.resource-center-intro {
		font-size: 1rem;
	}


	.resource-center-grid {
		grid-template-columns: 1fr;

		gap: 1rem;
	}


	.resource-card {
		min-height: 0;

		padding: 1.4rem;

		border-radius: 12px;
	}


	.resource-card-description {
		margin-bottom: 1.2rem;
	}

}


/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.resource-card,
	.resource-card-arrow {
		transition: none;
	}

}
/*--------------------------------------------------------------
# Hosting Lifecycle / Scale Section
--------------------------------------------------------------*/
.hosting-lifecycle-section {
	position: relative;
	overflow: hidden;
	padding: 1.75rem 0 1.5rem;
	background: var(--color-bg-primary);
}

.hosting-lifecycle-section::after {
	content: "";
	position: absolute;
	right: -7rem;
	bottom: -10rem;
	width: 28rem;
	height: 20rem;
	border-radius: 50%;
	background:
		radial-gradient(circle at 42% 38%, rgba(143, 39, 166, 0.09) 0 17%, transparent 18%),
		radial-gradient(circle at 62% 45%, rgba(220, 130, 46, 0.12) 0 22%, transparent 23%),
		linear-gradient(145deg, rgba(247, 243, 252, 0.75), rgba(255, 225, 208, 0.48));
	transform: rotate(-8deg);
	pointer-events: none;
}

.hosting-lifecycle-inner {
	position: relative;
	z-index: 1;
}

.hosting-lifecycle-header {
	margin: 0 auto 2.2rem;
	text-align: center;
}

.hosting-lifecycle-title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.035em;
	color: var(--color-text-primary);
	margin: 0 0 0.55rem;
}

.hosting-lifecycle-title span {
	color: var(--color-orange);
}

.hosting-lifecycle-intro {
	margin: 0 auto;
	font-size: 1.08rem;
	line-height: 1.55;
	color: var(--color-text-secondary);
}

.hosting-lifecycle-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem 2.5rem;
	align-items: start;
}

.hosting-lifecycle-item {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	min-width: 0;
}

.hosting-lifecycle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
}

.hosting-lifecycle-icon svg {
	width: 27px;
	height: 27px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hosting-lifecycle-icon.icon-purple { color: #8154c7; background: #f0eafd; }
.hosting-lifecycle-icon.icon-green  { color: #2f9c63; background: #e5f5eb; }
.hosting-lifecycle-icon.icon-red    { color: #de4d5d; background: #fde9ec; }
.hosting-lifecycle-icon.icon-blue   { color: #3183d7; background: #e5f1fc; }
.hosting-lifecycle-icon.icon-orange { color: #dc822e; background: #fff0e2; }
.hosting-lifecycle-icon.icon-teal   { color: #169b93; background: #e1f5f3; }

.hosting-lifecycle-item h3 {
	margin: 0 0 0.35rem;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text-primary);
}

.hosting-lifecycle-item p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--color-text-secondary);
}

.hosting-lifecycle-item strong {
	font-weight: 700;
	color: var(--color-text-primary);
}

.hosting-lifecycle-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	width: fit-content;
	max-width: 100%;
	margin: 2.35rem auto 0;
	padding: 0.75rem 1.25rem;
	background: rgba(255,255,255,0.72);
	border: 1px solid rgba(255,255,255,0.95);
	border-radius: 999px;
	box-shadow: 0 7px 20px rgba(0,0,0,0.07);
	color: var(--color-text-secondary);
	font-size: 0.95rem;
	text-align: center;
}

.hosting-lifecycle-footer strong {
	color: var(--color-orange);
}

.hosting-lifecycle-heart {
	color: var(--color-orange);
	font-size: 1.15rem;
	line-height: 1;
}

@media screen and (max-width: 1100px) {
	.hosting-lifecycle-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 700px) {
	.hosting-lifecycle-section {
		padding: 1em 0 2em 0;
	}

	.hosting-lifecycle-header {
		margin-bottom: 1.65rem;
	}

	.hosting-lifecycle-title {
		font-size: 1.7rem;
	}

	.hosting-lifecycle-intro {
		font-size: 1rem;
	}

	.hosting-lifecycle-grid {
		grid-template-columns: 1fr;
		gap: 1.45rem;
	}

	.hosting-lifecycle-item {
		grid-template-columns: 50px minmax(0, 1fr);
		gap: 0.85rem;
	}

	.hosting-lifecycle-icon {
		width: 48px;
		height: 48px;
	}

	.hosting-lifecycle-icon svg {
		width: 23px;
		height: 23px;
	}

	.hosting-lifecycle-footer {
		width: 100%;
		border-radius: 14px;
		padding: 0.8rem 1rem;
	}
}


/* ==========================================================
   BLOG ARCHIVE
   Append this block after the existing archive styles.
   ========================================================== */

.archive-main {
	background: var(--color-bg-primary);
}

.archive-banner {
	position: relative;
	overflow: hidden;
	padding: 3.2rem 0 2.8rem;
	background:transparent;
}

.archive-banner::before {
	content: "";
	position: absolute;
	top: -300px;
	right: 4%;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: var(--color-orange);
	opacity: 0.075;
	pointer-events: none;
}

.archive-banner::after {
	content: "";
	position: absolute;
	right: 30%;
	bottom: -210px;
	width: 270px;
	height: 270px;
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0.05;
	pointer-events: none;
}

.archive-banner-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 0 12.5%;
}

.archive-eyebrow {
	display: block;
	margin-bottom: 0.55rem;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-orange);
}

.archive-type {
	display: inline-flex;
	align-items: center;
	margin: 0 0 0.75rem;
	padding: 0.38rem 0.65rem;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.045);
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.archive-title {
	max-width: 1000px;
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(2.2rem, 4vw, 3.5rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.03em;
	color: var(--color-text-primary);
}

.archive-description {
	max-width: 820px;
	margin: 0.85rem 0 0;
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--color-text-secondary);
}

.archive-description p {
	margin: 0;
}

.archive-content-section {
	padding: 3rem 0 4.5rem;
	background:
		linear-gradient(
			180deg,
			var(--color-bg-primary) 0%,
			var(--color-bg-secondary) 100%
		);
}

.archive-content-inner {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	width: 100%;
	margin: 0;
	padding: 0;
}

.archive-posts {
	flex: 1;
	min-width: 0;
}

.posts-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.post-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	background:
		linear-gradient(
			145deg,
			var(--color-bg-tertiary) 0%,
			var(--color-bg-primary) 100%
		);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: var(--box-shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 4px;
	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 72%,
			var(--color-accent) 100%
		);
}

.post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.11);
}

.post-card-thumbnail {
	display: block;
	width: 100%;
	height: 210px;
	overflow: hidden;
	background: var(--color-bg-secondary);
}

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

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

.post-card-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.35rem 1.4rem 1.45rem;
}

.post-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	margin-bottom: 0.75rem;
}

.post-card-categories {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
}

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

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

.post-card-category-separator {
	color: var(--color-divider);
}

.post-card-date {
	flex-shrink: 0;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

.post-card-title {
	margin: 0 0 0.65rem;
	font-family: var(--font-heading);
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.38;
}

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

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

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

.post-card-readmore {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	width: fit-content;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
}

.post-card-readmore span {
	transition: transform 0.18s ease;
}

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

.post-card-readmore:hover span,
.post-card-readmore:focus span {
	transform: translateX(3px);
}

.archive-sidebar {
	flex: 0 0 300px;
	width: 300px;
}

.sidebar-widget {
	position: relative;
	overflow: hidden;
	margin: 0 0 1.25rem;
	padding: 1.3rem;
	background:
		linear-gradient(
			145deg,
			var(--color-bg-secondary) 0%,
			var(--color-bg-tertiary) 100%
		);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--box-shadow-card);
}

.sidebar-widget::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 72%,
			var(--color-accent) 100%
		);
}

.sidebar-title {
	margin: 0 0 1rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--color-divider);
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text-primary);
}

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

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

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

.sidebar-categories a {
	font-family: var(--font-body);
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--color-text-primary);
	text-decoration: none;
}

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

.cat-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 0.45rem;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-text-muted);
}

.archive-main .recent-posts-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.archive-main .recent-post-item {
	display: flex;
	gap: 0.8rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--color-divider);
}

.archive-main .recent-post-item:first-child {
	padding-top: 0;
}

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

.archive-main .recent-post-thumbnail {
	flex: 0 0 72px;
	width: 72px;
	height: 54px;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: var(--box-shadow-card);
}

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

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

.archive-main .recent-post-title {
	margin: 0 0 0.35rem;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.35;
}

.archive-main .recent-post-title a {
	color: var(--color-text-primary);
	text-decoration: none;
}

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

.archive-main .recent-post-readmore {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
}

.archive-pagination {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

.archive-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
}

.archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75rem;
	background: var(--color-bg-tertiary);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
}

.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers:focus,
.archive-pagination .page-numbers.current {
	background: var(--color-accent);
	color: var(--color-white);
	border-color: var(--color-accent);
}

.no-posts {
	position: relative;
	overflow: hidden;
	padding: 2.5rem;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: var(--box-shadow-card);
	text-align: center;
}

.no-posts::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange) 72%, var(--color-accent) 100%);
}

.no-posts-kicker {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-orange);
}

.no-posts h2 {
	margin: 0 0 0.45rem;
	font-size: 1.45rem;
	color: var(--color-text-primary);
}

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

@media screen and (min-width: 992px) {
	.archive-sidebar {
		position: sticky;
		top: 100px;
	}
}

@media screen and (max-width: 1100px) and (min-width: 992px) {
	.archive-banner-inner,
	.archive-content-inner {
		padding-left: 7%;
		padding-right: 7%;
	}
}

@media screen and (max-width: 991px) {
	.archive-banner {
		padding: 2.4rem 0 2rem;
	}

	.archive-banner-inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.archive-content-section {
		padding: 2rem 0 3.5rem;
	}

	.archive-content-inner {
		flex-direction: column;
		gap: 1.75rem;
	}

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

@media screen and (max-width: 700px) {
	.posts-grid {
		grid-template-columns: 1fr;
	}

	.archive-title {
		font-size: 2rem;
	}

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

	.post-card-meta {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.3rem;
	}
}


/* ==========================================================
   LEGAL PAGES
   ========================================================== */

.legal-main {
	background: var(--color-bg-primary);
}

.legal-banner {
	position: relative;
	overflow: hidden;
	padding: 3.2rem 0 2.7rem;
	background:
		linear-gradient(
			135deg,
			var(--color-bg-secondary) 0%,
			var(--color-bg-primary) 100%
		);
	border-bottom: 1px solid var(--color-divider);
}

.legal-banner::before {
	content: "";
	position: absolute;
	top: -310px;
	right: 6%;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: var(--color-orange);
	opacity: 0.07;
	pointer-events: none;
}

.legal-banner::after {
	content: "";
	position: absolute;
	right: 30%;
	bottom: -200px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0.045;
	pointer-events: none;
}

.legal-banner-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 0 12.5%;
}

.legal-eyebrow {
	display: block;
	margin-bottom: 0.55rem;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-orange);
}

.legal-title {
	max-width: 1000px;
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.03em;
	color: var(--color-text-primary);
}

.legal-content-section {
	padding: 3rem 0 4.5rem;
	background:
		linear-gradient(
			180deg,
			var(--color-bg-primary) 0%,
			var(--color-bg-secondary) 100%
		);
}

.legal-content-inner {
	width: 100%;
	margin: 0;
}

.legal-effective-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-content-card {
	position: relative;
	overflow: hidden;
	max-width: 1100px;
	margin: 0 auto;
	padding: 2.4rem 2.6rem;
	background:
		linear-gradient(
			145deg,
			var(--color-bg-tertiary) 0%,
			var(--color-bg-primary) 100%
		);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: var(--box-shadow-card);
}

.legal-content-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background:
		linear-gradient(
			90deg,
			var(--color-orange) 0%,
			var(--color-orange) 72%,
			var(--color-accent) 100%
		);
}

.legal-content.entry-content {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.02rem;
	line-height: 1.8;
	color: var(--color-text-primary);
}

.legal-content > *:first-child {
	margin-top: 0;
}

.legal-content > *:last-child {
	margin-bottom: 0;
}

.legal-content p {
	margin: 0 0 1.4rem;
}

.legal-content h2,
.legal-content h3,
.legal-content h4,
.legal-content h5 {
	margin: 2rem 0 0.75rem;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text-primary);
}

.legal-content h2 {
	font-size: 1.65rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--color-divider);
}

.legal-content h3 {
	font-size: 1.35rem;
}

.legal-content h4 {
	font-size: 1.15rem;
}

.legal-content ul,
.legal-content ol {
	margin: 0.8rem 0 1.5rem 1.5rem;
	padding: 0;
}

.legal-content ul {
	list-style: disc;
}

.legal-content ol {
	list-style: decimal;
}

.legal-content li {
	margin-bottom: 0.5rem;
	padding-left: 0.2rem;
}

.legal-content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.legal-content a:hover,
.legal-content a:focus {
	color: var(--color-accent-hover);
}

.legal-content blockquote {
	margin: 1.6rem 0;
	padding: 1rem 1.2rem;
	background: var(--color-bg-secondary);
	border-left: 4px solid var(--color-orange);
	border-radius: 0 10px 10px 0;
}

.legal-content blockquote p:last-child {
	margin-bottom: 0;
}

.legal-content table {
	width: 100%;
	margin: 1.5rem 0;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	overflow: hidden;
}

.legal-content th,
.legal-content td {
	padding: 0.8rem;
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.legal-content th {
	background: var(--color-bg-secondary);
	font-weight: 700;
}

.legal-content tr:last-child td {
	border-bottom: 0;
}

.legal-content th:last-child,
.legal-content td:last-child {
	border-right: 0;
}

.legal-content hr {
	margin: 2rem 0;
	border: 0;
	border-top: 1px solid var(--color-divider);
}

.legal-content .page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--color-divider);
}

.page-links-label {
	font-weight: 700;
	color: var(--color-text-primary);
}

@media screen and (max-width: 991px) {
	.legal-banner {
		padding: 2.4rem 0 2rem;
	}

	.legal-banner-inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.legal-content-section {
		padding: 2rem 0 3.5rem;
	}

	.legal-content-card {
		padding: 1.8rem 1.6rem;
	}
}

@media screen and (max-width: 620px) {
	.legal-title {
		font-size: 2rem;
	}

	.legal-content-card {
		padding: 1.5rem 1.2rem;
		border-radius: 12px;
	}

	.legal-content.entry-content {
		font-size: 1rem;
	}

	.legal-content h2 {
		font-size: 1.4rem;
	}

	.legal-content h3 {
		font-size: 1.2rem;
	}

	.legal-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.post-card,
	.post-card-thumbnail img,
	.post-card-readmore span {
		transition: none;
	}
}