/* appiappi-client-login */
/**
 * Header widget (email + avatar dropdown), the guest "Sign in with
 * Google" button, the gated-page sign-in card, and the sign-in error
 * banner. Uses the theme's own design tokens (--space-*, --radius-*,
 * --color-*) so it matches the rest of the site without its own theme.
 */

.client-login-google-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.client-login-google-btn__logo {
	flex-shrink: 0;
}

.client-login-not-configured {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* Persistent top-bar guest state while sign-in isn't offered yet
   (context 'header', see appiappi_client_login_render_header_widget())
   — both the plain text/button and the person-icon toggle are always
   in the DOM; only one is ever visible, picked by the exact same
   1024px breakpoint the theme's own primary-nav/hamburger swap uses
   (layout.css), so this never disagrees with what a visitor's screen
   already shows for site navigation. */
@media (max-width: 1023.98px) {
	.client-login-header-signin {
		display: none;
	}
}

@media (min-width: 1024px) {
	.header-actions > .client-login-mobile-toggle {
		display: none;
	}
}

/* ---------- Logged-in header widget ---------- */

.client-login-widget {
	position: relative;
}

.client-login-widget__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: none;
	border: none;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-neutral-800);
	cursor: pointer;
}

.client-login-widget__trigger:hover,
.client-login-widget__trigger[aria-expanded="true"] {
	background: var(--color-bg-subtle);
}

.client-login-widget__avatar {
	width: 28px;
	height: 28px;
	padding: 5px;
	border-radius: var(--radius-full);
	background: var(--color-primary-50);
	color: var(--color-primary);
	flex-shrink: 0;
}

.client-login-widget__email {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.client-login-widget__caret {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform var(--transition-base);
}

.client-login-widget__trigger[aria-expanded="true"] .client-login-widget__caret {
	transform: rotate(180deg);
}

.client-login-widget__menu {
	position: absolute;
	top: calc(100% + var(--space-2));
	right: 0;
	min-width: 200px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: var(--space-2);
	display: none;
	z-index: 50;
}

.client-login-widget__menu.is-open {
	display: block;
}

.client-login-widget__menu a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
}

.client-login-widget__menu a:hover {
	background: var(--color-bg-subtle);
	text-decoration: none;
}

.client-login-widget__menu a svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.client-login-widget__logout {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-1);
}

/* Inside the mobile slide-out nav panel, expand inline instead of
   floating — a full-width tap target and an inline menu read better in
   a narrow panel than a small floating dropdown would. */
@media (max-width: 1023.98px) {
	.mobile-nav__actions .client-login-widget {
		width: 100%;
	}

	.mobile-nav__actions .client-login-widget__trigger {
		width: 100%;
		justify-content: space-between;
		border: 1px solid var(--color-border);
		padding: var(--space-3);
	}

	.mobile-nav__actions .client-login-widget__menu {
		position: static;
		box-shadow: none;
		border: none;
		padding: 0;
		margin-top: var(--space-2);
	}

	/* The desktop top-bar instance (.header-actions), by contrast, has to
	   share a single cramped row with the logo and hamburger toggle —
	   collapses to just the avatar icon instead (was showing the full
	   email unclipped here, which could overflow the viewport on a long
	   address; the dropdown menu still shows the full email once opened,
	   only the closed trigger's label is hidden). */
	.header-actions .client-login-widget__email,
	.header-actions .client-login-widget__caret {
		display: none;
	}

	.header-actions .client-login-widget__trigger {
		padding: var(--space-2);
	}

	.header-actions .client-login-widget__menu {
		right: calc(-1 * var(--space-2));
	}
}

/* ---------- Mobile guest person-icon toggle ---------- */
/* Rendered only in the mobile nav panel, only while sign-in isn't
   actually being offered (appiappi_client_login_is_enabled() false) —
   see appiappi_client_login_render_mobile_guest_toggle(). Collapses
   what would otherwise be a permanent row of "not set up yet" text
   into a single icon, revealed on demand.

   Fixed 2026-09-13: the trigger's icon colour used to reference
   --color-neutral-700, which was never actually defined anywhere in
   tokens.css (the scale only goes …600, 800, 900) — a silently-invalid
   custom property falls back to inherited/initial, so the icon was
   rendering in whatever dark text colour it inherited instead of
   looking deliberately greyed-out/disabled as intended. Now uses
   --color-neutral-400 (an actual token, clearly muted) and — since this
   icon represents a feature that ISN'T active yet — stays that same
   grey in every state, including hover/expanded, rather than switching
   to the primary brand colour the way a normal enabled control would;
   only the background gets a faint hover/expanded tint, entirely within
   the same neutral/grey family, as tactile feedback that it's clickable
   without implying it does anything "active". The revealed content also
   moved from pushing the mobile nav's own layout open (inline
   grid-rows) to a floating card anchored just below the icon — nothing
   else in the menu shifts position when it opens or closes. */

.client-login-mobile-toggle {
	position: relative;
}

.client-login-mobile-toggle__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-neutral-100);
	color: var(--color-neutral-400);
	cursor: pointer;
	transition: background var(--transition-base);
}

.client-login-mobile-toggle__trigger svg {
	width: 20px;
	height: 20px;
}

.client-login-mobile-toggle__trigger:hover,
.client-login-mobile-toggle__trigger[aria-expanded="true"] {
	background: var(--color-neutral-200);
}

.client-login-mobile-toggle__panel {
	position: absolute;
	top: calc(100% + var(--space-2));
	left: 0;
	z-index: 60;
	width: max-content;
	max-width: min(320px, calc(100vw - var(--space-8)));
	padding: var(--space-4);
	padding-top: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top left;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.client-login-mobile-toggle__panel.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	visibility: visible;
	pointer-events: auto;
}

.client-login-mobile-toggle__panel .client-login-not-configured {
	margin: 0;
	white-space: normal;
}

/* In the top bar specifically (.header-actions), match the logged-in
   state's own icon size there (.client-login-widget__avatar, 28px) —
   the 44px default above was sized for the spacious slide-out mobile
   nav, not this cramped row shared with the logo and hamburger button.
   The panel also anchors from the right instead of the left, since
   this icon normally sits near the right edge of a narrow viewport —
   opening left-anchored here would frequently run the panel off-screen. */
.header-actions .client-login-mobile-toggle__trigger {
	width: 28px;
	height: 28px;
}

.header-actions .client-login-mobile-toggle__trigger svg {
	width: 16px;
	height: 16px;
}

/* Fixed 2026-09-13: right: 0 here anchored the panel to the small
   icon's OWN position, not the viewport — but that icon sits well
   inset from the actual screen edge (past the hamburger button, the
   gap between them, and the container's own side padding), so the
   panel's far (left) edge — up to 320px away from that anchor — could
   land past the LEFT edge of a narrow phone screen entirely, hiding
   part of its own text off-screen. position: fixed anchors it to the
   viewport itself instead of that nested flex position, so it can
   never depend on exactly where the icon renders. */
.header-actions .client-login-mobile-toggle__panel {
	position: fixed;
	top: calc(var(--header-height) + var(--space-2));
	left: auto;
	right: var(--container-pad);
	max-width: calc(100vw - (var(--container-pad) * 2));
	transform-origin: top right;
}

.client-login-mobile-toggle__close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: none;
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background var(--transition-base);
}

.client-login-mobile-toggle__close:hover {
	background: var(--color-bg-subtle);
}

.client-login-mobile-toggle__close svg {
	width: 16px;
	height: 16px;
}

/* ---------- Gated Dashboard/Profile page card ---------- */

.client-account-card {
	padding: var(--space-8);
}

.client-account-card__welcome {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-neutral-900);
	margin-bottom: var(--space-1);
}

.client-account-card__email {
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

.client-account-card--signin {
	text-align: center;
}

.client-account-card--signin p {
	margin-bottom: var(--space-5);
}

/* ---------- Sign-in error banner ---------- */

.client-login-error-banner {
	position: fixed;
	top: calc(var(--header-height) + var(--space-3));
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background: var(--color-danger);
	color: var(--color-white);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	font-size: var(--fs-sm);
	max-width: calc(100vw - var(--space-6));
}

.client-login-error-banner[hidden] {
	display: none;
}

.client-login-error-banner__close {
	background: none;
	border: none;
	color: inherit;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

/* ---------- Sitewide sidebar "Account" card ---------- */
/* page-sidebar/page-sidebar__card/page-sidebar__account are the
   theme's (components.css) — only the content inside is this plugin's. */

.sidebar-account__header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.sidebar-account__avatar {
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: var(--radius-full);
	background: var(--color-primary-50);
	color: var(--color-primary);
	flex-shrink: 0;
}

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

.sidebar-account__name {
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebar-account__email {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebar-account__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-4);
}

.sidebar-account__links a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
}

.sidebar-account__links a:hover {
	background: var(--color-bg-subtle);
	text-decoration: none;
}

.sidebar-account__links svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.sidebar-account__title {
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
	margin-bottom: var(--space-2);
}

.sidebar-account__hint {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}

/* appiappi-tokens */
/**
 * Design tokens — the single source of truth for colour, type, spacing,
 * radius and shadow across the theme. Change values here, not in
 * individual component files. Admin-editable brand colours (primary/
 * secondary/accent) are overridden inline in wp_head by inc/customizer.php
 * — see appiappi_customizer_css_vars().
 */

:root {
	/* ---- Neutrals ---- */
	--color-white: #ffffff;
	--color-neutral-50: #f7f8fa;
	--color-neutral-100: #eef1f5;
	--color-neutral-200: #e2e6ec;
	--color-neutral-300: #cbd2dc;
	--color-neutral-400: #9aa3b2;
	--color-neutral-600: #5b6472;
	--color-neutral-800: #1f2733;
	--color-neutral-900: #10151d;

	/* ---- Brand ---- */
	--color-navy-900: #0b1526;
	--color-navy-800: #10203a;
	--color-navy-700: #16294a;
	--color-primary: #1e5eff;
	--color-primary-dark: #1746c4;
	--color-primary-50: #eaf0ff;
	--color-maple: #d5222b;

	/* ---- Plan accents (admin-editable per plan later; sane defaults now) ---- */
	--color-plan-starter: #17a673;
	--color-plan-business: #2563eb;
	--color-plan-professional: #7c3aed;
	--color-plan-growth: #f97316;
	--color-plan-seo-growth: #0d9488;
	/* 7 additional generic plan-colour choices (bringing the picker to 12 total) */
	--color-plan-red: #dc2626;
	--color-plan-pink: #db2777;
	--color-plan-indigo: #4f46e5;
	--color-plan-amber: #d97706;
	--color-plan-cyan: #0891b2;
	--color-plan-lime: #65a30d;
	--color-plan-slate: #475569;

	/* ---- Semantic ---- */
	--color-success: #16a34a;
	--color-warning: #f59e0b;
	--color-danger: #dc2626;

	/* ---- Surface / text aliases ---- */
	--color-bg: var(--color-white);
	--color-bg-subtle: var(--color-neutral-50);
	--color-bg-dark: var(--color-navy-900);
	--color-text: var(--color-neutral-800);
	--color-text-muted: var(--color-neutral-600);
	--color-text-on-dark: var(--color-white);
	--color-text-on-dark-muted: var(--color-neutral-300);
	--color-border: var(--color-neutral-200);

	/* ---- Typography ---- */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--fs-xs: 0.8125rem;   /* 13px */
	--fs-sm: 0.9375rem;   /* 15px */
	--fs-base: 1rem;      /* 16px */
	--fs-lg: 1.125rem;    /* 18px */
	--fs-xl: 1.375rem;    /* 22px */
	--fs-2xl: 1.75rem;    /* 28px */
	--fs-3xl: 2.125rem;   /* 34px */
	--fs-4xl: 2.75rem;    /* 44px */
	--fs-5xl: 3.375rem;   /* 54px */

	--lh-tight: 1.15;
	--lh-snug: 1.35;
	--lh-normal: 1.6;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ---- Spacing (4px base scale) ---- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* ---- Radius ---- */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 22px;
	--radius-full: 999px;

	/* ---- Shadow ---- */
	--shadow-sm: 0 1px 2px rgba(16, 21, 29, 0.06);
	--shadow-md: 0 8px 24px rgba(16, 21, 29, 0.08);
	--shadow-lg: 0 20px 48px rgba(16, 21, 29, 0.14);

	/* ---- Layout ---- */
	--container-max: 1600px;
	--container-pad: var(--space-5);
	--header-height: 76px;
	--transition-base: 180ms ease;

	/* Per-section desktop side padding — overrides the sitewide
	   --container-pad above for specific homepage sections + the
	   sitewide footer, where 10px is too tight. Admin-configurable via
	   Customizer → Layout Spacing (inc/customizer.php); these are the
	   fallback defaults if that section is never touched. Only takes
	   effect at the same ≥768px breakpoint as --container-pad — see
	   home.css/layout.css for where each is actually consumed. */
	--hero-pad-desktop: 30px;
	--pricing-preview-pad-desktop: 20px;
	--templates-preview-pad-desktop: 20px;
	--footer-pad-desktop: 50px;
}

/* Desktop gutter is deliberately tight (~10px, like themeforest.net)
   rather than a wide margin — combined with the wider --container-max
   above, content uses most of the viewport on typical desktop widths
   instead of sitting in a narrow centred column. Per-row item counts
   in grids (pricing cards, template grid, etc.) are controlled by
   their own --cols custom properties, not by container width, so this
   only changes how wide each column/card is, never how many fit per row. */
@media (min-width: 768px) {
	:root {
		--container-pad: 10px;
	}
}

/* appiappi-base */
/**
 * Reset + base element styles. Mobile-first throughout the theme:
 * unprefixed rules target small screens, min-width media queries add
 * complexity for tablet (768px) / desktop (1024px) / wide (1280px).
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-4);
	line-height: var(--lh-tight);
	font-weight: var(--fw-bold);
	color: var(--color-neutral-900);
}

h1 {
	font-size: var(--fs-4xl);
}

h2 {
	font-size: var(--fs-3xl);
}

h3 {
	font-size: var(--fs-xl);
}

p {
	margin: 0 0 var(--space-4);
	color: var(--color-text-muted);
}

a {
	color: var(--color-primary);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

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

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
}

button {
	cursor: pointer;
}

/* Focus visibility for keyboard users (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: var(--color-navy-900);
	color: var(--color-white);
	padding: var(--space-3) var(--space-5);
	border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
	left: 0;
}

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

@media (min-width: 1024px) {
	h1 {
		font-size: var(--fs-5xl);
	}
	h2 {
		font-size: var(--fs-4xl);
	}
}

/* appiappi-layout */
/**
 * Structural layout: containers, section rhythm, site header/footer shell.
 * Section-specific visuals (hero, pricing, cards…) live in home.css.
 */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.section {
	padding-block: var(--space-16);
}

.section--tight {
	padding-block: var(--space-10);
}

.section--subtle {
	background: var(--color-bg-subtle);
}

.section--dark {
	background: var(--color-navy-900);
	color: var(--color-text-on-dark-muted);
}

.section--dark h2,
.section--dark h3 {
	color: var(--color-text-on-dark);
}

.section-heading {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: var(--space-10);
}

.section-heading__eyebrow {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-3);
}

.section-heading p {
	margin-top: var(--space-3);
	margin-bottom: 0;
}

/* ---------- Site header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow var(--transition-base);
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: var(--header-height);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-neutral-900);
	flex-shrink: 0;
}

.site-branding:hover {
	text-decoration: none;
}

.site-branding img {
	height: 36px;
	width: auto;
}

/* Fixed 2026-09-13: the star mark + underline (the 'leaf' icon used as
   the fallback logo when no custom logo image is set in Customizer,
   see appiappi_icon('leaf') in inc/template-tags.php) is a 24x24 inline
   SVG sized only by its width/height HTML attributes. base.css's global
   `svg { max-width: 100%; height: auto; }` reset makes that sizing
   depend on the SVG's flex-item box having real width to resolve
   against — on the cramped mobile header row (icon + name only, no
   explicit size floor) that box could shrink to the text's own width
   instead of the icon's, squeezing the mark down to near-nothing.
   Pinning an explicit, non-shrinking box here guarantees the star and
   its underline always render at a fixed, visible size regardless of
   how tight the surrounding flex row gets. */
.site-branding__mark {
	display: inline-flex;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.site-branding__mark svg {
	width: 100%;
	height: 100%;
}

.site-branding__name {
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	line-height: 1.1;
}

.site-branding__tagline {
	display: none;
}

.primary-nav {
	display: none;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.header-actions .btn-link {
	display: none;
}

/* "Get Started" is hidden entirely below 1024px (revised 2026-09-07) —
   per explicit request, mobile shouldn't show it at all, not even
   inside the slide-out nav (that instance was removed from the markup
   rather than hidden here). */
.header-actions .header-cta {
	display: none;
}

.mobile-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
}

.mobile-nav {
	position: fixed;
	inset: var(--header-height) 0 0 0;
	background: var(--color-white);
	transform: translateY(-8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	overflow-y: auto;
	z-index: 90;
}

.mobile-nav.is-open {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.mobile-nav__list {
	padding: var(--space-6) var(--container-pad);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.mobile-nav__list a {
	display: block;
	padding: var(--space-3) 0;
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
	color: var(--color-neutral-900);
	border-bottom: 1px solid var(--color-border);
}

.mobile-nav__list a:hover {
	text-decoration: none;
	color: var(--color-primary);
}

/* Current-page highlight, mobile nav (added 2026-09-13) — WordPress adds
   current-menu-item/current_page_item to the <li> itself (and
   current-menu-parent/current-menu-ancestor up the tree) automatically;
   this theme never styled any of them before, so the active page was
   never visually distinguished in the menu. A left accent bar + tinted
   background reads clearly in a stacked list. */
.mobile-nav__list li.current-menu-item > a,
.mobile-nav__list li.current_page_item > a,
.mobile-nav__list li.current-menu-parent > a,
.mobile-nav__list li.current-menu-ancestor > a {
	color: var(--color-primary-dark);
	background: var(--color-primary-50);
	border-radius: var(--radius-md);
	padding-inline: var(--space-3);
	margin-inline: calc(var(--space-3) * -1);
	border-bottom-color: transparent;
	box-shadow: inset 3px 0 0 var(--color-primary);
}

.mobile-nav__actions {
	padding: var(--space-6) var(--container-pad);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

body.mobile-nav-is-open {
	overflow: hidden;
}

@media (min-width: 1024px) {
	.primary-nav {
		display: block;
	}

	.primary-nav ul {
		display: flex;
		align-items: center;
		gap: var(--space-6);
	}

	.primary-nav li {
		position: relative;
	}

	.primary-nav a {
		display: inline-flex;
		align-items: center;
		color: var(--color-neutral-800);
		font-size: var(--fs-sm);
		font-weight: var(--fw-medium);
		padding-block: var(--space-2);
		position: relative;
	}

	.primary-nav a:hover {
		color: var(--color-primary);
		text-decoration: none;
	}

	/* Current-page highlight, desktop nav (added 2026-09-13) — see the
	   mobile-nav note above for why this never existed before. A
	   colour change alone reads as too subtle at this size, so the
	   active item also gets a short animated underline (::after),
	   growing in from the centre — the same "quiet but unmistakable"
	   treatment used for hover states on plenty of production nav bars,
	   just made persistent instead of hover-only for whichever item
	   matches the current page. current-menu-parent/-ancestor (a menu
	   item whose child page is the one currently open) get the same
	   treatment, one shade lighter, so a sub-page still shows *where in
	   the site* the visitor is even though the exact label isn't lit up. */
	.primary-nav a::after {
		content: '';
		position: absolute;
		left: 50%;
		right: 50%;
		bottom: -2px;
		height: 2px;
		border-radius: var(--radius-full, 999px);
		background: var(--color-primary);
		transition: left var(--transition-base), right var(--transition-base);
	}

	.primary-nav li.current-menu-item > a,
	.primary-nav li.current_page_item > a {
		color: var(--color-primary-dark);
		font-weight: var(--fw-semibold);
	}

	.primary-nav li.current-menu-item > a::after,
	.primary-nav li.current_page_item > a::after {
		left: 0;
		right: 0;
	}

	.primary-nav li.current-menu-parent > a,
	.primary-nav li.current-menu-ancestor > a {
		color: var(--color-primary);
	}

	.primary-nav li.current-menu-parent > a::after,
	.primary-nav li.current-menu-ancestor > a::after {
		left: 0;
		right: 0;
		opacity: 0.5;
	}

	.header-actions .btn-link {
		display: inline-flex;
	}

	.header-actions .header-cta {
		display: inline-flex;
	}

	.mobile-nav-toggle,
	.mobile-nav {
		display: none;
	}

	.site-branding__tagline {
		display: block;
		font-size: var(--fs-xs);
		color: var(--color-text-muted);
	}
}

/* ---------- Site footer ---------- */

.site-footer {
	background: var(--color-navy-900);
	color: var(--color-text-on-dark-muted);
	padding-block: var(--space-16) var(--space-8);
}

.site-footer a {
	color: var(--color-text-on-dark-muted);
}

.site-footer a:hover {
	color: var(--color-white);
}

.footer-grid {
	display: grid;
	gap: var(--space-10);
	grid-template-columns: 1fr;
	margin-bottom: var(--space-12);
}

.footer-col__title {
	color: var(--color-white);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: var(--space-4);
}

.footer-col__list li {
	margin-bottom: var(--space-2);
}

.footer-col--brand .site-branding {
	color: var(--color-white);
	margin-bottom: var(--space-4);
}

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.footer-social {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.08);
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--fs-xs);
}

.footer-bottom__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* Mobile only (<640px): Quick Links and Services are dropped to keep
   the footer short on a phone screen (Contact and the brand column
   already cover the essentials), and the copyright/legal row centres
   instead of left-aligning. Both columns come back from 640px up. */
@media (max-width: 639.98px) {
	.footer-col--links,
	.footer-col--services {
		display: none;
	}

	.footer-bottom {
		align-items: center;
		text-align: center;
	}

	.footer-bottom__legal {
		justify-content: center;
	}
}

@media (min-width: 640px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.footer-grid {
		grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	}

	.footer-bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* Footer's own desktop side-padding (configurable via Customizer ->
   Layout Spacing), separate from the sitewide --container-pad — the
   footer's 4-column grid, copyright and legal links all share this
   one .container, so one override covers all of them. */
@media (min-width: 768px) {
	.site-footer .container {
		padding-inline: var(--footer-pad-desktop);
	}
}

/* appiappi-components */
/**
 * Reusable UI components: buttons, badges, icon chips, cards, forms,
 * pricing cards. Loaded on every page (unlike home.css/pages.css, which
 * are conditional on is_front_page()) — so anything used in more than
 * one template context belongs here, not in one of those two.
 */

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	border: 1px solid transparent;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
	white-space: nowrap;
}

.btn:hover {
	text-decoration: none;
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary {
	background: var(--color-primary);
	color: var(--color-white);
}

.btn-primary:hover {
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.btn-secondary {
	background: var(--color-white);
	color: var(--color-neutral-900);
	border-color: var(--color-border);
}

.btn-secondary:hover {
	border-color: var(--color-neutral-400);
	color: var(--color-neutral-900);
}

.btn-outline-inverse {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-inverse:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
}

.btn-link {
	background: transparent;
	color: var(--color-neutral-800);
	padding-inline: var(--space-2);
}

.btn-link:hover {
	color: var(--color-primary);
}

.btn-block {
	display: flex;
	width: 100%;
}

.btn-sm {
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-xs);
}

/* ---------- Badges ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.badge-primary {
	background: var(--color-primary-50);
	color: var(--color-primary-dark);
}

.badge-dark {
	background: var(--color-navy-900);
	color: var(--color-white);
}

/* ---------- Feature chips (hero) ---------- */

.chip-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin: var(--space-8) auto;
	max-width: fit-content;
	text-align: left;
}

.chip {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.chip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	background: var(--color-primary-50);
	color: var(--color-primary);
	flex-shrink: 0;
}

.chip__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-neutral-900);
}

/* ---------- Icon tile (trust bar) ---------- */

.icon-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
}

.icon-tile {
	--tile-color: var(--color-primary);
}

.icon-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--tile-color) 14%, white);
	color: var(--tile-color);
	flex-shrink: 0;
}

.icon-tile__title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
	margin: 0;
}

/* ---------- Trust bar (moved here from home.css 2026-09-07 — used by
   the homepage AND the About page, but this file was front-page-only,
   so the About page's 4 icons had zero layout CSS and rendered stacked
   on top of each other instead of in a row. Same "shared markup styled
   in a page-conditional file" mistake this project has hit before;
   components.css loads on every page, so this fixes it at the root
   instead of duplicating the rule per page.) ---------- */

.trust-bar {
	background: var(--color-bg-subtle);
}

.trust-bar__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 640px) {
	.trust-bar__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.trust-bar__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Card base ---------- */

.card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* ---------- Forms ---------- */

.form-field {
	margin-bottom: var(--space-4);
}

.form-field label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-neutral-900);
	margin-bottom: var(--space-2);
}

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-text);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-50);
}

@media (min-width: 1024px) {
	.chip-list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}
}

/**
 * ---------- Pricing cards ----------
 * Lives here (not home.css) because appiappi_render_pricing_cards() is
 * shared between the homepage teaser AND the dedicated /pricing/ page —
 * home.css is only enqueued on is_front_page(), so any of this in that
 * file would silently vanish on the Pricing page. See DEVELOPMENT_LOG.md.
 */

.pricing-grid {
	--cols: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--space-6);
}

.pricing-card {
	--plan-color: var(--color-primary);
	width: calc((100% - (var(--cols) - 1) * var(--space-6)) / var(--cols));
	display: flex;
	flex-direction: column;
	padding: var(--space-8) var(--space-6);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: var(--color-white);
	position: relative;
	scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.pricing-card--featured {
	border-color: var(--plan-color);
	box-shadow: var(--shadow-lg);
}

/* ---------- Pricing tabs (full Pricing page, added 2026-09-07) ---------- */
/* One tab per plan instead of stacking every plan in a group — shown
   only when appiappi_render_pricing_cards() is called with $as_tabs.
   Progressive enhancement: every .pricing-tabs__panel (= .pricing-card)
   is fully present and visible in the raw HTML; main.js adds
   .is-ready to .pricing-tabs once it has picked the initial tab, and
   ONLY THEN does this CSS hide the non-active panels — so a visitor
   (or a crawler) with JS disabled/broken still sees every plan,
   stacked, instead of a blank or broken page. */
.pricing-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
	border-bottom: 1px solid var(--color-border);
}

.pricing-tabs__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border: none;
	background: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
	cursor: pointer;
}

.pricing-tabs__tab svg {
	width: 20px;
	height: 20px;
	color: var(--plan-color, currentColor);
	flex-shrink: 0;
}

.pricing-tabs__tab-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}

.pricing-tabs__tab-period {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

.pricing-tabs__tab:hover {
	color: var(--color-neutral-900);
}

.pricing-tabs__tab.is-active {
	color: var(--plan-color, var(--color-primary));
	border-bottom-color: var(--plan-color, var(--color-primary));
}

.pricing-tabs__tab.is-active .pricing-tabs__tab-period {
	color: inherit;
	opacity: 0.75;
}

/* Marks a billing-group boundary when multiple groups share one tab
   bar (e.g. one-time Launch plans + monthly Growth plans merged into
   one row, 2026-09-07) — inserted only where the group actually
   changes, so it disappears on its own if a page ever shows just one
   group again. */
.pricing-tabs__divider {
	width: 1px;
	flex-shrink: 0;
	align-self: stretch;
	background: var(--color-border);
	margin-inline: var(--space-1);
}

/* The Growth-tier plans are the real conversion goal once merged into
   the same bar as Launch — a persistent tint (not just on hover/active)
   so they read as the recommended path at a glance, distinct from
   which single plan carries the separate, admin-set "Most Popular"
   badge (.pricing-card__badge). */
.pricing-tabs__tab--highlight {
	background: color-mix(in srgb, var(--plan-color, var(--color-primary)) 10%, transparent);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.pricing-tabs__tab--highlight:hover {
	background: color-mix(in srgb, var(--plan-color, var(--color-primary)) 16%, transparent);
}

.pricing-tabs__tab--highlight.is-active {
	background: color-mix(in srgb, var(--plan-color, var(--color-primary)) 18%, transparent);
}

/* Full tab mode (Pricing page, appiappi_render_pricing_cards( $as_tabs )):
   exactly one plan visible at a time, at every viewport width. Excludes
   .pricing-tabs--mobile-only (homepage teaser) — that variant keeps every
   plan visible side by side at desktop widths and only switches to
   one-at-a-time below 640px, see that rule further down. */
.pricing-tabs.is-ready:not(.pricing-tabs--mobile-only) .pricing-tabs__panel {
	display: none;
}

.pricing-tabs.is-ready:not(.pricing-tabs--mobile-only) .pricing-tabs__panel.is-active {
	display: flex;
}

/* Mobile-only dropdown, replacing the tab row below 640px (2026-09-13) —
   see appiappi_render_pricing_cards() for why the tab buttons AND this
   select both exist in the markup at all times regardless of viewport
   (progressive enhancement / SEO: every plan panel is always fully
   present in the raw HTML either way, this is purely a CSS swap of
   which *control* drives showing one at a time). Hidden by default,
   shown only under the mobile breakpoint below. */
.pricing-tabs__mobile-label,
.pricing-tabs__mobile-select-wrap {
	display: none;
}

@media (max-width: 639.98px) {
	.pricing-tabs__list {
		display: none;
	}

	.pricing-tabs__mobile-label {
		display: block;
		font-size: var(--fs-xs);
		font-weight: var(--fw-semibold);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--color-text-muted);
		margin-bottom: var(--space-2);
	}

	.pricing-tabs__mobile-select-wrap {
		position: relative;
		display: block;
		margin-bottom: var(--space-8);
	}

	.pricing-tabs__mobile-select {
		width: 100%;
		appearance: none;
		-webkit-appearance: none;
		background: var(--color-white);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4);
		font-size: var(--fs-base);
		font-weight: var(--fw-semibold);
		color: var(--color-neutral-900);
		cursor: pointer;
		transition: border-color var(--transition-base), box-shadow var(--transition-base);
	}

	.pricing-tabs__mobile-select:focus {
		outline: none;
		border-color: var(--color-primary);
		box-shadow: 0 0 0 3px var(--color-primary-50);
	}

	.pricing-tabs__mobile-select-caret {
		position: absolute;
		top: 50%;
		right: var(--space-4);
		transform: translateY(-50%);
		width: 18px;
		height: 18px;
		color: var(--color-text-muted);
		pointer-events: none;
	}

	/* .pricing-tabs--mobile-only (homepage teaser): every plan is visible
	   side by side above this breakpoint (see the :not() rule above) —
	   only down here does picking one from the <select> actually hide the
	   rest, matching the full-tabs behaviour but confined to mobile. */
	.pricing-tabs--mobile-only.is-ready .pricing-tabs__panel {
		display: none;
	}

	.pricing-tabs--mobile-only.is-ready .pricing-tabs__panel.is-active {
		display: flex;
	}
}

.pricing-card__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--plan-color);
	color: var(--color-white);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	padding: var(--space-1) var(--space-4);
	border-radius: var(--radius-full);
	white-space: nowrap;
}

.pricing-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--plan-color) 14%, white);
	color: var(--plan-color);
	margin-bottom: var(--space-4);
}

.pricing-card__name {
	font-size: var(--fs-lg);
	margin-bottom: var(--space-1);
}

.pricing-card__tagline {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--plan-color);
	margin-bottom: 0;
}

.pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: var(--space-1);
	color: var(--plan-color);
	margin: var(--space-2) 0 var(--space-1);
}

.pricing-card__price-amount {
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
}

.pricing-card__price-period {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.pricing-card__note {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.pricing-card__audience {
	font-size: var(--fs-xs);
	font-style: italic;
	color: var(--color-neutral-600);
	margin-bottom: var(--space-6);
}

.pricing-card__description {
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
	line-height: var(--lh-normal);
	margin-bottom: var(--space-6);
	padding: var(--space-5);
	background: color-mix(in srgb, var(--plan-color) 8%, white);
	border: 1px solid color-mix(in srgb, var(--plan-color) 22%, white);
	border-radius: var(--radius-lg);
}

.pricing-card__description p:last-child {
	margin-bottom: 0;
}

.pricing-card__description-label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--plan-color);
	margin-bottom: var(--space-2);
}

.pricing-card__features {
	flex: 1;
	margin-bottom: var(--space-6);
}

.pricing-card__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
	padding-block: var(--space-2);
	border-top: 1px solid var(--color-border);
}

.pricing-card__features li:first-child {
	border-top: none;
}

.pricing-card__features svg {
	flex-shrink: 0;
	color: var(--plan-color);
	margin-top: 2px;
}

.pricing-card__feature-name {
	display: block;
}

.pricing-card__feature-desc {
	display: block;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-top: 2px;
}

.pricing-card__value-driver {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--color-neutral-800);
	background: color-mix(in srgb, var(--plan-color) 10%, white);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	margin-bottom: var(--space-5);
}

.pricing-card__value-driver svg {
	flex-shrink: 0;
	color: var(--plan-color);
	margin-top: 1px;
}

.pricing-card .btn {
	border-color: var(--plan-color);
}

.pricing-card .btn-primary {
	background: var(--plan-color);
}

.pricing-card .btn-secondary {
	color: var(--plan-color);
}

@media (min-width: 640px) {
	.pricing-grid {
		/* Tablet always caps at 2 regardless of the admin's desktop setting —
		   these cards are too content-heavy to comfortably fit 3+ at this width. */
		--cols: min(var(--pricing-cols, 4), 2);
	}
}

@media (min-width: 1024px) {
	.pricing-grid {
		--cols: var(--pricing-cols, 4);
	}

	.pricing-card--featured {
		transform: translateY(-var(--space-4));
	}
}

/* ---------- Template showcase (homepage preview + /templates/ page) ---------- */

.templates-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

/* Holds the search/categories/price card and, since 2026-09-07, the
   shared Account card below it (appiappi_client_login_render_sidebar_account_box(),
   appended in appiappi_render_template_showcase()) — flex column so
   the two stack with a consistent gap instead of touching. */
.templates-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.templates-sidebar__card {
	padding: var(--space-6);
}

.templates-sidebar__search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	margin-bottom: var(--space-6);
	color: var(--color-text-muted);
}

.templates-sidebar__search input {
	border: none;
	outline: none;
	flex: 1;
	font-size: var(--fs-sm);
	background: transparent;
	color: var(--color-text);
}

.templates-sidebar__group {
	margin-bottom: var(--space-6);
}

.templates-sidebar__group:last-child {
	margin-bottom: 0;
}

.templates-sidebar__title {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.templates-sidebar__categories li {
	margin-bottom: var(--space-1);
}

.templates-sidebar__categories a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
}

.templates-sidebar__categories a span:first-of-type {
	flex: 1 1 auto;
}

/* Design-count badge, added 2026-09-12 next to each category/sub-category
   label — see appiappi_showcase_get_category_counts(). */
.templates-sidebar__count {
	flex-shrink: 0;
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-full, 999px);
	padding: 1px var(--space-2);
	line-height: 1.6;
}

.templates-sidebar__categories li.is-active .templates-sidebar__count {
	color: var(--color-primary-dark);
	background: #fff;
}

.templates-sidebar__categories a:hover {
	background: var(--color-bg-subtle);
	text-decoration: none;
}

.templates-sidebar__categories svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.templates-sidebar__categories li.is-active a {
	background: var(--color-primary-50);
	color: var(--color-primary-dark);
	font-weight: var(--fw-semibold);
}

.templates-sidebar__categories li.is-active svg {
	color: var(--color-primary);
}

/* Sub-categories (e.g. Corporate > Business, added 2026-09-11) — indented
   directly under their parent's link, slightly smaller so the hierarchy
   reads clearly without needing an expand/collapse toggle. */
.templates-sidebar__categories--children {
	margin: var(--space-1) 0 var(--space-2) var(--space-5);
}

.templates-sidebar__categories--children a {
	padding: var(--space-1) var(--space-3);
	font-size: var(--fs-xs);
}

.templates-sidebar__categories--children svg {
	width: 15px;
	height: 15px;
}

/* Expand/collapse caret, added 2026-09-12 — a branch's children only
   render in the markup when it's on the active category's path
   (appiappi_showcase_get_categories()'s 'expanded' flag), so the caret
   just hints there's more underneath; clicking the link itself (making
   that term active) is what reveals it on the next page load. */
.templates-sidebar__caret {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--color-text-muted);
	transition: transform 0.15s ease;
}

.templates-sidebar__caret svg {
	width: 14px;
	height: 14px;
}

.templates-sidebar__categories li.is-expanded > a > .templates-sidebar__caret {
	transform: rotate(90deg);
}

/* ---------- Sitewide left sidebar (Categories + Account) ---------- */
/* Added 2026-09-07: appiappi_render_page_sidebar() (inc/template-tags.php)
   on every page except the homepage. Mobile/tablet: the Categories card
   sits in normal document flow directly after the page header (title +
   subtitle) — .page-sidebar is simply the first child of .page-layout
   in markup, so no extra CSS is needed for that placement. The Account
   card is hidden below 1024px entirely (revised 2026-09-07) — the
   header already has its own profile icon there (appiappi-client-login's
   header widget), so repeating it in the sidebar was judged redundant.
   Desktop (≥1024px, same breakpoint as .templates-layout above): a
   280px left column; only .page-sidebar__account (not Categories) is
   pinned via position: sticky, per explicit request — Categories
   scrolls away normally, then Account "catches" and stays in view once
   it reaches the sticky offset. */
.page-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

.page-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.page-sidebar__card {
	padding: var(--space-6);
}

.page-sidebar__account {
	display: none;
}

@media (min-width: 1024px) {
	.page-layout {
		grid-template-columns: 280px 1fr;
		align-items: start;
	}

	.page-sidebar__account {
		display: block;
		position: sticky;
		top: calc(var(--header-height) + var(--space-4));
	}

	/* Fixed 2026-09-13: a CSS Grid row is always exactly as tall as its
	   tallest column — with no in-flow way around that — so on any page
	   whose own main content is short (e.g. Contact, FAQ, About) but whose
	   category tree is long (several top-level categories, each with
	   sub-categories), the *sidebar's* height was silently dictating the
	   whole section's height, leaving a large empty gap under the short
	   main column before the next section could start. Capping the
	   category list's own height and letting it scroll internally once it
	   would exceed a sensible chunk of the viewport keeps this sidebar
	   from ever dwarfing genuinely short page content — scoped to this
	   sitewide sidebar only (appiappi_render_page_sidebar()), not the
	   Website Designs archive's own richer .templates-sidebar, whose main
	   column (the design grid) is essentially always the taller one. */
	.page-sidebar__card .templates-sidebar__categories {
		max-height: 60vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
}

/* ---------- Price range filter (sidebar) ---------- */

.templates-price-filter__row {
	display: flex;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.templates-price-filter__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	flex: 1;
	min-width: 0;
}

.templates-price-filter__field input {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	font-size: var(--fs-sm);
	color: var(--color-text);
}

.templates-price-filter__hint {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

/* Category breadcrumb above the toolbar, shown only when a category
   filter is active — see appiappi_showcase_get_breadcrumb(). */
.templates-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1, 4px);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.templates-breadcrumb__link {
	color: var(--color-text-muted);
	text-decoration: none;
}

.templates-breadcrumb__link:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.templates-breadcrumb__current {
	color: var(--color-text);
	font-weight: var(--fw-medium);
}

.templates-breadcrumb__sep {
	color: var(--color-border);
}

/* Pagination now renders inside .templates-main itself (right after the
   design grid), instead of below the whole sidebar+main layout — with a
   long sidebar (19+ categories) that flex row is taller than the grid,
   which used to push the page-number links far below the actual
   designs. See appiappi_render_template_showcase(). */
.templates-main__pagination {
	margin-top: var(--space-6);
}

.templates-main__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: var(--space-5);
	gap: var(--space-3);
}

.templates-main__count {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin: 0;
}

.templates-main__count-total {
	color: var(--color-text-muted);
	font-weight: normal;
}

/* ---------- Sort controls (toolbar) ---------- */

.templates-main__sort {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
}

.templates-sort-form select {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	font-size: var(--fs-sm);
	color: var(--color-text);
	background: var(--color-white);
}

/* Flexbox (not CSS Grid) so a short last row centres on the page instead
   of leaving a lopsided gap on the right — same reasoning as .pricing-grid. */
.template-grid {
	--cols: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-6);
}

.template-card {
	width: calc((100% - (var(--cols) - 1) * var(--space-6)) / var(--cols));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Exact aspect ratio of the source marketplace preview images
   (590×300 — confirmed across every downloaded design so far) so
   object-fit: cover never actually crops anything, while every card's
   media box still comes out the same height for a tidy, uniform grid
   regardless of the source image's exact pixel size. */
.template-card__media {
	position: relative;
	aspect-ratio: 590 / 300;
	background: var(--color-neutral-100);
	overflow: hidden;
}

.template-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 300ms ease;
}

.template-card__image.is-active {
	opacity: 1;
}

.template-card__category {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 2;
}

/* Carousel prev/next — only rendered at all when a design has more
   than one image (gallery, in addition to the Featured Image). */
.template-card__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	border: none;
	background: rgba(16, 21, 29, 0.55);
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 150ms ease, background 150ms ease;
}

.template-card__nav svg {
	width: 16px;
	height: 16px;
}

.template-card__media:hover .template-card__nav {
	opacity: 1;
}

.template-card__nav:hover {
	background: rgba(16, 21, 29, 0.8);
}

.template-card__nav--prev {
	left: var(--space-2);
}

.template-card__nav--next {
	right: var(--space-2);
}

.template-card__body {
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1;
}

.template-card__name {
	font-size: var(--fs-lg);
	margin-bottom: 0;
}

.template-card__name a {
	color: inherit;
	text-decoration: none;
}

.template-card__name a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.template-card__group {
	font-size: var(--fs-xs);
	font-style: italic;
	color: var(--color-text-muted);
	margin: 0;
}

.template-card__subgroup {
	margin-left: var(--space-1);
}

.template-card__desc {
	font-size: var(--fs-sm);
	margin-bottom: var(--space-3);
}

.template-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--fs-sm);
	margin-bottom: var(--space-4);
}

.template-card__price {
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
}

.template-card__rating {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text-muted);
}

.template-card__rating-count {
	color: var(--color-text-muted);
}

/* Standard gold star rating (appiappi_render_star_rating()) — filled
   count reflects the real numeric rating instead of always showing 5
   gold stars regardless of the value. */
.star-rating {
	display: inline-flex;
	line-height: 1;
	letter-spacing: 1px;
}

.star-rating__star {
	color: var(--color-neutral-300);
}

.star-rating__star--filled {
	color: var(--color-warning);
}

.template-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: auto;
}

/* Fixed 2026-09-13, then revised same day: flex items default to
   min-width: auto ("never shrink narrower than my own unwrapped
   content"), so between the fixed breakpoints that step
   .template-grid's column count up (640px, 1024px, 1400px, or
   whatever an admin sets via Website Designs → Display Settings), a
   card's rendered width can land anywhere continuously — and once
   "View Details" + "Live Demo" + the square cart button's combined
   natural width exceeded the card's actual width, this row used to
   silently overflow past .template-card's own overflow: hidden (kept
   for the media carousel's sake), clipping whichever button didn't
   fit clean out of view. The first fix (min-width: 0 + text-overflow:
   ellipsis) stopped that overflow but traded it for a different
   visible problem — the button LABELS themselves getting truncated
   ("View Deta…") once things got tight, when the actual ask is for
   the row to react before either failure mode ever shows: once
   "View Details"/"Live Demo" can't both keep their full label at a
   sensible width, flex-wrap here lets them drop onto their own line(s)
   instead, at their natural, fully-readable width — text is never
   clipped and never overflows, at any width, continuously, with no
   fixed breakpoint to "arrive late" the way the column-count steps do.
   flex-basis: 120px is a floor, not a fixed size — each button still
   grows to share the row 50/50 whenever there's room for both. */
.template-card__actions .btn:not(.template-card__cart) {
	flex: 1 1 120px;
}

/* The "Add to Cart" (Choose This Design) button: square, icon-only,
   sitting beside the two equal-width text buttons. aspect-ratio: 1
   (rather than a guessed fixed px size) combined with the row's
   default align-items: stretch means it's always exactly as tall —
   and therefore exactly as wide — as its two sibling buttons. */
.template-card__cart {
	flex: 0 0 auto;
	aspect-ratio: 1;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.template-card__cart svg {
	width: 18px;
	height: 18px;
}

.templates-empty-state {
	text-align: center;
	color: var(--color-text-muted);
	padding-block: var(--space-10);
}

.templates-preview__footer {
	text-align: center;
	margin-top: var(--space-10);
}

@media (min-width: 640px) {
	.template-grid {
		--cols: 2;
	}
}

@media (min-width: 1024px) {
	.templates-layout {
		grid-template-columns: 280px 1fr;
		align-items: start;
	}

	.templates-layout--no-sidebar {
		grid-template-columns: 1fr;
	}

	/* Only the Account card (.page-sidebar__account, sticky rule with the
	   rest of the sitewide sidebar above) pins while scrolling — the
	   search/categories/price card above it now scrolls away normally,
	   matching every other page's sidebar (revised 2026-09-07; this card
	   used to be the sticky one on its own, before the Account card
	   existed here to take over that role — two independently-sticky
	   siblings at the same `top` would otherwise overlap instead of
	   stacking). */

	/* The /templates/ page (with sidebar): admin-configurable via
	   Website Designs → Display Settings, default 3. The homepage
	   teaser (no-sidebar) keeps its own fixed step below instead. */
	.templates-layout:not(.templates-layout--no-sidebar) .template-grid {
		--cols: var(--template-cols, 3);
	}
}

@media (min-width: 1400px) {
	.templates-layout--no-sidebar .template-grid {
		--cols: 4;
	}
}

/* ---------- Final CTA (get_template_part()'d on every page) ---------- */

.final-cta {
	text-align: center;
}

.final-cta h2 {
	margin-bottom: var(--space-3);
}

.final-cta p {
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: var(--space-8);
}

.final-cta__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: center;
}

@media (min-width: 640px) {
	.final-cta__actions {
		flex-direction: row;
		justify-content: center;
	}
}

/* Final CTA + site footer share one desktop side-padding value
   (configurable via Customizer → Layout Spacing) since visually they
   form one closing "footer area" on every page. */
@media (min-width: 768px) {
	.final-cta {
		padding-inline: var(--footer-pad-desktop);
	}
}

/* ---------- Action button rows (get_template_part()'d/reused off the homepage) ---------- */

/* Same bug as .final-cta and .template-card__* before it: this class
   is used by the homepage hero AND the Website Design detail page's
   button row, but its styles lived in home.css (front-page-only) —
   without them the row degrades to unstyled stacked/overlapping
   inline links, which is almost certainly why the single design
   page's "Back" button reportedly didn't respond to clicks reliably. */
.hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.hero__actions .btn {
	width: 100%;
}

@media (min-width: 1024px) {
	.hero__actions {
		flex-direction: row;
		justify-content: center;
	}

	.hero__actions .btn {
		width: auto;
	}
}

/* appiappi-home */
/**
 * Homepage-only sections: hero, trust bar. Section markup lives in
 * template-parts/sections/. Pricing card styles, the template-showcase
 * grid (.templates-layout/.template-grid/etc.), .final-cta and
 * .hero__actions (found 2026-09-06 to have the exact same bug —
 * reused on the Website Design detail page and homepage hero
 * respectively, but styled here, front-page-only) all moved to
 * components.css since they're shared across pages — this file is
 * only enqueued on the front page (see inc/enqueue.php). Before
 * putting a new rule here, confirm its markup is truly never rendered
 * anywhere but the homepage — this mistake has now happened 4 times.
 */

/* ---------- Hero ---------- */

.hero {
	padding-block: var(--space-10) var(--space-16);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	align-items: center;
}

/* Customizer → Hero Slider Behaviour → "Mobile: Show Image Above Text"
   (added 2026-09-13) — mobile-only by design: .hero__inner switches to
   a real two-column grid at ≥1024px (see the desktop override further
   down), where image-vs-text order is a left/right decision, not a
   stacking one, so this modifier is scoped to below that breakpoint. */
@media (max-width: 1023.98px) {
	.hero--mobile-image-first .hero__visual {
		order: -1;
	}
}

/* The whole left-column content block (eyebrow, title, lede, feature
   chips, CTA buttons) is centred as a unit, per explicit request —
   the visual/slides column on the right is unaffected. */
.hero__content {
	text-align: center;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-primary);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-sm);
	margin-bottom: var(--space-4);
}

.hero__title {
	margin-bottom: var(--space-5);
}

.hero__lede {
	font-size: var(--fs-lg);
	max-width: 46ch;
	margin-inline: auto;
}

/* ---------- Hero slider ---------- */

/* Fixed 2026-09-13: display:none/block on .hero-slide meant only the
   active slide ever took up space, so .hero__slides' own height was
   whatever that one slide's text happened to need — every time the
   slider advanced to a shorter or longer headline, the whole page's
   content below the hero shifted and the scrollbar visibly grew/shrank.
   Standard fix for a text carousel with variable-length slides: stack
   every slide in the exact same grid cell (grid-area: 1 / 1 below) so
   ALL of them, active or not, count toward sizing this container —
   its height becomes the tallest slide's height and stays fixed
   regardless of which one is currently shown. Inactive slides are
   hidden with visibility (not display), which still removes them from
   the tab order and the accessibility tree — same as before, just
   without collapsing their box out of the layout. */
.hero__slides {
	display: grid;
}

.hero-slide {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.hero-slide.is-active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	animation: appiappi-hero-fade-in 350ms ease;
}

@keyframes appiappi-hero-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hero-dots {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.hero-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: var(--radius-full);
	background: var(--color-neutral-300);
	transition: width var(--transition-base), background var(--transition-base);
}

.hero-dots button.is-active {
	width: 24px;
	background: var(--color-primary);
}

.hero__visual {
	position: relative;
	/* Lets .rating-card below size itself off THIS element's own width
	   (via cqw units) rather than the viewport's — the two normally
	   track closely at mobile widths, but only the container's actual
	   width is what the "stay 10px clear of the image edges" rule
	   (2026-09-13) is really about. */
	container-type: inline-size;
}

.hero__visual-frame {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-navy-800);
}

.hero__visual-frame img,
.hero__visual-frame .hero-slide-visual {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 400ms ease;
}

.hero__visual-frame img.is-active,
.hero__visual-frame .hero-slide-visual.is-active {
	opacity: 1;
}

.hero__visual-frame .hero-slide-visual svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- Hero illustration effects (Customizer → Hero Illustration
   Effects) ---------- */
/* Base fill always follows the admin's chosen colour, whether or not
   the blink animation itself is on — see
   appiappi_render_hero_placeholder_svg() for the "is-animated"
   modifier, and the inline custom properties set on .hero__visual-frame
   in appiappi_render_hero_slides() for where these var()s come from. */
.hero-antenna-light {
	fill: var(--hero-light-color, #1e5eff);
}

.hero-antenna-light.is-animated {
	animation: hero-light-blink calc(1.6s / var(--hero-light-speed-multiplier, 1)) ease-in-out infinite;
	transform-origin: center;
}

@keyframes hero-light-blink {
	0%, 100% {
		opacity: 0.35;
		filter: drop-shadow(0 0 1px var(--hero-light-color, #1e5eff));
	}
	50% {
		opacity: 1;
		filter: drop-shadow(0 0 6px var(--hero-light-color, #1e5eff));
	}
}

.hero-window {
	fill: var(--hero-windows-color, #f7b955);
}

.hero-window.is-animated {
	animation-name: hero-window-blink;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	/* animation-delay/-duration come from each <rect>'s own inline style
	   in hero-placeholder.svg — different per window so the flicker
	   never looks synchronized, but all scaled by the same
	   --hero-windows-speed-multiplier so the Window Flicker Speed
	   setting still moves every window together. */
}

@keyframes hero-window-blink {
	0%, 60%, 100% {
		opacity: 0.3;
	}
	30% {
		opacity: 0.95;
	}
}

.hero-star {
	fill: var(--hero-stars-color, #ffffff);
}

.hero-star.is-animated {
	animation-name: hero-star-twinkle;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	/* animation-delay/-duration come from each <circle>'s own inline
	   style in hero-placeholder.svg — same per-element-offset,
	   shared-multiplier pattern as .hero-window above. */
}

@keyframes hero-star-twinkle {
	0%, 100% {
		opacity: 0.25;
	}
	50% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-antenna-light.is-animated,
	.hero-window.is-animated,
	.hero-star.is-animated {
		animation: none;
		opacity: 0.75;
	}
}

/* Bottom-center, overlapping the image itself, on every viewport width
   (was top-right on desktop and a normal-flow block below the image on
   mobile — unified 2026-09-13 per explicit request that mobile match
   desktop's position exactly). A fixed gap from the image's own bottom
   edge (not flush against it) via `bottom`, centered via
   left:50%/translateX(-50%) rather than inset:auto + margin-inline:auto,
   since this element's width is intrinsic (max-width, not 100%) and
   needs to stay centered regardless of exactly how wide its content
   makes it. Lives inside .hero__visual (position:relative), so this
   positions against the image frame, not the whole page. */
/* Fixed 2026-09-13: as the image narrows (mobile, or just a narrower
   window), this card must never wrap its text onto a second line. The
   fix has two parts working together — a hard boundary and a fluid
   scale inside it:
   1. max-width: calc(100% - 20px) — against .hero__visual's own width
      (the %-basis for an absolute-positioned element with a
      position:relative ancestor), so the card can never render closer
      than 10px to the image's left/right edges no matter what.
   2. font-size: clamp(floor, Xcqw, 1rem) — driven by cqw (relative to
      that same .hero__visual container, see container-type: inline-size
      above). The card's natural, unscaled width is ~260px, so it should
      only start shrinking once the container narrows past 260px + the
      20px clearance = 280px — tuning X so the "Xcqw" term equals
      exactly 1rem (16px) right at a 280px container makes that the
      precise hand-off point: at ≥280px the clamp holds at its 1rem
      ceiling (full, unscaled size); below it, font-size (and, since
      every child below is sized in em against it, the whole card)
      shrinks in direct proportion to the container — smoothly, and
      only as far as it needs to — down to a 0.6rem floor for
      legibility at the pathologically narrow end.
      X = 1rem ÷ (280px × 1%) = 16px ÷ 2.8px ≈ 5.71.
   white-space: nowrap (here and on every child span) forbids wrapping
   outright; overflow: hidden is just a last-resort safety net for
   anything narrower than the floor can rescue. */
.rating-card {
	display: flex;
	align-items: center;
	gap: 0.75em;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 1em 1.25em;
	position: absolute;
	left: 50%;
	bottom: var(--space-6);
	transform: translateX(-50%);
	width: fit-content;
	max-width: calc(100% - 20px);
	white-space: nowrap;
	overflow: hidden;
	font-size: clamp(0.6rem, 5.71cqw, 1rem);
	z-index: 2;
}

.rating-card__icon {
	flex-shrink: 0;
}

.rating-card__icon .icon {
	width: 1.5em;
	height: 1.5em;
}

/* Column of 1 or 2 lines: align-items: center is what actually centers
   the placeholder's second line ("coming soon") under the width of the
   first ("★★★★★ Google Reviews") — simpler and more robust than trying
   to text-align/width:100% a shrink-to-fit flex item by hand. With a
   real rating there's only ever the one line (.rating-card__line1), so
   this has nothing to center against and is a no-op. */
.rating-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.rating-card__line1 {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
}

.rating-card__score {
	font-size: 1.375em;
	font-weight: var(--fw-bold);
	color: var(--color-neutral-900);
	line-height: 1;
}

.rating-card__stars {
	color: var(--color-warning);
	font-size: 0.9375em;
	letter-spacing: 2px;
}

.rating-card__caption {
	font-size: 0.8125em;
	color: var(--color-text-muted);
}

.rating-card__caption-secondary {
	font-size: 0.8125em;
	color: var(--color-text-muted);
}

.rating-card--placeholder .rating-card__score,
.rating-card--placeholder .rating-card__stars {
	color: var(--color-neutral-400);
}

/* Placeholder-only position (added 2026-09-13): straddles the image's
   own bottom edge — half the card inside the image, half below it —
   instead of sitting fully inside like the real-rating state above.
   bottom: 0 anchors the card's own bottom edge to the image's bottom
   edge, and translateY(50%) then shifts it down by exactly half its
   own (now taller, 2-line) height, centering that edge on the seam
   instead. Reverts to the plain .rating-card position automatically
   the moment a real rating exists (this class stops being added). */
.rating-card--placeholder {
	bottom: 0;
	transform: translate(-50%, 50%);
}

@media (min-width: 1024px) {
	.hero {
		padding-block: var(--space-16) var(--space-24);
	}

	.hero__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-16);
		padding-inline: var(--hero-pad-desktop);
	}

	/* Matches the sitewide sidebar's own height cap (components.css,
	   .page-sidebar__card .templates-sidebar__categories) so the
	   homepage's Categories card reads the same way as the one on
	   Contact/FAQ/etc — added 2026-09-13. Scoped here rather than
	   components.css since it's specific to this page's own instance of
	   the richer .templates-sidebar__card (the /templates/ archive's
	   own copy keeps growing naturally — its main column, the design
	   grid, is always the taller one there anyway). */
	.templates-sidebar__card .templates-sidebar__categories {
		max-height: 60vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
}

/* Pricing preview + Website Designs preview: their own desktop side
   padding (configurable, see tokens.css), separate from the sitewide
   --container-pad — targeted via each section's existing #id rather
   than a new class, since both already have one. */
@media (min-width: 768px) {
	#pricing > .container {
		padding-inline: var(--pricing-preview-pad-desktop);
	}

	#templates > .container {
		padding-inline: var(--templates-preview-pad-desktop);
	}
}

/* Trust bar: moved to components.css 2026-09-07 (shared with the About
   page, which this front-page-only file never reached). */


/* aaya-tokens */
/**
 * Aaya design tokens — layered on top of the parent's tokens.css.
 *
 * The parent components read --color-*, --font-*, --radius-* … so
 * re-pointing those here re-skins every shared component at once.
 * New aaya-only tokens are prefixed --aaya-*. --color-primary itself is
 * owned by the Customizer (Appearance → Customize → Colors), which the
 * parent prints inline; its default for this site is set to violet.
 */

@font-face {
	font-family: "Vazirmatn";
	src: url("https://aaya.ir/wp-content/themes/aaya-theme/assets/fonts/vazirmatn-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ---- Brand ---- */
	--aaya-ink: #120d2b;
	--aaya-ink-2: #1c1442;
	--aaya-ink-3: #2a1f5c;
	--aaya-violet: #6d28d9;
	--aaya-violet-500: #7c3aed;
	--aaya-violet-300: #a78bfa;
	--aaya-indigo: #4f46e5;
	--aaya-cyan: #06b6d4;
	--aaya-cyan-300: #67e8f9;
	--aaya-amber: #fbbf24;
	--aaya-rose: #f43f5e;
	--aaya-mint: #10b981;

	--aaya-grad: linear-gradient(135deg, #7c3aed 0%, #4f46e5 52%, #06b6d4 100%);
	--aaya-grad-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(6, 182, 212, 0.12));
	--aaya-grad-warm: linear-gradient(135deg, #f43f5e 0%, #fb923c 55%, #fbbf24 100%);
	--aaya-grad-text: linear-gradient(90deg, #a78bfa 0%, #67e8f9 60%, #fbbf24 100%);
	--aaya-glow: 0 18px 40px -12px rgba(109, 40, 217, 0.45);
	--aaya-glow-cyan: 0 18px 40px -12px rgba(6, 182, 212, 0.4);

	/* ---- Parent tokens, re-pointed ---- */
	--color-neutral-50: #f7f6fd;
	--color-neutral-100: #efedfb;
	--color-neutral-200: #e4e1f4;
	--color-neutral-300: #c9c4e6;
	--color-neutral-400: #9d97bf;
	--color-neutral-600: #5c5780;
	--color-neutral-800: #29244a;
	--color-neutral-900: #17132e;

	--color-navy-900: var(--aaya-ink);
	--color-navy-800: var(--aaya-ink-2);
	--color-navy-700: var(--aaya-ink-3);
	--color-maple: var(--aaya-amber);

	--color-bg-subtle: #f7f6fd;
	--color-bg-dark: var(--aaya-ink);
	--color-border: #e6e3f5;
	--color-text-on-dark-muted: #c7c2e8;

	--font-sans: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;

	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 28px;

	--shadow-sm: 0 1px 2px rgba(23, 19, 46, 0.06);
	--shadow-md: 0 10px 30px -8px rgba(41, 36, 74, 0.14);
	--shadow-lg: 0 24px 60px -18px rgba(41, 36, 74, 0.28);

	--container-max: 1320px;
	--header-height: 78px;
	--transition-base: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 768px) {
	:root {
		--container-pad: 24px;
	}
}

/* Persian/Arabic script needs taller lines than Latin to keep dots and
   descenders from colliding. */
html[dir="rtl"] {
	--lh-tight: 1.4;
	--lh-snug: 1.55;
	--lh-normal: 1.9;
}

/* aaya-base */
/**
 * Aaya skin for the shared components: buttons, header, navigation,
 * language switcher, section headings, cards, page header band, inner
 * page blocks and footer. Loaded on every page after the parent's
 * components.css. Front-page-only sections live in aaya-home.css.
 */

body {
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: -0.01em;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
	letter-spacing: 0;
}

/* Skip link: hidden above the viewport instead of 9999px to the side,
   which creates a horizontal scrollbar on right-to-left pages. */
.skip-link {
	left: auto;
	inset-inline-start: var(--space-4);
	top: 0;
	transform: translateY(-120%);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	transition: transform var(--transition-base);
}

.skip-link:focus {
	left: auto;
	transform: translateY(0);
}

::selection {
	background: rgba(124, 58, 237, 0.22);
}

.aaya-gradient-text {
	background: var(--aaya-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Buttons ---------- */

.btn {
	border-radius: var(--radius-full);
	padding: 0.8rem 1.6rem;
	font-weight: 700;
	transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.btn-primary {
	background: var(--aaya-grad);
	background-size: 160% 160%;
	background-position: 0% 50%;
	color: #fff;
	box-shadow: var(--aaya-glow);
}

.btn-primary:hover {
	background: var(--aaya-grad);
	background-size: 160% 160%;
	background-position: 100% 50%;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 22px 44px -12px rgba(109, 40, 217, 0.55);
}

.btn-secondary {
	background: #fff;
	color: var(--color-neutral-900);
	border: 1.5px solid var(--color-neutral-200);
}

.btn-secondary:hover {
	border-color: var(--aaya-violet-300);
	color: var(--aaya-violet);
	transform: translateY(-2px);
}

.btn-outline-inverse {
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(6px);
}

.btn-outline-inverse:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
}

.btn-warm {
	background: var(--aaya-grad-warm);
	color: #1a1205;
	box-shadow: 0 18px 40px -14px rgba(244, 63, 94, 0.5);
}

.btn-warm:hover {
	color: #1a1205;
	transform: translateY(-2px);
}

.btn .icon {
	width: 18px;
	height: 18px;
}

/* ---------- Header ---------- */

/* The frosted-glass effect sits on a pseudo-element, never on the header
   itself: backdrop-filter (like transform/filter) makes an element the
   containing block of its position:fixed descendants, which would trap
   the full-screen mobile drawer inside the 78px-high header bar. */
.site-header {
	background: transparent;
	border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}

.site-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	pointer-events: none;
}

/* While the drawer is open the bar is solid, matching the drawer. */
body.mobile-nav-is-open .site-header::after {
	background: #fff;
}

.site-header::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--aaya-grad);
}

.site-header.is-scrolled {
	box-shadow: 0 10px 30px -18px rgba(41, 36, 74, 0.35);
}

/* Logged-in visitors get the WordPress toolbar fixed above the page.
   The sticky header has to stop below it instead of sliding under it
   (which hid the menu toggle). At 600px and below the toolbar scrolls
   away with the page, so the header sticks to the very top again. */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* Opening the drawer locks the page scroll, which hides a desktop
   scrollbar; keeping its space stops the header jumping sideways. */
html {
	scrollbar-gutter: stable;
}

/* Brand lockup */
.aaya-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--color-neutral-900);
}

.aaya-brand:hover {
	text-decoration: none;
}

.aaya-brand__mark {
	display: inline-flex;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	box-shadow: 0 10px 22px -10px rgba(79, 70, 229, 0.7);
	transition: transform var(--transition-base);
}

.aaya-brand:hover .aaya-brand__mark {
	transform: rotate(-6deg) scale(1.04);
}

.aaya-brand__mark svg {
	width: 100%;
	height: 100%;
}

.aaya-mark__spark {
	transform-origin: 24px 12.5px;
	animation: aaya-spark 3.2s ease-in-out infinite;
}

@keyframes aaya-spark {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.25); }
}

.aaya-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.aaya-brand__name {
	font-size: 1.12rem;
	font-weight: 800;
	white-space: nowrap;
}

.aaya-brand__handle {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--aaya-violet-500);
	font-family: "Vazirmatn", system-ui, sans-serif;
}

.aaya-brand--footer {
	color: #fff;
}

.aaya-brand--footer .aaya-brand__handle {
	color: var(--aaya-cyan-300);
}

@media (max-width: 380px) {
	.aaya-brand__name {
		font-size: 0.98rem;
	}
	.aaya-brand__mark {
		width: 38px;
		height: 38px;
	}
}

/* Desktop nav */
@media (min-width: 1024px) {
	.primary-nav ul {
		gap: var(--space-1);
	}

	.primary-nav a {
		padding: 0.5rem 0.85rem;
		border-radius: var(--radius-full);
		font-size: 0.95rem;
		font-weight: 600;
		color: var(--color-neutral-800);
		transition: background var(--transition-base), color var(--transition-base);
	}

	.primary-nav a::after {
		display: none;
	}

	.primary-nav a:hover {
		background: var(--color-neutral-100);
		color: var(--aaya-violet);
	}

	.primary-nav li.current-menu-item > a,
	.primary-nav li.current_page_item > a {
		background: var(--aaya-grad-soft);
		color: var(--aaya-violet);
	}
}

/* Seven nav items, the language menu and the CTA need about 1150px in
   Persian and Arabic and 1330px in English (longer labels), so below
   that the header keeps its phone layout: logo + hamburger. The parent
   theme and the client-login plugin switch at 1024px; these carry
   their mobile state up. aaya.js closes an open drawer once the
   hamburger goes away, whichever width that happens at. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.site-header .primary-nav,
	.site-header .header-actions .header-cta,
	.site-header .header-actions .lang-switch--header,
	.site-header .client-login-header-signin {
		display: none;
	}

	.site-header .mobile-nav-toggle,
	.site-header .header-actions > .client-login-mobile-toggle {
		display: inline-flex;
	}

	.site-header .mobile-nav {
		display: block;
	}
}

@media (min-width: 1200px) and (max-width: 1339.98px) {
	html:lang(en) .site-header .primary-nav,
	html:lang(en) .site-header .header-actions .header-cta,
	html:lang(en) .site-header .header-actions .lang-switch--header,
	html:lang(en) .site-header .client-login-header-signin {
		display: none;
	}

	html:lang(en) .site-header .mobile-nav-toggle,
	html:lang(en) .site-header .header-actions > .client-login-mobile-toggle {
		display: inline-flex;
	}

	html:lang(en) .site-header .mobile-nav {
		display: block;
	}
}

.header-actions {
	gap: var(--space-2);
}

.header-actions .header-cta {
	padding: 0.65rem 1.25rem;
}

/* The logged-in account button in the top bar is only the avatar at
   every width: the full email address squeezed the nav. Its dropdown
   still lists profile, dashboard and log out. */
.site-header .header-actions .client-login-widget__email,
.site-header .header-actions .client-login-widget__caret {
	display: none;
}

.site-header .header-actions .client-login-widget__trigger {
	padding: var(--space-2);
}

/* In the drawer the account menu opens inline and full width, as the
   plugin already does below 1024px. */
.mobile-nav__actions .client-login-widget {
	width: 100%;
}

.mobile-nav__actions .client-login-widget__trigger {
	width: 100%;
	justify-content: space-between;
	border: 1px solid var(--color-border);
	padding: var(--space-3);
}

.mobile-nav__actions .client-login-widget__menu {
	position: static;
	box-shadow: none;
	border: none;
	padding: 0;
	margin-top: var(--space-2);
}

.mobile-nav-toggle {
	border-radius: 12px;
	border-color: var(--color-neutral-200);
	color: var(--color-neutral-900);
	cursor: pointer;
	transition: background var(--transition-base), border-color var(--transition-base);
}

.mobile-nav-toggle[aria-expanded="true"] {
	background: var(--color-neutral-100);
	border-color: var(--color-neutral-300);
}

/* Hover only where there is a real pointer: on a phone a tap leaves
   :hover stuck after the drawer closes. */
@media (hover: hover) {
	.mobile-nav-toggle:hover {
		background: var(--color-neutral-100);
		border-color: var(--color-neutral-300);
	}
}

/* aaya.js sets --aaya-drawer-top to where the header really ends (the
   WordPress toolbar pushes it down for logged-in visitors). */
.mobile-nav {
	top: var(--aaya-drawer-top, var(--header-height));
	background: #fff;
}

.mobile-nav__list a {
	border-bottom-color: var(--color-neutral-100);
}

.mobile-nav__list li.current-menu-item > a,
.mobile-nav__list li.current_page_item > a {
	background: var(--aaya-grad-soft);
	color: var(--aaya-violet);
	box-shadow: none;
}

.mobile-nav-backdrop {
	display: none;
}

/* From 640px up (tablets, narrowed desktop windows) the drawer is the
   same phone-width panel, dropped under the toggle so its X sits right
   above it, with the page dimmed beside it, instead of every row
   stretching across the window. Clicking the dimmed page closes it
   (aaya.js). */
@media (min-width: 640px) {
	.mobile-nav {
		inset-inline-start: auto;
		width: 400px;
		border-inline-start: 1px solid var(--color-neutral-100);
		box-shadow: 0 30px 60px -24px rgba(41, 36, 74, 0.4);
	}

	.mobile-nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		top: var(--aaya-drawer-top, var(--header-height));
		z-index: 89;
		background: rgba(23, 19, 46, 0.4);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition-base), visibility var(--transition-base);
	}

	body.mobile-nav-is-open .mobile-nav-backdrop {
		opacity: 1;
		visibility: visible;
	}
}

/* ---------- Language switcher ---------- */

.lang-switch {
	position: relative;
}

.lang-switch__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	height: 42px;
	padding-inline: 0.75rem;
	border: 1.5px solid var(--color-neutral-200);
	border-radius: var(--radius-full);
	background: #fff;
	color: var(--color-neutral-900);
	font-weight: 700;
	font-size: 0.9rem;
	transition: border-color var(--transition-base), color var(--transition-base);
}

.lang-switch__toggle:hover,
.lang-switch.is-open .lang-switch__toggle {
	border-color: var(--aaya-violet-300);
	color: var(--aaya-violet);
}

.lang-switch__toggle .icon {
	width: 18px;
	height: 18px;
}

.lang-switch__caret {
	width: 14px !important;
	height: 14px !important;
	transition: transform var(--transition-base);
}

.lang-switch.is-open .lang-switch__caret {
	transform: rotate(180deg);
}

.lang-switch__menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	min-width: 170px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--color-neutral-200);
	border-radius: 16px;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	z-index: 120;
}

.lang-switch.is-open .lang-switch__menu,
.lang-switch:focus-within .lang-switch__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lang-switch__menu a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.7rem;
	border-radius: 10px;
	color: var(--color-neutral-800);
	font-weight: 600;
}

.lang-switch__menu a:hover {
	background: var(--color-neutral-100);
	text-decoration: none;
}

.lang-switch__menu a.is-current {
	background: var(--aaya-grad-soft);
	color: var(--aaya-violet);
}

.lang-switch__code {
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 26px;
	padding-inline: 4px;
	border-radius: 8px;
	background: var(--color-neutral-100);
	font-size: 0.78rem;
	font-weight: 800;
}

.lang-switch__menu a.is-current .lang-switch__code {
	background: var(--aaya-grad);
	color: #fff;
}

/* Mobile drawer: inline list instead of a dropdown */
.lang-switch--mobile .lang-switch__toggle {
	display: none;
}

.lang-switch--mobile .lang-switch__menu {
	position: static;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	min-width: 0;
}

.lang-switch--mobile .lang-switch__menu a {
	flex-direction: column;
	gap: 0.25rem;
	text-align: center;
	font-size: 0.85rem;
}

@media (max-width: 1023.98px) {
	.header-actions .lang-switch--header {
		display: none;
	}
}

/* ---------- Section headings ---------- */

.section-heading {
	max-width: 720px;
}

.section-heading__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.9rem;
	border-radius: var(--radius-full);
	background: var(--aaya-grad-soft);
	color: var(--aaya-violet);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: none;
}

.section-heading__eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--aaya-grad);
}

.section-heading h2 {
	font-weight: 900;
}

.section--dark {
	background:
		radial-gradient(60% 80% at 15% 0%, rgba(124, 58, 237, 0.35), transparent 60%),
		radial-gradient(50% 70% at 90% 100%, rgba(6, 182, 212, 0.25), transparent 60%),
		var(--aaya-ink);
}

.section--subtle {
	background: linear-gradient(180deg, #f7f6fd 0%, #fbfaff 100%);
}

/* ---------- Cards & tiles ---------- */

.card {
	border-radius: var(--radius-lg);
	border-color: var(--color-neutral-200);
	box-shadow: var(--shadow-sm);
}

.icon-tile__icon,
.chip__icon {
	border-radius: 14px;
}

.trust-bar {
	background: #fff;
	border-block: 1px solid var(--color-neutral-100);
}

/* ---------- Page header band (inner pages) ---------- */

.page-header,
.page-header[class*="page-header--"] {
	background:
		radial-gradient(45% 120% at 10% 0%, rgba(124, 58, 237, 0.55), transparent 65%),
		radial-gradient(40% 110% at 95% 100%, rgba(6, 182, 212, 0.45), transparent 65%),
		radial-gradient(30% 60% at 70% 10%, rgba(244, 63, 94, 0.25), transparent 70%),
		var(--aaya-ink);
	background-size: auto;
	border-bottom: 0;
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.75rem, 6vw, 4.5rem);
	isolation: isolate;
}

.page-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(70% 90% at 50% 40%, #000 30%, transparent 85%);
	-webkit-mask-image: radial-gradient(70% 90% at 50% 40%, #000 30%, transparent 85%);
	pointer-events: none;
}

.page-header h1,
.page-header--title-stroke h1 {
	color: #fff;
	-webkit-text-stroke-width: 0;
	font-weight: 900;
}

.page-header p,
.page-header--title-stroke p {
	color: #d6d1f3;
	-webkit-text-stroke-width: 0;
	font-size: 1.08rem;
}

.page-header__title-box {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.breadcrumbs {
	padding-block: 0.9rem;
}

/* ---------- Inner page blocks ---------- */

.service-card__icon,
.step__number {
	background: var(--aaya-grad);
	color: #fff;
	box-shadow: var(--aaya-glow);
}

.service-block {
	border-radius: var(--radius-xl);
	scroll-margin-top: calc(var(--header-height) + 24px);
}

.service-block__breakdown svg,
.pricing-card__features svg {
	color: var(--aaya-mint);
}

.faq-item {
	border-radius: var(--radius-md);
}

.faq-item.is-open {
	border-color: var(--aaya-violet-300);
	box-shadow: 0 12px 30px -18px rgba(109, 40, 217, 0.5);
}

.pricing-card {
	border-radius: var(--radius-xl);
}

.pricing-card--featured {
	box-shadow: var(--aaya-glow);
}

.page-sidebar__card,
.templates-sidebar__card {
	border-radius: var(--radius-lg);
}

.portfolio-card {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.post-card__media {
	border-radius: var(--radius-lg);
}

/* Forms */
.form-field input,
.form-field select,
.form-field textarea {
	border-radius: 12px;
	border-color: var(--color-neutral-200);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	border-color: var(--aaya-violet-500);
	box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14);
	outline: none;
}

/* ---------- Footer ---------- */

.site-footer {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(40% 60% at 0% 0%, rgba(124, 58, 237, 0.28), transparent 70%),
		radial-gradient(35% 55% at 100% 100%, rgba(6, 182, 212, 0.2), transparent 70%),
		var(--aaya-ink);
	padding-top: var(--space-20);
}

.site-footer::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.6), rgba(103, 232, 249, 0.6), transparent);
}

.footer-col__title {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	font-weight: 800;
}

.footer-col__list a {
	transition: color var(--transition-base), padding var(--transition-base);
}

.footer-col__list a:hover {
	color: #fff;
	text-decoration: none;
	padding-inline-start: 4px;
}

.footer-col--brand p {
	color: #b9b3df;
	max-width: 46ch;
}

.footer-social a {
	background: rgba(255, 255, 255, 0.07);
	transition: background var(--transition-base), transform var(--transition-base);
}

.footer-social a:hover {
	background: var(--aaya-grad);
	transform: translateY(-2px);
}

.footer-contact a,
.footer-contact span {
	direction: ltr;
	unicode-bidi: isolate;
}

.footer-contact li:first-child span {
	direction: inherit;
}

.footer-langs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--space-5);
}

.footer-langs a {
	padding: 0.3rem 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-full);
	font-size: 0.85rem;
}

.footer-langs a.is-current {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.footer-bottom__brand {
	color: #9a94c4;
}

/* ---------- Final CTA band (all pages) ---------- */

.aaya-cta {
	padding-block: var(--space-16);
}

.aaya-cta__card {
	position: relative;
	display: grid;
	gap: 1.75rem;
	align-items: center;
	padding: clamp(2rem, 5vw, 3.5rem);
	border-radius: 32px;
	background: linear-gradient(120deg, #5b21b6 0%, #4338ca 45%, #0e7490 100%);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 40px 80px -40px rgba(79, 70, 229, 0.8);
}

@media (min-width: 1024px) {
	.aaya-cta__card {
		grid-template-columns: 1fr auto;
		gap: 3rem;
	}
}

.aaya-cta__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(40% 80% at 0% 0%, rgba(244, 63, 94, 0.45), transparent 70%),
		radial-gradient(35% 70% at 100% 100%, rgba(251, 191, 36, 0.35), transparent 70%);
}

.aaya-cta__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: linear-gradient(90deg, transparent, #000 60%);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
}

.aaya-cta__card h2 {
	color: #fff;
	font-weight: 900;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	margin-bottom: 0.6rem;
}

.aaya-cta__card p {
	color: #e0dcff;
	margin: 0;
	font-size: 1.05rem;
	max-width: 60ch;
}

.aaya-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ---------- Helpers ---------- */

.aaya-narrow {
	max-width: 900px;
}

.aaya-prose {
	font-size: 1.05rem;
}

.aaya-prose h2 {
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	margin-top: 2.2rem;
}

.aaya-prose h3 {
	margin-top: 1.6rem;
}

.aaya-prose p,
.aaya-prose li {
	color: var(--color-neutral-800);
}

.aaya-prose ul {
	list-style: disc;
	padding-inline-start: 1.4em;
	margin-bottom: 1.2rem;
}

.aaya-prose li {
	margin-bottom: 0.4rem;
}

/* Arrows point "forward" in the reading direction. */
html[dir="rtl"] .icon-dir {
	transform: scaleX(-1);
}

html[dir="rtl"] .aaya-svc:hover .aaya-svc__more .icon-dir {
	transform: scaleX(-1) translateX(4px);
}

/* Reveal on scroll (aaya.js adds .aaya-js-reveal when motion is allowed) */
.aaya-js-reveal :is(.aaya-svc, .aaya-why__item, .aaya-step, .aaya-webdesign__card, .aaya-cta__card, .service-block, .step-detail, .aaya-contact-card) {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.aaya-js-reveal :is(.aaya-svc, .aaya-why__item, .aaya-step, .aaya-webdesign__card, .aaya-cta__card, .service-block, .step-detail, .aaya-contact-card).is-visible {
	opacity: 1;
	transform: none;
}

.aaya-js-reveal .aaya-svc.is-visible:hover {
	transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
	.aaya-orbit__track,
	.aaya-orbit__node-inner,
	.aaya-hero__blob,
	.aaya-float,
	.aaya-phone,
	.aaya-score,
	.aaya-mark__spark,
	.aaya-orbit__core {
		animation: none !important;
	}
}

/* ---------- Contact chips from the [site_whatsapp] / [site_telegram]
   shortcodes used throughout the imported content ---------- */

.aaya-chat-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.2rem 0 0.2rem 0.5rem;
	padding: 0.45rem 0.9rem;
	border-radius: var(--radius-full);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	vertical-align: middle;
	color: #fff !important;
	text-decoration: none !important;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.aaya-chat-link:hover {
	transform: translateY(-2px);
}

.aaya-chat-link--whatsapp {
	background: linear-gradient(135deg, #059669, #22c55e);
	box-shadow: 0 10px 22px -12px rgba(5, 150, 105, 0.8);
}

.aaya-chat-link--telegram {
	background: linear-gradient(135deg, #0284c7, #38bdf8);
	box-shadow: 0 10px 22px -12px rgba(2, 132, 199, 0.8);
}

.aaya-chat-link .icon {
	width: 18px;
	height: 18px;
}

.aaya-chat-link bdi {
	font-weight: 800;
}

:is(h1, h2, h3, h4) .aaya-chat-link {
	font-size: 0.95rem;
}

/* Imported product/article copy: comfortable reading width and spacing. */
.single-post__content :is(h2, h3) {
	margin-top: 1.8rem;
}

.single-post__content hr {
	margin: 2rem 0;
	border: 0;
	border-top: 1px solid var(--color-neutral-200);
}

/* Code blocks and tables in content never widen the page. */
.single-post__content pre {
	max-width: 100%;
	overflow-x: auto;
	padding: 1rem 1.2rem;
	border-radius: 14px;
	background: var(--color-neutral-50);
	border: 1px solid var(--color-neutral-200);
	white-space: pre-wrap;
	word-break: break-word;
}

.single-post__content code {
	white-space: inherit;
	word-break: break-word;
}

.single-post__content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Hamburger turns into a close icon while the drawer is open. */
.mobile-nav-toggle__close,
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__open {
	display: none;
}

.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__close {
	display: block;
}

/* ---------- eNamad seal in the footer ---------- */

.footer-trust {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-6);
}

.aaya-seal {
	display: inline-flex;
	padding: 6px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.5);
}

.aaya-seal img {
	display: block;
	width: 88px;
	height: auto;
}

/* Template cards: 16:9 like the branded featured images (1200x675), so the
   headline box on the image is not cropped away. */
.template-card__media {
	aspect-ratio: 16 / 9;
}

/* The badge sits in the image's empty bottom corner (the headline box is
   top-center, the info card bottom-left in LTR / start side). */
.template-card__category {
	top: auto;
	bottom: var(--space-3);
}

/* A design nobody has rated yet shows no stars at all: a row of five grey
   stars on every card reads as "rated zero", not as "new". */
.template-card__rating:not(:has(.star-rating__star--filled)) {
	display: none;
}

/* appiappi-pages */
/**
 * Non-homepage pages: page header band, Services grid, How It Works
 * steps, FAQ accordion, Portfolio grid, Contact form, Blog (post cards,
 * single post, pagination). Loaded on every page except the front page
 * (which uses home.css instead) — see inc/enqueue.php.
 */

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: var(--space-1);
	padding-block: var(--space-4);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.breadcrumbs a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.breadcrumbs a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.breadcrumbs span[aria-hidden] {
	margin-inline: var(--space-2);
	opacity: 0.5;
}

.breadcrumbs [aria-current="page"] {
	color: var(--color-text);
	font-weight: 600;
}

/* ---------- Page header ---------- */

.page-header {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-12) var(--space-10);
	text-align: center;
	background: var(--color-bg-subtle);
	border-bottom: 1px solid var(--color-border);
}

.page-header p {
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: 0;
}

/* Content sits above the animated overlay canvas below (and above the
   header's own background-image, which paints beneath both regardless
   since it belongs to the header box itself, not a stacked child). */
.page-header > .container {
	position: relative;
	z-index: 2;
}

/* Page title colour/stroke/background box (Customizer → Page Title
   Styling, added 2026-09-07, extended to the subtitle the same day) —
   one shared style for every page header's H1 *and* subtitle, not set
   per page. Colour and the background box are optional overrides
   (var() falls back to each element's existing look when unset — the
   subtitle keeps its own muted colour by default rather than inheriting
   the H1's default, so nothing changes until an admin actually sets a
   colour, at which point both adopt it together); the stroke only ever
   applies under .page-header--title-stroke, which inc/template-tags.php
   only adds when that toggle is actually on, so switching it off
   doesn't discard the saved colour/width. */
.page-header h1 {
	color: var(--page-title-color, var(--color-neutral-900));
}

.page-header p {
	color: var(--page-title-color, var(--color-text-muted));
}

.page-header--title-stroke h1,
.page-header--title-stroke p {
	-webkit-text-stroke-width: var(--page-title-stroke-width, 1.5px);
	-webkit-text-stroke-color: var(--page-title-stroke-color, #000);
	paint-order: stroke fill;
}

/* Only printed into the DOM at all once a background colour is chosen
   (appiappi_page_title_bg_is_enabled()) — an inline-block "badge" sized
   to the text rather than a full-width bar, so it reads as a deliberate
   accent rather than a stray box. Opacity is layered onto the chosen
   colour via color-mix() rather than baked into the colour itself, so
   the two Customizer controls stay independent. */
.page-header__title-box {
	display: inline-block;
	background: color-mix(in srgb, var(--page-title-bg-color, #000) var(--page-title-bg-opacity, 70%), transparent);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-8);
	box-shadow: var(--shadow-lg);
}

.page-header__title-box h1,
.page-header__title-box p {
	margin-bottom: 0;
}

.page-header__title-box p {
	margin-top: var(--space-2);
}

/* Animated geometric network overlay (assets/js/page-header-network.js):
   only printed into the DOM at all when a page's "Animated Geometric
   Overlay" Customizer toggle is on (appiappi_page_header_network_canvas()
   in inc/template-tags.php), so pages without it pay zero JS/CSS cost. */
.page-header__network {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

/* Full-width page-header background, one per page topic. Revised
   2026-09-07: no default image anymore — each var() now falls back to
   `none` instead of the theme's old isometric SVGs (assets/images/page-bg-{key}.svg,
   still in the repo, just no longer referenced here), so a page shows no
   background image at all until an admin actually uploads one via
   Customizer → Page Header Backgrounds; --color-bg-subtle (or an
   admin-set colour override) still shows through underneath either way.
   background-size: 100% auto (not `cover`) means an uploaded image's
   width always exactly matches the header's width, height scales to
   match the image's own aspect ratio (auto) rather than being cropped
   to fill the header's height — centered either way, so if the image is
   proportionally shorter than the header it leaves the background
   colour visible above/below rather than stretching or cropping the
   image itself. Custom properties set at :root (by an upload) inherit
   down to these class rules regardless of selector specificity, so a
   :root-level override here correctly beats the `none` fallback without
   needing to touch this file. template-single (the single design detail
   page) is configured completely separately from the /templates/ archive. */
.page-header--services { background-image: var(--page-header-bg-services, none); background-color: var(--page-header-bg-color-services, var(--color-bg-subtle)); }
.page-header--how-it-works { background-image: var(--page-header-bg-how-it-works, none); background-color: var(--page-header-bg-color-how-it-works, var(--color-bg-subtle)); }
.page-header--portfolio { background-image: var(--page-header-bg-portfolio, none); background-color: var(--page-header-bg-color-portfolio, var(--color-bg-subtle)); }
.page-header--pricing { background-image: var(--page-header-bg-pricing, none); background-color: var(--page-header-bg-color-pricing, var(--color-bg-subtle)); }
.page-header--about { background-image: var(--page-header-bg-about, none); background-color: var(--page-header-bg-color-about, var(--color-bg-subtle)); }
.page-header--contact { background-image: var(--page-header-bg-contact, none); background-color: var(--page-header-bg-color-contact, var(--color-bg-subtle)); }
.page-header--templates { background-image: var(--page-header-bg-templates, none); background-color: var(--page-header-bg-color-templates, var(--color-bg-subtle)); }
.page-header--template-single { background-image: var(--page-header-bg-template-single, none); background-color: var(--page-header-bg-color-template-single, var(--color-bg-subtle)); }

.page-header[class*="page-header--"] {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
}

/* ---------- Services ---------- */

.service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: var(--color-primary-50);
	color: var(--color-primary);
	flex-shrink: 0;
}

.service-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	max-width: 860px;
	margin-inline: auto;
}

.service-block {
	padding-block: var(--space-10);
	border-bottom: 1px solid var(--color-border);
	scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.service-block:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.service-block:first-child {
	padding-top: 0;
}

.service-block__header {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.service-block__header h2 {
	margin-bottom: 0;
}

.service-block__hook {
	font-size: var(--fs-lg);
	color: var(--color-neutral-800);
	max-width: 68ch;
}

.service-block__breakdown {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2) var(--space-6);
	margin-bottom: var(--space-6);
}

.service-block__breakdown li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
	padding-block: var(--space-2);
}

.service-block__breakdown svg {
	flex-shrink: 0;
	color: var(--color-primary);
	margin-top: 2px;
}

.service-block__closing {
	margin: 0;
	padding: var(--space-5) var(--space-6);
	background: var(--color-bg-subtle);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-md);
	font-style: italic;
	color: var(--color-neutral-800);
}

@media (min-width: 768px) {
	.service-block__breakdown {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- How It Works ---------- */

.step__number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background: var(--color-navy-900);
	color: var(--color-white);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
}

.step-detail-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	max-width: 860px;
	margin-inline: auto;
}

.step-detail {
	padding-block: var(--space-10);
	border-bottom: 1px solid var(--color-border);
}

.step-detail:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.step-detail:first-child {
	padding-top: 0;
}

.step-detail__header {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.step-detail__header h2 {
	margin-bottom: 0;
}

.step-detail__group {
	margin-bottom: var(--space-5);
}

.step-detail__group:last-child {
	margin-bottom: 0;
}

.step-detail__group p:last-child {
	margin-bottom: 0;
}

.step-detail__label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	margin-bottom: var(--space-1);
}

.step-detail__group--benefit {
	padding: var(--space-5) var(--space-6);
	background: var(--color-bg-subtle);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-md);
}

.step-detail__group--benefit .step-detail__label {
	color: var(--color-success);
}

@media (min-width: 1024px) {
	.steps-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- FAQ accordion ---------- */

.faq-list {
	max-width: 760px;
	margin-inline: auto;
}

.faq-item {
	border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	padding-block: var(--space-5);
	background: none;
	border: none;
	text-align: left;
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
}

.faq-item__question .icon {
	flex-shrink: 0;
	transition: transform var(--transition-base);
	color: var(--color-text-muted);
	transform: rotate(45deg);
}

.faq-item.is-open .faq-item__question .icon {
	transform: rotate(0deg);
}

.faq-item__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition-base);
}

.faq-item.is-open .faq-item__answer {
	max-height: 2000px;
}

.faq-item__answer-inner {
	padding-bottom: var(--space-5);
	color: var(--color-text-muted);
}

/* ---------- Portfolio ---------- */

.portfolio-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

.portfolio-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.portfolio-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--color-neutral-100);
}

.portfolio-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portfolio-card__concept-badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
}

.portfolio-card__body {
	padding: var(--space-5);
}

.portfolio-card__meta {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: var(--space-2);
}

.portfolio-card h3 {
	margin-bottom: var(--space-2);
}

.portfolio-card p {
	margin-bottom: 0;
}

@media (min-width: 640px) {
	.portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.portfolio-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Pricing explainer ---------- */

.pricing-explainer {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	max-width: 900px;
	margin-inline: auto;
}

.pricing-explainer__col h3 {
	font-size: var(--fs-lg);
	margin-bottom: var(--space-2);
}

.pricing-explainer__col p {
	margin-bottom: 0;
}

.pricing-explainer__note {
	max-width: 900px;
	margin: var(--space-8) auto 0;
	padding: var(--space-5) var(--space-6);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	text-align: center;
}

@media (min-width: 768px) {
	.pricing-explainer {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Contact ---------- */

.contact-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
}

/* No info card configured (Customizer → Contact Page Info Box all
   empty) — the form is the only thing on the page, so give it a
   comfortable reading width instead of stretching edge to edge. */
.contact-layout--form-only {
	max-width: 720px;
	margin-inline: auto;
}

.contact-info-card {
	padding: 0;
	overflow: hidden;
	background: var(--color-navy-900);
	color: var(--color-text-on-dark-muted);
	display: flex;
	flex-direction: column;
}

/* The "top half": a Google Maps embed, when configured. */
.contact-info-card__map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--color-neutral-100);
}

.contact-info-card__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The "bottom half": address / phone / support email. */
.contact-info-card__details {
	padding: var(--space-8);
}

.contact-info-card h3 {
	color: var(--color-white);
}

.contact-info-card ul li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.contact-info-card ul li:last-child {
	margin-bottom: 0;
}

.contact-form-card {
	padding: var(--space-8);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--space-4);
}

.form-notice {
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-6);
}

.form-notice--success {
	background: color-mix(in srgb, var(--color-success) 12%, white);
	color: var(--color-success);
}

.form-notice--error {
	background: color-mix(in srgb, var(--color-danger) 12%, white);
	color: var(--color-danger);
}

@media (min-width: 1024px) {
	.contact-layout {
		grid-template-columns: 1fr 1.5fr;
	}

	.contact-layout--form-only {
		grid-template-columns: 1fr;
	}

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

	.form-grid .form-field--full {
		grid-column: 1 / -1;
	}
}

/* ---------- Blog ---------- */

.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

.post-card__media {
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-neutral-100);
	margin-bottom: var(--space-4);
}

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

.post-card__meta {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: var(--space-2);
}

.post-card h2 {
	font-size: var(--fs-xl);
	margin-bottom: var(--space-2);
}

.post-card h2 a {
	color: inherit;
}

.post-card h2 a:hover {
	color: var(--color-primary);
	text-decoration: none;
}

@media (min-width: 768px) {
	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.post-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* :not(body) — WordPress also puts "single-post" on <body> of every
   single blog post, which must not become this grid. */
.single-post:not(body) {
	margin-inline: auto;
}

@media (max-width: 1023.98px) {
	.single-post:not(body) {
		max-width: 760px;
	}
}

/* At ≥1024px the media + content column sits beside a sticky
   `.template-summary` box (rating/price/actions/note) instead of
   leaving empty space to its right — see single-appiappi_template.php.
   Below that, `.single-post` is plain block flow, so DOM order (media,
   summary, content) puts the summary box directly under the featured
   image and above the description, as requested. */
@media (min-width: 1024px) {
	.single-post:not(body) {
		max-width: none;
		display: grid;
		grid-template-columns: 1fr 320px;
		grid-template-rows: auto 1fr;
		align-items: start;
		gap: var(--space-8);
	}

	.single-post__media {
		grid-column: 1;
		grid-row: 1;
	}

	.single-post__content {
		grid-column: 1;
		grid-row: 2;
	}

	.template-summary {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: calc(var(--header-height) + var(--space-4));
	}
}

/* Website Design detail page's own desktop side padding, separate
   from the sitewide --container-pad. */
@media (min-width: 768px) {
	.single-template-detail {
		padding-inline: 30px;
	}
}

/* About page's own desktop side padding — the sitewide 10px gutter read
   as too tight for this much long-form editorial copy. */
@media (min-width: 768px) {
	.about-page-content {
		padding-inline: 50px;
	}
}

/* ---------- Single design page: summary box ---------- */

.template-summary {
	padding: var(--space-6);
	margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
	.template-summary {
		margin-bottom: 0;
	}
}

/* Price + rating on one row (fixed 2026-09-13): the rating sits right
   after the price with a fixed, reasonable gap between them — anchored
   to the price's own left edge (normal flow), not pinned to the card's
   right edge — and wraps onto its own line, below the price, whenever
   the row is too narrow to fit both (e.g. a long price + rating with a
   review count). */
.template-summary__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-4);
	row-gap: var(--space-2);
	margin-bottom: var(--space-5);
}

.template-summary__rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.template-summary__desc {
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}

.template-summary__also-listed {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}

.template-summary__also-listed a {
	color: var(--color-primary-600, var(--color-neutral-900));
	text-decoration: underline;
}

.template-summary__price {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-neutral-900);
	margin-bottom: 0;
}

.template-summary__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.template-summary__actions .btn {
	width: 100%;
}

.template-summary__note {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-bottom: 0;
}

.single-post__meta {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-6);
}

.single-post__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: var(--space-8);
}

.single-post__content {
	font-size: var(--fs-lg);
	line-height: var(--lh-normal);
}

.single-post__content h2,
.single-post__content h3 {
	margin-top: var(--space-8);
}

.single-post__content img {
	border-radius: var(--radius-md);
}

.single-post__content a {
	text-decoration: underline;
}

/* Base.css strips ul/ol list-style + padding sitewide (most lists in the
   design system are custom-built components), but long-form prose pages
   (About, Privacy Policy, Terms of Service, blog posts) rely on plain
   editor-content bullet/numbered lists, so restore real markers here. */
.single-post__content ul,
.single-post__content ol {
	margin: 0 0 var(--space-4);
	padding-left: 1.25em;
}

.single-post__content ul {
	list-style: disc;
}

.single-post__content ol {
	list-style: decimal;
}

.single-post__content li {
	margin-bottom: var(--space-2);
	color: var(--color-text-muted);
}

.single-post__content li > ul,
.single-post__content li > ol {
	margin-top: var(--space-2);
}

.single-post__content strong {
	color: var(--color-neutral-900);
}

/* ---------- Legal pages (Privacy Policy / Terms of Service) ---------- */

.legal-updated {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-8);
}

.legal-contact-block {
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-6);
	line-height: var(--lh-normal);
}

.appiappi-pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-12);
}

.appiappi-pagination a,
.appiappi-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-3);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
}

.appiappi-pagination a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	text-decoration: none;
}

.appiappi-pagination .current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* aaya-home */
/**
 * Aaya homepage sections. Loaded on the front page only (the parent's
 * home.css still loads but styles its own, unused, section classes).
 */

.btn-lg {
	padding: 0.95rem 1.9rem;
	font-size: 1rem;
}

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

.aaya-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--aaya-ink);
	color: #fff;
	padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3.5rem, 7vw, 6rem);
}

.aaya-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.aaya-hero__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.75;
	animation: aaya-float 18s ease-in-out infinite;
}

.aaya-hero__blob--1 {
	width: 46vw;
	height: 46vw;
	max-width: 640px;
	max-height: 640px;
	background: radial-gradient(circle, rgba(124, 58, 237, 0.9), transparent 65%);
	top: -18%;
	inset-inline-start: -10%;
}

.aaya-hero__blob--2 {
	width: 40vw;
	height: 40vw;
	max-width: 560px;
	max-height: 560px;
	background: radial-gradient(circle, rgba(6, 182, 212, 0.7), transparent 65%);
	bottom: -25%;
	inset-inline-end: -8%;
	animation-delay: -6s;
}

.aaya-hero__blob--3 {
	width: 26vw;
	height: 26vw;
	max-width: 360px;
	max-height: 360px;
	background: radial-gradient(circle, rgba(244, 63, 94, 0.55), transparent 65%);
	top: 30%;
	inset-inline-end: 30%;
	animation-delay: -11s;
}

.aaya-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 52px 52px;
	mask-image: radial-gradient(75% 75% at 50% 40%, #000 25%, transparent 80%);
	-webkit-mask-image: radial-gradient(75% 75% at 50% 40%, #000 25%, transparent 80%);
}

@keyframes aaya-float {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	33% { transform: translate3d(4%, 6%, 0) scale(1.06); }
	66% { transform: translate3d(-5%, 2%, 0) scale(0.96); }
}

.aaya-hero__inner {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 1024px) {
	.aaya-hero__inner {
		grid-template-columns: 1.08fr 0.92fr;
	}
}

.aaya-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
	font-size: 0.85rem;
	font-weight: 700;
	color: #e9e5ff;
}

.aaya-hero__badge span[dir="ltr"] {
	letter-spacing: 0.18em;
	font-size: 0.72rem;
	color: var(--aaya-cyan-300);
}

.aaya-hero__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aaya-mint);
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
	animation: aaya-pulse 2s ease-in-out infinite;
}

.aaya-hero__badge-sep {
	opacity: 0.4;
}

@keyframes aaya-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3); }
	50% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
}

.aaya-hero__slides {
	margin-top: 1.5rem;
	min-height: 15rem;
}

.aaya-hero__slide.is-active {
	animation: aaya-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes aaya-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

.aaya-hero__title {
	margin: 0 0 1.1rem;
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	line-height: 1.3;
	font-weight: 900;
	background: linear-gradient(100deg, #ffffff 0%, #ffffff 45%, #c4b5fd 72%, #67e8f9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

html[dir="ltr"] .aaya-hero__title {
	line-height: 1.12;
}

.aaya-hero__lede {
	max-width: 60ch;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	color: #cfc9f2;
	margin-bottom: 1.8rem;
}

.aaya-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.aaya-hero__dots {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.aaya-hero__dots button {
	width: 26px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.25);
	transition: width var(--transition-base), background var(--transition-base);
}

.aaya-hero__dots button.is-active {
	width: 44px;
	background: var(--aaya-grad);
}

.aaya-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-top: 2.25rem;
}

.aaya-hero__pills a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.85rem 0.45rem 0.95rem;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #ece9ff;
	font-size: 0.85rem;
	font-weight: 600;
	transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.aaya-hero__pills a:hover {
	text-decoration: none;
	background: linear-gradient(135deg, var(--a1), var(--a2));
	border-color: transparent;
	transform: translateY(-2px);
	color: #fff;
}

.aaya-hero__pills .icon {
	width: 16px;
	height: 16px;
	color: var(--a2);
}

.aaya-hero__pills a:hover .icon {
	color: #fff;
}

/* ---- Orbit visual ---- */

.aaya-hero__visual {
	display: flex;
	justify-content: center;
}

.aaya-orbit {
	--size: min(500px, 84vw);
	--node: clamp(46px, 11vw, 64px);
	--r: calc(var(--size) / 2 - var(--node) / 2 - 6px);
	position: relative;
	width: var(--size);
	height: var(--size);
}

.aaya-orbit__ring {
	position: absolute;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, 0.2);
}

.aaya-orbit__ring--outer {
	inset: calc(var(--node) / 2 + 6px);
}

.aaya-orbit__ring--inner {
	inset: 26%;
	border-style: solid;
	border-color: rgba(167, 139, 250, 0.25);
	box-shadow: 0 0 80px rgba(124, 58, 237, 0.35) inset;
}

.aaya-orbit__core {
	position: absolute;
	inset: 34%;
	display: grid;
	place-items: center;
	border-radius: 30%;
	filter: drop-shadow(0 20px 50px rgba(79, 70, 229, 0.65));
	animation: aaya-breathe 5s ease-in-out infinite;
}

.aaya-orbit__core svg {
	width: 100%;
	height: 100%;
}

@keyframes aaya-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

.aaya-orbit__track {
	position: absolute;
	inset: 0;
	animation: aaya-spin 60s linear infinite;
}

.aaya-orbit__node {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--node);
	height: var(--node);
	margin: calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
	transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(var(--r) * -1)) rotate(calc(var(--i) * -360deg / var(--n)));
}

.aaya-orbit__node-inner {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 30%;
	background: linear-gradient(135deg, var(--a1), var(--a2));
	color: #fff;
	box-shadow: 0 14px 30px -10px var(--a1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
	animation: aaya-spin 60s linear infinite reverse;
}

.aaya-orbit__node-inner .icon {
	width: 46%;
	height: 46%;
}

@keyframes aaya-spin {
	to { transform: rotate(360deg); }
}

/* Floating glass cards */
.aaya-float {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.85rem;
	border-radius: 16px;
	background: rgba(28, 20, 66, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 0.8rem;
	animation: aaya-bob 6s ease-in-out infinite;
	z-index: 2;
}

.aaya-float__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--aaya-grad);
	flex-shrink: 0;
}

.aaya-float__icon .icon {
	width: 18px;
	height: 18px;
}

.aaya-float__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	line-height: 1.3;
}

.aaya-float__text strong {
	font-size: 0.82rem;
}

.aaya-float__text > span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: #c9c3ef;
	font-size: 0.74rem;
}

.aaya-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--aaya-mint);
	animation: aaya-pulse 2s ease-in-out infinite;
}

.aaya-float__spark {
	width: 70px;
	height: 26px;
	color: var(--aaya-mint);
}

.aaya-float__checks .icon {
	width: 14px;
	height: 14px;
	color: var(--aaya-mint);
}

.aaya-float__bars {
	display: inline-flex !important;
	align-items: flex-end !important;
	gap: 3px !important;
	height: 18px;
}

.aaya-float__bars i {
	width: 5px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--aaya-amber), #fb923c);
}

.aaya-float__bars i:nth-child(1) { height: 30%; }
.aaya-float__bars i:nth-child(2) { height: 45%; }
.aaya-float__bars i:nth-child(3) { height: 55%; }
.aaya-float__bars i:nth-child(4) { height: 75%; }
.aaya-float__bars i:nth-child(5) { height: 100%; }

.aaya-float--bot {
	top: -1%;
	inset-inline-end: -10%;
}

.aaya-float--auto {
	top: 44%;
	inset-inline-start: -14%;
	animation-delay: -2s;
}

.aaya-float--seo {
	bottom: -3%;
	inset-inline-end: -4%;
	animation-delay: -4s;
}

@keyframes aaya-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@media (max-width: 639.98px) {
	.aaya-hero__slides {
		min-height: 0;
	}
	/* The service pills repeat the grid right below; on phones they only
	   push the visual down. */
	.aaya-hero__pills,
	.aaya-float--auto,
	.aaya-float--seo,
	.aaya-float__spark {
		display: none;
	}
	.aaya-hero__actions .btn {
		flex: 1 1 100%;
	}
	.aaya-float--bot {
		top: -2%;
		inset-inline-end: auto;
		inset-inline-start: 0;
		padding: 0.5rem 0.65rem;
	}
}

/* ================= Services bento ================= */

.aaya-services {
	position: relative;
}

.aaya-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.aaya-bento {
		grid-template-columns: repeat(2, 1fr);
	}
	.aaya-svc--feature {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.aaya-bento {
		grid-template-columns: repeat(3, 1fr);
	}
	.aaya-svc--feature {
		grid-column: span 2;
		grid-row: span 2;
	}
	.aaya-svc--wide {
		grid-column: 1 / -1;
	}
}

.aaya-svc {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--color-neutral-200);
	border-radius: 26px;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.aaya-svc::before {
	content: "";
	position: absolute;
	width: 220px;
	height: 220px;
	top: -110px;
	inset-inline-end: -90px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--a2), transparent 70%);
	opacity: 0.16;
	z-index: -1;
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.aaya-svc:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--a1) 40%, white);
	box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--a1) 70%, transparent);
}

.aaya-svc:hover::before {
	opacity: 0.32;
	transform: scale(1.2);
}

.aaya-svc__num {
	position: absolute;
	top: 1.1rem;
	inset-inline-end: 1.4rem;
	font-size: 2.6rem;
	font-weight: 900;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px color-mix(in srgb, var(--a1) 30%, transparent);
}

.aaya-svc__icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--a1), var(--a2));
	color: #fff;
	box-shadow: 0 14px 28px -12px var(--a1);
}

.aaya-svc__icon .icon {
	width: 28px;
	height: 28px;
}

.aaya-svc__title {
	margin: 0.4rem 0 0;
	font-size: 1.25rem;
	font-weight: 800;
}

.aaya-svc__title a {
	color: var(--color-neutral-900);
}

.aaya-svc__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.aaya-svc__title a:hover {
	text-decoration: none;
}

.aaya-svc__text {
	margin: 0;
	font-size: 0.97rem;
}

.aaya-svc__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--a1);
}

.aaya-svc__more .icon {
	width: 16px;
	height: 16px;
	transition: transform var(--transition-base);
}

.aaya-svc:hover .aaya-svc__more .icon {
	transform: translateX(4px);
}

/* Feature tile */
.aaya-svc--feature {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background:
		radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--a2) 55%, transparent), transparent 70%),
		radial-gradient(60% 60% at 0% 100%, rgba(6, 182, 212, 0.35), transparent 70%),
		var(--aaya-ink);
	border-color: transparent;
	color: #fff;
}

.aaya-svc--feature::before {
	display: none;
}

.aaya-svc--feature .aaya-svc__icon {
	width: 72px;
	height: 72px;
	border-radius: 22px;
}

.aaya-svc--feature .aaya-svc__icon .icon {
	width: 34px;
	height: 34px;
}

.aaya-svc--feature .aaya-svc__title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.aaya-svc--feature .aaya-svc__title a {
	color: #fff;
}

.aaya-svc--feature .aaya-svc__text {
	color: #d4cff5;
	font-size: 1.05rem;
	max-width: 52ch;
}

.aaya-svc--feature .aaya-svc__num {
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.25);
	font-size: 4rem;
}

.aaya-svc--feature .aaya-svc__more {
	color: var(--aaya-cyan-300);
}

.aaya-svc__list {
	display: grid;
	gap: 0.6rem;
	margin: 0.5rem 0;
}

@media (min-width: 640px) {
	.aaya-svc__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.aaya-svc__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.7rem 0.85rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.9rem;
	color: #ebe8ff;
}

.aaya-svc__list .icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 0.2rem;
	color: var(--aaya-mint);
}

/* Wide tile */
@media (min-width: 1024px) {
	.aaya-svc--wide {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		column-gap: 1.5rem;
		row-gap: 0.25rem;
		background: linear-gradient(120deg, color-mix(in srgb, var(--a1) 9%, white), #fff 55%);
	}
	.aaya-svc--wide .aaya-svc__icon {
		grid-row: span 2;
	}
	.aaya-svc--wide .aaya-svc__title {
		margin: 0;
		align-self: end;
	}
	.aaya-svc--wide .aaya-svc__text {
		grid-column: 2;
		align-self: start;
	}
	.aaya-svc--wide .aaya-svc__more {
		grid-column: 3;
		grid-row: 1 / span 2;
		margin: 0;
		padding: 0.7rem 1.2rem;
		border-radius: var(--radius-full);
		background: linear-gradient(135deg, var(--a1), var(--a2));
		color: #fff;
	}
	.aaya-svc--wide .aaya-svc__num {
		display: none;
	}
}

/* ================= Why ================= */

.aaya-why__inner {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.aaya-why__inner {
		grid-template-columns: 0.85fr 1.15fr;
		align-items: start;
		gap: 4rem;
	}
	.aaya-why__intro {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
	}
}

.aaya-why__intro h2 {
	margin-top: 0.9rem;
	font-weight: 900;
}

.aaya-why__intro p {
	font-size: 1.05rem;
	margin-bottom: 1.5rem;
}

.aaya-why__grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.aaya-why__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.aaya-why__item {
	padding: 1.5rem;
	border-radius: 22px;
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-neutral-100);
	transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.aaya-why__item:hover {
	background: #fff;
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.aaya-why__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 0.9rem;
	border-radius: 14px;
	background: #fff;
	color: var(--aaya-violet);
	box-shadow: 0 8px 20px -10px rgba(109, 40, 217, 0.5);
}

.aaya-why__item:nth-child(2n) .aaya-why__icon {
	color: var(--aaya-cyan);
}

.aaya-why__item:nth-child(3n) .aaya-why__icon {
	color: #e11d48;
}

.aaya-why__item h3 {
	font-size: 1.08rem;
	font-weight: 800;
	margin-bottom: 0.4rem;
}

.aaya-why__item p {
	margin: 0;
	font-size: 0.93rem;
}

/* ================= Process ================= */

.aaya-process .section-heading p {
	color: #c7c2e8;
}

.aaya-eyebrow--dark {
	background: rgba(255, 255, 255, 0.08);
	color: #ddd6fe;
}

.aaya-steps {
	position: relative;
	display: grid;
	gap: 1.25rem;
	counter-reset: step;
}

@media (min-width: 1024px) {
	.aaya-steps {
		grid-template-columns: repeat(5, 1fr);
		gap: 1rem;
	}
	.aaya-steps::before {
		content: "";
		position: absolute;
		top: 30px;
		inset-inline: 8%;
		height: 2px;
		background: linear-gradient(90deg, rgba(167, 139, 250, 0.1), rgba(167, 139, 250, 0.6), rgba(103, 232, 249, 0.6), rgba(103, 232, 249, 0.1));
	}
}

.aaya-step {
	position: relative;
	padding: 1.5rem 1.25rem;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.09);
	transition: background var(--transition-base), transform var(--transition-base);
}

.aaya-step:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-4px);
}

.aaya-step__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin-top: -2.6rem;
	margin-bottom: 0.9rem;
	border-radius: 50%;
	background: var(--aaya-grad);
	color: #fff;
	font-size: 1.4rem;
	font-weight: 900;
	box-shadow: 0 0 0 6px var(--aaya-ink), var(--aaya-glow);
}

@media (max-width: 1023.98px) {
	.aaya-step__num {
		margin-top: 0;
		width: 48px;
		height: 48px;
		font-size: 1.15rem;
		box-shadow: var(--aaya-glow);
	}
	.aaya-steps {
		margin-top: 0;
	}
}

@media (min-width: 1024px) {
	.aaya-steps {
		margin-top: 2.5rem;
	}
}

.aaya-step__icon {
	position: absolute;
	top: 1.2rem;
	inset-inline-end: 1.2rem;
	color: rgba(196, 181, 253, 0.55);
}

.aaya-step h3 {
	font-size: 1.05rem;
	font-weight: 800;
	color: #fff;
	margin-bottom: 0.4rem;
}

.aaya-step p {
	margin: 0;
	font-size: 0.9rem;
	color: #bdb7e3;
}

.aaya-process__cta {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

/* ================= Website design spotlight ================= */

.aaya-webdesign__card {
	position: relative;
	display: grid;
	gap: 2.5rem;
	padding: clamp(1.75rem, 4vw, 3.5rem);
	border-radius: 32px;
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(244, 63, 94, 0.1), transparent 60%),
		radial-gradient(60% 80% at 0% 100%, rgba(124, 58, 237, 0.1), transparent 60%),
		#fff;
	border: 1px solid var(--color-neutral-200);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

@media (min-width: 1024px) {
	.aaya-webdesign__card {
		grid-template-columns: 1.05fr 0.95fr;
		align-items: center;
	}
}

.aaya-webdesign__content h2 {
	margin-top: 0.9rem;
	font-weight: 900;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.aaya-webdesign__list {
	display: grid;
	gap: 0.6rem;
	margin: 1.5rem 0 2rem;
}

@media (min-width: 640px) {
	.aaya-webdesign__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.aaya-webdesign__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-neutral-800);
}

.aaya-webdesign__list .icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 0.15rem;
	padding: 3px;
	border-radius: 50%;
	background: rgba(16, 185, 129, 0.14);
	color: var(--aaya-mint);
}

.aaya-webdesign__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Mock-up */
.aaya-webdesign__mock {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aaya-browser {
	width: min(100%, 440px);
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--color-neutral-200);
	box-shadow: 0 30px 60px -28px rgba(41, 36, 74, 0.45);
	overflow: hidden;
	transform: perspective(1200px) rotateY(-8deg) rotateX(4deg);
}

html[dir="rtl"] .aaya-browser {
	transform: perspective(1200px) rotateY(8deg) rotateX(4deg);
}

.aaya-browser__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0.6rem 0.8rem;
	background: var(--color-neutral-50);
	border-bottom: 1px solid var(--color-neutral-100);
}

.aaya-browser__bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #f87171;
}

.aaya-browser__bar i:nth-child(2) { background: #fbbf24; }
.aaya-browser__bar i:nth-child(3) { background: #34d399; }

.aaya-browser__bar span {
	margin-inline-start: 0.6rem;
	padding: 0.15rem 0.8rem;
	border-radius: 6px;
	background: #fff;
	font-size: 0.72rem;
	color: var(--color-neutral-600);
}

.aaya-browser__body {
	padding: 1rem;
	display: grid;
	gap: 0.8rem;
}

.aaya-browser__hero {
	display: grid;
	gap: 0.45rem;
	padding: 1.2rem;
	border-radius: 12px;
	background: var(--aaya-grad);
}

.aaya-browser__hero span {
	height: 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.85);
	width: 70%;
}

.aaya-browser__hero span:nth-child(2) {
	width: 45%;
	opacity: 0.6;
}

.aaya-browser__hero span.is-btn {
	width: 28%;
	height: 18px;
	margin-top: 0.3rem;
	background: var(--aaya-amber);
	border-radius: 999px;
}

.aaya-browser__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
}

.aaya-browser__cards span {
	height: 58px;
	border-radius: 10px;
	background: var(--color-neutral-100);
}

.aaya-browser__cards span:nth-child(2) {
	background: rgba(6, 182, 212, 0.15);
}

.aaya-browser__rows {
	display: grid;
	gap: 0.4rem;
}

.aaya-browser__rows span {
	height: 8px;
	border-radius: 6px;
	background: var(--color-neutral-100);
}

.aaya-browser__rows span:nth-child(2) { width: 80%; }
.aaya-browser__rows span:nth-child(3) { width: 55%; }

.aaya-phone {
	position: absolute;
	bottom: 4%;
	inset-inline-end: 4%;
	width: 120px;
	padding: 8px;
	border-radius: 22px;
	background: var(--aaya-ink);
	box-shadow: 0 24px 50px -20px rgba(18, 13, 43, 0.7);
	animation: aaya-bob 7s ease-in-out infinite;
}

.aaya-phone__notch {
	width: 40%;
	height: 6px;
	margin: 0 auto 6px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.2);
}

.aaya-phone__body {
	display: grid;
	gap: 6px;
	padding: 8px;
	border-radius: 14px;
	background: #fff;
}

.aaya-phone__body span {
	height: 8px;
	border-radius: 4px;
	background: var(--color-neutral-100);
}

.aaya-phone__body span:first-child {
	height: 40px;
	background: var(--aaya-grad);
}

.aaya-phone__body span.is-btn {
	height: 14px;
	width: 60%;
	border-radius: 999px;
	background: var(--aaya-amber);
}

.aaya-score {
	position: absolute;
	top: 6%;
	inset-inline-start: 2%;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.9rem;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--color-neutral-100);
	box-shadow: var(--shadow-md);
	animation: aaya-bob 6s ease-in-out infinite;
	animation-delay: -3s;
}

.aaya-score__ring {
	width: 40px;
	height: 40px;
	color: var(--aaya-mint);
}

.aaya-score strong {
	display: block;
	font-size: 0.85rem;
	color: var(--color-neutral-900);
}

.aaya-score small {
	font-size: 0.75rem;
	color: var(--aaya-mint);
	font-weight: 700;
}

/* ================= FAQ ================= */

.aaya-faq__inner {
	display: grid;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.aaya-faq__inner {
		grid-template-columns: 0.8fr 1.2fr;
		gap: 4rem;
		align-items: start;
	}
}

.aaya-faq__intro h2 {
	margin-top: 0.9rem;
	font-weight: 900;
}

.aaya-faq__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* aaya-rtl */
/**
 * Right-to-left corrections for the shared appiappi stylesheets (theme,
 * client login). Most of the parent already uses logical
 * properties; these are the remaining physical left/right rules,
 * mirrored. Loaded only when the current language is RTL (fa, ar).
 */

/* ---- layout.css ---- */
.mobile-nav__list li.current-menu-item > a,
.mobile-nav__list li.current_page_item > a,
.mobile-nav__list li.current-menu-parent > a,
.mobile-nav__list li.current-menu-ancestor > a {
	box-shadow: inset -3px 0 0 var(--color-primary);
}

/* ---- components.css ---- */
.chip-list,
.faq-item__question {
	text-align: right;
}

.pricing-tabs__mobile-select {
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-10);
}

.pricing-tabs__mobile-select-caret {
	right: auto;
	left: var(--space-4);
}

.templates-sidebar__categories--children {
	margin: var(--space-1) var(--space-5) var(--space-2) 0;
}

.template-card__category {
	left: auto;
	right: var(--space-3);
}

.template-card__nav--prev {
	left: auto;
	right: var(--space-2);
}

.template-card__nav--next {
	right: auto;
	left: var(--space-2);
}

.template-card__nav svg {
	transform: scaleX(-1);
}

.template-card__subgroup {
	margin-left: 0;
	margin-right: var(--space-1);
}

/* ---- pages.css ---- */
.service-block__closing,
.step-detail__group--benefit {
	border-left: 0;
	border-right: 3px solid var(--color-primary);
}

.portfolio-card__concept-badge {
	left: auto;
	right: var(--space-3);
}

.single-post__content ol {
	padding-left: 0;
	padding-right: 1.25em;
}

/* ---- appiappi-client-login ---- */
.client-login-widget__menu {
	right: auto;
	left: 0;
}

.header-actions .client-login-widget__menu {
	right: auto;
	left: calc(-1 * var(--space-2));
}

.client-login-mobile-toggle__panel {
	left: auto;
	right: 0;
}

.header-actions .client-login-mobile-toggle__panel {
	right: auto;
	left: var(--container-pad);
}

.client-login-mobile-toggle__close {
	right: auto;
	left: var(--space-2);
}

.app-shell__nav-link:hover {
	transform: translateX(-2px);
}

.app-shell__soon-badge {
	margin-left: 0;
	margin-right: auto;
}

.dash-card__link:hover svg {
	transform: scaleX(-1) translateX(3px);
}

.dash-card__link svg {
	transform: scaleX(-1);
}

.dash-toggle__thumb {
	left: auto;
	right: 2px;
}

.dash-toggle input:checked + .dash-toggle__track .dash-toggle__thumb {
	transform: translateX(-15px);
}

@media (max-width: 900px) {
	.app-shell__sidebar {
		left: auto;
		right: 0;
		transform: translateX(100%);
	}

	.app-shell__sidebar.is-open {
		transform: translateX(0);
	}
}

/* ---- Chevrons and arrows used as "next" point the other way ---- */
.breadcrumbs .icon,
.appiappi-pagination .icon {
	transform: scaleX(-1);
}

/* ---- Latin-only values stay LTR inside RTL text ---- */
input[type="email"],
input[type="tel"],
input[type="url"] {
	direction: ltr;
	text-align: right;
}

/* ---- appiappi-contact: the honeypot field is pushed 9999px left by an
   inline style, which on an RTL page becomes scrollable width. Keep it
   in place but invisible instead. ---- */
#contact-form input[name="appiappi_contact_hp"] {
	left: auto !important;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	clip-path: inset(50%);
	pointer-events: none;
}