:root {
	--tb-bg: #f7f9fc;
	--tb-surface: #ffffff;
	--tb-surface-soft: #f1f6fb;
	--tb-text: #344154;
	--tb-heading: #18243a;
	--tb-muted: #667489;
	--tb-border: #dce4ef;
	--tb-primary: #173dc2;
	--tb-primary-dark: #243b73;
	--tb-cyan: #18b7e6;
	--tb-cyan-dark: #126bb6;
	--tb-accent: #1d4ed8;
	--tb-accent-soft: #edf7ff;
	--tb-gray: #8d9495;
	--tb-shadow: 0 24px 60px rgba( 24, 36, 58, 0.1 );
	--tb-radius: 8px;
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	background: #ffffff;
	/* clip, not hidden: setting overflow-x to any value other than
	   visible/clip auto-computes overflow-y to "auto" per the CSS overflow
	   spec (even if overflow-y is explicitly declared "visible" elsewhere —
	   the auto-correction is based on final computed values, not intent).
	   That turns html/body into their own scroll container instead of the
	   real viewport being the scroller, which breaks every `position:
	   sticky` element on the page (they stop sticking and just scroll away
	   with the content). `clip` is exempt from that auto-correction and
	   still prevents horizontal overflow. */
	overflow-x: clip;
	scroll-behavior: smooth;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
}

body {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-height: 100vh;
	margin: 0;
	overflow-x: clip;
	background: #ffffff;
	color: var(--tb-text);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.7;
}

body.admin-bar {
	min-height: calc( 100vh - 32px );
}

body.nav-open {
	/* overflow: hidden alone doesn't reliably block touch-scroll behind a
	   fixed/absolute overlay on iOS Safari; position: fixed genuinely locks
	   the page. `top` is set inline by JS (main.js) to the negative scroll
	   offset at the moment the menu opens, so the page doesn't visually
	   jump, and is restored (with the scroll position) on close. */
	position: fixed;
	left: 0;
	right: 0;
	overflow: hidden;
}

a {
	color: var(--tb-primary);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

a:hover,
a:focus {
	color: var(--tb-cyan-dark);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 16px;
	color: var(--tb-heading);
	font-weight: 800;
	line-height: 1.16;
}

h1 {
	font-size: clamp( 28px, 4vw, 46px );
}

h2 {
	font-size: clamp( 26px, 3.4vw, 38px );
}

h3 {
	font-size: 22px;
}

p {
	margin: 0 0 18px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 10px 14px;
	background: var(--tb-surface);
	clip: auto;
	color: var(--tb-text);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba( 255, 255, 255, 0.96 );
	border-bottom: 1px solid var(--tb-border);
	box-shadow: 0 8px 24px rgba( 20, 32, 74, 0.05 );
	backdrop-filter: blur( 14px );
}

body.admin-bar .site-header {
	top: 32px;
}

body.nav-open .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

body.nav-open.admin-bar .site-header {
	top: 32px;
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 20px;
	min-height: 72px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.site-branding {
	flex: 0 0 auto;
}

.brand-link,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	color: var(--tb-heading);
	font-size: 20px;
	font-weight: 800;
}

.custom-logo {
	width: auto;
	max-width: 240px;
	max-height: 66px;
	object-fit: contain;
}

.primary-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	min-width: 0;
}

.primary-navigation > ul {
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
	flex-wrap: nowrap;
	min-width: 0;
}

.primary-navigation li {
	position: relative;
	flex: 0 0 auto;
}

.primary-navigation .menu-item-has-children::after {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 14px;
	content: "";
}

.primary-navigation a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 8px 13px;
	border-radius: 6px;
	color: var(--tb-heading);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

.primary-navigation .menu-item-has-children > a {
	gap: 7px;
}

.primary-navigation .menu-item-has-children > a::after {
	width: 0;
	height: 0;
	border-top: 5px solid currentColor;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	content: "";
	transition: transform 0.18s ease;
}

.primary-navigation .menu-item-has-children:hover > a::after,
.primary-navigation .menu-item-has-children:focus-within > a::after {
	transform: rotate( 180deg );
}

.primary-navigation a:hover,
.primary-navigation a:focus,
.primary-navigation .current-menu-item > a {
	color: var(--tb-primary);
}

.primary-navigation > ul > li > a::before {
	position: absolute;
	right: 12px;
	bottom: 3px;
	left: 12px;
	height: 2px;
	background: var(--tb-primary);
	border-radius: 999px;
	content: "";
	opacity: 0;
	transform: scaleX( 0.35 );
	transform-origin: center;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.primary-navigation > ul > li:hover > a::before,
.primary-navigation > ul > li:focus-within > a::before,
.primary-navigation > ul > .current-menu-item > a::before,
.primary-navigation > ul > .current-menu-ancestor > a::before,
.primary-navigation > ul > .current-menu-parent > a::before {
	opacity: 1;
	transform: scaleX( 1 );
}

.primary-navigation .sub-menu {
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	z-index: 65;
	display: grid;
	gap: 2px;
	width: max-content;
	min-width: 270px;
	max-width: min( 380px, calc( 100vw - 40px ) );
	padding: 10px;
	background: #ffffff;
	border: 1px solid rgba( 16, 42, 134, 0.1 );
	border-radius: 8px;
	box-shadow: 0 20px 52px rgba( 20, 32, 74, 0.12 );
	list-style: none;
	opacity: 0;
	pointer-events: none;
	transform: translateY( 8px );
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.primary-navigation .sub-menu::before {
	position: absolute;
	top: -7px;
	left: 28px;
	width: 12px;
	height: 12px;
	background: #ffffff;
	border-top: 1px solid rgba( 16, 42, 134, 0.1 );
	border-left: 1px solid rgba( 16, 42, 134, 0.1 );
	content: "";
	transform: rotate( 45deg );
}

.primary-navigation li:hover > .sub-menu,
.primary-navigation li:focus-within > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateY( 0 );
}

.primary-navigation .sub-menu li {
	width: 100%;
}

.primary-navigation .sub-menu a {
	justify-content: flex-start;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	background: transparent;
	border-radius: 6px;
	color: var(--tb-heading);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	white-space: normal;
}

.primary-navigation .sub-menu a::before {
	position: absolute;
	top: 11px;
	bottom: 11px;
	left: 0;
	width: 2px;
	background: var(--tb-primary);
	border-radius: 999px;
	content: "";
	opacity: 0;
	transform: scaleY( 0.35 );
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.primary-navigation .sub-menu a:hover,
.primary-navigation .sub-menu a:focus,
.primary-navigation .sub-menu .current-menu-item > a {
	background: #f8fbff;
	color: var(--tb-primary);
}

.primary-navigation .sub-menu a:hover::before,
.primary-navigation .sub-menu a:focus::before,
.primary-navigation .sub-menu .current-menu-item > a::before {
	opacity: 1;
	transform: scaleY( 1 );
}

.primary-navigation > ul > li:last-child .sub-menu {
	right: 0;
	left: auto;
}

.primary-navigation > ul > li:last-child .sub-menu::before {
	right: 22px;
	left: auto;
}

.header-account-links {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 8px;
}

.header-account-link.header-account-link {
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--tb-border);
	background: #ffffff;
}

.header-account-link.header-account-link:hover,
.header-account-link.header-account-link:focus {
	border-color: rgba( 23, 61, 194, 0.28 );
	background: var(--tb-surface-soft);
}

.header-account-link--primary.header-account-link--primary {
	gap: 8px;
	border-color: var(--tb-primary);
	background: var(--tb-primary);
	color: #ffffff;
}

/* Contact Us is now the header's one highlighted CTA - the plain-text
"Contact" primary-menu item (managed in Appearance > Menus) would just
duplicate it. */
.primary-navigation > ul > li:has( > a[href*="/contact-us/"] ) {
	display: none;
}

.header-account-link--primary.header-account-link--primary:hover,
.header-account-link--primary.header-account-link--primary:focus {
	background: var(--tb-primary-dark);
	color: #ffffff;
}

.header-account-menu {
	position: relative;
}

.header-account-menu::after {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	height: 12px;
	content: "";
}

.header-account-trigger {
	gap: 8px;
}

.header-account-caret {
	width: 0;
	height: 0;
	border-top: 5px solid currentColor;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
}

.header-account-dropdown {
	position: absolute;
	top: calc( 100% + 8px );
	right: 0;
	z-index: 70;
	display: grid;
	gap: 3px;
	width: 230px;
	padding: 8px;
	background: rgba( 255, 255, 255, 0.98 );
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	box-shadow: 0 18px 44px rgba( 20, 32, 74, 0.14 );
	opacity: 0;
	pointer-events: none;
	transform: translateY( 6px );
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.header-account-menu:hover .header-account-dropdown,
.header-account-menu:focus-within .header-account-dropdown {
	opacity: 1;
	pointer-events: auto;
	transform: translateY( 0 );
}

.header-account-dropdown::before {
	position: absolute;
	top: -6px;
	right: 28px;
	width: 12px;
	height: 12px;
	background: #ffffff;
	border-top: 1px solid var(--tb-border);
	border-left: 1px solid var(--tb-border);
	content: "";
	transform: rotate( 45deg );
}

.header-account-dropdown a {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 30px minmax( 0, 1fr );
	gap: 9px;
	align-items: center;
	min-height: 40px;
	padding: 6px 8px 6px 6px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--tb-heading);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.25;
}

.header-account-dropdown a:hover,
.header-account-dropdown a:focus {
	background: #f7fbff;
	border-color: rgba( 24, 183, 230, 0.22 );
	color: var(--tb-primary);
	text-decoration: none;
}

.header-account-dropdown .account-nav-icon {
	width: 30px;
	height: 30px;
	border-radius: 6px;
	font-size: 13px;
}

.menu-toggle {
	display: none;
	justify-self: end;
	position: relative;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	background: var(--tb-primary);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.menu-toggle span:not(.screen-reader-text) {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	margin-left: -10px;
	background: #ffffff;
	border-radius: 2px;
	transition: top 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle span:nth-child(1) {
	top: calc( 50% - 7px );
}

.menu-toggle span:nth-child(2) {
	top: calc( 50% - 1px );
}

.menu-toggle span:nth-child(3) {
	top: calc( 50% + 5px );
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
	top: calc( 50% - 1px );
	transform: rotate( 45deg );
}

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

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
	top: calc( 50% - 1px );
	transform: rotate( -45deg );
}


.site-main {
	flex: 1 0 auto;
	min-height: 60vh;
}

.section-kicker {
	margin: 0 0 12px;
	color: var(--tb-cyan-dark);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

.entry-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.button,
.wp-block-button__link,
button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 20px;
	border: 1px solid transparent;
	border-radius: 6px;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.button-primary,
.wp-block-button__link,
button,
input[type="submit"] {
	background: var(--tb-primary);
	color: #ffffff;
	box-shadow: 0 12px 24px rgba( 16, 42, 134, 0.18 );
}

.button-primary:hover,
.button-primary:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background: var(--tb-primary-dark);
	color: #ffffff;
	text-decoration: none;
	transform: translateY( -1px );
}

.button-secondary {
	background: #ffffff;
	border-color: var(--tb-border);
	color: var(--tb-heading);
}

.button-secondary:hover,
.button-secondary:focus {
	border-color: var(--tb-cyan);
	color: var(--tb-primary);
	text-decoration: none;
	transform: translateY( -1px );
}

.section {
	padding: 82px 0;
}

.section-muted {
	background: #ffffff;
	border-top: 1px solid var(--tb-border);
	border-bottom: 1px solid var(--tb-border);
}

.split-section,
.two-column {
	display: grid;
	grid-template-columns: minmax( 0, 0.9fr ) minmax( 0, 1.1fr );
	gap: 48px;
	align-items: start;
}

.split-section {
	margin-bottom: 34px;
}

.split-section > p,
.rich-text {
	color: var(--tb-muted);
	font-size: 17px;
}

.post-card,
.widget {
	padding: 26px;
	background: var(--tb-surface);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	box-shadow: 0 16px 38px rgba( 20, 32, 74, 0.07 );
}

.cta-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 36px;
	background:
		radial-gradient( circle at 85% 15%, rgba( 24, 183, 230, 0.18 ), transparent 45% ),
		linear-gradient( 180deg, #ffffff 0%, #eef7fc 100% );
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	box-shadow: 0 18px 50px rgba( 20, 32, 74, 0.07 );
}

.cta-band h2 {
	color: var(--tb-heading);
}

.cta-band .section-kicker {
	color: var(--tb-cyan-dark);
}

.cta-band h2 {
	max-width: 760px;
	margin-bottom: 0;
	font-size: clamp( 22px, 2.25vw, 30px );
	font-weight: 750;
}

.cta-band p:not(.section-kicker) {
	max-width: 720px;
	margin: 12px 0 0;
	color: var(--tb-muted);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.65;
}

input,
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 13px 14px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 6px;
	color: var(--tb-text);
	font: inherit;
}

textarea {
	resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--tb-cyan);
	outline: 3px solid rgba( 24, 183, 230, 0.16 );
}

.content-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 320px;
	gap: 32px;
	align-items: start;
	padding: 64px 0;
}

.narrow-content {
	max-width: 860px;
	padding: 64px 0;
}

.archive-header {
	margin-bottom: 26px;
}

.entry-title,
.page-title {
	margin: 0 0 14px;
	font-size: clamp( 30px, 4vw, 48px );
}

.post-card {
	margin-bottom: 24px;
}

.post-card .entry-title {
	font-size: 28px;
}

.error-404-page .narrow-content {
	padding: 84px 0;
}

.error-404-card {
	padding: 56px 48px;
	text-align: center;
}

.error-404-card .th-badge {
	margin: 0 auto 22px;
}

.error-404-visual {
	margin: 0 0 8px;
	background: linear-gradient( 135deg, var(--tb-primary), var(--tb-cyan) );
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-size: clamp( 72px, 14vw, 140px );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.error-404-card h1 {
	margin: 0 0 14px;
	font-size: clamp( 26px, 3.4vw, 36px );
}

.error-404-text {
	max-width: 480px;
	margin: 0 auto 32px;
	color: var(--tb-muted);
	font-size: 16px;
	line-height: 1.7;
}

.error-404-search {
	max-width: 460px;
	margin: 0 auto 36px;
}

.error-404-search .search-form {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.error-404-search .search-form label {
	display: flex;
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

.error-404-search .search-field {
	width: 100%;
	height: 52px;
	padding: 0 18px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 999px;
	color: var(--tb-heading);
	font-size: 15px;
}

.error-404-search .search-field:focus {
	border-color: var(--tb-cyan);
	outline: 3px solid rgba( 24, 183, 230, 0.16 );
}

.error-404-search .search-submit {
	/* A global `input, textarea, select { width: 100% }` reset otherwise
	   becomes this item's flex-basis (flex-basis:auto falls back to the
	   element's own width when set), so the button claimed the whole row
	   and left nothing for the search field beside it. */
	width: auto;
	flex: 0 0 auto;
	height: 52px;
	padding: 0 26px;
	background: linear-gradient( 135deg, var(--tb-primary), var(--tb-cyan-dark) );
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.error-404-search .search-submit:hover,
.error-404-search .search-submit:focus {
	transform: translateY( -2px );
}

.error-404-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.entry-title a {
	color: var(--tb-heading);
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--tb-cyan-dark);
}

.archive-description,
.entry-summary {
	color: var(--tb-muted);
}

.entry-content {
	color: var(--tb-text);
}

.entry-content > *:first-child,
.entry-summary > *:first-child {
	margin-top: 0;
}

.entry-content > *:last-child,
.entry-summary > *:last-child {
	margin-bottom: 0;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 8px 12px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 6px;
	font-weight: 700;
}

.page-numbers.current {
	background: var(--tb-primary);
	color: #ffffff;
}

.widget {
	margin-bottom: 22px;
}

.widget-title {
	margin: 0 0 16px;
	font-size: 20px;
}

.widget ul {
	margin: 0;
	padding-left: 18px;
}

.widget li {
	margin-bottom: 10px;
}

/* WordPress core's Latest Posts block ships its own inline stylesheet with
   `.wp-block-latest-posts.wp-block-latest-posts__list { list-style: none }` —
   two classes (specificity 0,2,0), so `.widget ul` alone can't out-rank it.
   Chain a third class here to win regardless of stylesheet load order. */
.widget.widget_block .wp-block-latest-posts__list {
	padding-left: 18px;
	list-style: disc;
}

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

.site-footer {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	background:
		radial-gradient( circle at 12% 18%, rgba( 24, 183, 230, 0.16 ), transparent 28% ),
		linear-gradient( 180deg, #f7fcff 0%, #edf8fe 100% );
	border-top: 0;
	box-shadow: none;
	color: var(--tb-heading);
}

.site-footer::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient( 90deg, transparent, rgba( 24, 183, 230, 0.42 ), transparent );
	content: "";
}

.section-heading {
	margin-bottom: 34px;
	text-align: center;
}

.section-heading p {
	margin-left: auto;
	margin-right: auto;
}

.pricing-card {
	padding: 24px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	box-shadow: 0 16px 38px rgba( 20, 32, 74, 0.07 );
}

.pricing-card h2 {
	margin-bottom: 6px;
	font-size: 18px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.plugin-badge {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	margin-bottom: 12px;
	padding: 5px 10px;
	background: rgba( 35, 188, 118, 0.12 );
	border: 1px solid rgba( 35, 188, 118, 0.28 );
	border-radius: 999px;
	color: #118554;
	font-size: 12px;
	font-weight: 800;
}

.pricing-grid {
	--bs-gutter-x: 18px;
	--bs-gutter-y: 18px;
}

.pricing-card p {
	color: var(--tb-muted);
}

.plugin-listing-page {
	background: #f5f8fc;
}

.plugin-directory-search {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	max-width: 760px;
	margin: 28px auto 0;
	padding: 8px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 12px;
	box-shadow: 0 18px 45px rgba( 20, 32, 74, 0.08 );
	animation: market-rise 0.65s ease both;
}

.plugin-directory-search input {
	border: 0;
	box-shadow: none;
}

.plugin-directory-search input:focus {
	outline: 0;
}

.plugin-listing-section {
	position: relative;
	overflow: hidden;
	background: #ffffff;
}

.plugin-listing-section::before {
	content: none;
}

.plugin-listing-section > .container {
	position: relative;
	z-index: 1;
}

.plugin-tag-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.plugin-tag-filter a,
.active-plugin-filters strong {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 8px 13px;
	background: rgba( 255, 255, 255, 0.92 );
	border: 1px solid var(--tb-border);
	border-radius: 999px;
	color: var(--tb-heading);
	font-size: 12px;
	font-weight: 800;
}

.plugin-tag-filter a:hover,
.plugin-tag-filter a:focus,
.plugin-tag-filter a.is-active {
	background: linear-gradient( 135deg, var(--tb-primary), var(--tb-cyan) );
	border-color: transparent;
	color: #ffffff;
	text-decoration: none;
}

.active-plugin-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 28px;
	color: var(--tb-muted);
	font-size: 14px;
	font-weight: 700;
}

.active-plugin-filters a {
	font-weight: 800;
}

.plugin-product-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 24px;
	align-items: stretch;
	/* .site-header is position:sticky - see .plugin-directory-panel. */
	scroll-margin-top: 100px;
}

.plugin-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba( 220, 230, 241, 0.95 );
	border-radius: 20px;
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.06 );
	animation: market-rise 0.65s ease both;
	transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.plugin-product-card:nth-child(2) {
	animation-delay: 0.08s;
}

.plugin-product-card:nth-child(3) {
	animation-delay: 0.14s;
}

.plugin-product-card:hover {
	border-color: rgba( 24, 183, 230, 0.48 );
	box-shadow: 0 22px 54px rgba( 20, 32, 74, 0.1 );
	transform: translateY( -3px );
}

.plugin-product-card::after {
	content: none;
}

.plugin-product-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	min-height: 0;
	padding: 22px;
	overflow: hidden;
	background:
		linear-gradient( 180deg, #f8fcff, #edf7fd );
	border-bottom: 1px solid var(--tb-border);
}

.plugin-product-card:nth-child(2n) .plugin-product-media {
	background:
		linear-gradient( 180deg, #fbfdff, #f1f8f5 );
}

.plugin-product-media img {
	width: 86%;
	height: 86%;
	object-fit: contain;
	filter: none;
	transition: transform 0.24s ease;
}

.plugin-product-card:hover .plugin-product-media img {
	transform: scale( 1.035 );
}

.plugin-product-media > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	background: rgba( 255, 255, 255, 0.95 );
	border-radius: 16px;
	color: var(--tb-primary);
	font-size: 28px;
	font-weight: 800;
}

.plugin-product-body {
	display: grid;
	gap: 10px;
	padding: 24px 24px 0;
}

.plugin-product-card h3 {
	margin-bottom: 0;
	font-size: 19px;
	font-weight: 750;
	line-height: 1.18;
}

.plugin-product-card h3 a {
	color: var(--tb-heading);
}

.plugin-product-card h3 a:hover,
.plugin-product-card h3 a:focus {
	color: var(--tb-cyan-dark);
}

.plugin-product-card p {
	margin-bottom: 0;
	color: var(--tb-muted);
	font-size: 14px;
	line-height: 1.68;
}

.plugin-product-footer {
	display: grid;
	margin-top: auto;
	padding: 24px;
}

.plugin-product-footer .th-btn {
	width: 100%;
	min-height: 40px;
	font-size: 12px;
}

.plugin-empty-state {
	grid-column: 1 / -1;
	padding: 44px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 20px;
	box-shadow: 0 18px 45px rgba( 20, 32, 74, 0.08 );
	text-align: center;
}

.plugin-empty-state p {
	color: var(--tb-muted);
}

.plugin-product-detail {
	background:
		linear-gradient( 180deg, #f7fbff 0%, #eef5fd 42%, #ffffff 100% );
}

.plugin-detail-hero-grid {
	position: relative;
	z-index: 1;
	--bs-gutter-x: 48px;
	--bs-gutter-y: 48px;
}

.plugin-detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.plugin-product-detail .button,
.plugin-product-detail button,
.plugin-product-detail input[type="submit"] {
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.2;
}

.plugin-detail-visual {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 40px;
	background:
		radial-gradient( circle at 50% 40%, rgba( 24, 183, 230, 0.12 ), transparent 70% ),
		linear-gradient( 160deg, rgba( 23, 61, 194, 0.06 ), rgba( 255, 255, 255, 0 ) 60% );
	border: 1px solid rgba( 23, 61, 194, 0.1 );
	border-radius: 28px;
}

.plugin-detail-visual .plugin-detail-preview-image {
	width: 100%;
	max-width: 320px;
	height: auto;
	object-fit: contain;
	filter: drop-shadow( 0 20px 30px rgba( 20, 32, 74, 0.14 ) );
}

.plugin-detail-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.plugin-detail-gallery a {
	display: block;
	width: 84px;
	height: 84px;
	overflow: hidden;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
}

.plugin-detail-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.plugin-variations-section {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient( 135deg, rgba( 24, 183, 230, 0.16 ), rgba( 255, 255, 255, 0 ) 42% ),
		linear-gradient( 180deg, #ffffff 0%, #eef7fc 100% );
}

.plugin-variations-section > .container {
	position: relative;
	z-index: 1;
}

.plugin-license-layout {
	grid-template-columns: 1fr;
	align-items: start;
}

.plugin-license-layout > div:first-child {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.plugin-license-layout h2 {
	font-size: clamp( 26px, 3.2vw, 36px );
}

.license-package-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.license-package-panel > * + * {
	margin-top: 34px;
}

.billing-toggle {
	display: inline-grid;
	grid-template-columns: repeat( 2, minmax( 130px, 1fr ) );
	justify-self: center;
	padding: 5px;
	background: var(--tb-primary);
	border: 2px solid #ffffff;
	border-radius: 999px;
	box-shadow: 0 18px 42px rgba( 20, 32, 74, 0.16 );
}

.billing-toggle-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 24px;
	background: transparent;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: #ffffff;
	font-size: 15px;
	font-weight: 800;
	text-align: center;
}

.billing-toggle-button:hover,
.billing-toggle-button:focus {
	background: rgba( 255, 255, 255, 0.12 );
	color: #ffffff;
	transform: none;
}

.billing-toggle-button.is-active {
	background: #ffffff;
	color: var(--tb-primary);
}

.license-package-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 28px;
	width: 100%;
}

.license-package-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	min-height: 100%;
	margin-top: 0;
	padding: 28px;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	box-shadow: 0 18px 45px rgba( 20, 32, 74, 0.08 );
	transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.license-package-card:hover {
	border-color: rgba( 24, 183, 230, 0.48 );
	box-shadow: 0 26px 62px rgba( 20, 32, 74, 0.13 );
	transform: translateY( -6px );
}

.license-package-card[hidden] {
	display: none;
}

.license-package-card.is-popular {
	border-color: rgba( 24, 183, 230, 0.54 );
}

.license-free-card {
	border-color: rgba( 35, 188, 118, 0.34 );
}

.license-free-card .license-package-head h3,
.license-free-card .license-package-price .amount {
	color: #118554;
}

.license-popular-ribbon {
	position: absolute;
	top: 18px;
	right: -42px;
	width: 150px;
	padding: 7px 0;
	background: var(--tb-cyan);
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	transform: rotate( 45deg );
}

.license-package-head {
	display: grid;
	gap: 6px;
	margin-bottom: 18px;
	padding-right: 34px;
}

.license-package-head h3 {
	margin-bottom: 0;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.license-package-head span {
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
}

.license-package-price {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px;
	margin-bottom: 18px;
	color: var(--tb-heading);
	line-height: 1;
}

.license-package-price .amount {
	color: var(--tb-heading);
	font-size: 54px;
	font-weight: 800;
	letter-spacing: 0;
}

.license-package-price > span:not(.woocommerce-Price-amount):not(.license-discount-badge) {
	margin-bottom: 8px;
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.license-package-price del {
	order: -1;
	flex: 0 0 auto;
	text-decoration: line-through;
}

.license-package-price del .amount {
	color: var(--tb-muted);
	font-size: 15px;
	font-weight: 600;
	opacity: 0.75;
}

.license-package-price ins {
	flex: 0 0 100%;
	text-decoration: none;
}

.license-discount-badge {
	order: -2;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	width: fit-content;
	margin-bottom: 6px;
	padding: 4px 10px;
	background: var(--th-gold, #f5a524);
	border-radius: 999px;
	color: var(--tb-heading);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.launch-discount-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin: 0 0 20px;
	padding: 10px 16px;
	background: linear-gradient( 90deg, rgba( 24, 183, 230, 0.12 ), rgba( 35, 188, 118, 0.12 ) );
	border: 1px solid rgba( 24, 183, 230, 0.28 );
	border-radius: 999px;
	color: var(--tb-heading);
	font-size: 13px;
	font-weight: 700;
}

.launch-discount-banner i {
	color: var(--tb-cyan);
}

.license-package-card p {
	color: var(--tb-primary);
	font-size: 18px;
	font-weight: 700;
}

.license-package-card p.license-package-tagline {
	margin-top: -4px;
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 500;
	font-style: italic;
}

.license-package-card ul {
	display: grid;
	gap: 8px;
	margin: 4px 0 24px;
	padding: 0;
	list-style: none;
}

.license-package-card li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	background: #f7f9fc;
	border: 1px solid var(--tb-border);
	border-radius: 6px;
}

.license-package-card li span {
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 700;
}

.license-package-card li strong {
	color: var(--tb-heading);
	font-size: 13px;
	text-align: right;
}

.license-package-button {
	align-self: center;
	width: auto;
	margin-top: auto;
	min-height: 40px;
	padding: 10px 20px;
	border-radius: 50px;
	font-size: 13px;
	text-transform: none;
	letter-spacing: normal;
}

.license-package-buy-form {
	display: contents;
}

.tb-buy-now-overlay {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.4);
	z-index: 9999;
}

.tb-buy-now-overlay.is-visible {
	display: flex;
}

.tb-buy-now-overlay .tb-buy-now-spinner {
	width: 48px;
	height: 48px;
	border: 4px solid rgba(23, 61, 194, 0.2);
	border-top-color: var(--tb-primary);
	border-radius: 50%;
	animation: tb-buy-now-spin 0.7s linear infinite;
}

@keyframes tb-buy-now-spin {
	to {
		transform: rotate(360deg);
	}
}

.plugin-product-detail a.button,
.plugin-product-detail a.button:visited,
.plugin-product-detail .license-package-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.2;
	white-space: normal;
	border-radius: 50px;
}

.plugin-compare-section,
.plugin-faq-section {
	background: #ffffff;
}

.plugin-trademark-disclaimer {
	max-width: 760px;
	margin: 0 auto;
	padding: 24px 20px 0;
	color: var(--tb-muted);
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

.plugin-hero-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 560px;
	margin: 20px 0 0;
	padding: 14px 16px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-left: 4px solid var(--tb-cyan);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba( 20, 32, 74, 0.06 );
	color: var(--tb-muted);
	font-size: 13px;
	line-height: 1.6;
	text-align: left;
}

.plugin-hero-notice i {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--tb-cyan);
	font-size: 15px;
}

.plugin-steps-section {
	background: var(--tb-bg);
}

.plugin-showcase-row {
	display: flex;
	align-items: center;
	gap: 56px;
	margin-top: 72px;
}

.plugin-showcase-row.is-reverse {
	flex-direction: row-reverse;
}

.plugin-showcase-row:first-of-type {
	margin-top: 44px;
}

.plugin-showcase-media {
	position: relative;
	flex: 0 0 50%;
	max-width: 50%;
	padding: 16px 16px 0;
	background: linear-gradient( 155deg, #ffffff 0%, var(--th-blue-soft, #eef4ff) 130% );
	border: 1px solid rgba( 18, 107, 182, 0.14 );
	border-radius: 20px;
	box-shadow: 0 18px 42px rgba( 24, 36, 58, 0.07 );
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.plugin-showcase-media:hover {
	box-shadow: 0 24px 56px rgba( 24, 36, 58, 0.1 );
	transform: translateY( -4px );
}

.plugin-showcase-media::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: 2px 0 14px 8px;
	border-radius: 50%;
	background: #ff5f57;
	box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
}

.plugin-showcase-media img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--tb-border);
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	box-shadow: none;
}

.plugin-showcase-copy {
	flex: 1;
}

.plugin-showcase-copy h3 {
	margin-bottom: 12px;
	color: var(--tb-heading);
	font-size: 26px;
	font-weight: 750;
}

.plugin-showcase-copy p {
	color: var(--tb-text);
	font-size: 16px;
	line-height: 1.7;
}

/* Problem / Solution (With vs Without) */
.plugin-problem-section {
	background: #ffffff;
}

.plugin-problem-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 28px;
	max-width: 1040px;
	margin: 0 auto;
}

.plugin-problem-col {
	padding: 32px;
	border: 1px solid var(--tb-border);
	border-radius: 16px;
}

.plugin-problem-with {
	background: linear-gradient( 165deg, #f2fbf6 0%, #ffffff 70% );
	border-color: rgba( 35, 188, 118, 0.28 );
}

.plugin-problem-without {
	background: linear-gradient( 165deg, #fdf3f2 0%, #ffffff 70% );
	border-color: rgba( 214, 69, 69, 0.24 );
}

.plugin-problem-col h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	color: var(--tb-heading);
	font-size: 19px;
	font-weight: 800;
}

.plugin-problem-with h3 i {
	color: #118554;
}

.plugin-problem-without h3 i {
	color: #d64545;
}

.plugin-problem-col ul {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plugin-problem-col li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.plugin-problem-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 13px;
}

.plugin-problem-with .plugin-problem-icon {
	background: rgba( 35, 188, 118, 0.14 );
	color: #118554;
}

.plugin-problem-without .plugin-problem-icon {
	background: rgba( 214, 69, 69, 0.12 );
	color: #d64545;
}

.plugin-problem-col li strong {
	display: block;
	margin-bottom: 3px;
	color: var(--tb-heading);
	font-size: 15px;
	font-weight: 700;
}

.plugin-problem-col li p {
	margin: 0;
	color: var(--tb-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

/* Feature highlights icon grid */
.plugin-feature-grid-section {
	background: var(--tb-bg);
}

.plugin-feature-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

.plugin-feature-grid-item {
	padding: 26px 24px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 14px;
	box-shadow: 0 16px 38px rgba( 20, 32, 74, 0.06 );
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.plugin-feature-grid-item:hover {
	border-color: rgba( 23, 61, 194, 0.28 );
	box-shadow: var(--th-shadow);
	transform: translateY( -3px );
}

.plugin-feature-grid-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: var(--th-blue-soft);
	color: var(--tb-primary);
	font-size: 20px;
}

.plugin-feature-icon--purple {
	background: #f1eaff;
	color: #7c4dff;
}

.plugin-feature-icon--orange {
	background: #fff3e0;
	color: #ef9a1e;
}

.plugin-feature-icon--green {
	background: #e3f6ec;
	color: #1ea672;
}

.plugin-feature-icon--pink {
	background: #fde9f1;
	color: #d6428a;
}

.plugin-feature-grid-item h3 {
	margin-bottom: 8px;
	color: var(--tb-heading);
	font-size: 16px;
	font-weight: 750;
}

.plugin-feature-grid-item p {
	margin: 0;
	color: var(--tb-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

/* Screenshot zoom trigger + lightbox carousel */
.plugin-showcase-zoom {
	position: relative;
	display: block;
	width: 100%;
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: zoom-in;
}

.plugin-showcase-zoom-hint {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba( 16, 28, 70, 0.72 );
	color: #ffffff;
	font-size: 15px;
	opacity: 0;
	transform: translateY( 4px );
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.plugin-showcase-zoom:hover .plugin-showcase-zoom-hint,
.plugin-showcase-zoom:focus-visible .plugin-showcase-zoom-hint {
	opacity: 1;
	transform: translateY( 0 );
}

/* Lightbox chrome is a compact white card, not a full-bleed color panel —
   keeps the screenshot itself the focus instead of a large tinted background,
   and sizes to the image instead of forcing a fixed box that letterboxes
   every aspect ratio differently. */
.plugin-showcase-lightbox .modal-dialog {
	max-width: 94vw;
	width: fit-content;
}

.plugin-showcase-lightbox .modal-content {
	width: fit-content;
	max-width: 94vw;
	margin: 0 auto;
	background: #ffffff;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba( 8, 14, 32, 0.45 );
}

.plugin-showcase-lightbox .modal-body {
	padding: 20px;
}

.plugin-showcase-lightbox-close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	min-width: 0;
	padding: 0;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba( 8, 14, 32, 0.24 );
	opacity: 1;
}

.plugin-showcase-lightbox-close:hover {
	background: #f1f6fb;
}

.plugin-showcase-lightbox #pluginShowcaseCarousel {
	width: fit-content;
	max-width: 100%;
}

.plugin-showcase-lightbox .carousel-inner,
.plugin-showcase-lightbox .carousel-item {
	width: fit-content;
	max-width: 100%;
}

/* Slides are sized to their own image (not a uniform 100% width), so
   Bootstrap's transform-based slide animation — which assumes same-width
   slides — would visibly jump between differently sized frames. Cut
   instantly between slides instead of animating the swap. */
.plugin-showcase-lightbox .carousel-item {
	transition: none;
}

.plugin-showcase-lightbox .carousel-item img {
	display: block;
	width: auto;
	height: auto;
	max-width: min( 900px, 88vw );
	max-height: 68vh;
	margin: 0 auto;
	border-radius: 12px;
	object-fit: contain;
}

.plugin-showcase-lightbox .carousel-caption {
	position: static;
	max-width: min( 900px, 88vw );
	margin: 0 auto;
	padding: 16px 8px 4px;
	color: var(--tb-heading);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-shadow: none;
}

.plugin-showcase-lightbox .carousel-control-prev,
.plugin-showcase-lightbox .carousel-control-next {
	width: 64px;
	min-height: 0;
	opacity: 1;
}

.plugin-showcase-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba( 8, 14, 32, 0.2 );
	color: var(--tb-heading);
	font-size: 18px;
}

.plugin-showcase-lightbox .carousel-control-prev:hover .plugin-showcase-arrow,
.plugin-showcase-lightbox .carousel-control-next:hover .plugin-showcase-arrow {
	color: var(--tb-primary);
}

.plugin-showcase-dots {
	position: static;
	display: flex;
	justify-content: center;
	margin: 4px 0 0;
	padding: 0;
}

.plugin-showcase-dots [data-bs-slide-to] {
	width: 7px;
	height: 7px;
	min-height: 0;
	min-width: 0;
	margin: 0 4px;
	padding: 0;
	background: var(--tb-border);
	border: 0;
	border-radius: 50%;
	opacity: 1;
}

.plugin-showcase-dots [data-bs-slide-to].active {
	background: var(--tb-cyan);
}

/* Urgency countdown (license section launch banner). Scoped to
   .has-countdown only — the plain banner (icon + message, no countdown)
   must stay flex-wrap: nowrap so the icon and message text stay on the
   same row with the text wrapping inside its own flex item; wrapping the
   whole container instead pushed the icon onto its own row above the
   text on narrow screens, leaving a tall, mostly-empty pill. */
.launch-discount-banner.has-countdown {
	flex-wrap: wrap;
}

.launch-discount-countdown {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 6px;
	padding: 3px 10px;
	background: rgba( 16, 28, 70, 0.08 );
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
}

.launch-discount-countdown span {
	color: var(--tb-heading);
	font-size: 13px;
	font-weight: 800;
}

.launch-discount-countdown small {
	margin-right: 4px;
	color: var(--tb-muted);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}

.launch-discount-banner.is-expired .launch-discount-countdown {
	display: none;
}

.plugin-compare .section-heading,
.plugin-faq .section-heading {
	margin-left: auto;
	margin-right: auto;
}

.plugin-compare-table {
	display: grid;
	max-width: 980px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	box-shadow: 0 18px 45px rgba( 20, 32, 74, 0.08 );
	overflow: hidden;
}

.plugin-compare-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 150px 150px;
	align-items: center;
	gap: 18px;
	padding: 20px 26px;
	border-bottom: 1px dashed rgba( 16, 42, 134, 0.26 );
}

.plugin-compare-row:last-child {
	border-bottom: 0;
}

.plugin-compare-head {
	background: #f7f9fc;
	border-bottom-style: solid;
	color: var(--tb-heading);
	font-weight: 800;
}

.plugin-compare-row > div:first-child {
	color: var(--tb-text);
	font-weight: 700;
}

.plugin-compare-row > div:not(:first-child) {
	text-align: center;
}

.compare-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 10px;
	border-radius: 999px;
	color: #ffffff;
	font-size: 0;
	font-weight: 800;
}

.compare-mark::before {
	font-size: 18px;
	line-height: 1;
}

.compare-mark.is-yes {
	background: #078a17;
}

.compare-mark.is-yes::before {
	content: "✓";
}

.compare-mark.is-no {
	background: #f31320;
}

.compare-mark.is-no::before {
	content: "×";
}

.plugin-steps {
	--bs-gutter-x: 38px;
	--bs-gutter-y: 38px;
}

.plugin-step-grid {
	display: grid;
	gap: 16px;
}

.plugin-step-grid article {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 24px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	box-shadow: 0 18px 45px rgba( 20, 32, 74, 0.08 );
}

.plugin-step-grid .plugin-step-number {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--th-blue-soft);
	color: var(--tb-primary);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
}

.plugin-step-grid strong,
.plugin-step-grid span {
	display: block;
}

.plugin-step-grid strong {
	margin-bottom: 8px;
	color: var(--tb-heading);
	font-weight: 800;
}

.plugin-step-grid span {
	color: var(--tb-muted);
	font-size: 14px;
	line-height: 1.65;
}

.pricing-card {
	display: flex;
	flex-direction: column;
}

.pricing-card.highlighted {
	border-color: rgba( 24, 183, 230, 0.48 );
	box-shadow: var(--tb-shadow);
	transform: translateY( -12px );
}

.pricing-card > strong {
	display: block;
	margin-bottom: 12px;
	color: var(--tb-heading);
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
}

.pricing-card ul {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding-left: 18px;
	color: var(--tb-muted);
}

.pricing-card .button {
	margin-top: auto;
}

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	max-width: 1180px;
	margin: 0 auto;
}

.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-cart .wc-block-cart {
	margin-top: 18px;
}

.woocommerce-cart .wc-block-cart,
.woocommerce-cart .woocommerce {
	color: var(--tb-text);
}

.woocommerce-cart .wc-block-cart__main,
.woocommerce-cart .woocommerce-cart-form {
	padding: 28px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	box-shadow: 0 18px 45px rgba( 20, 32, 74, 0.08 );
}

.woocommerce-cart .wc-block-cart__sidebar,
.woocommerce-cart .cart-collaterals .cart_totals {
	padding: 28px;
	background:
		linear-gradient( 180deg, #ffffff 0%, #f7fbff 100% );
	border: 1px solid rgba( 24, 183, 230, 0.28 );
	border-radius: 8px;
	box-shadow: 0 24px 60px rgba( 20, 32, 74, 0.12 );
}

.woocommerce-cart .wc-block-cart-items,
.woocommerce-cart table.shop_table {
	margin: 0;
	border: 0;
}

.woocommerce-cart .wc-block-cart-items__header,
.woocommerce-cart table.shop_table th,
.woocommerce-cart .wc-block-cart__totals-title,
.woocommerce-cart .cart_totals h2 {
	color: var(--tb-heading);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce-cart .wc-block-cart-items__row,
.woocommerce-cart table.shop_table td {
	border-color: var(--tb-border);
}

.woocommerce-cart .wc-block-components-product-name,
.woocommerce-cart .woocommerce-cart-form__cart-item .product-name a {
	color: var(--tb-heading);
	font-size: 18px;
	font-weight: 800;
}

.woocommerce-cart .wc-block-components-product-metadata,
.woocommerce-cart .wc-block-components-product-metadata__description,
.woocommerce-cart .variation {
	color: var(--tb-muted);
	font-size: 14px;
}

.woocommerce-cart .wc-block-components-totals-item,
.woocommerce-cart .cart_totals tr {
	padding-top: 16px;
	padding-bottom: 16px;
	border-color: var(--tb-border);
}

.woocommerce-cart .wc-block-components-totals-item__label,
.woocommerce-cart .cart_totals th {
	color: var(--tb-heading);
	font-weight: 800;
}

.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woocommerce-cart .order-total th,
.woocommerce-cart .order-total td {
	color: var(--tb-heading);
	font-size: 24px;
	font-weight: 800;
}

.woocommerce-cart .wc-block-cart__submit-container {
	margin-top: 24px;
}

.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .wc-block-components-button.wc-block-cart__submit-button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 58px;
	padding: 16px 24px;
	background: linear-gradient( 135deg, var(--tb-primary), var(--tb-cyan-dark) );
	border: 0;
	border-radius: 8px;
	color: #ffffff;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 18px 38px rgba( 16, 42, 134, 0.24 );
}

.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-block-cart__submit-button:focus,
.woocommerce-cart .wc-block-components-button.wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-block-components-button.wc-block-cart__submit-button:focus,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus {
	background: linear-gradient( 135deg, var(--tb-cyan-dark), var(--tb-primary) );
	color: #ffffff;
	text-decoration: none;
	transform: translateY( -2px );
}

.woocommerce-cart .wc-block-components-totals-coupon {
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--tb-border);
}

.woocommerce-cart .wc-block-components-panel__button,
.woocommerce-cart .wc-block-components-totals-coupon-link {
	color: var(--tb-heading);
	font-weight: 800;
}

.woocommerce-cart .wc-block-cart__empty-cart__title,
.woocommerce-cart .cart-empty {
	color: var(--tb-heading);
	font-weight: 800;
	text-align: center;
}

.woocommerce-cart .wc-block-components-quantity-selector,
.woocommerce-cart .quantity,
.woocommerce-cart .product-quantity,
.woocommerce-checkout .wc-block-components-quantity-selector,
.woocommerce-checkout .quantity {
	display: none !important;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-separator,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2.wp-block-heading:not(.wc-block-cart__empty-cart__title),
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-collection,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid {
	display: none !important;
}

/* Classic checkout ([woocommerce_checkout] shortcode) */

.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	margin: 0 0 20px;
	padding: 16px 20px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-left: 4px solid var(--tb-cyan);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba( 20, 32, 74, 0.06 );
	color: var(--tb-text);
	list-style: none;
}

.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error {
	border-left-color: #dc2626;
}

/* Same icon-overlap fix as .woocommerce-checkout .woocommerce-info above,
   just missing for the error/success notices (e.g. failed login, wrong
   credentials) that appear in the same wrapper. */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error::before {
	position: static;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	order: -1;
	font-size: 18px;
	line-height: 1;
}

.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message::after,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error::after {
	display: none;
}

/* WooCommerce sets tabindex="-1" and calls .focus() on these notices for
   screen-reader users, which triggers the browser's default blue focus
   ring/selection styling. Keep a visible focus indicator (accessibility)
   but make it match the theme instead of the browser default. */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message:focus,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error:focus,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info:focus,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message li:focus,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error li:focus,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info li:focus {
	outline: 2px solid var(--tb-cyan);
	outline-offset: 2px;
	background: transparent;
}

.woocommerce-checkout .woocommerce-notices-wrapper .button {
	margin: 0;
}

.woocommerce-checkout .woocommerce-info {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 16px 20px;
	background: var(--tb-accent-soft);
	border: 1px solid rgba( 24, 183, 230, 0.28 );
	border-radius: 8px;
	color: var(--tb-heading);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}

/* WooCommerce core absolutely-positions this icon assuming the notice keeps
   its default padding-left: 3.5em to reserve space for it. Our padding above
   removes that reserved space, so without this the icon renders on top of
   the text instead of beside it. Turning it into a normal flex item (instead
   of position: absolute) fixes that and lets the gap above space it out. */
.woocommerce-checkout .woocommerce-info::before {
	position: static;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	order: -1;
	color: var(--tb-cyan-dark);
	font-size: 18px;
	line-height: 1;
}

.woocommerce-checkout .woocommerce-info::after {
	display: none;
}

.woocommerce-checkout .woocommerce-info a.showcoupon {
	color: var(--tb-primary);
	font-weight: 800;
	text-decoration: underline;
}

.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 24px;
	margin-bottom: 24px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
}

.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon .form-row {
	flex: 1 1 240px;
	margin: 0;
}

.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon #coupon_code {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	background: #ffffff;
	border: 1px solid #cfdbe8;
	border-radius: 6px;
	color: var(--tb-text);
	font-size: 15px;
	font-weight: 500;
}

.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon #coupon_code:focus {
	border-color: var(--tb-cyan);
	outline: 3px solid rgba( 24, 183, 230, 0.16 );
}

.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon button[name="apply_coupon"] {
	flex: 0 0 auto;
	min-height: 50px;
	padding: 0 26px;
	background: linear-gradient( 135deg, var(--tb-primary), var(--tb-cyan-dark) );
	border: 0;
	border-radius: 6px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
}

.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon button[name="apply_coupon"]:hover,
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon button[name="apply_coupon"]:focus {
	background: linear-gradient( 135deg, var(--tb-cyan-dark), var(--tb-primary) );
	color: #ffffff;
}

.woocommerce-checkout .woocommerce-form-login .input-text {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	background: #ffffff;
	border: 1px solid #cfdbe8;
	border-radius: 6px;
	color: var(--tb-text);
	font-size: 15px;
	font-weight: 500;
}

.woocommerce-checkout .woocommerce-form-login .input-text:focus {
	border-color: var(--tb-cyan);
	outline: 3px solid rgba( 24, 183, 230, 0.16 );
}

.woocommerce-checkout .woocommerce-form-login p.form-row:not(.form-row-first):not(.form-row-last) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 4px;
}

.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 18px;
	background: linear-gradient( 135deg, var(--tb-primary), var(--tb-cyan-dark) );
	border: 0;
	border-radius: 6px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__submit:focus {
	background: linear-gradient( 135deg, var(--tb-cyan-dark), var(--tb-primary) );
	color: #ffffff;
	transform: translateY( -1px );
}

.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--tb-heading);
	font-weight: 700;
	cursor: pointer;
}

.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--tb-primary);
	cursor: pointer;
}

.woocommerce-checkout .woocommerce-form-login .woocommerce-LostPassword {
	margin-top: 4px;
}

.woocommerce-checkout .woocommerce-form-login .woocommerce-LostPassword a {
	font-weight: 700;
}

.woocommerce-checkout .woocommerce-form-login .show-password-input {
	top: 50%;
	right: 12px;
	width: 34px;
	min-height: 34px;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--tb-muted);
	transform: translateY( -50% );
}

.woocommerce-checkout .woocommerce-form-login .show-password-input:hover,
.woocommerce-checkout .woocommerce-form-login .show-password-input:focus {
	background: transparent;
	color: var(--tb-primary);
	box-shadow: none;
	transform: translateY( -50% );
}

.woocommerce-checkout .entry-content form.checkout {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* The default heading is hidden — a replacement is rendered inside #order_review
   itself instead (see functions.php), so heading + table share one real box and
   sit flush together with no gap between them. */
.woocommerce-checkout #order_review_heading {
	display: none;
}

.woocommerce-checkout .ppcp-messages {
	display: none;
}

/* Order notes are removed site-wide (woocommerce_enable_order_notes_field),
   so #customer_details only ever contains the billing column now. */
.woocommerce-checkout #customer_details .col-2 {
	display: none;
}

.woocommerce-checkout #customer_details .col-1 {
	width: auto;
	float: none;
	padding: 28px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	box-shadow: 0 18px 45px rgba( 20, 32, 74, 0.08 );
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_comments_field > label,
.woocommerce-checkout h3#ship-to-different-address {
	margin: 0 0 20px;
	color: var(--tb-heading);
	font-size: 20px;
	font-weight: 800;
}

.woocommerce-checkout .form-row {
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce-checkout .form-row:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 8px;
	color: var(--tb-heading);
	font-size: 14px;
	font-weight: 800;
}

.woocommerce-checkout .form-row .required {
	color: #dc2626;
	text-decoration: none;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	background: #ffffff;
	border: 1px solid #cfdbe8;
	border-radius: 6px;
	color: var(--tb-text);
	font-size: 15px;
	font-weight: 500;
	box-shadow: none;
}

.woocommerce-checkout .form-row textarea {
	min-height: 110px;
	padding-top: 12px;
}

.woocommerce-checkout .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--tb-text);
	line-height: 1.4;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	transform: translateY( -50% );
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection--single {
	border-color: var(--tb-cyan);
	outline: 3px solid rgba( 24, 183, 230, 0.16 );
}

.woocommerce-checkout #order_review {
	padding: 28px;
	background: linear-gradient( 180deg, #ffffff 0%, #f7fbff 100% );
	border: 1px solid rgba( 24, 183, 230, 0.28 );
	border-radius: 8px;
	box-shadow: 0 24px 60px rgba( 20, 32, 74, 0.12 );
}

.woocommerce-checkout #order_review .tb-order-review-heading {
	margin: 0 0 20px;
	color: var(--tb-heading);
	font-size: 22px;
	font-weight: 800;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table thead th {
	padding-bottom: 12px;
	color: var(--tb-heading);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 1px solid var(--tb-border);
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th {
	padding: 14px 0;
	border-color: var(--tb-border);
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th.product-total {
	white-space: nowrap;
	text-align: right;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .product-name {
	color: var(--tb-heading);
	font-weight: 700;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .variation {
	margin-top: 6px;
	color: var(--tb-muted);
	font-size: 13px;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .order-total td {
	font-size: 20px;
	font-weight: 800;
	color: var(--tb-heading);
	white-space: nowrap;
	border-top: 2px solid var(--tb-border);
	border-bottom: 0;
}

.woocommerce-checkout #payment {
	padding: 28px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	box-shadow: 0 18px 45px rgba( 20, 32, 74, 0.08 );
}

.woocommerce-checkout #payment ul.wc_payment_methods {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #payment .wc_payment_method {
	position: relative;
	margin: 0 0 12px;
	padding: 0;
	background: #fafcff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* WooCommerce core ships `.woocommerce-checkout #payment ul.payment_methods li
   { margin: 0 }` (woocommerce.css) — 1 ID + 2 classes + 2 type selectors beats
   the rule above (1 ID + 2 classes + 0 type selectors), so the 12px gap above
   was silently getting zeroed and adjacent payment method cards' borders sat
   flush against each other. Re-declare margin-bottom through a selector that
   matches the real markup (ul.wc_payment_methods > li.wc_payment_method) to
   outweigh it on class count instead of fighting it with !important. */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
	margin: 0 0 12px;
}

.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #payment .wc_payment_method:has( input.input-radio:checked ) {
	background: #ffffff;
	border-color: var(--tb-primary);
	box-shadow: 0 0 0 1px var(--tb-primary);
}

.woocommerce-checkout #payment .wc_payment_method input.input-radio {
	/* WooCommerce core's checkout.js auto-hides the radio input (inline
	   style="display:none") whenever it's the only available gateway — e.g.
	   an annual-subscription-only cart offering just PayPal. That leaves the
	   option looking unfinished/inconsistent with the normal multi-gateway
	   view (radio circle + label). Force it visible; !important is required
	   to beat the inline style. */
	display: block !important;
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 22px;
	left: 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	background: #ffffff;
	border: 2px solid #b9c6d8;
	border-radius: 50%;
	cursor: pointer;
}

.woocommerce-checkout #payment .wc_payment_method input.input-radio:checked {
	border-color: var(--tb-primary);
}

.woocommerce-checkout #payment .wc_payment_method input.input-radio:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	background: var(--tb-primary);
	border-radius: 50%;
	transform: translate( -50%, -50% );
}

.woocommerce-checkout #payment .wc_payment_method input.input-radio:focus-visible {
	outline: 3px solid rgba( 24, 183, 230, 0.25 );
	outline-offset: 2px;
}

.woocommerce-checkout #payment .wc_payment_method label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 18px 18px 58px;
	color: var(--tb-heading);
	font-weight: 700;
	cursor: pointer;
}

/* WooCommerce core ships .woocommerce-checkout #payment div.payment_box
   (with the "div" type selector) at a higher specificity than a bare
   ".payment_box" class selector, so it was winning the cascade and leaving
   the default lavender speech-bubble box in place. Match "div.payment_box"
   here so this theme rule wins instead. */
.woocommerce-checkout #payment div.payment_box {
	margin: 0;
	padding: 0 18px 18px 58px;
	background: transparent;
	color: var(--tb-muted);
	font-size: 14px;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment .place-order {
	margin: 0;
	padding-top: 4px;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
	margin-bottom: 18px;
	color: var(--tb-muted);
	font-size: 13px;
	line-height: 1.6;
}

.woocommerce-checkout #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	min-height: 58px;
	padding: 16px 24px;
	background: linear-gradient( 135deg, var(--tb-primary), var(--tb-cyan-dark) );
	border: 0;
	border-radius: 8px;
	color: #ffffff;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 18px 38px rgba( 16, 42, 134, 0.24 );
	cursor: pointer;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus {
	background: linear-gradient( 135deg, var(--tb-cyan-dark), var(--tb-primary) );
	color: #ffffff;
	transform: translateY( -2px );
}

/* Only hide the standalone Apple Pay / Google Pay express buttons (not tied to
   any payment-method radio) and the mini-cart smart button. Do NOT hide
   #ppc-button-ppcp-gateway or #ppc-button-ppcp-card-button-gateway — those are
   the actual submit buttons PayPal Payments renders for the "PayPal" and
   "Credit and debit card payments" radio options; its own JS hides the
   standard Place Order button for those methods and expects its button here
   instead, so hiding them leaves no way to submit the order at all. */
.woocommerce-checkout #ppc-button-ppcp-applepay,
.woocommerce-checkout #ppc-button-ppcp-googlepay,
.woocommerce-checkout #ppc-button-minicart {
	display: none;
}

/* PayPal Payments renders both its "PayPal" AND "Credit and debit card payments"
   button containers unconditionally as siblings after #payment (regardless of
   which radio is selected) — only ONE actually has content at a time, the
   other sits empty. Hide both by default, and only show whichever one matches
   the currently selected radio.
   It previously got its own fully separate card (own border/shadow/max-width,
   floating below with a gap) which read as an unrelated extra section rather
   than part of checkout. Since #payment and .ppc-button-wrapper are direct
   siblings in the same <form>, they're styled here to visually merge into one
   card instead: #payment drops its bottom border/radius exactly when its
   matching button wrapper is about to render below it, and the wrapper picks
   up the same left/right/bottom border, full width, and only bottom corners
   rounded, with zero gap — so the PayPal button reads as this card's footer,
   not a second card.
   Note: the card-entry fields themselves (number/expiry/CVV) are rendered by
   PayPal's own SDK inside secure iframes for PCI compliance — their internal
   appearance isn't something page CSS can restyle. If they still look
   inconsistent with the rest of the design, check WooCommerce → Settings →
   Payments → PayPal → Style settings, which is the supported way to reskin
   that specific PayPal-controlled UI. */
.woocommerce-checkout .ppc-button-wrapper {
	display: none;
}

.woocommerce-checkout #payment:has( #payment_method_ppcp-gateway:checked ),
.woocommerce-checkout #payment:has( #payment_method_ppcp-card-button-gateway:checked ) {
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: none;
}

.woocommerce-checkout #payment:has( #payment_method_ppcp-gateway:checked ) ~ .ppc-button-wrapper:has( #ppc-button-ppcp-gateway ),
.woocommerce-checkout #payment:has( #payment_method_ppcp-card-button-gateway:checked ) ~ .ppc-button-wrapper:has( #ppc-button-ppcp-card-button-gateway ) {
	display: block;
	/* form.checkout is `display: flex; gap: 24px;` (line ~1916) — that gap
	   applies between every direct child regardless of this element's own
	   margin, so margin-top: 0 alone still left a 24px seam here. Cancel it
	   with a matching negative margin so the wrapper sits flush under
	   #payment instead. */
	margin-top: -24px;
	padding: 20px 28px 28px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-top: 1px solid var(--tb-border);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	box-shadow: 0 18px 45px rgba( 20, 32, 74, 0.08 );
}

.woocommerce-checkout .ppc-button-wrapper > div {
	max-width: 420px;
}


.account-page-container {
	padding-top: 68px;
	padding-bottom: 86px;
}

.woocommerce-account .entry-header {
	margin-bottom: 28px;
}

.woocommerce-account .entry-title {
	margin-bottom: 0;
	color: #101f63;
	font-size: clamp( 34px, 4.2vw, 54px );
	font-weight: 800;
	letter-spacing: 0;
}

.woocommerce-account .entry-content {
	max-width: none;
}

.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 300px minmax( 0, 1fr );
	gap: 28px;
	align-items: start;
	color: var(--tb-text);
}

.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after {
	content: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top: 110px;
	float: none;
	width: auto;
	padding: 14px;
	background:
		linear-gradient( 180deg, #ffffff 0%, #f7fbff 100% );
	border: 1px solid rgba( 220, 230, 241, 0.95 );
	border-radius: 8px;
	box-shadow: 0 18px 44px rgba( 20, 32, 74, 0.08 );
}

body.admin-bar.woocommerce-account .woocommerce-MyAccount-navigation {
	top: 142px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: grid;
	grid-template-columns: 38px minmax( 0, 1fr );
	gap: 12px;
	align-items: center;
	min-height: 54px;
	padding: 8px 12px 8px 8px;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--tb-heading);
	font-weight: 750;
	line-height: 1.25;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus {
	background: rgba( 24, 183, 230, 0.08 );
	border-color: rgba( 24, 183, 230, 0.22 );
	color: var(--tb-primary);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a[aria-current="page"] {
	background: linear-gradient( 135deg, var(--tb-primary), var(--tb-cyan-dark) );
	border-color: transparent;
	color: #ffffff;
	box-shadow: 0 14px 28px rgba( 16, 42, 134, 0.18 );
}

.account-nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: #eef7fc;
	border: 1px solid rgba( 24, 183, 230, 0.22 );
	border-radius: 8px;
	color: var(--tb-primary);
	font-size: 18px;
	font-weight: 800;
}

.woocommerce-account .is-active .account-nav-icon,
.woocommerce-account a[aria-current="page"] .account-nav-icon {
	background: rgba( 255, 255, 255, 0.16 );
	border-color: rgba( 255, 255, 255, 0.32 );
	color: #ffffff;
}

.account-nav-icon::before {
	display: inline-block;
	font-family: bootstrap-icons !important;
	font-style: normal;
	font-weight: 400 !important;
	font-variant: normal;
	line-height: 1;
	text-transform: none;
	vertical-align: -0.125em;
	content: "\f287"; /* bi-circle-fill, generic fallback */
}

.account-nav-icon--dashboard::before {
	content: "\f580"; /* bi-speedometer2 */
}

.account-nav-icon--orders::before {
	content: "\f170"; /* bi-bag-check-fill */
}

.account-nav-icon--edit-address::before {
	content: "\f3e7"; /* bi-geo-alt-fill */
}

.account-nav-icon--payment-methods::before {
	content: "\f2db"; /* bi-credit-card-fill */
}

.account-nav-icon--edit-account::before {
	content: "\f4da"; /* bi-person-fill */
}

.account-nav-icon--techbella-licenses::before {
	content: "\f44e"; /* bi-key-fill */
}

.account-nav-icon--customer-logout::before {
	content: "\f1c3"; /* bi-box-arrow-right */
}

.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
	float: none;
	width: auto;
	padding: 34px;
	background: #ffffff;
	border: 1px solid rgba( 220, 230, 241, 0.95 );
	border-radius: 8px;
	box-shadow: 0 18px 44px rgba( 20, 32, 74, 0.08 );
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
	padding: 18px 20px;
	background:
		linear-gradient( 135deg, rgba( 24, 183, 230, 0.1 ), rgba( 35, 188, 118, 0.07 ) ),
		#f8fcff;
	border: 1px solid rgba( 24, 183, 230, 0.18 );
	border-radius: 8px;
	color: var(--tb-text);
}

.woocommerce-account:not(.logged-in) .site-main {
	background:
		radial-gradient( circle at 80% 15%, rgba( 24, 183, 230, 0.08 ), transparent 32% ),
		linear-gradient( 100deg, #ffffff 0%, #ffffff 55%, #f4f9fd 100% );
}

.woocommerce-account:not(.logged-in) .account-page-container {
	padding-top: 96px;
	padding-bottom: 96px;
}

.woocommerce-account:not(.logged-in) .woocommerce {
	color: var(--tb-text);
}

.woocommerce-account:not(.logged-in) #customer_login.account-auth-layout {
	display: flex !important;
	gap: 28px;
	align-items: stretch;
	justify-content: center;
	margin: 0;
}

.woocommerce-account:not(.logged-in) #customer_login.account-auth-layout::before,
.woocommerce-account:not(.logged-in) #customer_login.account-auth-layout::after {
	display: none !important;
	content: none !important;
}

.woocommerce-account:not(.logged-in) #customer_login .account-auth-card {
	float: none !important;
	clear: none !important;
	width: calc( 50% - 14px ) !important;
	max-width: 560px;
	min-width: 0;
	padding: 32px;
	background:
		linear-gradient( 180deg, #ffffff 0%, #f8fcff 100% );
	border: 1px solid rgba( 220, 230, 241, 0.95 );
	border-radius: 8px;
	box-shadow: 0 18px 44px rgba( 20, 32, 74, 0.08 );
}

.woocommerce-account:not(.logged-in) #customer_login.account-auth-layout--single .account-auth-card {
	width: 100% !important;
	max-width: 480px;
}

.woocommerce-account:not(.logged-in) #customer_login .account-auth-card h2 {
	margin-bottom: 8px;
	color: var(--tb-heading);
	font-size: clamp( 26px, 2.5vw, 36px );
	font-weight: 800;
}

.account-auth-switch {
	margin: 4px 0 0;
	color: var(--tb-muted);
	font-size: 14px;
}

.account-auth-switch a {
	margin-left: 4px;
	font-weight: 700;
}

.account-auth-intro,
.account-auth-note,
.account-auth-card .woocommerce-privacy-policy-text p {
	color: var(--tb-muted);
	font-size: 15px;
	line-height: 1.7;
}

.account-auth-intro {
	margin-bottom: 24px;
}

.woocommerce-account:not(.logged-in) #customer_login .account-auth-card form {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce-account:not(.logged-in) #customer_login .account-auth-card .form-row {
	margin: 0;
	padding: 0;
}

.woocommerce-account:not(.logged-in) #customer_login .account-auth-card label {
	display: block;
	margin-bottom: 8px;
	color: var(--tb-heading);
	font-size: 14px;
	font-weight: 800;
}

.woocommerce-account:not(.logged-in) #customer_login .account-auth-card .input-text {
	width: 100% !important;
	min-height: 54px;
	padding: 13px 15px;
	background: #ffffff;
	border: 1px solid #cfdbe8;
	border-radius: 6px;
	color: var(--tb-text);
	font: inherit;
	font-weight: 500;
	box-shadow: none;
}

.woocommerce-account:not(.logged-in) #customer_login .account-auth-card .input-text:focus {
	border-color: var(--tb-cyan);
	outline: 3px solid rgba( 24, 183, 230, 0.16 );
}

.account-auth-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	margin-top: 4px;
}

.woocommerce-account:not(.logged-in) .account-auth-actions .woocommerce-form-login__submit,
.woocommerce-account:not(.logged-in) .account-auth-submit-row .woocommerce-form-register__submit {
	min-width: 150px;
	min-height: 50px;
	padding: 0 24px;
	background: var(--tb-primary) !important;
	border: 0;
	border-radius: 6px;
	color: #ffffff !important;
	font-weight: 700;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.woocommerce-account:not(.logged-in) .account-auth-actions .woocommerce-form-login__submit:hover,
.woocommerce-account:not(.logged-in) .account-auth-actions .woocommerce-form-login__submit:focus,
.woocommerce-account:not(.logged-in) .account-auth-submit-row .woocommerce-form-register__submit:hover,
.woocommerce-account:not(.logged-in) .account-auth-submit-row .woocommerce-form-register__submit:focus {
	background: var(--tb-primary-dark) !important;
	color: #ffffff !important;
	transform: translateY( -1px );
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	color: var(--tb-heading);
	font-weight: 800;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.woocommerce-account:not(.logged-in) .woocommerce-LostPassword {
	margin-top: 4px;
}

.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a,
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-link {
	font-weight: 800;
}

.account-auth-submit-row {
	margin-top: 8px;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-Address-title h2 {
	color: var(--tb-heading);
	font-size: clamp( 22px, 2vw, 30px );
	font-weight: 800;
}

.woocommerce-account table.shop_table {
	width: 100%;
	margin: 0;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 8px;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: 18px;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid var(--tb-border);
	border-left: 0;
	text-align: left;
	vertical-align: middle;
}

.woocommerce-account table.shop_table tr:last-child td {
	border-bottom: 0;
}

.woocommerce-account table.shop_table th {
	background: #f7fbff;
	color: var(--tb-heading);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce-account table.shop_table td {
	color: var(--tb-text);
	font-weight: 500;
}

.woocommerce-account table.shop_table a:not(.button) {
	color: var(--tb-primary);
	font-weight: 750;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a,
.woocommerce-account .download-product a,
.woocommerce-account .woocommerce-table__product-name a {
	color: var(--tb-heading);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.35;
}

.woocommerce-account table.shop_table .button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-button,
.woocommerce-account .edit,
.woocommerce-account .wc-forward {
	min-height: 42px;
	padding: 11px 15px;
	border-radius: 6px;
	background: var(--tb-primary);
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	box-shadow: 0 10px 22px rgba( 16, 42, 134, 0.16 );
}

.woocommerce-account table.shop_table .button:hover,
.woocommerce-account table.shop_table .button:focus,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .woocommerce-Button:focus,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account .woocommerce-button:focus,
.woocommerce-account .edit:hover,
.woocommerce-account .edit:focus,
.woocommerce-account .wc-forward:hover,
.woocommerce-account .wc-forward:focus {
	background: var(--tb-cyan-dark);
	color: #ffffff;
	text-decoration: none;
}

/* Catch-all: WooCommerce core ships a `.woocommerce button.button` rule with
   higher specificity (2 classes + the `button` element) than plain 2-class
   theme selectors like `.woocommerce-account .woocommerce-Button` above, so
   any dashboard submit button that doesn't happen to also carry an extra
   theme class (e.g. the default edit-address template's bare `class="button"`
   Save button) silently falls back to WooCommerce's gray default. Force it. */
.woocommerce-account form button[type="submit"]:not( :disabled ),
.woocommerce-account form input[type="submit"]:not( :disabled ) {
	background: var(--tb-primary) !important;
	color: #ffffff !important;
	border-color: transparent !important;
}

.woocommerce-account form button[type="submit"]:not( :disabled ):hover,
.woocommerce-account form button[type="submit"]:not( :disabled ):focus,
.woocommerce-account form input[type="submit"]:not( :disabled ):hover,
.woocommerce-account form input[type="submit"]:not( :disabled ):focus {
	background: var(--tb-cyan-dark) !important;
	color: #ffffff !important;
}

.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 18px 20px;
	background: #f8fcff;
	border: 1px solid rgba( 24, 183, 230, 0.22 );
	border-left: 4px solid var(--tb-cyan);
	border-radius: 8px;
	color: var(--tb-text);
	box-shadow: none;
}

.woocommerce-account .woocommerce-error {
	border-color: rgba( 220, 38, 38, 0.22 );
	border-left-color: #dc2626;
}

/* Same fix as the checkout notices above: WooCommerce core absolutely-positions
   this icon assuming the notice keeps its default padding-left: 3.5em to
   reserve space for it. Our padding above removes that reserved space, so
   without this the icon renders on top of the text instead of beside it. */
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before {
	position: static;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	order: -1;
	font-size: 18px;
	line-height: 1;
}

.woocommerce-account .woocommerce-info::after,
.woocommerce-account .woocommerce-message::after,
.woocommerce-account .woocommerce-error::after {
	display: none;
}

.woocommerce-account form {
	display: grid;
	gap: 16px;
}

.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account form .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	column-gap: 22px;
	row-gap: 18px;
}

.woocommerce-account .woocommerce-EditAccountForm > .clear,
.woocommerce-account .woocommerce-address-fields__field-wrapper > .clear {
	display: none;
}

.woocommerce-account .form-row-first,
.woocommerce-account .form-row-last {
	float: none;
	width: 100% !important;
	max-width: none;
	min-width: 0;
}

.woocommerce-account .woocommerce-EditAccountForm > .form-row {
	min-width: 0;
}

.woocommerce-account .form-row-wide,
.woocommerce-account .woocommerce-EditAccountForm > fieldset,
.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type,
.woocommerce-account .woocommerce-address-fields > p:last-child,
.woocommerce-account .woocommerce-address-fields__field-wrapper > #billing_address_1_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper > #billing_address_2_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper > #billing_country_field,
.woocommerce-account .woocommerce-address-fields__field-wrapper > #billing_email_field {
	grid-column: 1 / -1;
}

.woocommerce-account form fieldset {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 8px 0 0;
	padding: 24px;
	background: #f8fcff;
	border: 1px solid rgba( 24, 183, 230, 0.18 );
	border-radius: 8px;
}

.woocommerce-account form legend {
	padding: 0 10px;
	color: var(--tb-heading);
	font-size: 18px;
	font-weight: 800;
}

.woocommerce-account .form-row {
	margin: 0;
	padding: 0;
}

.woocommerce-account .form-row label {
	display: block;
	margin-bottom: 8px;
	color: var(--tb-heading);
	font-size: 14px;
	font-weight: 800;
}

.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row input[type="text"],
.woocommerce-account .form-row input[type="email"],
.woocommerce-account .form-row input[type="password"],
.woocommerce-account .form-row input[type="tel"],
.woocommerce-account .form-row select,
.woocommerce-account .select2-container .select2-selection--single {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	background: #ffffff;
	border: 1px solid #cfdbe8;
	border-radius: 6px;
	color: var(--tb-text);
	font-size: 15px;
	font-weight: 500;
	box-shadow: none;
}

.woocommerce-account .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--tb-text);
	line-height: 1.4;
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	transform: translateY( -50% );
}

.woocommerce-account .form-row input:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-account .select2-container--focus .select2-selection--single {
	border-color: var(--tb-cyan);
	outline: 3px solid rgba( 24, 183, 230, 0.16 );
}

.woocommerce-account .woocommerce-EditAccountForm .form-row .input-text {
	width: 100% !important;
	max-width: none !important;
}

.woocommerce-account .form-row span em,
.woocommerce-account #account_display_name_description {
	display: block;
	margin-top: 7px;
	color: var(--tb-muted);
	font-size: 13px;
	line-height: 1.6;
}

.woocommerce-account .form-row .required {
	color: #dc2626;
}

.woocommerce-account .show-password-input {
	top: 50%;
	right: 12px;
	width: 34px;
	min-height: 34px;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--tb-muted);
	transform: translateY( -50% );
}

.woocommerce-account .show-password-input:hover,
.woocommerce-account .show-password-input:focus {
	background: transparent;
	color: var(--tb-primary);
	box-shadow: none;
	transform: translateY( -50% );
}

.woocommerce-account .woocommerce-address-fields h2,
.woocommerce-account .woocommerce-EditAccountForm + h2,
.woocommerce-account .woocommerce-MyAccount-content form > h2 {
	margin-bottom: 22px;
	font-size: clamp( 24px, 2vw, 32px );
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.woocommerce-account .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address-title::after {
	content: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
	max-width: none;
	margin: 0;
	color: var(--tb-heading);
	font-size: clamp( 24px, 2.2vw, 30px );
	font-weight: 800;
	line-height: 1.15;
}

.woocommerce-account .u-columns.woocommerce-Addresses,
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 18px;
	margin-top: 24px;
}

.woocommerce-account .woocommerce-MyAccount-content > p + .woocommerce-Addresses,
.woocommerce-account .woocommerce-MyAccount-content > p + .u-columns.woocommerce-Addresses {
	margin-top: 28px;
}

.woocommerce-account .woocommerce-Address {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto !important;
	max-width: none;
	min-height: 220px;
	margin: 0;
	padding: 28px;
	background: #f8fcff;
	border: 1px solid rgba( 24, 183, 230, 0.18 );
	border-radius: 8px;
}

.woocommerce-account .woocommerce-Address:only-child {
	max-width: 720px;
}

.woocommerce-account .woocommerce-Address .edit {
	flex: 0 0 auto;
	float: none;
	width: auto;
	max-width: none;
	min-height: 42px;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.25;
	white-space: normal;
}

.woocommerce-account .woocommerce-Address address {
	flex: 1;
	margin: 0;
	color: var(--tb-muted);
	font-size: 16px;
	font-style: normal;
	line-height: 1.7;
}

.woocommerce-account .woocommerce-address-fields > p:last-child,
.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type {
	margin-top: 8px;
}

.woocommerce-account .woocommerce-Button.button,
.woocommerce-account .woocommerce-address-fields .button {
	min-width: 150px;
	min-height: 48px;
	background: var(--tb-primary);
	color: #ffffff;
}

.woocommerce-account .woocommerce-Button.button:disabled,
.woocommerce-account .woocommerce-address-fields .button:disabled,
.woocommerce-account .woocommerce-Button.button:disabled:hover,
.woocommerce-account .woocommerce-address-fields .button:disabled:hover {
	background: #e7ebf2;
	color: #6c7485;
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

.woocommerce-account .woocommerce-PaymentMethods {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-PaymentMethod {
	padding: 16px;
	background: #f8fcff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
}

.woocommerce-account mark {
	padding: 3px 7px;
	background: rgba( 24, 183, 230, 0.14 );
	border-radius: 6px;
	color: var(--tb-heading);
	font-weight: 800;
}

.woocommerce-account .woocommerce-customer-details address {
	padding: 20px;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	font-style: normal;
}

.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
	margin-top: 26px;
}

.woocommerce-account .tblm-license-helper {
	margin: -6px 0 20px;
	color: var(--tb-muted);
	font-size: 15px;
}

.woocommerce-account .tblm-account-license-list {
	position: relative;
	overflow-x: auto;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
}

.woocommerce-account table.tblm-account-licenses-table {
	min-width: 840px;
	border: 0;
	border-radius: 0;
}

.woocommerce-account table.tblm-account-licenses-table th,
.woocommerce-account table.tblm-account-licenses-table td {
	padding: 14px 16px;
}

.woocommerce-account table.tblm-account-licenses-table th {
	white-space: nowrap;
}

.woocommerce-account .tblm-license-product {
	display: block;
	max-width: 220px;
	color: var(--tb-heading);
	font-size: 16px;
	line-height: 1.35;
}

.woocommerce-account .tblm-account-licenses-table code,
.woocommerce-account .tblm-license-table code {
	display: inline-block;
	max-width: 100%;
	padding: 6px 8px;
	overflow-wrap: anywhere;
	background: #eef7fc;
	border: 1px solid rgba( 24, 183, 230, 0.2 );
	border-radius: 6px;
	color: var(--tb-heading);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
}

.woocommerce-account table.tblm-account-licenses-table td:nth-child(4),
.woocommerce-account table.tblm-account-licenses-table td:nth-child(5) {
	white-space: nowrap;
}

.woocommerce-account .tblm-customer-status {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 5px 9px;
	white-space: nowrap;
	background: #eef7fc;
	border: 1px solid rgba( 24, 183, 230, 0.2 );
	border-radius: 999px;
	color: var(--tb-heading);
	font-size: 12px;
	font-weight: 800;
}

.woocommerce-account .tblm-customer-status-active {
	background: rgba( 35, 188, 118, 0.1 );
	border-color: rgba( 35, 188, 118, 0.28 );
	color: #118554;
}

.woocommerce-account .tblm-customer-status-expired,
.woocommerce-account .tblm-customer-status-cancelled,
.woocommerce-account .tblm-customer-status-suspended {
	background: rgba( 220, 38, 38, 0.08 );
	border-color: rgba( 220, 38, 38, 0.2 );
	color: #b91c1c;
}

.woocommerce-account .tblm-account-licenses-table .button {
	min-height: 40px;
	padding: 10px 13px;
	white-space: nowrap;
}

.woocommerce-account .tblm-account-licenses-table small {
	display: block;
	margin-top: 6px;
	color: var(--tb-muted);
	font-size: 12px;
	font-weight: 700;
}

.woocommerce-account .tblm-license-activations {
	margin-top: 10px;
}

.woocommerce-account .tblm-license-activations summary {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--tb-primary);
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}

.woocommerce-account .tblm-activation-list {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.woocommerce-account .tblm-activation-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto auto;
	gap: 8px;
	align-items: center;
	padding: 8px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 6px;
	font-size: 13px;
}

.woocommerce-account .tblm-activation-row form {
	display: block;
}

.woocommerce-account .tblm-small-button {
	min-height: 32px;
	padding: 6px 9px;
	font-size: 12px;
	box-shadow: none;
}

.woocommerce-account .tblm-account-license-list + * {
	margin-top: 24px;
}

/* .tblm-license-list is the order-details / order-received / email license
   table (render_order_licenses() -> render_license_table()), as opposed to
   .tblm-account-license-list above (the dedicated My Account "Licenses" tab).
   It's rendered on pages that don't carry a .woocommerce-account body class
   (e.g. the thank-you page), so — unlike the account-tab styles above — these
   rules aren't scoped to .woocommerce-account and instead stand on their own,
   matching WooCommerce's plain table/button markup to the rest of the theme
   wherever this table happens to render. */
.tblm-license-list {
	margin: 28px 0 0;
}

.tblm-license-list-heading {
	margin: 0 0 16px;
	color: var(--tb-heading);
	font-size: clamp( 20px, 2vw, 26px );
	font-weight: 800;
}

.tblm-license-table-wrap {
	overflow-x: auto;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
}

table.tblm-license-table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	background: #ffffff;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
}

table.tblm-license-table th,
table.tblm-license-table td {
	padding: 16px;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid var(--tb-border);
	border-left: 0;
	color: var(--tb-text);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
}

table.tblm-license-table thead th {
	white-space: nowrap;
	color: var(--tb-heading);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

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

table.tblm-license-table code {
	display: inline-block;
	max-width: 100%;
	padding: 6px 8px;
	overflow-wrap: anywhere;
	background: #eef7fc;
	border: 1px solid rgba( 24, 183, 230, 0.2 );
	border-radius: 6px;
	color: var(--tb-heading);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
}

table.tblm-license-table .button {
	min-height: 42px;
	padding: 11px 15px;
	background: var(--tb-primary);
	border-radius: 6px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
	box-shadow: 0 10px 22px rgba( 16, 42, 134, 0.16 );
}

table.tblm-license-table .button:hover,
table.tblm-license-table .button:focus {
	background: var(--tb-primary-dark);
	color: #ffffff;
	text-decoration: none;
	transform: translateY( -1px );
}

table.tblm-license-table small {
	display: block;
	margin-top: 6px;
	color: var(--tb-muted);
	font-size: 12px;
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content > *:last-child {
	margin-bottom: 0;
}

.footer-row {
	--bs-gutter-y: clamp( 34px, 4vw, 72px );
	padding: 80px 0 40px;
}

.footer-section-padding {
	padding: 80px 0 40px;
}

.footer-brand,
.footer-widgets,
.footer-widget {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.footer-widget {
	padding: 0;
}

.footer-widgets {
	display: grid;
	gap: 28px;
}

.footer-widget > *:first-child {
	margin-top: 0;
}

.footer-widget > *:last-child {
	margin-bottom: 0;
}

.footer-brand {
	max-width: 420px;
}

.footer-brand .footer-social-links {
	margin-top: 18px;
}

.footer-logo .custom-logo,
.footer-logo img {
	max-width: 190px;
	margin-bottom: 14px;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	filter: none;
}

.footer-brand-link {
	display: inline-flex;
	margin-bottom: 18px;
	color: var(--tb-heading);
	font-size: 24px;
	font-weight: 800;
}

.footer-brand p,
.footer-widget,
.footer-widget li,
.footer-widget p,
.site-footer a,
.site-footer p {
	color: #43506a;
	font-size: 14px;
	line-height: 1.76;
	font-weight: 400;
}

.site-footer h2,
.footer-widget-title,
.footer-widget .wp-block-heading {
	position: relative;
	margin-bottom: 18px;
	color: var(--tb-heading);
	font-size: 17px;
	font-weight: 700;
}

.site-footer h2::after,
.footer-widget-title::after,
.footer-widget .wp-block-heading::after {
	content: none;
}

.footer-widget ul,
.footer-widget ol,
.footer-widget .wp-block-navigation__container {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-widget .wp-block-navigation {
	display: block;
}

.footer-widget .wp-block-navigation-item {
	display: block;
	margin: 0;
}

.footer-widget a,
.footer-widget .wp-block-navigation-item__content {
	display: block;
	max-width: 270px;
	min-height: 0;
	padding: 0;
	color: #43506a;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.48;
	text-decoration: none;
}

.footer-widget a::before,
.footer-widget .wp-block-navigation-item__content::before {
	content: none;
}

.footer-widget a:hover,
.footer-widget .wp-block-navigation-item__content:hover {
	color: var(--tb-primary);
}

.footer-bottom {
	padding-top: 24px;
	padding-bottom: 28px;
	border-top: 1px solid rgba( 16, 42, 134, 0.12 );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.footer-bottom p {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 18px;
	margin: 0;
	color: #5d687a;
	font-size: 13px;
}

.footer-social-links {
	display: flex;
	align-items: center;
	gap: 16px;
}

.footer-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tb-heading);
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.footer-social-icon i {
	font-size: 17px;
	line-height: 1;
}

.site-footer .footer-social-icon:hover,
.site-footer .footer-social-icon:focus {
	color: var(--tb-primary);
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	transform: translateY( -2px );
}

.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	/* .back-to-top is a <button>, which picks up a global `button {
	   min-height: 48px }` reset — min-height is a floor `height` can't
	   shrink below, so without this override the button silently renders
	   taller than it is wide (46x48 here, 40x48 at the mobile size below)
	   instead of a clean circle. */
	min-height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tb-primary);
	box-shadow: 0 14px 30px rgba( 16, 42, 134, 0.28 );
	color: #ffffff;
	cursor: pointer;
	opacity: 0;
	transform: translateY( 10px );
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.back-to-top:hover,
.back-to-top:focus {
	background: var(--tb-primary-dark);
}

.back-to-top svg {
	width: 20px;
	height: 20px;
}



/* Blog,
contact,
and plugin detail refinements. */
.blog-market-page,
.contact-market-page {
	background: #ffffff;
}

.blog-market-layout {
	padding-top: 58px;
	padding-bottom: 58px;
}

/* Blog listing: a grid of vertical cards (image on top, content below),
   mirroring the Related Blogs section on single posts. */
.blog-market-page .post-card-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 26px;
}

.blog-market-page .pagination {
	/* Bootstrap sets .pagination { display: flex } — force block so the
	   centered .nav-links spans the full content-column width. */
	display: block;
	margin-top: 38px;
	padding-top: 30px;
	border-top: 1px solid var(--tb-border);
}

.blog-market-page .pagination .nav-links {
	justify-content: center;
	gap: 8px;
}

.blog-market-page .pagination .page-numbers {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.blog-market-page .pagination a.page-numbers:hover,
.blog-market-page .pagination a.page-numbers:focus {
	border-color: var(--tb-primary);
	color: var(--tb-primary);
}

.blog-market-page .post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	padding: 0;
	overflow: hidden;
	border-color: rgba( 220, 230, 241, 0.95 );
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.055 );
	animation: market-rise 0.65s ease both;
	transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.blog-market-page .post-card:hover {
	border-color: rgba( 24, 183, 230, 0.48 );
	box-shadow: 0 22px 54px rgba( 20, 32, 74, 0.09 );
	transform: translateY( -3px );
}

.blog-market-page .post-card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background:
		linear-gradient( 135deg, rgba( 24, 183, 230, 0.12 ), transparent 48% ),
		linear-gradient( 180deg, #f8fcff 0%, #edf5fb 100% );
}

.blog-market-page .post-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.24s ease;
}

.blog-market-page .post-card:hover .post-card-media img {
	transform: scale( 1.035 );
}

.blog-market-page .post-card-media .post-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient( circle at 82% 20%, rgba( 35, 188, 118, 0.28 ), transparent 32% ),
		linear-gradient( 135deg, var(--tb-primary), var(--tb-cyan) );
	color: #ffffff;
	font-size: 26px;
	font-weight: 800;
}

.blog-market-page .post-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	min-width: 0;
	padding: 22px 22px 24px;
}

.blog-market-page .post-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.blog-market-page .post-card-tags a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 9px;
	background: #eef7fc;
	border: 1px solid rgba( 204, 216, 232, 0.86 );
	border-radius: 999px;
	color: var(--tb-cyan-dark);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.blog-market-page .post-card-tags a:hover,
.blog-market-page .post-card-tags a:focus {
	background: var(--tb-primary);
	border-color: var(--tb-primary);
	color: #ffffff;
}

.blog-market-page .post-card .entry-header {
	margin: 0;
}

.blog-market-page .post-card .entry-title {
	margin-bottom: 0;
	font-size: 20px;
	font-weight: 750;
	line-height: 1.3;
}

.blog-market-page .post-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	color: var(--tb-muted);
	font-size: 12px;
	font-weight: 700;
}

.blog-market-page .post-card-meta i {
	margin-right: 4px;
	color: var(--tb-cyan-dark);
}

.blog-market-page .entry-summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	color: var(--tb-muted);
	font-size: 14px;
	line-height: 1.7;
}

.blog-market-page .post-card-footer {
	margin-top: auto;
}

.blog-market-page .post-card-footer .th-btn {
	min-height: 40px;
	font-size: 13px;
}

.blog-market-page .sidebar {
	display: grid;
	gap: 18px;
	/* Verified empirically (real scroll simulation, not just computed-style
	   inspection): align-self: stretch here breaks position: sticky — the
	   stretched item's own box becomes the sticky containing block and the
	   browser pins it at its stretched static position instead of letting it
	   travel. Plain align-self: start (matching .content-layout's own
	   align-items: start) is what actually works — the grid AREA (row track,
	   sized by the much taller .content-area sibling) is what gives sticky
	   its room to move, independent of this item's own box size. */
	align-self: start;
	position: sticky;
	top: 100px;
}

.blog-market-page .widget {
	margin-bottom: 0;
	padding: 24px;
	border-color: rgba( 220, 230, 241, 0.95 );
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.055 );
}

.blog-market-page .widget-title,
.blog-market-page .widget h2 {
	color: var(--tb-heading);
	font-size: 20px;
	font-weight: 750;
	line-height: 1.18;
}

.blog-market-page .widget a,
.blog-market-page .widget li,
.blog-market-page .widget p {
	color: var(--tb-muted);
	font-size: 14px;
	line-height: 1.65;
}

.contact-form-title,
.contact-form-title p {
	margin: 0;
	color: var(--tb-heading);
	font-size: clamp( 28px, 3vw, 42px );
	font-weight: 500;
	line-height: 1.18;
}

.contact-form-title strong,
.contact-form-title b {
	font-weight: 800;
}

.contact-reference-form {
	max-width: 1060px;
	margin: 0 auto;
}

.contact-reference-form form,
.contact-reference-form .wpcf7-form {
	display: grid;
	gap: 34px 28px;
	margin: 0;
}

.contact-reference-form .wpcf7-form {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.contact-reference-form input:not([type="checkbox"]):not([type="radio"]),
.contact-reference-form textarea,
.contact-reference-form select,
.contact-reference-form .wpcf7-form-control:not(.wpcf7-checkbox):not(.wpcf7-radio):not(.wpcf7-submit) {
	width: 100%;
	padding: 12px 22px 16px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba( 16, 42, 134, 0.5 );
	border-radius: 0;
	box-shadow: none;
	color: var(--tb-text);
	font-size: 15px;
}

.contact-reference-form input::placeholder,
.contact-reference-form textarea::placeholder {
	color: rgba( 101, 112, 131, 0.76 );
}

.contact-reference-form input:not([type="checkbox"]):not([type="radio"]):focus,
.contact-reference-form textarea:focus,
.contact-reference-form select:focus,
.contact-reference-form .wpcf7-form-control:not(.wpcf7-checkbox):not(.wpcf7-radio):not(.wpcf7-submit):focus {
	border-color: var(--tb-cyan-dark);
	outline: 0;
	box-shadow: 0 6px 0 -4px rgba( 24, 183, 230, 0.28 );
}

.contact-reference-form textarea {
	min-height: 110px;
}

.contact-reference-form .wpcf7-checkbox,
.contact-reference-form .wpcf7-radio {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 18px 44px;
}

.contact-reference-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--tb-text);
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
}

.contact-reference-form input[type="checkbox"],
.contact-reference-form input[type="radio"] {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: #23bc76;
}

.contact-reference-form .wpcf7-list-item {
	margin: 0;
}

.contact-reference-form .wpcf7-form p {
	margin: 0;
}

.contact-reference-form .wpcf7-form p:has(textarea),
.contact-reference-form .wpcf7-form p:has(.wpcf7-checkbox),
.contact-reference-form .wpcf7-form p:has(.wpcf7-radio),
.contact-reference-form .wpcf7-response-output {
	grid-column: 1 / -1;
}

.contact-reference-form .wpcf7-form p:has(.wpcf7-submit) {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

.contact-reference-form button,
.contact-reference-form input[type="submit"],
.contact-reference-form .wpcf7-submit {
	width: auto;
	min-width: 150px;
	min-height: 48px;
	padding: 13px 30px;
	background: #23bc76;
	border-color: #23bc76;
	border-radius: 8px;
	color: #081421;
	box-shadow: 0 14px 28px rgba( 35, 188, 118, 0.2 );
	font-weight: 700;
}

.contact-reference-form button:hover,
.contact-reference-form button:focus,
.contact-reference-form input[type="submit"]:hover,
.contact-reference-form input[type="submit"]:focus,
.contact-reference-form .wpcf7-submit:hover,
.contact-reference-form .wpcf7-submit:focus {
	background: #1ca866;
	border-color: #1ca866;
	color: #ffffff;
}


.contact-modern-page,
.about-modern-page {
	background: #ffffff;
}

.contact-simple-hero {
	padding: 70px 0 66px;
	background:
		linear-gradient( 135deg, rgba( 24, 183, 230, 0.1 ), rgba( 255, 255, 255, 0 ) 46% ),
		linear-gradient( 180deg, #ffffff 0%, #f4fbff 100% );
	border-bottom: 1px solid rgba( 24, 183, 230, 0.14 );
}

.contact-simple-hero h1 {
	margin-bottom: 0;
	color: var(--tb-heading);
	font-size: clamp( 28px, 3.4vw, 46px );
	font-weight: 800;
	line-height: 1.14;
}

/* Blog post title: fixed size per request, instead of the shared page-banner's
   fluid clamp() (used by every other page's H1 — scoped here so only the
   single-post title changes). */
.single-post-page .contact-simple-hero h1 {
	font-size: 36px;
}

.page-banner-desc {
	margin: 14px 0 0;
	color: var(--tb-muted);
	font-size: 17px;
	line-height: 1.6;
}

.page-banner-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 10px 0 0;
	color: var(--tb-muted);
	font-size: 14px;
	font-weight: 600;
}

.page-banner-byline i {
	margin-right: 5px;
	color: var(--tb-cyan-dark);
}

.page-banner-meta {
	display: inline-flex;
	margin: 0 0 12px;
	padding: 5px 10px;
	background: rgba( 24, 183, 230, 0.14 );
	border: 1px solid rgba( 24, 183, 230, 0.22 );
	border-radius: 999px;
	color: var(--tb-cyan-dark);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
}

.page-banner-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.page-banner-categories .page-banner-meta {
	margin: 0;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.page-banner-categories a.page-banner-meta:hover,
.page-banner-categories a.page-banner-meta:focus {
	background: var(--tb-cyan);
	border-color: var(--tb-cyan);
	color: #ffffff;
	text-decoration: none;
}

.about-friendly-page {
	background: #ffffff;
}

.about-welcome-section {
	padding: 64px 0 54px;
	background: #ffffff;
}

.about-welcome-grid {
	--bs-gutter-x: 48px;
	--bs-gutter-y: 48px;
}

.about-welcome-copy {
	max-width: 720px;
}

.about-welcome-copy .section-kicker,
.about-friendly-heading .section-kicker {
	color: var(--tb-cyan-dark);
}

.about-welcome-copy h2,
.about-friendly-heading h2 {
	margin-bottom: 18px;
	color: var(--tb-heading);
	font-size: clamp( 24px, 2.5vw, 33px );
	font-weight: 800;
	line-height: 1.16;
}

.about-welcome-copy p {
	max-width: 680px;
	color: var(--tb-muted);
	font-size: 16px;
	line-height: 1.8;
}

.about-welcome-button {
	margin-top: 8px;
}

.about-help-list {
	display: grid;
	gap: 14px;
}

.about-help-list div {
	display: grid;
	grid-template-columns: 42px minmax( 0, 1fr );
	gap: 4px 14px;
	align-items: start;
	padding: 18px;
	background: #f8fcff;
	border: 1px solid rgba( 24, 183, 230, 0.16 );
	border-radius: 8px;
}

.about-help-list span {
	grid-row: span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: #e8f8ef;
	border-radius: 8px;
	color: #118554;
	font-size: 12px;
	font-weight: 800;
}

.about-help-list strong {
	color: var(--tb-heading);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.35;
}

.about-help-list p {
	margin: 0;
	color: var(--tb-muted);
	font-size: 14px;
	line-height: 1.6;
}

.about-service-section {
	padding: 58px 0 70px;
	background: linear-gradient( 180deg, #f8fcff 0%, #ffffff 100% );
	border-top: 1px solid rgba( 24, 183, 230, 0.12 );
}

.about-friendly-heading {
	max-width: 760px;
	margin-bottom: 26px;
}

.about-service-grid {
	--bs-gutter-x: 20px;
	--bs-gutter-y: 20px;
}

.about-service-grid article {
	padding: 28px;
	background: #ffffff;
	border: 1px solid rgba( 24, 183, 230, 0.16 );
	border-radius: 8px;
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.055 );
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.about-service-grid article:hover,
.about-service-grid article:focus-within {
	border-color: rgba( 24, 183, 230, 0.34 );
	box-shadow: 0 20px 50px rgba( 20, 32, 74, 0.08 );
	transform: translateY( -3px );
}

.about-service-grid span {
	display: inline-flex;
	margin-bottom: 18px;
	padding: 7px 11px;
	background: #eaf8fd;
	border-radius: 8px;
	color: var(--tb-cyan-dark);
	font-size: 12px;
	font-weight: 800;
}

.about-service-grid h3 {
	margin-bottom: 10px;
	color: var(--tb-heading);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
}

.about-service-grid p {
	margin-bottom: 0;
	color: var(--tb-muted);
	font-size: 15px;
	line-height: 1.7;
}

.contact-modern-section {
	padding: 96px 0 104px;
	background:
		radial-gradient( circle at 82% 8%, rgba( 24, 183, 230, 0.12 ), transparent 36% ),
		radial-gradient( circle at 10% 92%, rgba( 23, 61, 194, 0.06 ), transparent 34% ),
		linear-gradient( 180deg, #ffffff 0%, #f8fcff 100% );
}

.contact-modern-layout {
	display: grid;
	grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr );
	align-items: start;
	gap: 32px;
	max-width: 1140px;
	margin: 0 auto;
}

.contact-modern-form-card {
	background: #ffffff;
	border: 1px solid rgba( 24, 183, 230, 0.16 );
	border-radius: var(--tb-radius);
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.055 );
}

.contact-modern-form-card {
	padding: clamp( 32px, 5vw, 56px );
}

.contact-get-in-touch {
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.055 );
	padding: clamp( 28px, 4vw, 40px );
}

.contact-get-in-touch h2 {
	margin: 0 0 12px;
	font-size: clamp( 22px, 2.4vw, 26px );
	color: var(--tb-heading);
}

.contact-gt-description {
	margin: 0 0 28px;
	color: var(--tb-muted);
	line-height: 1.6;
}

.contact-gt-item {
	display: flex;
	gap: 16px;
	margin-bottom: 28px;
}

.contact-gt-item .th-feature-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin-bottom: 0;
	border-radius: 10px;
}

.contact-gt-item .th-feature-icon i {
	font-size: 19px;
}

.contact-gt-item h3 {
	margin: 0 0 6px;
	font-size: 16px;
	color: var(--tb-heading);
}

.contact-gt-item a {
	font-weight: 600;
}

.contact-gt-item p {
	margin: 6px 0 0;
	color: var(--tb-muted);
	font-size: 14px;
}

.contact-gt-social h3 {
	margin: 0 0 14px;
	font-size: 16px;
	color: var(--tb-heading);
}

.contact-social-links {
	display: flex;
	align-items: center;
	gap: 12px;
}

.contact-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--th-blue-soft, #eef4ff);
	color: var(--tb-primary);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.contact-social-icon i {
	font-size: 17px;
}

.contact-social-icon:hover,
.contact-social-icon:focus {
	background: var(--tb-primary);
	color: #ffffff;
	transform: translateY( -2px );
}

.support-checklist {
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.055 );
	padding: clamp( 28px, 4vw, 40px );
}

.support-checklist h2 {
	margin: 0 0 12px;
	font-size: clamp( 22px, 2.4vw, 26px );
	color: var(--tb-heading);
}

.support-checklist-intro {
	margin: 0;
	color: var(--tb-muted);
	line-height: 1.6;
}

.support-checklist .th-checklist {
	margin: 22px 0 0;
}

.support-help-section {
	background: var(--tb-surface-soft);
}

.support-help-card a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-weight: 600;
	color: var(--tb-primary);
	text-decoration: none;
}

.support-help-card a:hover,
.support-help-card a:focus {
	color: var(--tb-cyan-dark);
}

.support-help-card a i {
	font-size: 14px;
	transition: transform 0.2s ease;
}

.support-help-card a:hover i {
	transform: translateX( 3px );
}

.contact-modern-heading {
	max-width: 710px;
	margin-bottom: 36px;
}

.contact-modern-heading .section-kicker {
	display: inline-flex;
	margin: 0 0 12px;
	padding: 5px 10px;
	background: rgba( 24, 183, 230, 0.14 );
	border: 1px solid rgba( 24, 183, 230, 0.22 );
	border-radius: 999px;
	color: var(--tb-cyan-dark);
	font-size: 13px;
}

.contact-modern-page .contact-form-title,
.contact-modern-page .contact-form-title p {
	margin: 0;
	color: var(--tb-heading);
	font-size: clamp( 28px, 3vw, 40px );
	font-weight: 800;
	line-height: 1.16;
}

.contact-modern-heading > p:not(.section-kicker) {
	max-width: 650px;
	margin: 14px 0 0;
	color: var(--tb-muted);
	font-size: 15px;
	line-height: 1.7;
}

.contact-form-intro {
	max-width: 650px;
	margin-top: 14px;
	color: var(--tb-muted);
	font-size: 15px;
	line-height: 1.7;
}

.contact-form-intro > *:last-child {
	margin-bottom: 0;
}

.contact-modern-page .contact-reference-form {
	max-width: none;
	margin: 0;
}

.contact-modern-page .contact-reference-form form,
.contact-modern-page .contact-reference-form .wpcf7-form {
	display: block;
}

.contact-modern-page .contact-reference-form .container {
	max-width: none;
	padding: 0;
	margin: 0;
}

.contact-modern-page .contact-reference-form .form-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 10px;
	color: var(--tb-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.35;
}

.contact-modern-page .contact-reference-form .form-label .text-danger {
	color: var(--tb-cyan-dark) !important;
}

.contact-modern-page .contact-reference-form .wpcf7-form-control-wrap {
	display: block;
	position: relative;
	width: 100%;
}

.contact-modern-page .contact-reference-form .form-control,
.contact-modern-page .contact-reference-form .form-select {
	min-height: 52px !important;
	padding: 14px 16px !important;
	background: #f8fafd !important;
	border: 1px solid #cfdbe8 !important;
	border-radius: var(--tb-radius) !important;
	color: var(--tb-text) !important;
	font-size: 14.5px !important;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.contact-modern-page .contact-reference-form textarea.form-control {
	min-height: 160px !important;
	resize: vertical;
}

.contact-modern-page .contact-reference-form .form-select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 42px !important;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23657083' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 12px 8px !important;
	cursor: pointer;
}

.contact-modern-page .contact-reference-form .form-select:invalid,
.contact-modern-page .contact-reference-form .form-select option[value=""] {
	color: rgba( 101, 112, 131, 0.72 );
}

.contact-modern-page .contact-reference-form .form-control::placeholder {
	color: rgba( 101, 112, 131, 0.72 );
}

.contact-modern-page .contact-reference-form .form-control:focus,
.contact-modern-page .contact-reference-form .form-select:focus {
	background-color: #ffffff !important;
	border-color: var(--tb-cyan) !important;
	outline: 0;
	box-shadow: 0 0 0 4px rgba( 24, 183, 230, 0.12 );
}

.contact-modern-page .contact-reference-form .form-control.wpcf7-not-valid,
.contact-modern-page .contact-reference-form .form-select.wpcf7-not-valid {
	background-color: #fffafa !important;
	border-color: rgba( 220, 60, 45, 0.62 ) !important;
	box-shadow: 0 0 0 4px rgba( 220, 60, 45, 0.08 );
}

.contact-modern-page .contact-reference-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #d93025;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
}

.contact-modern-page .contact-reference-form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 14px;
	background: #f8fcff;
	border: 1px solid rgba( 16, 42, 134, 0.12 );
	border-radius: 8px;
	color: var(--tb-text);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.35;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.contact-modern-page .contact-reference-form .wpcf7-list-item label:hover {
	background: #ffffff;
	border-color: rgba( 24, 183, 230, 0.38 );
	box-shadow: 0 8px 22px rgba( 20, 32, 74, 0.06 );
}

.contact-modern-page .contact-reference-form .wpcf7-list-item label:has(input:checked) {
	background: #eef9fd;
	border-color: rgba( 24, 183, 230, 0.55 );
	color: var(--tb-heading);
}

.contact-modern-page .contact-reference-form input[type="checkbox"],
.contact-modern-page .contact-reference-form input[type="radio"] {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	accent-color: var(--tb-primary);
}

.contact-modern-page .contact-reference-form .col-12.text-center {
	margin-top: 10px;
	padding-top: 24px;
	border-top: 1px solid rgba( 16, 42, 134, 0.1 );
}

.contact-modern-page .contact-reference-form .btn.btn-primary {
	-webkit-appearance: none;
	appearance: none;
	width: auto !important;
	min-width: 200px;
	min-height: 54px;
	padding: 15px 30px;
	background: var(--tb-primary) !important;
	border: 2px solid var(--tb-primary) !important;
	border-radius: 8px;
	color: #ffffff !important;
	box-shadow: 0 16px 32px rgba( 23, 61, 194, 0.22 );
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	-webkit-text-fill-color: #ffffff;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.contact-modern-page .contact-reference-form .btn.btn-primary:hover,
.contact-modern-page .contact-reference-form .btn.btn-primary:focus {
	background: var(--tb-primary-dark) !important;
	border-color: var(--tb-primary-dark) !important;
	color: #ffffff !important;
	transform: translateY( -2px );
}

.contact-modern-page .contact-reference-form .btn.btn-primary:active {
	transform: translateY( 0 );
}

.contact-modern-page .contact-reference-form .btn.btn-primary:disabled,
.contact-modern-page .contact-reference-form .btn.btn-primary[disabled] {
	color: #ffffff !important;
	cursor: not-allowed;
	opacity: 0.6;
	-webkit-text-fill-color: #ffffff;
}

.contact-modern-page .contact-reference-form .wpcf7-spinner {
	width: 22px;
	height: 22px;
	margin: 0 0 0 8px;
	background-color: var(--tb-primary);
	vertical-align: middle;
}

.contact-modern-page .contact-reference-form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 1px solid rgba( 16, 42, 134, 0.14 );
	border-radius: 8px;
	color: var(--tb-text);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.55;
}

.contact-modern-page .contact-reference-form form.sent .wpcf7-response-output {
	background: #e8f8ef;
	border-color: rgba( 35, 188, 118, 0.34 );
	color: #116b48;
}

.contact-modern-page .contact-reference-form form.invalid .wpcf7-response-output,
.contact-modern-page .contact-reference-form form.failed .wpcf7-response-output,
.contact-modern-page .contact-reference-form form.unaccepted .wpcf7-response-output {
	background: #fff4f2;
	border-color: rgba( 220, 60, 45, 0.32 );
	color: #9f261b;
}

.contact-faq-section {
	padding:96px 0;
	background: #ffffff;
}

.contact-faq-heading {
	max-width: 640px;
	margin: 0 auto 44px;
	text-align: center;
}

.contact-faq-heading h2 {
	margin: 0 0 12px;
	color: var(--tb-heading);
	font-size: clamp( 26px, 3vw, 36px );
	font-weight: 800;
}

.contact-faq-heading > p:not(.section-kicker) {
	margin: 0;
	color: var(--tb-muted);
	font-size: 15px;
	line-height: 1.7;
}

.contact-faq-accordion {
	max-width: 820px;
	margin: 0 auto;
}

.contact-faq-accordion .accordion-item {
	margin-bottom: 14px;
	background: #ffffff;
	border: 1px solid rgba( 24, 183, 230, 0.16 );
	border-radius: var(--tb-radius) !important;
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.055 );
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.contact-faq-accordion .accordion-item:has( .accordion-button:not(.collapsed) ) {
	border-color: rgba( 24, 183, 230, 0.34 );
}

.contact-faq-accordion .accordion-item:last-child {
	margin-bottom: 0;
}

.contact-faq-accordion .accordion-button {
	padding: 20px 24px;
	background: #ffffff;
	color: var(--tb-heading);
	font-size: 15px;
	font-weight: 700;
	box-shadow: none !important;
}

/* Was: color switching to var(--tb-primary) on open, which made an open
   question read as a differently-styled/inconsistent element instead of the
   same FAQ just expanded. Keep the heading color constant across open/closed
   — the background tint plus the chevron rotation already communicate state
   without changing the text itself. */
.contact-faq-accordion .accordion-button:not(.collapsed) {
	background: #f8fcff;
	color: var(--tb-heading);
}

.contact-faq-accordion .accordion-button:focus {
	border-color: var(--tb-cyan);
	box-shadow: 0 0 0 4px rgba( 24, 183, 230, 0.12 ) !important;
}

.contact-faq-accordion .accordion-body {
	/* Was var(--tb-muted) (#667489) — borderline low contrast for 14px body
	   copy. Switched to the sitewide body-text color for clearer reading.
	   Was also padding-top: 0, which left the answer sitting directly under
	   the question with no visible break — added top padding plus a divider
	   line so the question and its answer read as clearly separate. */
	padding: 14px 24px 22px;
	border-top: 1px solid var(--tb-border);
	color: var(--tb-text);
	font-size: 15px;
	line-height: 1.7;
}

.contact-faq-accordion .accordion-body a {
	color: var(--tb-cyan-dark);
	font-weight: 700;
}


.plugin-product-detail {
	--th-navy: #101c46;
	--th-navy-soft: #16215a;
	--th-gold: #f5a524;
	--th-blue-soft: #eef4ff;
	--th-shadow: 0 20px 46px rgba( 16, 28, 70, 0.08 );
	background:
		linear-gradient( 180deg, #f7fbff 0%, #ffffff 38%, #f2f8fb 100% );
}

.plugin-product-detail .th-stats {
	padding: 48px 0 56px;
}

.plugin-product-detail .th-testimonials {
	padding-top: 0;
}

.plugin-detail-hero {
	isolation: isolate;
	padding: 78px 0 70px;
	background:
		radial-gradient( circle at 80% 15%, rgba( 24, 183, 230, 0.16 ), transparent 34% ),
		radial-gradient( circle at 12% 85%, rgba( 23, 61, 194, 0.07 ), transparent 32% ),
		#ffffff;
}

.plugin-detail-copy h1 {
	color: var(--tb-heading);
	font-size: clamp( 26px, 3.4vw, 36px );
	font-weight: 800;
	line-height: 1.15;
}

.plugin-detail-copy > p:not(.section-kicker):not(.th-badge) {
	color: var(--tb-muted);
	font-size: 13px;
	line-height: 1.7;
}

.plugin-product-detail .button {
	min-height: 40px;
	padding: 10px 15px;
	font-size: 12px;
}

.plugin-variations-section {
	isolation: isolate;
	background:
		radial-gradient( circle at 85% 10%, rgba( 24, 183, 230, 0.14 ), transparent 34% ),
		radial-gradient( circle at 10% 90%, rgba( 23, 61, 194, 0.06 ), transparent 30% ),
		#ffffff;
}

.plugin-license-layout > div:first-child {
	position: relative;
	padding: 0 18px;
}

.plugin-license-layout > div:first-child::after {
	display: block;
	width: 96px;
	height: 4px;
	margin: 22px auto 0;
	background: linear-gradient( 90deg, var(--tb-cyan), var(--tb-primary) );
	border-radius: 999px;
	content: "";
}

.plugin-license-layout h2,
.plugin-compare .section-heading h2,
.plugin-faq .section-heading h2,
.plugin-steps h2,
#plugin-reviews-title {
	color: var(--tb-heading);
	font-size: clamp( 24px, 2.35vw, 34px );
	font-weight: 750;
}

.license-package-card {
	padding: 22px;
	background:
		linear-gradient( 180deg, rgba( 255, 255, 255, 0.98 ), rgba( 249, 252, 255, 0.98 ) );
	box-shadow: 0 16px 38px rgba( 20, 32, 74, 0.07 );
}

.license-package-card:hover {
	box-shadow: 0 26px 64px rgba( 20, 32, 74, 0.13 );
	transform: translateY( -5px );
}

.license-package-price .amount {
	font-size: 30px;
}

.license-package-card p,
.plugin-step-grid span {
	font-size: 13px;
	line-height: 1.66;
}

.plugin-compare-row {
	padding: 16px 22px;
}

.plugin-step-grid article,
.plugin-compare-table {
	box-shadow: 0 14px 36px rgba( 20, 32, 74, 0.055 );
}

.web-development-page {
	background: #f6f9fc;
}

.web-intro-layout,
.web-process-layout,
.web-deliverables-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 280px, 0.5fr );
	gap: 44px;
	align-items: start;
}

.web-section-heading {
	max-width: 760px;
}

.web-intro-copy h2,
.web-section-heading h2,
.web-process-layout h2,
.web-deliverables-layout h2 {
	color: var(--tb-heading);
	font-size: clamp( 24px, 2.7vw, 36px );
	line-height: 1.12;
}

.web-intro-copy p:not(.section-kicker),
.web-capability-grid p,
.web-process-steps p {
	color: var(--tb-muted);
}

.web-capability-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 16px;
}

.web-capability-grid h3,
.web-process-steps h3 {
	margin-bottom: 10px;
	color: var(--tb-heading);
	font-size: 20px;
	line-height: 1.25;
}

.web-capability-grid p,
.web-process-steps p {
	margin: 0;
}

.web-process-steps {
	display: grid;
	gap: 14px;
}

.web-process-steps article {
	display: grid;
	grid-template-columns: 52px minmax( 0, 1fr );
	gap: 16px;
	padding: 20px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 6px;
	box-shadow: 0 12px 30px rgba( 20, 32, 74, 0.05 );
}

.web-process-steps span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: #eaf8fd;
	border-radius: 6px;
	color: var(--tb-accent);
	font-size: 13px;
	font-weight: 800;
}

.web-deliverables-layout {
	padding: 34px;
	background: linear-gradient( 135deg, #ffffff 0%, #eef8f4 100% );
	border: 1px solid rgba( 24, 183, 230, 0.18 );
	border-radius: 8px;
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.065 );
}

.web-deliverable-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.web-deliverable-list > span,
.web-deliverable-list > a {
	position: relative;
	display: block;
	padding: 2px 0 2px 30px;
	color: var(--tb-heading);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
}

.web-deliverable-list > span::before,
.web-deliverable-list > a::before {
	position: absolute;
	top: 4px;
	left: 0;
	width: 18px;
	height: 18px;
	background: #1caa6b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
	border-radius: 50%;
	content: "";
}

.web-deliverable-list > a {
	text-decoration: none;
	transition: color 0.2s ease;
}

.web-deliverable-list > a:hover,
.web-deliverable-list > a:focus {
	color: var(--tb-primary);
}

.tech-related-note {
	padding: 8px 0 0;
	text-align: center;
}

.tech-related-note p {
	margin: 0;
	color: var(--tb-muted);
	font-size: 15px;
}

.tech-related-note a {
	color: var(--tb-primary);
	font-weight: 700;
}

.web-engagement-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 16px;
	margin-top: 24px;
}

.web-engagement-card {
	padding: 26px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 6px;
	box-shadow: 0 14px 34px rgba( 20, 32, 74, 0.055 );
}

.web-engagement-card-featured {
	background:
		linear-gradient( 135deg, rgba( 24, 183, 230, 0.14 ), rgba( 35, 188, 118, 0.08 ) ),
		#f7fbff;
	border-color: rgba( 24, 183, 230, 0.36 );
}

.web-engagement-card span {
	display: inline-flex;
	margin-bottom: 14px;
	padding: 6px 10px;
	background: #eef7fc;
	border-radius: 999px;
	color: var(--tb-cyan-dark);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.web-engagement-card h3 {
	margin-bottom: 8px;
	color: var(--tb-heading);
	font-size: 17px;
	font-weight: 800;
}

.web-engagement-card p {
	margin: 0;
	color: var(--tb-muted);
	font-size: 13px;
	line-height: 1.66;
}

.section-heading > p:not(.section-kicker):not(.th-kicker) {
	max-width: 740px;
	color: var(--tb-muted);
}

.cta-section {
	background: #ffffff;
}

.animated-cta {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient( circle at 85% 15%, rgba( 24, 183, 230, 0.18 ), transparent 45% ),
		linear-gradient( 180deg, #ffffff 0%, #eef7fc 100% );
	border: 1px solid var(--tb-border);
}

.animated-cta::after {
	content: none;
}

.animated-cta > * {
	position: relative;
	z-index: 1;
}

.single-post-page {
	background:
		linear-gradient( 180deg, #f7fbff 0%, #ffffff 360px );
}

.single-post-card {
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba( 220, 230, 241, 0.96 );
	border-radius: 8px;
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.055 );
	animation: market-rise 0.65s ease both;
}

.legal-page {
	background: linear-gradient( 180deg, #f7fbff 0%, #ffffff 360px );
}

/* Mirrors .single-post-card exactly (no padding of its own — the nested
   .single-post-content div supplies the 38px inset) so legal pages get the
   same card treatment as blog posts instead of the bare default page.php
   look (plain H1 + full-width text). */
.legal-content-card {
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba( 220, 230, 241, 0.96 );
	border-radius: 8px;
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.055 );
}

.legal-content-card .single-post-content {
	margin: 0;
}

.single-post-featured {
	overflow: hidden;
	border-bottom: 1px solid var(--tb-border);
}

.single-post-featured img {
	width: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
}

.single-post-content {
	padding: 38px;
	font-size: 16.5px;
	line-height: 1.8;
}

.single-post-content p {
	margin: 0 0 1.15em;
}

.single-post-content li {
	margin-bottom: 8px;
}

.single-post-content h2,
.single-post-content h3,
.single-post-content h4 {
	margin-top: 38px;
	color: var(--tb-heading);
}

/* .single-post-content only sets body copy size — h2/h3/h4 still inherited the
   sitewide hero clamp() (h2 up to 46px), so every in-article subheading
   rendered almost as large/bold as the page's own H1 title. Sized down to a
   normal article scale, in line with body copy elsewhere on the site (e.g.
   the 15px .entry-content paragraphs on Privacy Policy / Refund Policy). */
.single-post-content h2 {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.28;
}

.single-post-content h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
}

.single-post-content h4 {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.single-post-content ul,
.single-post-content ol {
	padding-left: 1.35em;
}

.single-post-content blockquote {
	margin: 28px 0;
	padding: 20px 24px;
	background: #f4f9fd;
	border-left: 4px solid var(--tb-cyan);
	border-radius: 0 8px 8px 0;
	color: var(--tb-heading);
	font-weight: 700;
}

/* Native Gutenberg Details block, used for in-article FAQ accordions.
   Mirrors the .contact-faq-accordion card treatment used elsewhere on the
   site (white card, soft shadow, cyan-tinted open state) so it reads as
   the same design system instead of the browser's bare <details> default. */
.single-post-content .wp-block-details {
	margin: 0 0 14px;
	background: #ffffff;
	border: 1px solid rgba( 24, 183, 230, 0.16 );
	border-radius: var(--tb-radius);
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.055 );
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.single-post-content .wp-block-details:last-child {
	margin-bottom: 0;
}

.single-post-content .wp-block-details:hover {
	border-color: rgba( 24, 183, 230, 0.34 );
}

.single-post-content .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	background: #ffffff;
	color: var(--tb-heading);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.single-post-content .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.single-post-content .wp-block-details summary::marker {
	content: "";
}

.single-post-content .wp-block-details summary::after {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: var(--th-blue-soft, #eef4ff);
	border-radius: 50%;
	color: var(--tb-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	content: "+";
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.single-post-content .wp-block-details[open] summary {
	background: #f8fcff;
	border-bottom: 1px solid var(--tb-border);
}

.single-post-content .wp-block-details[open] summary::after {
	background: var(--tb-primary);
	color: #ffffff;
	content: "\2212";
}

.single-post-content .wp-block-details summary:focus-visible {
	outline: 2px solid var(--tb-cyan);
	outline-offset: -2px;
}

.single-post-content .wp-block-details > :not(summary) {
	margin: 0;
	padding: 16px 24px 22px;
	color: var(--tb-text);
	font-size: 15.5px;
	line-height: 1.7;
}

/* In-article horizontal rule — a thin hairline instead of the browser's
   default inset bevel, used as a section divider in long-form posts. */
.single-post-content hr {
	height: 1px;
	margin: 44px 0;
	border: 0;
	background: var(--tb-border);
}

/* In-article table — the overflow wrapper in the responsive-hardening block
   keeps it scrollable (display:block + overflow-x:auto); this adds the visual
   treatment (no theme styles existed before). */
.single-post-content table {
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
	font-size: 15.5px;
}

/* The hardening block forces .single-post-content { overflow-wrap: anywhere },
   which — combined with display:block on the table — was breaking single words
   like "CCAvenue" mid-letter in narrow comparison columns. Reset wrapping for
   table cells so words only break at spaces. */
.single-post-content th,
.single-post-content td {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.single-post-content table caption {
	margin-bottom: 10px;
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
}

.single-post-content th,
.single-post-content td {
	padding: 12px 14px;
	border: 1px solid var(--tb-border);
	text-align: left;
	vertical-align: top;
}

.single-post-content thead th {
	background: var(--tb-accent-soft);
	color: var(--tb-heading);
	font-weight: 700;
}

.single-post-content tbody tr:nth-child(even) {
	background: #f7fafd;
}

/* Go-live checklist — informational list with check-mark bullets. */
.single-post-content ul.post-checklist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 28px;
	margin: 24px 0;
	padding: 24px 26px;
	list-style: none;
	background: var(--tb-accent-soft);
	border: 1px solid rgba( 23, 61, 194, 0.14 );
	border-radius: var(--tb-radius);
}

.single-post-content ul.post-checklist li {
	position: relative;
	margin: 0;
	padding-left: 30px;
	line-height: 1.5;
}

.single-post-content ul.post-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var(--tb-cyan-dark);
	border-radius: 50%;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
}

/* In-article illustrative diagrams (inline SVG in a <figure>). */
.single-post-content figure.wp-block-image {
	margin: 32px 0;
}

.single-post-content figure.wp-block-image svg {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
}

.single-post-content figure.wp-block-image figcaption {
	margin-top: 10px;
	color: var(--tb-muted);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

/* Table of contents — jump-link card near the top of long posts. Mirrors the
   .post-toc pattern: tinted card, cyan ordered-list counters, two columns on
   desktop so an 18-item list stays compact. */
.post-toc {
	margin: 30px 0 36px;
	padding: 22px 26px;
	background: var(--tb-accent-soft);
	border: 1px solid rgba( 23, 61, 194, 0.14 );
	border-radius: var(--tb-radius);
}

.post-toc-title {
	margin: 0 0 12px;
	color: var(--tb-heading);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.post-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
	columns: 2;
	column-gap: 34px;
}

.post-toc li {
	margin: 0 0 8px;
	padding-left: 28px;
	text-indent: -28px;
	line-height: 1.45;
	break-inside: avoid;
}

.post-toc li::before {
	counter-increment: toc;
	content: counter( toc ) ". ";
	color: var(--tb-cyan-dark);
	font-weight: 800;
}

.post-toc a {
	color: var(--tb-primary);
	font-size: 14.5px;
	font-weight: 600;
}

.post-toc a:hover,
.post-toc a:focus {
	color: var(--tb-cyan-dark);
	text-decoration: underline;
}

/* End-of-article call-to-action panel. Uses the same blue → cyan gradient as
   the related-posts thumbnails so it reads as part of the design system. */
.post-cta {
	margin: 40px 0;
	padding: 34px;
	background: linear-gradient( 135deg, rgba( 16, 42, 134, 0.98 ), rgba( 24, 183, 230, 0.92 ) );
	border-radius: 12px;
	color: #ffffff;
}

.post-cta-title {
	margin: 0 0 10px;
	color: #ffffff;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
}

.post-cta p {
	color: rgba( 255, 255, 255, 0.92 );
}

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

.post-cta-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 12px 26px;
	background: #ffffff;
	border-radius: 999px;
	color: var(--tb-primary);
	font-size: 14px;
	font-weight: 800;
}

.post-cta-btn:hover,
.post-cta-btn:focus {
	background: var(--tb-accent-soft);
	color: var(--tb-primary-dark);
}

.single-post-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 6px 38px 38px;
	padding-top: 26px;
	border-top: 1px solid var(--tb-border);
}

.single-post-tags-label {
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 700;
}

.single-post-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid rgba( 23, 61, 194, 0.14 );
	border-radius: 999px;
	background: var(--tb-accent-soft);
	color: var(--tb-primary);
	font-size: 13px;
	font-weight: 700;
}

.single-post-tag:hover,
.single-post-tag:focus {
	background: var(--tb-primary);
	border-color: var(--tb-primary);
	color: #ffffff;
}

.single-post-nav-section {
	padding: 36px 0 0;
	background: #ffffff;
}

.single-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.single-post-nav-link {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding: 20px 24px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	box-shadow: 0 16px 38px rgba( 20, 32, 74, 0.055 );
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.single-post-nav-link:hover,
.single-post-nav-link:focus {
	border-color: rgba( 24, 183, 230, 0.42 );
	box-shadow: 0 22px 50px rgba( 20, 32, 74, 0.09 );
	text-decoration: none;
	transform: translateY( -3px );
}

.single-post-nav-next {
	grid-column: 2;
	justify-content: flex-end;
	text-align: right;
}

.single-post-nav-arrow {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--th-blue-soft, #eef4ff);
	color: var(--tb-primary);
	font-size: 17px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.single-post-nav-link:hover .single-post-nav-arrow,
.single-post-nav-link:focus .single-post-nav-arrow {
	background: var(--tb-primary);
	color: #ffffff;
}

.single-post-nav-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.single-post-nav-copy small {
	color: var(--tb-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.single-post-nav-copy strong {
	overflow: hidden;
	color: var(--tb-heading);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.single-related-section {
	padding: 36px 0 76px;
	background: #ffffff;
}

.single-related-heading {
	max-width: 720px;
	margin-bottom: 26px;
}

.single-related-heading h2 {
	color: var(--tb-heading);
	font-size: clamp( 26px, 3vw, 40px );
	font-weight: 750;
	line-height: 1.12;
}

.related-post-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 20px;
}

.related-post-card {
	min-width: 0;
	animation: market-rise 0.65s ease both;
}

.related-post-card:nth-child(2) {
	animation-delay: 0.08s;
}

.related-post-card:nth-child(3) {
	animation-delay: 0.14s;
}

.related-post-card a {
	display: grid;
	height: 100%;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	box-shadow: 0 16px 42px rgba( 20, 32, 74, 0.06 );
	transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.related-post-card a:hover,
.related-post-card a:focus {
	border-color: rgba( 24, 183, 230, 0.42 );
	box-shadow: 0 22px 54px rgba( 20, 32, 74, 0.1 );
	text-decoration: none;
	transform: translateY( -4px );
}

.related-post-image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background:
		linear-gradient( 135deg, rgba( 16, 42, 134, 0.96 ), rgba( 24, 183, 230, 0.82 ) );
	color: #ffffff;
	font-size: 24px;
	font-weight: 800;
}

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

.related-post-placeholder {
	background:
		radial-gradient( circle at 82% 20%, rgba( 35, 188, 118, 0.28 ), transparent 32% ),
		linear-gradient( 135deg, var(--tb-primary), var(--tb-cyan) );
}

.related-post-body {
	display: grid;
	gap: 9px;
	padding: 20px;
}

.related-post-body time {
	color: var(--tb-cyan-dark);
	font-size: 12px;
	font-weight: 800;
}

.related-post-body strong {
	color: var(--tb-heading);
	font-size: 19px;
	line-height: 1.25;
}

.related-post-body small {
	color: var(--tb-muted);
	font-size: 13px;
	line-height: 1.6;
}


.reveal-up {
	animation: tb-reveal-up 0.75s ease both;
}

.reveal-up:nth-child(2) {
	animation-delay: 0.12s;
}

@keyframes tb-reveal-up {
	from {
		opacity: 0;
		transform: translateY( 22px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@keyframes tb-card-float {
	0%,
	100% {
		transform: rotateX( 3deg ) rotateY( -5deg ) translateY( 0 );
	}

	50% {
		transform: rotateX( 3deg ) rotateY( -5deg ) translateY( -14px );
	}
}

@keyframes tb-pop {
	0%,
	100% {
		transform: translateY( 0 ) scale( 1 );
	}

	45% {
		transform: translateY( -8px ) scale( 1.08 );
	}
}

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


/* Front page redesign (2026-07). */
.th-home {
	--th-navy: #101c46;
	--th-navy-soft: #16215a;
	--th-ink-border: rgba( 255, 255, 255, 0.12 );
	--th-ink-muted: rgba( 255, 255, 255, 0.66 );
	--th-gold: #f5a524;
	--th-blue-soft: #eef4ff;
	--th-shadow: 0 20px 46px rgba( 16, 28, 70, 0.08 );
	background: #ffffff;
	overflow-x: clip;
}

.th-home h2 {
	font-size: clamp( 24px, 2.9vw, 33px );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Premium redesign (2026-08): darker accent bands, pill buttons, larger
   radii, less boxy cards. Rules are prefixed with .th-home so the shared
   component classes (.th-btn, .th-kicker, .th-testimonials, ...) keep their
   original look on woocommerce/single-product.php, which reuses them
   without opting into the .th-home design system. */
.th-home .th-testimonial-card {
	border-radius: 20px;
	box-shadow: none;
}

.th-home .th-testimonial-card:hover {
	box-shadow: var(--th-shadow);
}

.th-kicker {
	margin: 0 0 10px;
	color: var(--tb-primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.th-section-head {
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

.th-section-head p:not(.th-kicker) {
	color: var(--tb-muted);
	font-size: 16px;
}

.th-section-cta {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.th-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.th-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	border: 2px solid transparent;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.th-btn i {
	font-size: 18px;
	flex: none;
}

.th-btn-primary {
	background: var(--tb-primary);
	border-color: var(--tb-primary);
	color: #ffffff;
	box-shadow: 0 16px 32px rgba( 23, 61, 194, 0.22 );
}

.th-btn-primary:hover,
.th-btn-primary:focus {
	background: var(--tb-primary-dark);
	border-color: var(--tb-primary-dark);
	color: #ffffff;
	transform: translateY( -2px );
}

.th-btn-outline {
	background: #ffffff;
	border-color: var(--tb-border);
	color: var(--tb-heading);
}

.th-btn-outline:hover,
.th-btn-outline:focus {
	border-color: var(--tb-primary);
	color: var(--tb-primary);
}

/* Hero */
.th-hero {
	position: relative;
	padding: 96px 0 128px;
	background:
		radial-gradient( circle at 80% 20%, rgba( 24, 183, 230, 0.14 ), transparent 32% ),
		radial-gradient( circle at 15% 85%, rgba( 23, 61, 194, 0.06 ), transparent 30% ),
		#ffffff;
}

.th-scroll-indicator {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX( -50% );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.th-scroll-indicator:hover {
	color: var(--tb-primary);
}

.th-scroll-indicator i {
	font-size: 18px;
	animation: th-scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes th-scroll-bounce {
	0%, 100% {
		transform: translateY( 0 );
	}
	50% {
		transform: translateY( 6px );
	}
}


.th-hero-row {
	--bs-gutter-x: clamp( 32px, 5vw, 64px );
	--bs-gutter-y: clamp( 32px, 5vw, 64px );
}

.th-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	padding: 7px 16px 7px 12px;
	border: 1px solid rgba( 23, 61, 194, 0.14 );
	border-radius: 999px;
	background: var(--th-blue-soft);
	color: var(--tb-primary);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.th-badge i {
	font-size: 15px;
	color: var(--th-gold, #f5a524);
}

.th-hero h1 {
	margin: 0 0 20px;
	color: var(--tb-heading);
	font-size: clamp( 28px, 3.7vw, 48px );
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

.th-hero h1 span {
	color: var(--tb-primary);
}

.th-hero-lead {
	margin: 0 0 30px;
	color: var(--tb-muted);
	font-size: 17px;
	line-height: 1.7;
}

.th-trust-row {
	display: flex;
	flex-wrap: wrap;
	column-gap: 13px;
	row-gap: 14px;
	margin: 30px 0 0;
	padding: 22px 0 22px;
	border-top: 1px solid var(--tb-border);
	list-style: none;
}

.th-trust-row li {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 650;
	white-space: nowrap;
}

.th-trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: var(--th-blue-soft);
	color: var(--tb-primary);
}

.th-trust-icon i {
	font-size: 14px;
	line-height: 1;
}

.th-hero-visual {
	position: relative;
}

.th-hero-visual::before {
	content: "";
	position: absolute;
	inset: 6% 6%;
	z-index: 0;
	border-radius: 44% 56% 52% 48% / 48% 44% 56% 52%;
	background: radial-gradient( circle at 32% 28%, rgba( 24, 183, 230, 0.16 ), rgba( 23, 61, 194, 0.05 ) 60%, transparent 76% );
}

.th-hero-visual::after {
	content: "";
	position: absolute;
	top: -5%;
	left: -6%;
	z-index: 0;
	width: 84px;
	height: 84px;
	background-image: radial-gradient( circle, rgba( 23, 61, 194, 0.24 ) 1.5px, transparent 1.6px );
	background-size: 14px 14px;
	opacity: 0.55;
}

.th-hero-image {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	filter: drop-shadow( 0 28px 46px rgba( 16, 28, 70, 0.16 ) );
}

/* Featured plugins */
.th-plugins {
	padding: 112px 0;
	background: var(--tb-bg);
}

.th-plugin-grid {
	--bs-gutter-x: 28px;
	--bs-gutter-y: 28px;
}

.th-plugin-col {
	display: flex;
}

.th-plugin-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--tb-border);
	border-radius: 24px;
	background: #ffffff;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.th-plugin-card:hover {
	border-color: rgba( 23, 61, 194, 0.24 );
	box-shadow: 0 28px 60px rgba( 16, 28, 70, 0.12 );
	transform: translateY( -6px );
}

.th-plugin-card--live {
	border-color: rgba( 23, 61, 194, 0.24 );
}

.th-plugin-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 230px;
	padding: 24px;
	background: var(--tb-bg);
}

.th-plugin-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.th-tag {
	position: absolute;
	top: 18px;
	left: 18px;
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--tb-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2px;
	box-shadow: 0 6px 16px rgba( 16, 28, 70, 0.1 );
}

.th-tag--popular {
	background: var(--tb-primary);
	color: #ffffff;
}

.th-plugin-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 26px 28px 28px;
}

.th-plugin-card h3 {
	margin: 0 0 10px;
	font-size: 19px;
}

.th-plugin-card p {
	flex: 1;
	margin: 0 0 18px;
	color: var(--tb-muted);
	font-size: 14.5px;
	line-height: 1.7;
}

.th-plugin-price {
	margin: 0 0 18px;
	color: var(--tb-heading);
	font-size: 21px;
	font-weight: 800;
}

.th-plugin-price-label {
	margin-right: 4px;
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 600;
}

.th-plugin-body .th-btn {
	align-self: flex-start;
}

.th-stars {
	color: var(--th-gold);
	letter-spacing: 2px;
}

/* Why choose */
.th-features {
	padding: 112px 0;
	background: #ffffff;
}

.th-feature-grid {
	--bs-gutter-x: 26px;
	--bs-gutter-y: 26px;
}

.th-feature-col {
	display: flex;
}

.th-feature-grid article {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 36px 30px;
	border: 1px solid transparent;
	border-radius: 20px;
	background: var(--tb-bg);
	text-align: left;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.th-feature-grid article:hover {
	border-color: rgba( 23, 61, 194, 0.18 );
	background: #ffffff;
	box-shadow: var(--th-shadow);
	transform: translateY( -4px );
}

.th-feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
	border-radius: 14px;
	background: var(--th-blue-soft, #eef4ff);
	color: var(--tb-primary);
}

.th-feature-icon i {
	font-size: 24px;
}

.th-feature-icon--bolt {
	background: #e2f7fc;
	color: var(--tb-cyan-dark);
}

.th-feature-icon--shield {
	background: #e6f8ee;
	color: #1caa6b;
}

.th-feature-icon--refresh {
	background: #ffe9f1;
	color: #d63a7d;
}

.th-feature-icon--gear {
	background: #f1eaff;
	color: #7c4dff;
}

.th-feature-icon--headset {
	background: #fff3e0;
	color: var(--th-gold, #f5a524);
}

.th-feature-icon--rocket {
	background: #eef0ff;
	color: #4c4fd1;
}

.th-feature-grid h3 {
	margin: 0 0 10px;
	font-size: 17px;
}

.th-feature-grid p {
	margin: 0;
	flex: 1;
	color: var(--tb-muted);
	font-size: 14px;
	line-height: 1.6;
}

.th-services {
	padding: 112px 0 88px;
	scroll-margin-top: 100px;
	background: #ffffff;
}

.th-service-grid {
	--bs-gutter-x: 26px;
	--bs-gutter-y: 26px;
}

.th-service-col {
	display: flex;
}

.th-service-grid article {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 36px 30px;
	border: 1px solid var(--tb-border);
	border-radius: 20px;
	background: #ffffff;
	text-align: left;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.th-service-grid article:hover {
	border-color: rgba( 23, 61, 194, 0.24 );
	box-shadow: 0 28px 60px rgba( 16, 28, 70, 0.1 );
	transform: translateY( -5px );
}

.th-service-grid h3 {
	margin: 0 0 10px;
	font-size: 17px;
}

.th-service-grid p {
	margin: 0;
	flex: 1;
	color: var(--tb-muted);
	font-size: 14px;
	line-height: 1.6;
}

.th-service-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
	color: var(--tb-primary);
	font-size: 14px;
	font-weight: 600;
}

.th-service-link i {
	font-size: 14px;
	transition: transform 0.2s ease;
}

.th-service-link:hover i {
	transform: translateX( 3px );
}

.th-service-features {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.th-service-features li {
	position: relative;
	padding-left: 22px;
	color: var(--tb-heading);
	font-size: 13px;
	font-weight: 600;
}

.th-service-features li::before {
	position: absolute;
	top: 3px;
	left: 0;
	width: 14px;
	height: 14px;
	background: #1caa6b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 8px no-repeat;
	border-radius: 50%;
	content: "";
}

/* Technology stack (home page tabs + service pages' tech grids) */
/* Sits directly under .th-features, which is also white with 112px bottom
   padding — full padding on both sides stacked into a ~224px blank gap with
   no background change to break it up, so this side is trimmed. .th-features
   itself is shared with page-about-us.php/page-support.php, so its side of
   the gap is trimmed via .th-home below instead of changing the shared rule. */
.th-technologies {
	padding: 64px 0 112px;
	background: #ffffff;
}

.th-home .th-features {
	padding-bottom: 64px;
}

.th-tech-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 8px;
	margin: 0 0 48px;
	border-bottom: 1px solid var(--tb-border);
}

.th-tech-tab {
	/* the global `button { width: 100%; min-height: 48px; border-radius: 6px;
	   background: var(--tb-primary); box-shadow: ...; }` reset would otherwise
	   make these look like solid buttons — flatten it into a plain text tab. */
	width: auto;
	min-height: 0;
	margin-bottom: -1px;
	padding: 14px 14px 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--tb-muted);
	font-size: 15px;
	font-weight: 650;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.th-tech-tab:hover {
	background: transparent;
	box-shadow: none;
	color: var(--tb-heading);
	transform: none;
}

.th-tech-tab:focus-visible {
	outline: 2px solid var(--tb-cyan);
	outline-offset: 2px;
}

.th-tech-tab.is-active {
	border-bottom-color: var(--tb-primary);
	background: transparent;
	color: var(--tb-primary);
}

.th-tech-tab.is-active:hover {
	background: transparent;
	color: var(--tb-primary);
}

.th-tech-panel[hidden] {
	display: none;
}

.th-tech-panel:not([hidden]) {
	animation: tb-reveal-up 0.45s ease both;
}

.th-tech-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.th-tech-card {
	display: flex;
	/* exactly 6 cards per row: 6 basis-widths + 5 gaps (20px each) = 100% */
	flex: 0 1 calc( ( 100% - 100px ) / 6 );
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 32px 18px;
	border: 1px solid var(--tb-border);
	border-radius: 18px;
	background: var(--tb-bg);
	text-align: center;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

/* .th-tech-card is a plain <div>/<span> on the home page and service pages
   when there's no linked technology page, but an <a> when there is one —
   reset link chrome for that case. */
a.th-tech-card,
a.th-tech-card:hover {
	color: inherit;
	text-decoration: none;
}

.th-tech-card:hover {
	border-color: rgba( 24, 183, 230, 0.35 );
	background: #ffffff;
	box-shadow: var(--th-shadow);
	transform: translateY( -4px );
}

.th-tech-card:hover .th-tech-icon {
	transform: scale( 1.08 );
}

.th-tech-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	transition: transform 0.2s ease;
}

.th-tech-icon svg,
.th-tech-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.th-tech-card span:last-child {
	color: var(--tb-heading);
	font-size: 14px;
	font-weight: 650;
}

/* Ecosystem */
.th-ecosystem {
	position: relative;
	overflow: hidden;
	padding: 112px 0;
	background: var(--tb-bg);
}

/* Used when this section is not immediately followed by .th-stats
   (which normally supplies the visual bottom via its overlapping card) —
   e.g. the About page, where it's the last section before the CTA. */
.th-ecosystem--standalone {
	padding-bottom: 112px;
}

.th-ecosystem-grid {
	--bs-gutter-x: clamp( 40px, 6vw, 90px );
	--bs-gutter-y: clamp( 40px, 6vw, 90px );
}

.th-ecosystem-diagram img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

.th-ecosystem-copy {
	position: relative;
	z-index: 1;
}

.th-ecosystem-watermark {
	position: absolute;
	top: -60px;
	right: -30px;
	z-index: 0;
	color: var(--tb-primary);
	font-size: 320px;
	line-height: 1;
	opacity: 0.05;
	pointer-events: none;
}

.th-ecosystem-copy p:not(.th-kicker) {
	color: var(--tb-muted);
	font-size: 16px;
	line-height: 1.7;
}

.th-checklist {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 22px 0 30px;
	padding: 0;
	list-style: none;
}

.th-checklist li {
	position: relative;
	padding-left: 28px;
	color: var(--tb-heading);
	font-size: 15px;
	font-weight: 600;
}

.th-checklist li::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #1caa6b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Achievements */
.th-achievements {
	padding: 112px 0;
	background: #ffffff;
}

.th-achievement-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 24px;
}

.th-achievement {
	padding: 32px 24px;
	border-radius: 20px;
	background: #ffffff;
	box-shadow: var(--th-shadow);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.th-achievement:hover {
	transform: translateY( -4px );
}

.th-achievement-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: var(--th-blue-soft);
	color: var(--tb-primary);
}

.th-achievement-icon i {
	font-size: 24px;
}

.th-achievement-icon--1 {
	background: #fff3e0;
	color: var(--th-gold, #f5a524);
}

.th-achievement-icon--2 {
	background: #e6f8ee;
	color: #1caa6b;
}

.th-achievement-icon--3 {
	background: #f1eaff;
	color: #7c4dff;
}

.th-achievement strong {
	display: block;
	margin-bottom: 8px;
	color: var(--tb-heading);
	font-size: clamp( 25px, 3.3vw, 33px );
	font-weight: 800;
	line-height: 1;
}

.th-achievement-label {
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Stats */
.th-stats {
	padding: 56px 0 90px;
	background: var(--tb-bg);
}

.th-stats-card {
	padding: 30px clamp( 20px, 4vw, 44px );
	border-radius: 18px;
	background: #ffffff;
	box-shadow: var(--th-shadow);
}

.th-stats-bar {
	--bs-gutter-x: 18px;
	--bs-gutter-y: 18px;
}

.th-stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.th-stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 12px;
	background: var(--th-blue-soft);
	color: var(--tb-primary);
}

.th-stat-icon i {
	font-size: 22px;
}

.th-stat strong {
	display: block;
	color: var(--tb-heading);
	font-size: 24px;
	font-weight: 800;
}

.th-stat small {
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 600;
}

/* Testimonials */
.th-testimonials {
	padding: 90px 0;
	background: var(--tb-bg);
}

.th-testimonial-track {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 22px;
}

.th-testimonial-card {
	display: flex;
	flex-direction: column;
	padding: 26px 24px;
	border: 1px solid var(--tb-border);
	border-radius: 14px;
	background: #ffffff;
	box-shadow: var(--th-shadow);
}

/* Only testimonial on the page: collapse the 3-column grid to one
   column and center the card, instead of pinning it to column 1
   while the other two sit empty. Stops applying on its own once a
   second testimonial is added. */
.th-testimonial-track:has( > .th-testimonial-card:only-child ) {
	grid-template-columns: minmax( 0, 1fr );
}

.th-testimonial-track > .th-testimonial-card:only-child {
	max-width: 420px;
	width: 100%;
	margin: 0 auto;
}

.th-testimonial-card .th-stars {
	margin-bottom: 14px;
	font-size: 15px;
}

.th-testimonial-card p {
	flex: 1;
	margin: 0 0 20px;
	color: var(--tb-text);
	font-size: 15px;
	line-height: 1.7;
}

.th-testimonial-person {
	display: flex;
	align-items: center;
	gap: 12px;
}

.th-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	background: rgba( 23, 61, 194, 0.08 );
	color: var(--tb-primary);
	font-size: 18px;
}

.th-testimonial-person strong {
	display: block;
	color: var(--tb-heading);
	font-size: 14px;
}

.th-testimonial-person span {
	color: var(--tb-muted);
	font-size: 12px;
}

.th-testimonial-role {
	display: block;
	color: var(--tb-muted);
	font-size: 12px;
}

.th-testimonial-track .is-testimonial-clone {
	display: none;
}

.th-testimonial-dots {
	display: none;
	justify-content: center;
	gap: 8px;
	margin-top: 26px;
}

/* A single dot navigates nothing; hide the whole nav until there's
   more than one testimonial to switch between. */
.th-testimonial-dots:has( > button:only-child ) {
	display: none;
}

.th-testimonial-dots button {
	-webkit-appearance: none;
	appearance: none;
	width: 8px;
	height: 8px;
	/* button picks up the global `button { min-height: 48px }` reset,
	   which min-height can't shrink below — override it here or the
	   dot renders as a tall pill instead of a small circle. */
	min-height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tb-border);
	cursor: pointer;
}

.th-testimonial-dots button.is-active {
	background: var(--tb-primary);
}

/* Final CTA */
.th-cta {
	padding: 112px 0;
	background: #ffffff;
}

.th-cta-card {
	position: relative;
	padding: clamp( 44px, 5vw, 72px );
	border-radius: 28px;
	background:
		radial-gradient( circle at 88% 18%, rgba( 24, 183, 230, 0.1 ), transparent 46% ),
		radial-gradient( circle at 6% 90%, rgba( 23, 61, 194, 0.08 ), transparent 42% ),
		var(--tb-bg);
	box-shadow: var(--th-shadow);
	overflow: hidden;
}

.th-cta-grid {
	--bs-gutter-x: clamp( 30px, 5vw, 60px );
	--bs-gutter-y: clamp( 30px, 5vw, 60px );
}

.th-cta-copy h2 {
	max-width: 440px;
	color: var(--tb-heading);
}

.th-cta-copy p {
	max-width: 440px;
	margin: 0 0 28px;
	color: var(--tb-muted);
	font-size: 16px;
	line-height: 1.7;
}

.th-cta-visual {
	position: relative;
	min-height: 220px;
}

.th-cta-image {
	display: block;
	width: 100%;
	height: auto;
}


/* Web Development redesign. */
.web-development-redesign {
	background:
		linear-gradient( 180deg, #ffffff 0%, #f7fbff 46%, #ffffff 100% );
}

.web-development-redesign .section {
	padding: 68px 0;
}

.web-dev-hero {
	position: relative;
	overflow: hidden;
	padding: 54px 0 58px;
	background:
		radial-gradient( circle at 76% 38%, rgba( 24, 183, 230, 0.16 ), transparent 28% ),
		linear-gradient( 105deg, #ffffff 0%, #ffffff 46%, #eefaff 100% );
	border-bottom: 1px solid rgba( 24, 183, 230, 0.12 );
}

.web-dev-hero::before,
.web-dev-hero::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.web-dev-hero::before {
	inset: 0;
	background:
		linear-gradient( 120deg, transparent 0 34%, rgba( 24, 183, 230, 0.09 ) 34.2% 34.8%, transparent 35% ),
		linear-gradient( 160deg, transparent 0 66%, rgba( 23, 61, 194, 0.08 ) 66.2% 67%, transparent 67.2% );
	opacity: 1;
}

.web-dev-hero::after {
	right: -10vw;
	bottom: -135px;
	width: 54vw;
	height: 280px;
	border: 26px solid rgba( 24, 183, 230, 0.08 );
	border-radius: 50%;
	transform: rotate( -14deg );
}

.web-dev-hero-layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax( 0, 0.82fr ) minmax( 340px, 1.18fr );
	gap: 44px;
	align-items: center;
}

.web-dev-hero-copy {
	max-width: 560px;
}

.web-dev-hero .section-kicker {
	color: var(--tb-cyan-dark);
}

.web-dev-hero h1 {
	max-width: 590px;
	margin-bottom: 14px;
	color: var(--tb-heading);
	font-size: clamp( 26px, 2.8vw, 38px );
	line-height: 1.12;
}

.web-dev-hero-copy > p:not(.section-kicker) {
	max-width: 520px;
	color: var(--tb-muted);
	font-size: 15px;
	line-height: 1.66;
}

.web-dev-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 24px;
}

.services-landing-page .web-dev-hero-layout,
.service-detail-page .web-dev-hero-layout {
	grid-template-columns: minmax( 0, 1fr );
}

.services-landing-page .web-dev-hero-copy,
.service-detail-page .web-dev-hero-copy {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.services-landing-page .web-dev-hero h1,
.service-detail-page .web-dev-hero h1 {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.services-landing-page .web-dev-hero-copy > p:not(.section-kicker),
.service-detail-page .web-dev-hero-copy > p:not(.section-kicker) {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.services-landing-page .web-dev-hero-actions,
.service-detail-page .web-dev-hero-actions {
	justify-content: center;
}

.services-landing-page .web-section-heading,
.service-detail-page .web-section-heading {
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

.services-landing-page .web-dev-hero,
.service-detail-page .web-dev-hero {
	padding: 112px 0;
}

.services-landing-page .section,
.services-landing-page .th-services,
.service-detail-page .section,
.service-detail-page .th-services {
	padding: 112px 0;
}

.services-landing-page .web-dev-hero,
.service-detail-page .web-dev-hero {
	background:
		radial-gradient( circle at 80% 20%, rgba( 24, 183, 230, 0.14 ), transparent 32% ),
		radial-gradient( circle at 15% 85%, rgba( 23, 61, 194, 0.06 ), transparent 30% ),
		#ffffff;
	border-color: transparent;
}

.services-landing-page .web-dev-hero::before,
.services-landing-page .web-dev-hero::after,
.service-detail-page .web-dev-hero::before,
.service-detail-page .web-dev-hero::after {
	display: none;
}

.web-dev-hero .company-button {
	min-height: 48px;
	padding: 12px 22px;
	background: var(--tb-primary);
	color: #ffffff;
	box-shadow: 0 18px 36px rgba( 16, 42, 134, 0.24 );
}

.web-dev-hero .company-button:hover,
.web-dev-hero .company-button:focus {
	background: #18b7e6;
	color: #ffffff;
}

.web-dev-hero .button-outline {
	background: #ffffff;
	border-color: rgba( 23, 61, 194, 0.18 );
	color: var(--tb-heading);
	box-shadow: none;
}

.web-dev-hero .button-outline:hover,
.web-dev-hero .button-outline:focus {
	background: #f7fbff;
	border-color: rgba( 24, 183, 230, 0.42 );
	color: var(--tb-primary);
}

.web-dev-stage {
	position: relative;
	min-height: 330px;
	perspective: 1200px;
}

.web-dev-orbit {
	position: absolute;
	border: 1px solid rgba( 24, 183, 230, 0.18 );
	border-radius: 50%;
	transform: rotate( -18deg );
}

.web-dev-orbit-one {
	inset: 36px 22px 54px -8px;
}

.web-dev-orbit-two {
	inset: 92px -28px 22px 118px;
	border-color: rgba( 24, 183, 230, 0.28 );
}

.web-dev-browser {
	position: absolute;
	top: 28px;
	left: 12px;
	width: min( 88%, 470px );
	overflow: hidden;
	background: #f9fbff;
	border: 1px solid rgba( 220, 230, 241, 0.96 );
	border-radius: 8px;
	box-shadow: 0 28px 56px rgba( 16, 42, 134, 0.14 );
	transform: rotateX( 6deg ) rotateY( -10deg ) rotateZ( -2deg );
	animation: web-dev-float 5s ease-in-out infinite;
}

.web-dev-browser-bar {
	display: flex;
	gap: 7px;
	align-items: center;
	height: 38px;
	padding: 0 14px;
	background: #172337;
}

.web-dev-browser-bar span {
	width: 9px;
	height: 9px;
	background: #18b7e6;
	border-radius: 50%;
}

.web-dev-browser-bar span:nth-child( 2 ) {
	background: #18b7e6;
}

.web-dev-browser-bar span:nth-child( 3 ) {
	background: #173dc2;
}

.web-dev-browser-body {
	display: grid;
	gap: 14px;
	padding: 18px;
	background:
		linear-gradient( 90deg, rgba( 16, 42, 134, 0.08 ) 1px, transparent 1px ),
		linear-gradient( rgba( 16, 42, 134, 0.08 ) 1px, transparent 1px ),
		#f9fbff;
	background-size: 28px 28px;
}

.web-dev-preview-hero {
	height: 105px;
	background:
		linear-gradient( 90deg, #132132 0 52%, transparent 52% ),
		radial-gradient( circle at 82% 28%, rgba( 24, 183, 230, 0.66 ), transparent 19% ),
		linear-gradient( 135deg, #18b7e6, #f2f7ff );
	border-radius: 8px;
}

.web-dev-preview-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 10px;
}

.web-dev-preview-grid span {
	height: 58px;
	background: #ffffff;
	border: 1px solid rgba( 220, 230, 241, 0.95 );
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba( 20, 32, 74, 0.08 );
}

.web-dev-preview-grid span::before {
	display: block;
	width: 34px;
	height: 8px;
	margin: 17px 0 0 14px;
	background: #18b7e6;
	border-radius: 999px;
	content: "";
}

.web-dev-preview-lines {
	display: grid;
	gap: 8px;
}

.web-dev-preview-lines span {
	height: 9px;
	background: #dce6f1;
	border-radius: 999px;
}

.web-dev-preview-lines span:nth-child( 1 ) {
	width: 72%;
}

.web-dev-preview-lines span:nth-child( 2 ) {
	width: 54%;
}

.web-dev-preview-lines span:nth-child( 3 ) {
	width: 84%;
}

.web-dev-phone,
.web-dev-code-card {
	position: absolute;
	background: rgba( 255, 255, 255, 0.96 );
	border: 1px solid rgba( 220, 230, 241, 0.96 );
	border-radius: 8px;
	box-shadow: 0 20px 42px rgba( 16, 42, 134, 0.14 );
}

.web-dev-phone {
	right: 8px;
	bottom: 48px;
	display: grid;
	gap: 10px;
	width: 108px;
	padding: 14px 11px;
	transform: rotate( 9deg );
}

.web-dev-phone span {
	display: block;
	height: 40px;
	background: linear-gradient( 135deg, #132132, #18b7e6 );
	border-radius: 7px;
}

.web-dev-phone span:nth-child( 2 ) {
	height: 10px;
	background: #dce6f1;
}

.web-dev-phone span:nth-child( 3 ) {
	width: 72%;
	height: 10px;
	background: #18b7e6;
}

.web-dev-code-card {
	right: 70px;
	bottom: 4px;
	display: grid;
	gap: 8px;
	width: 164px;
	padding: 14px;
	background: var(--tb-heading);
	transform: rotate( -4deg );
}

.web-dev-code-card span {
	height: 8px;
	background: rgba( 255, 255, 255, 0.22 );
	border-radius: 999px;
}

.web-dev-code-card span:nth-child( 1 ) {
	width: 78%;
	background: #18b7e6;
}

.web-dev-code-card span:nth-child( 2 ) {
	width: 56%;
	background: #18b7e6;
}

.web-dev-code-card span:nth-child( 3 ) {
	width: 88%;
}

.web-development-redesign .web-intro-section {
	position: relative;
	background: #ffffff;
}

.web-development-redesign .web-intro-layout {
	grid-template-columns: minmax( 0, 0.78fr ) minmax( 420px, 1fr );
	gap: 48px;
	align-items: stretch;
}

.web-development-redesign.service-detail-page .web-intro-layout {
	grid-template-columns: minmax( 0, 1fr );
}

.web-development-redesign.service-detail-page .web-intro-copy {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.web-development-redesign.service-detail-page .web-intro-copy p:not(.section-kicker) {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.web-development-redesign .web-intro-copy h2,
.web-development-redesign .web-section-heading h2,
.web-development-redesign .web-process-layout h2,
.web-development-redesign .web-deliverables-layout h2,
.web-showcase-copy h2 {
	font-size: clamp( 22px, 2.5vw, 33px );
	line-height: 1.14;
}

.web-development-redesign .web-intro-copy p:not(.section-kicker),
.web-development-redesign .web-process-layout > div:first-child > p:not(.section-kicker),
.web-showcase-copy p:not(.section-kicker) {
	max-width: 650px;
	color: var(--tb-muted);
	font-size: 15px;
	line-height: 1.68;
}

.web-dev-metrics {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 14px;
	align-self: center;
}

.web-dev-metrics div {
	min-height: 112px;
	padding: 18px;
	background:
		linear-gradient( 135deg, rgba( 24, 183, 230, 0.12 ), transparent 55% ),
		#ffffff;
	border: 1px solid rgba( 220, 230, 241, 0.96 );
	border-radius: 8px;
	box-shadow: 0 18px 42px rgba( 20, 32, 74, 0.08 );
}

.web-dev-metrics strong,
.web-dev-metrics span {
	display: block;
}

.web-dev-metrics strong {
	margin-bottom: 8px;
	color: var(--tb-heading);
	font-size: clamp( 24px, 2.5vw, 34px );
	line-height: 1;
}

.web-dev-metrics span {
	color: var(--tb-muted);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
}

.web-development-redesign .web-capabilities-section {
	overflow: hidden;
	background: var(--tb-bg);
	border-top: 1px solid rgba( 220, 230, 241, 0.8 );
}

.web-development-redesign .web-capability-grid {
	gap: 16px;
	margin-top: 24px;
}

.web-development-redesign .web-capability-grid article {
	position: relative;
	overflow: hidden;
	/* No fixed min-height: card content on the service/service-detail pages
	   already renders taller than 220px on its own (confirmed via
	   getComputedStyle across every page using this class), so a fixed
	   floor never actually helped there — it only ever mattered on
	   shorter-copy sections (e.g. technology-page "Why choose X" grids),
	   where it left a visible band of empty space below the text instead. */
	padding: 22px;
	background:
		linear-gradient( #ffffff, #ffffff ) padding-box,
		linear-gradient( 135deg, rgba( 24, 183, 230, 0.42 ), rgba( 23, 61, 194, 0.28 ), rgba( 16, 42, 134, 0.18 ) ) border-box;
	border: 1px solid transparent;
	border-radius: 8px;
	box-shadow: 0 20px 46px rgba( 20, 32, 74, 0.08 );
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.web-development-redesign .web-capability-grid article::after {
	position: absolute;
	right: -26px;
	bottom: -34px;
	width: 108px;
	height: 108px;
	background: rgba( 24, 183, 230, 0.11 );
	border-radius: 50%;
	content: "";
}

.web-development-redesign .web-capability-grid article:hover {
	box-shadow: 0 28px 64px rgba( 20, 32, 74, 0.13 );
	transform: translateY( -5px );
}

.web-capability-icon {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 18px;
	background: #132132;
	border-radius: 8px;
	box-shadow: 0 14px 26px rgba( 19, 33, 50, 0.18 );
}

.web-capability-icon::before,
.web-capability-icon::after {
	position: absolute;
	content: "";
}

.web-capability-icon-layers::before {
	width: 22px;
	height: 15px;
	border: 2px solid #18b7e6;
	transform: skewY( -13deg );
}

.web-capability-icon-layers::after {
	width: 22px;
	height: 15px;
	border: 2px solid #18b7e6;
	transform: translate( 5px, 5px ) skewY( -13deg );
}

.web-capability-icon-target::before {
	width: 24px;
	height: 24px;
	border: 2px solid #18b7e6;
	border-radius: 50%;
}

.web-capability-icon-target::after {
	width: 8px;
	height: 8px;
	background: #18b7e6;
	border-radius: 50%;
}

.web-capability-icon-cart::before {
	width: 22px;
	height: 15px;
	border: 2px solid #18b7e6;
	border-top: 0;
	transform: translateY( -2px );
}

.web-capability-icon-cart::after {
	width: 26px;
	height: 8px;
	border-right: 4px solid #18b7e6;
	border-bottom: 3px dotted #18b7e6;
	transform: translateY( 13px );
}

.web-capability-icon-code::before {
	width: 24px;
	height: 18px;
	border-right: 3px solid #18b7e6;
	border-left: 3px solid #18b7e6;
	transform: skewX( -18deg );
}

.web-capability-icon-code::after {
	width: 22px;
	height: 2px;
	background: rgba( 255, 255, 255, 0.78 );
	transform: rotate( -58deg );
}

.web-development-redesign .web-capability-grid h3 {
	position: relative;
	z-index: 1;
	margin-bottom: 10px;
	font-size: 17px;
	line-height: 1.28;
}

.web-development-redesign .web-capability-grid p {
	position: relative;
	z-index: 1;
	font-size: 13px;
	line-height: 1.62;
}

.web-development-redesign .web-process-section {
	background: #ffffff;
}

.web-development-redesign .web-engagement-section {
	background: var(--tb-bg);
}

.web-development-redesign .web-process-layout {
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: start;
}

.web-development-redesign .web-process-layout > div:first-child {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.web-development-redesign .web-process-layout > div:first-child > p {
	margin-right: auto;
	margin-left: auto;
}

.web-development-redesign .web-process-steps {
	position: relative;
	display: grid;
	gap: 18px;
	width: min( 100%, 920px );
	margin: 6px auto 0;
}

.web-development-redesign .web-process-steps::before {
	position: absolute;
	top: 24px;
	bottom: 24px;
	left: 50%;
	width: 2px;
	background: linear-gradient( 180deg, #173dc2, #18b7e6 );
	content: "";
	transform: translateX( -50% );
}

.web-development-redesign .web-process-steps article {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 64px minmax( 0, 1fr );
	gap: 18px;
	align-items: start;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.web-development-redesign .web-process-steps article > div {
	grid-column: 3;
	padding: 20px;
	background: #ffffff;
	border: 1px solid rgba( 220, 230, 241, 0.96 );
	border-radius: 8px;
	box-shadow: 0 18px 42px rgba( 20, 32, 74, 0.075 );
}

.web-development-redesign .web-process-steps article:nth-child( even ) > div {
	grid-column: 1;
	grid-row: 1;
}

.web-development-redesign .web-process-steps span {
	position: relative;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	width: 44px;
	height: 44px;
	background: #132132;
	border: 4px solid #ffffff;
	border-radius: 50%;
	color: #18b7e6;
	box-shadow: 0 12px 26px rgba( 19, 33, 50, 0.16 );
}

.web-development-redesign .web-process-steps h3 {
	margin-bottom: 8px;
	font-size: 17px;
}

.web-showcase-section {
	overflow: hidden;
	background:
		radial-gradient( circle at 82% 24%, rgba( 24, 183, 230, 0.13 ), transparent 28% ),
		linear-gradient( 105deg, #ffffff 0%, #f8fcff 50%, #edf9ff 100% );
	border-top: 1px solid rgba( 24, 183, 230, 0.12 );
	border-bottom: 1px solid rgba( 24, 183, 230, 0.12 );
}

.web-showcase-layout {
	display: grid;
	grid-template-columns: minmax( 0, 0.82fr ) minmax( 360px, 1fr );
	gap: 42px;
	align-items: center;
}

.web-showcase-copy h2,
.web-showcase-copy p:not(.section-kicker) {
	color: var(--tb-heading);
}

.web-showcase-copy p:not(.section-kicker) {
	color: var(--tb-muted);
}

.web-showcase-board {
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: 16px;
	transform: rotate( -2deg );
}

.web-showcase-card {
	display: grid;
	gap: 10px;
	min-height: 145px;
	padding: 16px;
	background: #f9fbff;
	border: 1px solid rgba( 220, 230, 241, 0.96 );
	border-radius: 8px;
	box-shadow: 0 22px 46px rgba( 16, 42, 134, 0.12 );
}

.web-showcase-card-large {
	grid-row: span 2;
	min-height: 306px;
	background:
		linear-gradient( 180deg, #ffffff 0%, #f2f7ff 100% );
}

.web-showcase-card span {
	display: block;
	background: #dce6f1;
	border-radius: 8px;
}

.web-showcase-card span:nth-child( 1 ) {
	background: linear-gradient( 135deg, #173dc2, #18b7e6 );
}

.web-showcase-card-large span:nth-child( 1 ) {
	height: 126px;
}

.web-showcase-card-large span:nth-child( 2 ) {
	height: 60px;
	background: #132132;
}

.web-showcase-card-large span:nth-child( 3 ) {
	height: 42px;
	background: #ffffff;
	border: 1px solid #dce6f1;
}

.web-showcase-card:not( .web-showcase-card-large ) span:nth-child( 1 ) {
	height: 72px;
}

.web-showcase-card:not( .web-showcase-card-large ) span:nth-child( 2 ) {
	height: 34px;
	background: #ffffff;
	border: 1px solid #dce6f1;
}

.web-development-redesign .web-deliverables-section {
	background: linear-gradient( 180deg, #ffffff 0%, #f6f9fc 100% );
}

.web-development-redesign .web-deliverables-layout {
	position: relative;
	overflow: hidden;
	grid-template-columns: minmax( 0, 0.8fr ) minmax( 360px, 1fr );
	gap: 36px;
	padding: 34px;
	background:
		linear-gradient( 135deg, rgba( 24, 183, 230, 0.16 ), rgba( 23, 61, 194, 0.08 ) ),
		#ffffff;
}

.web-development-redesign .web-deliverables-layout::after {
	position: absolute;
	right: -56px;
	bottom: -64px;
	width: 190px;
	height: 190px;
	background: #132132;
	clip-path: polygon( 0 0, 100% 22%, 76% 100%, 18% 72% );
	content: "";
	opacity: 0.08;
}

.web-development-redesign .web-deliverable-list {
	position: relative;
	z-index: 1;
}

.web-development-redesign .cta-section {
	background: #ffffff;
}

.web-development-redesign .animated-cta {
	background:
		radial-gradient( circle at 82% 20%, rgba( 24, 183, 230, 0.14 ), transparent 30% ),
		linear-gradient( 135deg, rgba( 24, 183, 230, 0.16 ), rgba( 23, 61, 194, 0.08 ) ),
		#f7fbff;
}

@keyframes web-dev-float {
	0%,
	100% {
		transform: rotateX( 6deg ) rotateY( -10deg ) rotateZ( -2deg ) translateY( 0 );
	}

	50% {
		transform: rotateX( 6deg ) rotateY( -10deg ) rotateZ( -2deg ) translateY( -10px );
	}
}


/* Site-wide color refresh: one compact layer keeps the palette consistent. */
.site-footer,
.company-hero,
.company-plugin-highlight,
.company-signature,
.company-dark-band,
.company-final,
.contact-simple-hero,
.web-dev-hero,
.web-showcase-section {
	background:
		radial-gradient( circle at 82% 20%, rgba( 24, 183, 230, 0.1 ), transparent 30% ),
		linear-gradient( 115deg, #ffffff 0%, #ffffff 48%, #f1f6fb 100% );
	border-color: rgba( 18, 107, 182, 0.14 );
}

.company-plugin-highlight,
.company-dark-band,
.about-service-section,
.web-development-redesign .web-deliverables-section,
.contact-modern-section {
	background: linear-gradient( 180deg, #f7f9fc 0%, #ffffff 100% );
	border-color: rgba( 18, 107, 182, 0.12 );
}

.site-footer {
	background:
		radial-gradient( circle at 14% 22%, rgba( 24, 183, 230, 0.12 ), transparent 28% ),
		linear-gradient( 180deg, #f7f9fc 0%, #eef5fb 100% );
}

.site-footer::before {
	background: linear-gradient( 90deg, transparent, rgba( 23, 61, 194, 0.28 ), transparent );
}

.company-home .button,
.company-button,
.header-account-link--primary.header-account-link--primary,
.web-dev-hero .company-button,
.contact-modern-page .contact-reference-form button,
.contact-modern-page .contact-reference-form input[type="submit"],
.contact-modern-page .contact-reference-form .wpcf7-submit {
	background: linear-gradient( 135deg, #243b73, #173dc2 ) !important;
	border-color: rgba( 36, 59, 115, 0.88 ) !important;
	color: #ffffff !important;
	box-shadow: 0 16px 34px rgba( 36, 59, 115, 0.18 );
}

.company-home .button:hover,
.company-home .button:focus,
.company-button:hover,
.company-button:focus,
.header-account-link--primary.header-account-link--primary:hover,
.header-account-link--primary.header-account-link--primary:focus,
.web-dev-hero .company-button:hover,
.web-dev-hero .company-button:focus,
.contact-modern-page .contact-reference-form button:hover,
.contact-modern-page .contact-reference-form button:focus,
.contact-modern-page .contact-reference-form input[type="submit"]:hover,
.contact-modern-page .contact-reference-form input[type="submit"]:focus,
.contact-modern-page .contact-reference-form .wpcf7-submit:hover,
.contact-modern-page .contact-reference-form .wpcf7-submit:focus {
	background: linear-gradient( 135deg, #173dc2, #18b7e6 ) !important;
	border-color: var(--tb-primary) !important;
	color: #ffffff !important;
}

.plugin-mini-card a::before,
.web-development-redesign .web-process-steps::before,
.web-showcase-card span:nth-child( 1 ) {
	background: linear-gradient( 135deg, var(--tb-primary), var(--tb-cyan) );
}

.section-kicker,
.page-banner-meta,
.plugin-mini-card span,
.about-welcome-copy .section-kicker,
.about-friendly-heading .section-kicker,
.contact-modern-heading .section-kicker,
.web-dev-hero .section-kicker {
	color: var(--tb-primary);
}

.page-banner-meta,
.plugin-highlight-points span,
.about-service-grid span,
.contact-modern-page .contact-reference-form .wpcf7-list-item label:has(input:checked) {
	background: rgba( 24, 183, 230, 0.1 );
	border-color: rgba( 18, 107, 182, 0.22 );
}

.plugin-mini-card,
.value-row article,
.achievement-grid article,
.about-help-list div,
.about-service-grid article,
.contact-modern-form-card,
.web-dev-metrics div,
.web-development-redesign .web-capability-grid article,
.web-development-redesign .web-process-steps article > div,
.web-showcase-card,
.web-development-redesign .web-deliverables-layout {
	border-color: rgba( 18, 107, 182, 0.14 );
	box-shadow: 0 18px 42px rgba( 24, 36, 58, 0.07 );
}

.plugin-mini-card:hover,
.plugin-mini-card:focus-within,
.value-row article:hover,
.achievement-grid article:hover,
.about-service-grid article:hover,
.about-service-grid article:focus-within,
.web-development-redesign .web-capability-grid article:hover {
	border-color: rgba( 24, 183, 230, 0.36 );
	box-shadow: 0 24px 56px rgba( 24, 36, 58, 0.1 );
}

.primary-navigation > ul > li > a::before,
.primary-navigation .sub-menu a::before {
	background: var(--tb-primary);
}

.primary-navigation a:hover,
.primary-navigation a:focus,
.primary-navigation .current-menu-item > a,
.plugin-highlight-link:hover,
.plugin-highlight-link:focus {
	color: var(--tb-primary);
}

.company-hero-copy h1,
.company-hero-copy h1 span:first-child,
.plugin-highlight-copy h2,
.plugin-mini-card strong,
.company-achievements h2,
.company-work h2,
.company-final h2,
.dark-band-heading h2,
.value-row h3,
.achievement-grid strong {
	color: var(--tb-heading);
}

.dark-band-heading h2,
.company-achievements h2,
.company-work h2,
.company-final h2 {
	color: #1f2d46;
}

.company-hero-copy h1 span:last-child {
	color: var(--tb-primary);
}

.home-banner-image,
.digital-presence-image {
	filter: drop-shadow( 0 28px 46px rgba( 24, 36, 58, 0.12 ) );
}

.web-dev-browser-bar,
.web-dev-code-card,
.web-capability-icon,
.web-showcase-card-large span:nth-child( 2 ) {
	background: #243047;
}

.web-dev-browser-bar span,
.web-dev-browser-bar span:nth-child( 2 ),
.web-dev-code-card span:nth-child( 1 ),
.web-dev-code-card span:nth-child( 2 ),
.web-dev-preview-grid span::before,
.web-dev-phone span:nth-child( 3 ),
.web-development-redesign .web-process-steps span {
	background: var(--tb-cyan);
}

.company-hero-copy h1 span:last-child,
.plugin-highlight-link,
.plugin-mini-card small {
	color: var(--tb-primary);
}

.plugin-highlight-points span,
.page-banner-meta,
.about-service-grid span {
	color: var(--tb-primary);
}

.company-home .button,
.company-button,
.header-account-link--primary.header-account-link--primary,
.web-dev-hero .company-button,
.contact-modern-page .contact-reference-form button,
.contact-modern-page .contact-reference-form input[type="submit"],
.contact-modern-page .contact-reference-form .wpcf7-submit {
	background: linear-gradient( 135deg, #243b73, #173dc2 ) !important;
	border-color: rgba( 36, 59, 115, 0.82 ) !important;
}

.company-home .button:hover,
.company-home .button:focus,
.company-button:hover,
.company-button:focus,
.header-account-link--primary.header-account-link--primary:hover,
.header-account-link--primary.header-account-link--primary:focus,
.web-dev-hero .company-button:hover,
.web-dev-hero .company-button:focus,
.contact-modern-page .contact-reference-form button:hover,
.contact-modern-page .contact-reference-form button:focus,
.contact-modern-page .contact-reference-form input[type="submit"]:hover,
.contact-modern-page .contact-reference-form input[type="submit"]:focus,
.contact-modern-page .contact-reference-form .wpcf7-submit:hover,
.contact-modern-page .contact-reference-form .wpcf7-submit:focus {
	background: linear-gradient( 135deg, #173dc2, #18b7e6 ) !important;
	border-color: rgba( 23, 61, 194, 0.88 ) !important;
}

.company-final {
	background:
		radial-gradient( circle at 78% 34%, rgba( 24, 183, 230, 0.12 ), transparent 30% ),
		linear-gradient( 115deg, #ffffff 0%, #ffffff 56%, #f4f7fb 100% );
}

/* Plugin directory redesign */
.plugin-listing-page {
	--th-navy: #101c46;
	--th-navy-soft: #16215a;
	--th-gold: #f5a524;
	--th-blue-soft: #eef4ff;
	--th-shadow: 0 20px 46px rgba( 16, 28, 70, 0.08 );
	background: #ffffff;
}

.plugin-listing-section {
	padding: 68px 0 82px;
	background:
		radial-gradient( circle at 80% 10%, rgba( 24, 183, 230, 0.1 ), transparent 32% ),
		radial-gradient( circle at 10% 90%, rgba( 23, 61, 194, 0.05 ), transparent 30% ),
		var(--tb-bg);
}

.plugin-directory-shell {
	display: grid;
	gap: 40px;
}

/* Plugins page hero — matches the centered .web-dev-hero treatment used on
   the services landing page instead of its own bespoke boxed hero. */
.plugin-listing-page .web-dev-hero-layout {
	grid-template-columns: minmax( 0, 1fr );
}

.plugin-listing-page .web-dev-hero-copy {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.plugin-listing-page .web-dev-hero h1 {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.plugin-listing-page .web-dev-hero-copy > p:not(.section-kicker) {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.plugin-listing-page .web-dev-hero-actions {
	justify-content: center;
}

.plugin-listing-page .web-dev-hero {
	padding: 112px 0;
	background:
		radial-gradient( circle at 80% 20%, rgba( 24, 183, 230, 0.14 ), transparent 32% ),
		radial-gradient( circle at 15% 85%, rgba( 23, 61, 194, 0.06 ), transparent 30% ),
		#ffffff;
	border-color: transparent;
}

.plugin-listing-page .web-dev-hero::before,
.plugin-listing-page .web-dev-hero::after {
	display: none;
}

.plugin-directory-panel {
	display: grid;
	gap: 18px;
	margin-top: 40px;
	padding: 20px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 20px;
	box-shadow: var(--th-shadow);
	/* .site-header is position:sticky, so an anchor jump here would
	   otherwise tuck the top of the panel underneath it. */
	scroll-margin-top: 100px;
}

.plugin-directory-controls {
	display: flex;
	align-items: center;
	gap: 16px;
}

.plugin-directory-search {
	flex: 1 1 auto;
	max-width: none;
	margin: 0;
	padding: 8px;
	background: #f8fbff;
	border-color: rgba( 197, 211, 229, 0.92 );
	box-shadow: none;
}

.plugin-directory-search input {
	min-height: 48px;
	padding: 0 16px;
	background: transparent;
	color: var(--tb-heading);
	font-size: 14px;
}

.plugin-directory-search input::placeholder {
	color: #7a8798;
}

.plugin-directory-search button {
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--tb-primary);
	box-shadow: 0 12px 24px rgba( 23, 61, 194, 0.18 );
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}

.plugin-directory-search button:hover,
.plugin-directory-search button:focus {
	background: var(--tb-primary-dark);
}

.plugin-directory-panel .plugin-tag-filter {
	gap: 8px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid rgba( 220, 228, 239, 0.9 );
}

.plugin-directory-panel .plugin-tag-filter a,
.plugin-directory-panel .active-plugin-filters strong {
	min-height: 36px;
	background: #ffffff;
	border-color: rgba( 204, 216, 232, 0.95 );
	color: #27354a;
}

.plugin-directory-panel .plugin-tag-filter a:hover,
.plugin-directory-panel .plugin-tag-filter a:focus,
.plugin-directory-panel .plugin-tag-filter a.is-active {
	background: var(--tb-primary);
	border-color: var(--tb-primary);
	color: #ffffff;
}

.plugin-directory-panel .active-plugin-filters {
	margin: 0;
	padding-top: 2px;
}

.plugin-product-grid {
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 320px ), 1fr ) );
	gap: 24px;
}

.plugin-product-card {
	border-color: var(--tb-border);
	box-shadow: 0 18px 46px rgba( 20, 32, 74, 0.08 );
}

.plugin-product-card:hover {
	border-color: rgba( 23, 61, 194, 0.28 );
	box-shadow: var(--th-shadow);
}

.plugin-product-media {
	aspect-ratio: 16 / 9;
	padding: 28px;
	background:
		linear-gradient( 135deg, rgba( 24, 183, 230, 0.12 ), transparent 48% ),
		linear-gradient( 180deg, #f8fcff 0%, #edf5fb 100% );
}

.plugin-product-card:nth-child( 2n ) .plugin-product-media {
	background:
		linear-gradient( 135deg, rgba( 35, 188, 118, 0.1 ), transparent 48% ),
		linear-gradient( 180deg, #fbfdff 0%, #eef7f4 100% );
}

.plugin-product-media img {
	width: 88%;
	height: 88%;
}

.plugin-product-body {
	gap: 12px;
	padding: 24px 24px 0;
}

.plugin-product-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.plugin-product-tags span {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 5px 9px;
	background: #f3f8fc;
	border: 1px solid rgba( 204, 216, 232, 0.86 );
	border-radius: 999px;
	color: #126bb6;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
}

.plugin-product-card h3 {
	font-size: 21px;
	line-height: 1.2;
}

.plugin-product-card p {
	color: #5f6e82;
	font-size: 14px;
}

.plugin-product-footer {
	padding: 24px;
}

.plugin-product-footer .th-btn {
	width: 100%;
	justify-content: center;
	box-shadow: 0 14px 26px rgba( 23, 61, 194, 0.15 );
}

.plugin-product-card:only-child {
	display: grid;
	grid-template-columns: minmax( 280px, 38% ) minmax( 0, 1fr );
}

.plugin-product-card:only-child .plugin-product-media {
	grid-row: 1 / span 2;
	aspect-ratio: auto;
	min-height: 330px;
	border-right: 1px solid var(--tb-border);
	border-bottom: 0;
}

.plugin-product-card:only-child .plugin-product-media img {
	width: 76%;
	height: 76%;
}

.plugin-product-card:only-child .plugin-product-body {
	align-content: end;
	padding: 44px 42px 0;
}

.plugin-product-card:only-child h3 {
	max-width: 620px;
	font-size: clamp( 26px, 3vw, 36px );
}

.plugin-product-card:only-child p {
	max-width: 620px;
	font-size: 15px;
}

.plugin-product-card:only-child .plugin-product-footer {
	align-content: start;
	padding: 28px 42px 44px;
}

.plugin-product-card:only-child .plugin-product-footer .th-btn {
	width: auto;
	min-width: 180px;
	/* .plugin-product-footer is a grid container, which stretches grid
	   items to fill the track by default even with width:auto set here. */
	justify-self: start;
}

.plugin-empty-state {
	background:
		linear-gradient( 135deg, rgba( 24, 183, 230, 0.08 ), transparent 46% ),
		#ffffff;
}

.plugin-empty-state-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 16px;
	background: var(--th-blue-soft);
	color: var(--tb-primary);
	font-size: 24px;
}


.plugin-trust-strip {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 24px;
}

/* On the product page this strip sits directly under the hero row (which
   ends with .plugin-hero-notice) with no gap of its own - crowds the two
   together on desktop. Page-plugins.php's own .plugin-trust-strip is the
   first thing in its section, so this stays scoped to the hero context. */
.plugin-detail-hero .plugin-trust-strip {
	margin-top: 48px;
}

.plugin-trust-strip article {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px 20px;
	background: #ffffff;
	border: 1px solid var(--tb-border);
	border-radius: 16px;
	box-shadow: 0 16px 38px rgba( 20, 32, 74, 0.06 );
	text-align: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.plugin-trust-strip article:hover {
	border-color: rgba( 23, 61, 194, 0.28 );
	box-shadow: var(--th-shadow);
	transform: translateY( -3px );
}

.plugin-trust-strip article > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--th-blue-soft);
	color: var(--tb-primary);
}

.plugin-trust-strip article > span i {
	font-size: 24px;
}

.plugin-trust-strip article > span.plugin-trust-icon--gear {
	background: #f1eaff;
	color: #7c4dff;
}

.plugin-trust-strip article > span.plugin-trust-icon--headset {
	background: #fff3e0;
	color: #ef9a1e;
}

.plugin-trust-strip article > span.plugin-trust-icon--globe {
	background: #e3f6ec;
	color: #1ea672;
}

.plugin-trust-strip h3 {
	margin-bottom: 5px;
	font-size: 16px;
	line-height: 1.25;
}

.plugin-trust-strip p {
	margin-bottom: 0;
	color: #617086;
	font-size: 13px;
	line-height: 1.55;
}

.plugin-product-heading {
	display: grid;
	gap: 10px;
}

.plugin-product-price {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: baseline;
	width: fit-content;
	padding: 7px 10px;
	background: #f3fbf7;
	border: 1px solid rgba( 35, 188, 118, 0.22 );
	border-radius: 999px;
	color: #107648;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
}

.plugin-product-price-label {
	color: #107648;
	font-size: 11px;
	font-weight: 700;
	opacity: 0.85;
}

.plugin-product-price del {
	color: #8a96a8;
	font-weight: 700;
	opacity: 0.82;
}

.plugin-product-price ins {
	color: #107648;
	text-decoration: none;
}

.plugin-product-footer {
	gap: 10px;
}

.plugin-product-footer span {
	display: block;
	color: #6c7889;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
}

.plugin-product-footer .th-btn {
	min-height: 48px;
	font-size: 13px;
}

.plugin-product-card:only-child .plugin-product-footer {
	max-width: 660px;
}

.plugin-product-card:only-child .plugin-product-footer span {
	text-align: left;
}


/* Service process timeline: keep step numbers readable. */
.web-development-redesign .web-process-steps span {
	display: grid;
	place-items: center;
	background: linear-gradient( 135deg, #102a86, #173dc2 );
	border: 4px solid #ffffff;
	outline: 3px solid rgba( 24, 183, 230, 0.38 );
	color: #ffffff;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	box-shadow: 0 14px 30px rgba( 16, 42, 134, 0.2 );
}

.web-development-redesign .web-process-steps article:hover span,
.web-development-redesign .web-process-steps article:focus-within span {
	background: #ffffff;
	border-color: #173dc2;
	outline-color: rgba( 24, 183, 230, 0.52 );
	color: #102a86;
}

/* Responsive hardening for generated content and edge-width devices. */
.site-main,
.site-main section,
.container,
.content-layout,
.entry-content,
.woocommerce,
.woocommerce-account .woocommerce-MyAccount-content,
.plugin-directory-panel,
.plugin-product-card,
.contact-modern-form-card,
.footer-row > *,
.footer-bottom > * {
	min-width: 0;
}

.entry-content,
.entry-summary,
.single-post-content,
.plugin-product-card,
.plugin-mini-card,
.pricing-card,
.about-service-grid article,
.footer-brand,
.footer-widgets {
	overflow-wrap: anywhere;
}

.entry-content table,
.single-post-content table,
.woocommerce table.shop_table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry-content pre,
.single-post-content pre,
.entry-content code,
.single-post-content code {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
}

.plugin-directory-search,
.plugin-tag-filter,
.active-plugin-filters,
.plugin-product-price,
.plugin-product-footer {
	max-width: 100%;
}

.plugin-tag-filter a,
.active-plugin-filters strong,
.active-plugin-filters a,
.plugin-product-footer .th-btn,
.pricing-card .button,
.cta-band .button,
.cta-band .th-btn {
	white-space: normal;
}


@media ( min-width: 1200px ) {
	.container {
		max-width: 1310px;
	}
}

/* Large desktops / large laptops (below 1400px) */
@media ( max-width: 1400px ) {
}

/* Small desktops / laptops (below 1200px) */
@media ( max-width: 1200px ) {
	/* was: max-width 1180px (line 712) */
	.site-header__inner {
		gap: 14px;
	}

	.footer-brand {
		max-width: 100%;
	}

	.custom-logo {
		max-width: 210px;
		max-height: 58px;
	}

	.primary-navigation {
		gap: 10px;
	}

	.primary-navigation > ul {
		gap: 4px;
	}

	.primary-navigation a {
		padding-right: 9px;
		padding-left: 9px;
		font-size: 14px;
	}

	.header-account-link.header-account-link {
		padding-right: 12px;
		padding-left: 12px;
	}

	.about-help-list {
		max-width: 680px;
	}

	.th-ecosystem-copy {
		text-align: center;
	}

	.th-ecosystem-copy h2 {
		margin-left: auto;
		margin-right: auto;
	}

	.th-checklist {
		align-items: flex-start;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	.th-checklist li {
		text-align: left;
	}

	.th-cta-grid {
		text-align: center;
	}

	.th-cta-copy h2,
	.th-cta-copy p {
		margin-left: auto;
		margin-right: auto;
	}

	.th-cta .th-actions {
		justify-content: center;
	}

	/* Below the xl grid breakpoint, .th-hero-visual stacks to col-12 with
	   no size cap, so the source image renders near full container width
	   (900px+) on tablets — constrain and center it instead. */
	.th-hero-visual {
		max-width: 480px;
		margin: 20px auto 0 auto;
	}

	/* Same issue as .th-hero-visual above: .th-ecosystem-diagram stacks
	   to col-12 below xl with no size cap. */
	.th-ecosystem-diagram {
		max-width: 480px;
		margin: 0 auto;
	}

}

/* Landscape tablets / small laptops (below 992px) */
@media ( max-width: 992px ) {
	/* was: max-width 900px (line 2728) */
	.woocommerce-checkout #place_order {
		max-width: none;
	}

	/* 4 cards per row: 4 basis-widths + 3 gaps (20px each) = 100% */
	.th-tech-card {
		flex-basis: calc( ( 100% - 60px ) / 4 );
	}

	/* was: max-width 980px (line 6655) */
	.web-intro-layout,
	.web-process-layout,
	.web-deliverables-layout,
	.split-section,
	.two-column,
	.content-layout {
		grid-template-columns: 1fr;
	}

	.plugin-showcase-row,
	.plugin-showcase-row.is-reverse {
		flex-direction: column;
		gap: 24px;
	}

	.plugin-showcase-media {
		flex-basis: auto;
		max-width: 100%;
	}

	.plugin-problem-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

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

	/* Below 992px the sidebar stacks under the post list instead of sitting
	   beside it, so sticking it to the top while scrolling no longer makes
	   sense — revert to normal stacked flow. */
	.blog-market-page .sidebar {
		position: static;
	}

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

	.web-capability-grid,
	.plugin-product-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.plugin-detail-hero {
		padding: 58px 0 48px;
	}

	.plugin-detail-visual {
		padding: 32px;
	}

	.sidebar {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 18px;
	}

	/* was: max-width 980px (line 6732) */
	.site-header__inner {
		min-height: 78px;
	}

	.custom-logo {
		max-width: 195px;
		max-height: 56px;
	}

	.menu-toggle {
		display: block;
		width: 52px;
		height: 52px;
		border-radius: 10px;
		background: var( --tb-primary );
		box-shadow: 0 12px 26px rgba( 16, 42, 134, 0.24 );
	}

	.menu-toggle span:not(.screen-reader-text) {
		width: 24px;
		height: 3px;
		margin-left: -12px;
	}

	.menu-toggle span:nth-child(1) {
		top: calc( 50% - 9.5px );
	}

	.menu-toggle span:nth-child(2) {
		top: calc( 50% - 1.5px );
	}

	.menu-toggle span:nth-child(3) {
		top: calc( 50% + 6.5px );
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(1),
	.menu-toggle[aria-expanded="true"] span:nth-child(3) {
		top: calc( 50% - 1.5px );
	}

	.primary-navigation {
		/* absolute (not fixed) relative to .site-header (position: sticky
		   already makes it a containing block for absolutely positioned
		   descendants) — .site-header's own `backdrop-filter` would silently
		   make it the containing block for a `position: fixed` descendant
		   too, which breaks that descendant's painting; `absolute` avoids
		   the whole issue and top: 100% means we don't need to hardcode the
		   header's pixel height per breakpoint either. */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		align-items: stretch;
		justify-content: start;
		/* Full-page overlay: fills the entire remaining viewport height
		   below the (still-visible, sticky) header, not just a
		   content-height dropdown — overflow-y stays as a scroll fallback
		   only, not the primary sizing mechanism. */
		height: calc( 100vh - 78px );
		overflow-y: auto;
		padding: 18px clamp( 18px, 5vw, 42px ) 22px;
		background: #ffffff;
		border-bottom: 1px solid var(--tb-border);
		box-shadow: 0 18px 34px rgba( 20, 32, 74, 0.14 );
	}

	.nav-open .primary-navigation {
		/* Same trap as the <ul> below: a grid container with no explicit
		   grid-template-columns sizes its single implicit column to fit
		   its content (here, the <ul>'s own content-based width), not to
		   the container's own box — so the <ul>'s width: 100% was resolving
		   against that already-shrunk column, not the nav's real width.
		   That's the root cause of the whole menu panel reading roughly
		   two-thirds width with a dead strip on the right. */
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		align-content: start;
		gap: 14px;
	}

	.primary-navigation > ul,
	.primary-navigation ul {
		/* Undoes the desktop absolute-centering (see the base .primary-navigation
		   > ul rule) - needs to sit in normal stacked flow inside the
		   slide-down panel instead of floating centered over the page. */
		position: static;
		transform: none;
		/* grid-template-columns is required here, not optional: with no
		   explicit track, the implicit single column sizes itself to the
		   widest link's own content ("Website Maintenance & Support"),
		   not to the container — justify-content: stretch only redistributes
		   leftover space among *explicit* tracks, it doesn't create one. That
		   auto-sizing is exactly what left a large dead strip down the right
		   side of the whole menu instead of every row spanning full width. */
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		gap: 0;
		justify-content: stretch;
		width: 100%;
	}

	.primary-navigation li {
		width: 100%;
	}

	/* Top-level rows get a full-width divider line under each one instead
	   of the old rounded "chip" look — a plain bordered list, so the whole
	   row reads as one continuous tap target edge-to-edge rather than an
	   inset pill floating inside its row. */
	.primary-navigation > ul > li {
		border-bottom: 1px solid var(--tb-border);
	}

	.primary-navigation > ul > li:last-child {
		border-bottom: 0;
	}

	.primary-navigation .menu-item-has-children::after {
		content: none;
	}

	.primary-navigation a {
		justify-content: flex-start;
		width: 100%;
		min-height: 50px;
		padding: 16px 4px;
		border-radius: 0;
		color: var(--tb-heading);
		font-size: 16px;
		font-weight: 600;
		white-space: normal;
	}

	.primary-navigation > ul > li > a:hover,
	.primary-navigation > ul > li > a:focus,
	.primary-navigation > ul > .current-menu-item > a {
		color: var(--tb-primary);
	}

	.primary-navigation > ul > li > a::before {
		content: none;
	}

	.primary-navigation .menu-item-has-children > a {
		justify-content: space-between;
	}

	/* The desktop hover-dropdown rule that rotates this arrow on :hover /
	   :focus-within (see the un-scoped base rule near the top of this file)
	   stays active at every width unless cancelled here — and on a touch
	   device, tapping a link always gives it focus, so that rule alone
	   rotates the arrow whether or not the tap actually opened anything.
	   That's the exact "I tapped it and something moved, but nothing
	   opened" complaint: the arrow was never a reliable signal of the real
	   .is-submenu-open state on mobile/tablet. Cancelled below so the arrow
	   only ever reflects the JS-driven open state main.js actually sets. */
	.primary-navigation .menu-item-has-children:hover > a::after,
	.primary-navigation .menu-item-has-children:focus-within > a::after {
		transform: none;
	}

	.primary-navigation .menu-item-has-children > a::after,
	.header-account-trigger .header-account-caret {
		flex: 0 0 auto;
		transform: none;
		transition: transform 0.22s ease;
	}

	/* Scoped to the plain nav links only — the "My Account" trigger already
	   has its own gradient button styling (see .header-account-link--primary
	   further up this file), which this would otherwise flatten out. */
	.primary-navigation > ul .is-submenu-open > a {
		background: #eef4ff;
		color: var(--tb-primary);
	}

	.primary-navigation .is-submenu-open > a::after,
	.header-account-menu.is-submenu-open .header-account-caret {
		transform: rotate( 180deg );
	}

	/* Expands with an actual slide + fade instead of an instant display
	   swap — a plain display:none/grid toggle gives no visual confirmation
	   that the tap registered, which reads as unresponsive even when it
	   isn't. max-height is capped generously above any real submenu's
	   content height so the animation timing stays consistent regardless
	   of how many items a given dropdown has. */
	.primary-navigation .sub-menu,
	.header-account-dropdown {
		position: static;
		display: grid;
		gap: 6px;
		width: 100%;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0 0 0 12px;
		background: transparent;
		border: 0;
		border-left: 2px solid var(--tb-border);
		border-radius: 0;
		box-shadow: none;
		opacity: 0;
		max-height: 0;
		overflow: hidden;
		pointer-events: none;
		transform: none;
		transition: max-height 0.28s ease, opacity 0.2s ease, margin 0.28s ease;
	}

	.primary-navigation .is-submenu-open > .sub-menu,
	.header-account-menu.is-submenu-open .header-account-dropdown {
		margin: 6px 0 8px;
		opacity: 1;
		max-height: 480px;
		pointer-events: auto;
	}

	.primary-navigation .sub-menu::before,
	.header-account-dropdown::before {
		content: none;
	}

	.primary-navigation .sub-menu a {
		min-height: 42px;
		padding: 10px 12px;
		background: #f7fbff;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 500;
	}

	.primary-navigation .sub-menu a::before {
		content: none;
	}

	.header-account-links {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
		margin-top: 4px;
		padding-top: 14px;
		padding-left: 0;
		border-left: 0;
	}

	.header-account-link.header-account-link,
	.header-account-trigger.header-account-trigger {
		/* .primary-navigation a (further down, for the stacked nav links)
		   sets width: 100% and this selector never used to declare its own
		   width to override it with - these buttons inherited that full
		   width silently even though every other property here already won. */
		width: auto;
		justify-content: center;
		min-height: 42px;
		padding: 8px 18px;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 700;
	}

	.header-account-menu {
		width: auto;
	}

	.header-account-menu::after {
		content: none;
	}

	.header-account-dropdown a {
		width: 100%;
	}

	.th-testimonial-track {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.th-testimonial-track::-webkit-scrollbar {
		display: none;
	}

	.th-testimonial-card {
		flex: 0 0 85%;
		scroll-snap-align: center;
	}

	.th-testimonial-track .is-testimonial-clone {
		display: flex;
	}

	.th-testimonial-dots {
		display: flex;
	}

	/* was: max-width 980px (line 9435) */
	.web-development-redesign .section {
		padding: 56px 0;
	}

	.web-dev-hero {
		padding: 48px 0 54px;
	}

	.services-landing-page .web-dev-hero,
	.service-detail-page .web-dev-hero {
		padding: 72px 0;
	}

	.services-landing-page .th-services,
	.service-detail-page .th-services {
		padding: 72px 0;
	}

	.web-dev-hero-layout,
	.web-showcase-layout {
		grid-template-columns: 1fr;
	}

	.web-development-redesign .web-intro-layout,
	.web-development-redesign .web-process-layout,
	.web-development-redesign .web-deliverables-layout {
		grid-template-columns: 1fr;
	}

	.web-dev-stage {
		min-height: 320px;
	}

	.web-dev-browser {
		left: 0;
	}

	.web-dev-metrics {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.plugin-listing-page .web-dev-hero {
		padding: 72px 0;
	}

	.plugin-trust-strip {
		grid-template-columns: 1fr;
	}

	.plugin-directory-controls {
		align-items: stretch;
		flex-direction: column;
	}

	.plugin-product-card:only-child {
		grid-template-columns: 1fr;
	}

	.plugin-product-card:only-child .plugin-product-media {
		grid-row: auto;
		aspect-ratio: 16 / 9;
		min-height: 0;
		border-right: 0;
		border-bottom: 1px solid var(--tb-border);
	}

	.plugin-product-card:only-child .plugin-product-body {
		padding: 28px 28px 0;
	}

	.plugin-product-card:only-child .plugin-product-footer {
		padding: 26px 28px 30px;
	}

}

/* Above the tablet-portrait breakpoint where the licenses table is a real
table (below it, .tblm-account-license-list switches to stacked cards, see
the max-width:768px block). Needs min-width, mirroring the container-override
rationale above, since it must stay off under the stacked layout.
Keep the download action reachable without hunting through a horizontal
scroll: pin it to the right edge of the scroll container so it's always
visible, with a shadow standing in for a scroll-position divider. */
@media ( min-width: 769px ) {
	.woocommerce-account table.tblm-account-licenses-table th:last-child,
	.woocommerce-account table.tblm-account-licenses-table td:last-child {
		position: sticky;
		right: 0;
		box-shadow: -8px 0 12px -8px rgba( 20, 32, 74, 0.14 );
	}

	.woocommerce-account table.tblm-account-licenses-table td:last-child {
		background: #ffffff;
	}

	.woocommerce-account table.tblm-account-licenses-table th:last-child {
		background: #f7fbff;
	}
}

/* Tablets, portrait (below 768px) */
@media ( max-width: 768px ) {
	.plugin-feature-grid {
		grid-template-columns: 1fr;
	}

	.plugin-problem-col {
		padding: 24px;
	}

	.launch-discount-banner {
		gap: 6px;
	}

	.launch-discount-countdown {
		margin-left: 0;
		flex-basis: 100%;
	}

	.th-stat {
		justify-content: flex-start;
		gap: 12px;
	}

	.th-stat-icon {
		width: 40px;
		height: 40px;
	}

	.th-stat-icon i {
		font-size: 18px;
	}

	.th-stat strong {
		font-size: 20px;
	}

	.blog-market-page .post-card-grid {
		grid-template-columns: 1fr;
	}

	/* Keep the blog list off the screen edges once it's full-width
	   (listing/archive only — single posts have their own inset). */
	.blog-market-page:not( .single-post-page ) .blog-market-layout {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* On phones the thumbnail is framed inside the card (inset with a white
	   margin + its own rounding) rather than bleeding to the card edge. */
	.blog-market-page .post-card {
		padding: 12px 12px 0;
	}

	.blog-market-page .post-card-media {
		border-radius: 10px;
	}

	.blog-market-page .post-card-body {
		padding: 16px 2px 18px;
	}

	/* was: max-width 760px (line 5789) */
	.contact-simple-hero {
		padding: 54px 0 50px;
	}

	.contact-simple-hero h1 {
		font-size: 28px;
	}

	.single-post-page .contact-simple-hero h1 {
		font-size: 28px;
	}

	.about-welcome-section {
		padding: 44px 0 38px;
	}

	.about-service-section {
		padding: 42px 0 52px;
	}

	.about-help-list div {
		grid-template-columns: 36px minmax( 0, 1fr );
		padding: 16px;
	}

	.about-help-list span {
		width: 36px;
		height: 36px;
	}

	.about-service-grid article {
		padding: 22px;
	}

	.contact-modern-section {
		padding: 48px 0 58px;
	}

	.contact-modern-form-card {
		padding: 22px;
	}

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

	.contact-get-in-touch,
	.support-checklist {
		padding: 22px;
	}

	.contact-modern-page .contact-reference-form .btn.btn-primary {
		width: 100%;
	}

	.contact-faq-section {
		padding: 0 0 58px;
	}

	/* was: max-width 760px (line 6565) */
	.single-post-content {
		padding: 24px;
		font-size: 15.75px;
	}

	.single-post-tags {
		margin: 6px 24px 24px;
	}

	.post-toc {
		padding: 18px 20px;
	}

	.post-toc ol {
		columns: 1;
	}

	.single-post-content ul.post-checklist {
		grid-template-columns: 1fr;
		padding: 20px;
	}

	.post-cta {
		padding: 24px 22px;
	}

	.post-cta-btn {
		display: block;
		text-align: center;
	}

	.error-404-card {
		padding: 40px 24px;
	}

	.error-404-search .search-form {
		flex-direction: column;
	}

	.error-404-search .search-submit {
		width: 100%;
	}

	.error-404-links {
		flex-direction: column;
		align-items: stretch;
	}

	.error-404-links .th-btn {
		justify-content: center;
	}

	.single-post-content h2 {
		font-size: 21px;
	}

	.single-post-content h3 {
		font-size: 18px;
	}

	.single-post-content h4 {
		font-size: 16px;
	}

	.related-post-grid {
		grid-template-columns: 1fr;
	}

	.single-post-nav {
		grid-template-columns: 1fr;
	}

	.single-post-nav-next {
		grid-column: 1;
	}

	.single-related-section {
		padding: 28px 0 54px;
	}

	body.admin-bar {
		min-height: calc( 100vh - 46px );
	}

	body.admin-bar .site-header {
		top: 46px;
	}

	body {
		font-size: 15px;
	}

	.site-header__inner {
		min-height: 68px;
		/* Base rule's 18px top/bottom (sized for the desktop logo's breathing
		   room) makes the header noticeably tall against a 44px mobile toggle
		   button - 12px each keeps the same 68px total the drawer height
		   below and the min-height above both already assume. */
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.primary-navigation {
		height: calc( 100vh - 68px );
	}

	.custom-logo {
		max-width: 185px;
		max-height: 54px;
	}

	.header-account-caret {
		margin-left: auto;
	}

	.plugin-detail-hero,
	.section {
		padding: 56px 0;
	}

	.web-intro-layout,
	.web-process-layout,
	.web-deliverables-layout,
	.plugin-license-layout {
		grid-template-columns: 1fr;
	}

	.license-package-grid {
		grid-template-columns: 1fr;
	}

	.woocommerce-cart .wc-block-cart__main,
	.woocommerce-cart .wc-block-cart__sidebar,
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals .cart_totals {
		padding: 22px;
	}

	.plugin-detail-copy h1 {
		font-size: 26px;
	}

	.plugin-detail-visual {
		padding: 24px;
	}

	.plugin-detail-visual .plugin-detail-preview-image {
		max-width: 260px;
	}

	.plugin-detail-copy > p:not(.section-kicker) {
		font-size: 13px;
	}

	.cta-band,
	.post-card,
	.widget {
		padding: 22px;
	}

	.web-capability-grid,
	.plugin-product-grid,
	.web-engagement-grid,
	.sidebar {
		grid-template-columns: 1fr;
	}

	.web-intro-copy h2,
	.web-section-heading h2,
	.web-process-layout h2,
	.web-deliverables-layout h2 {
		font-size: 23px;
	}

	.web-deliverables-layout,
	.web-capability-grid article,
	.web-process-steps article {
		padding: 22px;
	}

	.web-process-steps article {
		grid-template-columns: 44px minmax( 0, 1fr );
	}

	.web-engagement-card {
		padding: 22px;
	}

	.billing-toggle {
		align-self: stretch;
	}

	.plugin-compare-row {
		grid-template-columns: minmax( 0, 1fr ) 72px 72px;
		gap: 10px;
		padding: 16px;
	}

	.plugin-product-footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.plugin-directory-search {
		grid-template-columns: 1fr auto;
		gap: 8px;
	}

	.plugin-directory-search input {
		min-height: 44px;
		font-size: 14px;
	}

	.plugin-directory-search button {
		min-height: 44px;
		padding: 0 16px;
		font-size: 13px;
	}

	.pricing-card.highlighted {
		transform: none;
	}

	.cta-band {
		align-items: flex-start;
		flex-direction: column;
	}

	.content-layout,
	.narrow-content {
		padding: 44px 0;
	}

	.account-page-container {
		padding-top: 44px !important;
		padding-bottom: 58px !important;
	}

	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	/* Tablet/mobile: a full-width vertical list, reusing the desktop
	   sidebar's own row styling (icon + label, hover/active states) —
	   deliberately not the old horizontally-scrolling pill bar, which hid
	   most items off-screen behind a scroll gesture people easily miss. */
	.woocommerce-account .woocommerce-MyAccount-navigation,
	body.admin-bar.woocommerce-account .woocommerce-MyAccount-navigation {
		position: relative;
		top: auto;
		padding: 12px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: grid;
		gap: 6px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 22px;
	}

	.woocommerce-account:not(.logged-in) #customer_login.account-auth-layout {
		flex-direction: column;
		gap: 18px;
	}

	.woocommerce-account:not(.logged-in) #customer_login .account-auth-card {
		width: 100% !important;
		max-width: none;
		padding: 24px;
	}

	.woocommerce-account:not(.logged-in) #customer_login.account-auth-layout--single .account-auth-card {
		max-width: 480px;
	}

	.woocommerce-account .woocommerce-EditAccountForm,
	.woocommerce-account form .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.woocommerce-account table.shop_table:not(.my_account_orders) {
		border: 0;
	}

	.woocommerce-account table.shop_table:not(.my_account_orders) th,
	.woocommerce-account table.shop_table:not(.my_account_orders) td {
		padding: 14px;
	}

	/* My Account > Orders: WooCommerce's own small-screen stylesheet stacks
	   each cell as a block row with the label floated left and the value
	   pushed to the right edge with text-align:right — fine for a short
	   value, ragged once values vary in length (the gap between label and
	   value swings wildly row to row), and it hides the order-number cell
	   outright because WC marks that cell up as a <th> and its stylesheet
	   hides every <tbody th>. Replaced with the same label-above-value grid
	   card already used for the license table just below it, so every order
	   becomes one bordered card and both mobile tables in My Account share
	   one visual language instead of two different stacking styles. */
	.woocommerce-account table.shop_table.my_account_orders {
		border: 0;
		background: transparent;
	}

	.woocommerce-account table.shop_table.my_account_orders,
	.woocommerce-account table.shop_table.my_account_orders tbody,
	.woocommerce-account table.shop_table.my_account_orders tr {
		display: block;
		width: 100%;
	}

	.woocommerce-account table.shop_table.my_account_orders tr {
		margin-bottom: 14px;
		overflow: hidden;
		background: #ffffff;
		border: 1px solid var(--tb-border);
		border-radius: 8px;
	}

	.woocommerce-account table.shop_table.my_account_orders tr:last-child {
		margin-bottom: 0;
	}

	/* padding-left reserves room for the absolutely-positioned label below
	   instead of using display:grid on the cell itself — grid would turn
	   every one of the cell's own child nodes into a separate grid item, so
	   any cell with more than one child (the total column's price markup
	   plus its "for 1 item" count) breaks across an unwanted second grid
	   row instead of just wrapping in place. */
	.woocommerce-account table.shop_table.my_account_orders th,
	.woocommerce-account table.shop_table.my_account_orders td {
		display: block;
		position: relative;
		padding: 14px 14px 14px 112px;
		background: transparent;
		border-bottom: 1px solid var(--tb-border);
		text-align: left !important;
		min-height: 20px;
	}

	.woocommerce-account table.shop_table.my_account_orders tr > :last-child {
		border-bottom: 0;
	}

	.woocommerce-account table.shop_table.my_account_orders th::before,
	.woocommerce-account table.shop_table.my_account_orders td::before {
		position: absolute;
		top: 14px;
		left: 14px;
		float: none;
		color: var(--tb-heading);
		font-size: 12px;
		font-weight: 800;
		text-transform: uppercase;
		content: attr(data-title);
	}

	.woocommerce-account .tblm-account-license-list {
		overflow-x: visible;
		border: 0;
	}

	.woocommerce-account table.tblm-account-licenses-table {
		min-width: 0;
		border: 0;
		background: transparent;
	}

	.woocommerce-account table.tblm-account-licenses-table thead {
		display: none;
	}

	.woocommerce-account table.tblm-account-licenses-table,
	.woocommerce-account table.tblm-account-licenses-table tbody,
	.woocommerce-account table.tblm-account-licenses-table tr,
	.woocommerce-account table.tblm-account-licenses-table td {
		display: block;
		width: 100%;
	}

	.woocommerce-account table.tblm-account-licenses-table tr {
		margin-bottom: 14px;
		overflow: hidden;
		background: #ffffff;
		border: 1px solid var(--tb-border);
		border-radius: 8px;
	}

	.woocommerce-account table.tblm-account-licenses-table td {
		display: grid;
		grid-template-columns: 130px minmax( 0, 1fr );
		gap: 12px;
		border-bottom: 1px solid var(--tb-border);
	}

	.woocommerce-account table.tblm-account-licenses-table td::before {
		color: var(--tb-heading);
		font-size: 12px;
		font-weight: 800;
		text-transform: uppercase;
		content: attr(data-title);
	}

	.woocommerce-account table.tblm-account-licenses-table td:last-child {
		border-bottom: 0;
	}

	.woocommerce-account .tblm-license-product {
		max-width: none;
	}

	.woocommerce-account .tblm-activation-row {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .u-columns.woocommerce-Addresses,
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
		max-width: none;
	}

	/* was: max-width 760px (line 7434) */
	/* overflow-x: clip, not hidden — see the comment on the base html/body
	   rule near the top of this file for why (hidden auto-computes
	   overflow-y to "auto" and breaks position: sticky everywhere). */
	html,
	body,
	.site-main,
	.site-footer {
		width: 100%;
		max-width: 100%;
		overflow-x: clip;
	}

	/* .site-header is deliberately NOT in the list above: overflow-x on an
	   element with no explicit overflow-y auto-computes overflow-y to
	   "auto" too (CSS overflow spec), which clips any child extending past
	   the header's own small box — silently hiding the open mobile nav
	   dropdown. html/body already guard against page-wide horizontal
	   scroll, so the header doesn't need its own copy of this rule. */
	.site-header {
		width: 100%;
		max-width: 100%;
	}

	.menu-toggle {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		padding: 0;
	}

	.site-header__inner {
		gap: 12px;
	}

	.site-branding {
		min-width: 0;
	}

	.custom-logo {
		max-width: min( 185px, calc( 100vw - 92px ) );
	}

	/* Front page: desktop-sized 90-112px section padding is too heavy on
	   mobile viewports, so scale it down per section on phones/tablets. */
	.th-hero {
		padding: 48px 0 56px;
	}

	.th-services,
	.th-plugins,
	.th-features,
	.th-cta {
		padding: 56px 0;
	}

	.services-landing-page .web-dev-hero,
	.service-detail-page .web-dev-hero {
		padding: 56px 0;
	}

	.services-landing-page .th-services,
	.service-detail-page .th-services {
		padding: 56px 0;
	}

	.th-ecosystem {
		padding: 56px 0;
	}

	.th-ecosystem--standalone {
		padding-bottom: 56px;
	}

	.th-technologies {
		padding: 56px 0;
	}

	.th-tech-tabs {
		gap: 0 12px;
		margin-bottom: 32px;
	}

	.th-tech-tab {
		padding: 10px 4px 10px;
		font-size: 13px;
	}

	.th-tech-grid {
		gap: 14px;
	}

	/* 3 cards per row: 3 basis-widths + 2 gaps (14px each) = 100% */
	.th-tech-card {
		flex-basis: calc( ( 100% - 28px ) / 3 );
		padding: 20px 12px;
	}

	.th-tech-icon {
		width: 56px;
		height: 56px;
	}

	.th-achievements {
		padding: 28px 0;
	}

	.th-achievement-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 20px;
	}

	.th-testimonials {
		padding: 56px 0;
	}

	.th-section-head {
		margin-bottom: 36px;
	}

	.th-section-cta {
		margin-top: 28px;
	}

	/* Footer (consolidated: was max-width 640px line 3946, 760px line 7434) */
	.footer-row {
		max-width: 100%;
		overflow-x: hidden;
		--bs-gutter-x: 24px;
		--bs-gutter-y: 32px;
		padding: 48px 0 28px;
	}

	.footer-section-padding {
		padding: 48px 0 28px;
	}

	.site-footer {
		padding-top: 0;
	}

	/* Below md, Bootstrap's col-12 stacks all 4 footer menus full-width
	   (one per row), making the footer very tall on tablets/phones. Force
	   a 2-per-row grid down through every bucket below so the footer stays
	   compact everywhere under 768px, matching the 2-column layout md/lg
	   already gets from col-md-6. */
	.footer-widgets-menu-1,
	.footer-widgets-menu-2,
	.footer-widgets-menu-3,
	.footer-widgets-menu-4 {
		flex: 0 0 auto;
		width: 50%;
	}

	.footer-logo .custom-logo,
	.footer-logo img {
		max-width: 150px;
		margin-bottom: 10px;
	}

	.footer-brand p,
	.footer-widget,
	.footer-widget li,
	.footer-widget p,
	.site-footer a,
	.site-footer p {
		font-size: 13px;
		line-height: 1.62;
	}

	.site-footer h2,
	.footer-widget-title,
	.footer-widget .wp-block-heading {
		margin-bottom: 12px;
		font-size: 16px;
	}

	.footer-widget ul,
	.footer-widget ol,
	.footer-widget .wp-block-navigation__container {
		gap: 8px;
	}

	.footer-widget a,
	.footer-widget .wp-block-navigation-item__content {
		min-height: 0;
		line-height: 1.45;
	}

	.footer-bottom {
		flex-direction: column;
		justify-content: center;
		gap: 12px;
		padding-top: 20px;
		padding-bottom: 64px;
		text-align: center;
	}

	.footer-bottom p {
		justify-content: center;
	}

	/* was: max-width 760px (line 9468) */
	.web-development-redesign .section {
		padding: 44px 0;
	}

	.web-dev-hero {
		padding: 38px 0 44px;
	}

	.web-dev-hero h1 {
		font-size: clamp( 22px, 6.2vw, 26px );
		line-height: 1.14;
	}

	.web-dev-hero-copy > p:not(.section-kicker) {
		font-size: 15px;
	}

	.web-dev-hero-actions .button {
		width: 100%;
	}

	.web-dev-stage {
		min-height: 270px;
	}

	.web-dev-browser {
		top: 18px;
		width: 100%;
		transform: none;
		animation: none;
	}

	.web-dev-phone {
		right: 6px;
		bottom: 10px;
		width: 94px;
	}

	.web-dev-code-card {
		right: 70px;
		bottom: 0;
		width: 136px;
	}

	.web-dev-metrics,
	.web-showcase-board {
		grid-template-columns: 1fr;
	}

	.web-dev-metrics div {
		min-height: auto;
	}

	.web-development-redesign .web-intro-copy h2,
	.web-development-redesign .web-section-heading h2,
	.web-development-redesign .web-process-layout h2,
	.web-development-redesign .web-deliverables-layout h2,
	.web-showcase-copy h2 {
		font-size: clamp( 20px, 6vw, 25px );
		line-height: 1.15;
	}

	.web-development-redesign .web-capability-grid article {
		min-height: auto;
	}

	.web-development-redesign .web-process-steps article {
		grid-template-columns: 48px minmax( 0, 1fr );
		gap: 12px;
		padding-left: 0;
	}

	.web-development-redesign .web-process-steps::before {
		left: 24px;
		transform: none;
	}

	.web-development-redesign .web-process-steps article > div,
	.web-development-redesign .web-process-steps article:nth-child( even ) > div {
		grid-column: 2;
		grid-row: 1;
	}

	.web-development-redesign .web-process-steps span {
		grid-column: 1;
		width: 40px;
		height: 40px;
	}

	.web-development-redesign .web-process-steps article > div {
		padding: 18px;
	}

	.web-showcase-board {
		transform: none;
	}

	.web-showcase-card,
	.web-showcase-card-large {
		min-height: 150px;
	}

	.web-development-redesign .web-deliverables-layout {
		padding: 22px;
	}

	/* was: max-width 640px (line 10269) */
	.plugin-listing-section {
		padding: 46px 0 62px;
	}

	.plugin-listing-page .web-dev-hero {
		padding: 56px 0;
	}

	.plugin-directory-panel {
		padding: 14px;
	}

	.plugin-product-card:only-child h3 {
		font-size: 24px;
	}

	.plugin-trust-strip article {
		padding: 16px;
	}

	.plugin-trust-strip article > span {
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}

	.plugin-trust-strip article > span i {
		font-size: 20px;
	}

	.plugin-product-card:only-child .plugin-product-footer span {
		text-align: left;
	}

	/* was: max-width 640px (line 10598) */
	.plugin-product-price {
		width: 100%;
	}

	.plugin-product-price {
		justify-content: center;
		white-space: normal;
	}
}

/* Large phones, landscape phones (below 576px) */
@media ( max-width: 576px ) {
}

/* Phones, portrait (below 480px) */
@media ( max-width: 480px ) {
	.th-stats-card {
		padding: 20px 16px;
	}

	.th-stats-bar {
		--bs-gutter-x: 12px;
		--bs-gutter-y: 20px;
	}

	.th-stat {
		gap: 10px;
	}

	.th-stat-icon {
		width: 36px;
		height: 36px;
		border-radius: 10px;
	}

	.th-stat-icon i {
		font-size: 16px;
	}

	.th-stat strong {
		font-size: 18px;
	}

	.th-stat small {
		font-size: 12px;
	}

	.blog-market-page .post-card-body {
		padding: 14px 2px 16px;
	}

	.blog-market-page .post-card .entry-title {
		font-size: 19px;
	}

	.services-landing-page .web-dev-hero,
	.service-detail-page .web-dev-hero,
	.plugin-listing-page .web-dev-hero {
		padding: 44px 0;
	}

	.services-landing-page .th-services,
	.service-detail-page .th-services {
		padding: 44px 0;
	}

	.th-achievement-grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 16px;
	}

	/* Footer */
	.footer-widget a,
	.footer-widget .wp-block-navigation-item__content {
		font-size: 13px;
	}

	.footer-social-links {
		gap: 12px;
	}

	.footer-social-icon i {
		font-size: 16px;
	}

	.back-to-top {
		right: 16px;
		bottom: 16px;
		width: 40px;
		height: 40px;
		min-height: 40px;
	}

	.back-to-top svg {
		width: 18px;
		height: 18px;
	}

	/* was: max-width 480px (line 7322) */
	h1 {
		font-size: 26px;
	}

	h2 {
		font-size: 24px;
	}

	.plugin-detail-actions {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.plugin-detail-actions .th-btn {
		width: auto;
		padding: 10px 16px;
		font-size: 14px;
	}

	.plugin-detail-actions .th-btn i {
		font-size: 16px;
	}

	.th-trust-row {
		column-gap: 16px;
		margin-top: 24px;
		padding-top: 18px;
	}

	.license-package-card li {
		align-items: flex-start;
		flex-direction: column;
	}

	.billing-toggle {
		grid-template-columns: repeat( 2, 1fr );
		align-self: center;
		width: 100%;
		max-width: 320px;
	}

	.billing-toggle-button {
		min-height: 42px;
		padding: 8px 12px;
		font-size: 14px;
	}

	.license-package-card {
		padding: 24px;
	}

	.plugin-compare-row {
		grid-template-columns: minmax( 0, 1fr ) 54px 54px;
		padding: 14px;
	}

	.plugin-compare-head {
		font-size: 12px;
	}

	.plugin-compare-row > div:first-child {
		font-size: 14px;
	}

	.woocommerce-cart .wc-block-components-product-name,
	.woocommerce-cart .woocommerce-cart-form__cart-item .product-name a {
		font-size: 16px;
	}

	.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
	.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
	.woocommerce-cart .order-total th,
	.woocommerce-cart .order-total td {
		font-size: 20px;
	}

	.button,
	.wp-block-button__link,
	button,
	input[type="submit"] {
		width: 100%;
	}

	.woocommerce-account .entry-title {
		font-size: 32px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 18px;
	}

	.woocommerce-account .woocommerce-MyAccount-content > p:first-child,
	.woocommerce-account .woocommerce-info,
	.woocommerce-account .woocommerce-message,
	.woocommerce-account .woocommerce-error,
	.woocommerce-account .woocommerce-Address,
	.woocommerce-account form fieldset {
		padding: 16px;
	}

	.woocommerce-account .woocommerce-Address-title {
		align-items: flex-start;
		flex-direction: column;
	}

	.account-auth-actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.account-auth-actions .woocommerce-form-login__submit,
	.account-auth-submit-row .woocommerce-form-register__submit {
		width: 100%;
	}

	.woocommerce-account table.shop_table .button,
	.woocommerce-account .woocommerce-Button,
	.woocommerce-account .woocommerce-button,
	.woocommerce-account .edit,
	.woocommerce-account .wc-forward {
		width: auto;
		min-height: 40px;
	}

	/* was: max-width 420px (line 9576) */
	.web-dev-hero h1 {
		font-size: 22px;
	}

	.web-dev-stage {
		min-height: 230px;
	}

	.web-dev-preview-grid {
		grid-template-columns: 1fr;
	}

	.web-dev-preview-grid span {
		height: 46px;
	}

	.web-dev-phone,
	.web-dev-code-card {
		display: none;
	}
}

/* Small phones (below 360px, e.g. Galaxy Fold, small Android) */
@media ( max-width: 360px ) {
	/* Footer */
	.footer-bottom p {
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}

	.footer-social-icon i {
		font-size: 15px;
	}
}