/*
Theme Name: Help4 Blank
Theme URI: https://help4network.com/
Author: Help4 Network
Author URI: https://help4network.com/
Description: A blank, performance-first starter theme for the Help4 Builder ecosystem.
Version: 1.0.35
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: help4-blank
*/

:root {
    --h4-bg: #0b0f12;
    --h4-bg-alt: #10161a;
    --h4-surface: #12181c;
    --h4-surface-elevated: #161d22;
    --h4-text: #f7f8f8;
    --h4-muted: #aab4ba;
    --h4-accent-gold: #a88039;
    --h4-accent-gold-light: #f2c879;
    --h4-accent-steel: #5a6c73;
    --h4-border: rgb(255 255 255 / 8%);
    --h4-shadow: 0 24px 48px rgb(0 0 0 / 32%);
    --h4-shadow-soft: 0 0 20px rgb(168 128 57 / 26%);
    --h4-radius: 16px;
    --h4-base-font: 16px;
    --h4-space: clamp(0.9rem, 1.2vw, 1.35rem);
    --h4-content-max: min(94vw, 118rem);
    --h4-gradient-main: linear-gradient(135deg, #0f2f33 0%, #5a6c73 50%, #a88039 100%);
    --h4-gradient-ui: linear-gradient(135deg, #1f2a30 0%, #5a6c73 100%);
    --h4-gradient-gold: linear-gradient(135deg, #a88039 0%, #f2c879 100%);
}

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

html {
    font-size: var(--h4-base-font);
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    max-width: 100%;
    overflow-x: clip;
    color: var(--h4-text);
    background:
        radial-gradient(circle at 16% 12%, rgb(15 47 51 / 28%), transparent 42%),
        radial-gradient(circle at 84% 74%, rgb(168 128 57 / 20%), transparent 44%),
        var(--h4-bg);
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.62;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    top: -28vh;
    right: 0;
    bottom: -28vh;
    left: 0;
    background:
        conic-gradient(from 45deg, rgb(15 47 51 / 0%), rgb(15 47 51 / 34%), rgb(168 128 57 / 30%), rgb(15 47 51 / 0%)),
        radial-gradient(circle at 30% 30%, rgb(15 47 51 / 24%), transparent 48%),
        radial-gradient(circle at 70% 68%, rgb(168 128 57 / 20%), transparent 44%);
    filter: blur(74px);
    pointer-events: none;
    z-index: -1;
    animation: h4AuraDrift 22s linear infinite;
}

body::after {
    content: "";
    position: fixed;
    top: -16vh;
    right: 0;
    bottom: -16vh;
    left: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 22%, rgb(242 200 121 / 12%), transparent 44%),
        radial-gradient(circle at 82% 78%, rgb(90 108 115 / 14%), transparent 42%);
    filter: blur(42px);
    animation: h4AuraPulse 16s ease-in-out infinite alternate;
}

@keyframes h4AuraDrift {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.04);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes h4AuraPulse {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.78;
    }
    100% {
        transform: translate3d(0, -1.8%, 0) scale(1.07);
        opacity: 1;
    }
}

a {
    color: var(--h4-accent-gold);
    text-decoration-thickness: 0.11rem;
    text-underline-offset: 0.16rem;
    transition: color 180ms ease;
}

a:hover,
a:focus-visible {
    color: var(--h4-accent-gold-light);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgb(11 15 18 / 86%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--h4-border);
}

.site-shell {
    width: var(--h4-content-max);
    max-width: 100%;
    margin-inline: auto;
    padding: clamp(0.8rem, 1.2vw, 1.1rem) clamp(0.9rem, 2vw, 2rem);
}

.brand-lockup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--h4-space);
}

.brand-lockup p {
    margin: 0.45rem 0 0;
    color: var(--h4-muted);
    font-size: 0.92rem;
}

.site-title {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    letter-spacing: 0.04em;
    font-family: "Montserrat", "Inter", sans-serif;
    text-transform: uppercase;
}

.site-title a {
    color: var(--h4-text);
    text-decoration: none;
}

.site-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.6rem, 1.2vw, 1.2rem);
    margin: 0;
    padding: 0;
}

.site-main {
    width: var(--h4-content-max);
    max-width: 100%;
    margin-inline: auto;
    padding: clamp(1.4rem, 2vw, 2.8rem) clamp(0.9rem, 2vw, 2rem);
}

body.h4bs-page-layout-full_width .site-main,
body.h4bs-page-layout-canvas .site-main {
    width: 100%;
    max-width: none;
    padding: clamp(0.9rem, 1.5vw, 1.65rem);
}

body.h4bs-page-layout-canvas .site-main {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% 10%, rgb(15 47 51 / 28%), transparent 45%),
        radial-gradient(circle at 86% 78%, rgb(168 128 57 / 18%), transparent 44%),
        var(--h4-bg);
}

.content-panel {
    max-width: 100%;
    background: var(--h4-surface);
    border: 1px solid var(--h4-border);
    border-radius: var(--h4-radius);
    box-shadow: var(--h4-shadow);
    padding: clamp(1rem, 2vw, 2rem);
}

body.h4bs-page-layout-full_width .content-panel {
    border-radius: clamp(0.8rem, 1vw, 1.25rem);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.7em;
    font-family: "Montserrat", "Inter", sans-serif;
    color: var(--h4-text);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.16;
}

h1 {
    font-size: clamp(2rem, 4.4vw, 4rem);
}

h2 {
    font-size: clamp(1.6rem, 3vw, 2.7rem);
}

p,
li,
label,
input,
textarea,
select {
    color: var(--h4-muted);
    font-size: clamp(1rem, 1.1vw, 1.06rem);
}

.site-nav a,
.h4-global-header__nav a {
    color: var(--h4-text);
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.44rem 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.h4-global-header__nav a:hover,
.h4-global-header__nav a:focus-visible {
    color: var(--h4-accent-gold-light);
    border-color: rgb(168 128 57 / 30%);
    background: rgb(168 128 57 / 9%);
}

.site-nav .current-menu-item > a,
.h4-global-header__nav .current-menu-item > a {
    border-color: rgb(168 128 57 / 45%);
    background: rgb(168 128 57 / 16%);
    color: var(--h4-text);
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

.site-footer {
    margin-top: clamp(1.5rem, 2.4vw, 3rem);
    border-top: 1px solid var(--h4-border);
    background: var(--h4-bg-alt);
}

.site-footer p {
    margin: 0;
    color: var(--h4-muted);
}

.h4bs-template-slot {
    width: 100%;
    max-width: 100%;
}

.h4-global-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgb(11 15 18 / 86%);
    border-bottom: 1px solid var(--h4-border);
    backdrop-filter: blur(12px);
}

.h4-global-header__inner,
.h4-global-footer__inner {
    width: var(--h4-content-max);
    max-width: 100%;
    margin-inline: auto;
    padding: clamp(0.8rem, 1.2vw, 1.1rem) clamp(0.9rem, 2vw, 2rem);
}

.h4-global-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--h4-space);
    flex-wrap: nowrap;
}

.h4-global-header__inner > * {
    min-width: 0;
}

.h4-global-header__brand {
    font-size: clamp(1.02rem, 1.45vw, 1.2rem);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--h4-text);
    font-family: "Montserrat", "Inter", sans-serif;
}

.h4-global-header__brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: min(19rem, 36vw);
}

.h4-global-header__brand-logo,
.site-header .custom-logo-link img {
    display: block;
    width: clamp(8.1rem, 10.6vw, 11.4rem);
    max-width: 100%;
    height: auto;
    max-height: 3.25rem;
    object-fit: contain;
}

.h4-global-header__brand-text {
    white-space: nowrap;
}

.h4-global-header__nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(0.45rem, 0.9vw, 1rem);
    overflow: visible;
}

.h4-global-header__nav a {
    font-size: 0.88rem;
    letter-spacing: 0.03em;
}

.h4-global-header__menu-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 0.36rem;
    margin-bottom: -0.36rem;
}

.h4-global-header__menu-item--dropdown > a::after {
    content: "\25BE";
    margin-left: 0.34rem;
    font-size: 0.7rem;
    opacity: 0.78;
}

.h4-global-header__menu-item--dropdown::after {
    content: "";
    position: absolute;
    left: -0.25rem;
    right: -0.25rem;
    top: 100%;
    height: 1.2rem;
}
.h4-global-header__dropdown {
    position: absolute;
    top: calc(100% + 0.18rem);
    left: 0;
    min-width: 15.5rem;
    max-width: min(20rem, calc(100vw - 1.5rem));
    padding: 0.45rem;
    border-radius: 12px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(9 14 20 / 98%);
    box-shadow: 0 16px 34px rgb(0 0 0 / 38%);
    display: none;
    gap: 0.32rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    z-index: 1200;
}

.h4-global-header__menu-item--dropdown:hover .h4-global-header__dropdown,
.h4-global-header__menu-item--dropdown:focus-within .h4-global-header__dropdown,
.h4-global-header__menu-item--dropdown.is-open .h4-global-header__dropdown {
    display: grid;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.h4-global-header__dropdown a {
    font-size: 0.84rem;
    letter-spacing: 0.02em;
    text-transform: none;
    border-radius: 9px;
    padding: 0.5rem 0.65rem;
    color: var(--h4-text);
}

.h4-global-header__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.45rem, 0.8vw, 0.85rem);
    flex: 0 0 auto;
}

.h4-global-header__icon-button {
    width: clamp(2.35rem, 2.2vw, 2.75rem);
    height: clamp(2.35rem, 2.2vw, 2.75rem);
    border-radius: 12px;
    border: 1px solid rgb(255 255 255 / 14%);
    background: rgb(255 255 255 / 5%);
    color: var(--h4-accent-gold-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.h4-global-header__icon-button .dashicons {
    font-size: 1.12rem;
    width: 1.12rem;
    height: 1.12rem;
}

.h4-global-header__icon-button:hover,
.h4-global-header__icon-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgb(242 200 121 / 46%);
    background: rgb(242 200 121 / 14%);
    box-shadow: 0 0 14px rgb(168 128 57 / 30%);
}

.h4-global-header__cta {
    border-radius: 12px;
    border: 1px solid rgb(255 255 255 / 17%);
    background: linear-gradient(180deg, rgb(108 133 148 / 92%), rgb(77 99 111 / 92%));
    color: var(--h4-text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.85rem 1.2rem;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%);
}

.h4-global-header__cta:hover,
.h4-global-header__cta:focus-visible {
    color: #fff;
    border-color: rgb(255 255 255 / 36%);
    background: linear-gradient(180deg, rgb(121 149 166 / 95%), rgb(87 112 126 / 96%));
}

.h4-global-footer {
    margin-top: clamp(1.2rem, 2vw, 2.2rem);
    border-top: 1px solid var(--h4-border);
    background:
        linear-gradient(180deg, rgb(11 15 18 / 98%), rgb(7 10 14 / 98%));
    position: relative;
    overflow: hidden;
}

.h4-global-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, rgb(242 200 121 / 0%), rgb(242 200 121 / 55%), rgb(242 200 121 / 0%));
}

.h4-global-footer::after {
    content: "";
    position: absolute;
    left: -14%;
    right: -14%;
    bottom: -8.4rem;
    height: 12.5rem;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgb(168 128 57 / 24%), rgb(168 128 57 / 0%) 70%);
    filter: blur(24px);
    opacity: 0.55;
}

.h4-global-footer__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1rem;
    flex-wrap: wrap;
    padding-block: clamp(0.92rem, 1.6vw, 1.25rem);
}

.h4-global-footer__meta {
    flex: 1 1 20rem;
    min-width: 14rem;
}

.h4-global-footer__copyright {
    margin: 0;
    color: var(--h4-muted);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.h4-global-footer__about {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    flex-wrap: wrap;
    flex: 0 1 auto;
}

@media (max-width: 1280px) {
    .h4-global-header__inner {
        flex-wrap: wrap;
        row-gap: 0.72rem;
    }

    .h4-global-header__brand {
        flex: 0 0 auto;
    }

    .h4-global-header__actions {
        flex: 0 0 auto;
        margin-left: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .h4-global-header__nav {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }
}

@media (max-width: 1540px) {
    .h4-global-header__nav {
        gap: clamp(0.34rem, 0.65vw, 0.72rem);
    }

    .h4-global-header__nav a {
        font-size: 0.82rem;
        letter-spacing: 0.02em;
    }

    .h4-global-header__icon-button {
        width: 2.2rem;
        height: 2.2rem;
    }

    .h4-global-header__cta {
        padding: 0.72rem 1rem;
        font-size: 0.75rem;
        letter-spacing: 0.07em;
    }
}

.h4-global-footer__about a {
    color: var(--h4-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.84rem;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.38rem 0.64rem;
}

.h4-global-footer__about a:hover,
.h4-global-footer__about a:focus-visible {
    color: var(--h4-accent-gold-light);
    border-color: rgb(242 200 121 / 36%);
    background: rgb(242 200 121 / 8%);
}

.h4-global-footer__support {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.h4-global-footer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 11px;
    border: 1px solid rgb(255 255 255 / 12%);
    background: rgb(255 255 255 / 3%);
    color: var(--h4-accent-gold-light);
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.h4-global-footer__icon .dashicons {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.h4-global-footer__icon:hover,
.h4-global-footer__icon:focus-visible {
    transform: translateY(-1px);
    color: #0b0f12;
    background: var(--h4-gradient-gold);
    border-color: rgb(242 200 121 / 60%);
    box-shadow: 0 0 14px rgb(168 128 57 / 28%);
}

/* Backward-compatible styling for older seeded footer paragraphs */
.h4-global-footer__inner > p {
    margin: 0;
    width: 100%;
    text-align: left;
}

.h4-global-footer__inner p {
    margin: 0;
    color: var(--h4-muted);
}

.h4-global-footer__inner p + p {
    margin-top: 0.25rem;
}

.h4-global-footer__inner p + p a {
    color: var(--h4-accent-gold-light);
}

/* Sales/action link normalization for seeded service pages */
.content-panel .h4-sales-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0.8rem 0 0.65rem;
}

.content-panel .h4-sales-actions a,
.content-panel .h4-sales-hero a[href*="help4network.com/store"],
.content-panel .h4-sales-hero a[href*="help4network.com/cart"],
.content-panel .h4wp-plan-card a,
.content-panel .h4wp-final-cta a,
.content-panel .h4-product-lane a,
.content-panel .h4-package-card a,
.content-panel .h4-product-cta a,
.content-panel p a[href*="help4network.com/store"],
.content-panel p a[href*="help4network.com/cart"],
.content-panel p a[href^="sms:"],
.content-panel p a[href^="tel:"],
.content-panel p a[href*="wa.me"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.56rem 0.96rem;
    min-height: 2.34rem;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 12%);
    background: var(--h4-gradient-ui);
    color: var(--h4-text) !important;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

.content-panel .h4-sales-actions a:hover,
.content-panel .h4-sales-hero a[href*="help4network.com/store"]:hover,
.content-panel .h4-sales-hero a[href*="help4network.com/cart"]:hover,
.content-panel .h4wp-plan-card a:hover,
.content-panel .h4wp-final-cta a:hover,
.content-panel .h4-product-lane a:hover,
.content-panel .h4-package-card a:hover,
.content-panel .h4-product-cta a:hover,
.content-panel p a[href*="help4network.com/store"]:hover,
.content-panel p a[href*="help4network.com/cart"]:hover,
.content-panel p a[href^="sms:"]:hover,
.content-panel p a[href^="tel:"]:hover,
.content-panel p a[href*="wa.me"]:hover {
    transform: translateY(-1px);
    background: var(--h4-gradient-gold);
    color: #0b0f12 !important;
    border-color: rgb(242 200 121 / 45%);
    box-shadow: 0 0 16px rgb(168 128 57 / 35%);
}

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

.screen-reader-text:focus {
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
    background: #fff;
    padding: 0.5rem 0.75rem;
}

button,
.button,
a.button,
a.wp-element-button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    padding: 0.56rem 0.94rem;
    min-height: 2.28rem;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: var(--h4-gradient-ui);
    color: var(--h4-text);
    text-decoration: none !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%);
    transition: all 0.3s ease;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-element-button:hover {
    background: var(--h4-gradient-gold);
    color: #0b0f12;
    box-shadow: 0 0 20px rgb(168 128 57 / 38%);
    transform: translateY(-1px);
}

.button.button-primary,
a.button.button-primary,
a.wp-element-button.button-primary {
    border-color: rgb(242 200 121 / 45%);
    background: var(--h4-gradient-gold);
    color: #0b0f12 !important;
    box-shadow: 0 0 14px rgb(168 128 57 / 26%), inset 0 1px 0 rgb(255 255 255 / 40%);
}

.button.button-primary:hover,
a.button.button-primary:hover,
a.wp-element-button.button-primary:hover {
    filter: brightness(1.02);
    box-shadow: 0 0 18px rgb(168 128 57 / 34%), inset 0 1px 0 rgb(255 255 255 / 45%);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--h4-border);
    background: var(--h4-surface-elevated);
    color: var(--h4-text);
    padding: 0.65rem 0.78rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgb(168 128 57 / 55%);
    box-shadow: 0 0 0 3px rgb(168 128 57 / 12%);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--h4-surface);
    border: 1px solid var(--h4-border);
    border-radius: var(--h4-radius);
    overflow: hidden;
}

th,
td {
    border-bottom: 1px solid rgb(255 255 255 / 6%);
    padding: 0.9rem 0.8rem;
}

th {
    background: rgb(255 255 255 / 3%);
    color: var(--h4-text);
    font-family: "Montserrat", "Inter", sans-serif;
    text-align: left;
}

tr:hover td {
    background: rgb(255 255 255 / 2.5%);
}

.h4wp-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--h4-border);
    background:
        radial-gradient(circle at 20% 30%, rgb(15 47 51 / 28%), transparent 46%),
        radial-gradient(circle at 82% 72%, rgb(168 128 57 / 22%), transparent 42%),
        var(--h4-bg-alt);
    padding: clamp(1.4rem, 3vw, 3rem);
}

.h4-sales-hero,
.h4-sales-highlights,
.h4-sales-plans,
.h4-sales-cta,
.h4-sales-catalog {
    border-radius: 18px;
    border: 1px solid var(--h4-border);
    background:
        linear-gradient(135deg, rgb(15 47 51 / 16%), rgb(168 128 57 / 12%)),
        var(--h4-surface);
    box-shadow: var(--h4-shadow);
    padding: clamp(1rem, 2vw, 1.6rem);
    margin-block: clamp(0.9rem, 1.6vw, 1.4rem);
}

.h4-shop-hero,
.h4-shop-plans,
.h4-shop-proof,
.h4-shop-catalog {
    border-radius: 18px;
    border: 1px solid var(--h4-border);
    background:
        linear-gradient(135deg, rgb(15 47 51 / 16%), rgb(168 128 57 / 12%)),
        var(--h4-surface);
    box-shadow: var(--h4-shadow);
    padding: clamp(1rem, 2vw, 1.6rem);
    margin-block: clamp(0.9rem, 1.6vw, 1.4rem);
}

.h4-shop-hero__grid {
    display: grid;
    gap: clamp(0.9rem, 1.4vw, 1.2rem);
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
}

.h4-shop-hero__eyebrow {
    color: var(--h4-accent-gold);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
}

.h4-shop-hero__main p {
    max-width: 70ch;
}

.h4-shop-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.h4-shop-hero__panel {
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 0%)),
        rgb(13 19 25 / 92%);
    padding: clamp(0.9rem, 1.3vw, 1.1rem);
}

.h4-shop-hero__panel-label {
    margin: 0;
    color: var(--h4-accent-gold);
    font-size: 0.74rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 700;
}

.h4-shop-hero__price {
    margin: 0.35rem 0 0.6rem;
    color: var(--h4-text);
    font-family: "Montserrat", "Inter", sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    line-height: 1;
    font-weight: 800;
}

.h4-shop-hero__panel ul {
    margin: 0;
    padding-left: 1.15rem;
}

.h4-shop-plan-grid {
    display: grid;
    gap: clamp(0.8rem, 1.2vw, 1.08rem);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.h4-shop-plan-card {
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 16px;
    background:
        linear-gradient(150deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 0%)),
        rgb(17 23 28 / 95%);
    padding: clamp(0.9rem, 1.4vw, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.h4-shop-plan-card--featured {
    border-color: rgb(168 128 57 / 52%);
    box-shadow: 0 0 22px rgb(168 128 57 / 24%);
}

.h4-shop-plan-card__label {
    margin: 0;
    color: var(--h4-accent-gold);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

.h4-shop-plan-card__price {
    margin: 0.15rem 0 0.25rem;
    color: var(--h4-text);
    font-size: clamp(1.4rem, 2.1vw, 1.9rem);
    font-family: "Montserrat", "Inter", sans-serif;
    font-weight: 700;
    line-height: 1;
}

.h4-shop-plan-card__price span {
    color: var(--h4-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.h4-shop-plan-card p:last-child {
    margin: auto 0 0;
}

.h4-shop-proof__grid {
    display: grid;
    gap: clamp(0.8rem, 1.1vw, 1rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h4-shop-proof__grid article {
    border: 1px solid var(--h4-border);
    border-radius: 14px;
    background: rgb(255 255 255 / 2%);
    padding: 0.9rem 0.9rem 0.95rem;
}

.h4-shop-proof__grid h3 {
    margin: 0 0 0.48rem;
    font-size: clamp(1rem, 1.25vw, 1.16rem);
}

.h4-shop-proof__grid p {
    margin: 0;
}

.h4-sales-hero__eyebrow {
    color: var(--h4-accent-gold);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
}

.h4-sales-stat-grid {
    margin-top: clamp(0.9rem, 1.4vw, 1.2rem);
    display: grid;
    gap: clamp(0.75rem, 1vw, 0.95rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h4-sales-stat {
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 14px;
    background:
        linear-gradient(150deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 0%)),
        rgb(11 15 18 / 78%);
    padding: 0.85rem 0.9rem;
}

.h4-sales-stat h3 {
    margin: 0 0 0.3rem;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
}

.h4-sales-stat p {
    margin: 0;
    color: var(--h4-muted);
    font-size: 0.94rem;
}

.h4-sales-highlights ul {
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.72rem;
}

.h4-sales-two-col {
    display: grid;
    gap: clamp(0.75rem, 1.2vw, 1rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h4-sales-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.72rem;
}

.h4-sales-checklist li {
    position: relative;
    padding: 0.72rem 0.84rem 0.72rem 2.05rem;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 12px;
    background: rgb(255 255 255 / 3%);
}

.h4-sales-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0.8rem;
    top: 0.72rem;
    color: var(--h4-accent-gold-light);
    font-weight: 700;
}

.h4-sales-highlights li {
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 12px;
    background: rgb(255 255 255 / 3%);
    padding: 0.72rem 0.84rem;
}

.h4-sales-plan-grid {
    display: grid;
    gap: clamp(0.8rem, 1.2vw, 1.08rem);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.h4-sales-plan-card {
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 16px;
    background:
        linear-gradient(150deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 0%)),
        rgb(17 23 28 / 95%);
    padding: clamp(0.9rem, 1.4vw, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.h4-sales-plan-card--featured {
    border-color: rgb(168 128 57 / 52%);
    box-shadow: 0 0 22px rgb(168 128 57 / 24%);
}

.h4-sales-plan-card__label {
    margin: 0;
    color: var(--h4-accent-gold);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

.h4-sales-plan-card ul {
    margin: 0;
    padding-left: 1rem;
    color: var(--h4-muted);
}

.h4-sales-plan-card p:last-child {
    margin: auto 0 0;
}

.h4-sales-plan-card__price {
    margin: 0.15rem 0 0.25rem;
    color: var(--h4-text);
    font-size: clamp(1.28rem, 2.1vw, 1.72rem);
    font-family: "Montserrat", "Inter", sans-serif;
    font-weight: 700;
    line-height: 1;
}

.h4-sales-plan-card__price span {
    color: var(--h4-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.h4wp-hero__eyebrow {
    color: var(--h4-accent-gold);
    font-size: 0.82rem;
    letter-spacing: 0.13em;
    font-weight: 700;
    text-transform: uppercase;
}

.h4wp-pricing-grid,
.h4wp-card-grid {
    display: grid;
    gap: clamp(0.9rem, 1.2vw, 1.25rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h4wp-plan-card,
.h4wp-card {
    border-radius: 20px;
    border: 1px solid var(--h4-border);
    background: var(--h4-surface);
    box-shadow: var(--h4-shadow);
    padding: clamp(1rem, 2vw, 1.9rem);
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.h4wp-plan-card:hover,
.h4wp-card:hover {
    transform: translateY(-4px);
    border-color: rgb(168 128 57 / 36%);
}

.h4wp-plan-card--featured {
    border-color: rgb(168 128 57 / 44%);
    box-shadow:
        0 0 22px rgb(168 128 57 / 32%),
        var(--h4-shadow);
}

.h4wp-plan-card__price {
    color: var(--h4-text);
    font-family: "Montserrat", "Inter", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1;
}

.h4wp-plan-card__period {
    color: var(--h4-muted);
    font-size: 0.9rem;
}

.h4wp-includes-grid {
    display: grid;
    gap: clamp(0.8rem, 1.1vw, 1rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h4wp-package-block {
    margin-block: clamp(0.95rem, 1.7vw, 1.5rem);
}

.h4wp-include-item {
    border: 1px solid var(--h4-border);
    border-radius: 14px;
    background: rgb(255 255 255 / 2%);
    padding: 0.9rem 0.9rem 0.95rem;
}

.h4wp-compare {
    overflow: auto;
    border-radius: 16px;
    border: 1px solid var(--h4-border);
}

.h4wp-compare table {
    border: 0;
    border-radius: 0;
}

.h4wp-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 18px;
    border: 1px solid rgb(255 255 255 / 10%);
    background:
        linear-gradient(135deg, rgb(15 47 51 / 70%), rgb(168 128 57 / 40%)),
        var(--h4-bg-alt);
    padding: clamp(1rem, 2vw, 1.6rem);
}

.h4wp-final-cta p {
    margin: 0;
}

.h4wp-final-cta p:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.h4-sales-cta--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.h4-sales-cta--inline p {
    margin: 0;
}

.h4-sales-cta--inline p:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.h4-product-hero,
.h4-product-lanes,
.h4-product-feature-band,
.h4-product-compare-cards,
.h4-tier-ladder,
.h4-product-catalog {
    margin-block: clamp(1rem, 1.9vw, 1.7rem);
}

.h4-product-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgb(6 15 18 / 98%) 0%, rgb(14 49 53 / 92%) 52%, rgb(59 50 30 / 82%) 100%),
        var(--h4-bg);
    box-shadow: var(--h4-shadow);
    padding: clamp(1.05rem, 2.4vw, 2.5rem);
}

.h4-product-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 6px;
    background: linear-gradient(90deg, var(--h4-accent-gold), var(--h4-accent-steel), var(--h4-accent-gold-light));
    opacity: 0.72;
}

.h4-product-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(18rem, 0.78fr);
    gap: clamp(1rem, 2.2vw, 2.25rem);
    align-items: stretch;
}

.h4-product-eyebrow {
    margin: 0 0 0.55rem;
    color: var(--h4-accent-gold-light);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.h4-product-hero h1,
.h4-product-hero h2,
.h4-section-kicker h2,
.h4-product-feature-band h2,
.h4-product-cta h2 {
    max-width: 15ch;
}

.h4-product-lede {
    max-width: 68ch;
    color: rgb(247 248 248 / 88%);
    font-size: clamp(1.02rem, 1.25vw, 1.18rem);
}

.h4-product-hero__actions,
.h4-product-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin-top: 0.95rem;
}

.h4-product-hero__proof span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    color: rgb(247 248 248 / 88%);
    padding: 0.35rem 0.7rem;
    font-size: 0.86rem;
    font-weight: 700;
}

.h4-product-command {
    display: grid;
    gap: 0.7rem;
    align-content: start;
    border: 1px solid rgb(242 200 121 / 24%);
    border-radius: 18px;
    background:
        linear-gradient(155deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 2%)),
        rgb(9 14 16 / 78%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
    padding: clamp(0.9rem, 1.6vw, 1.35rem);
}

.h4-product-command__label,
.h4-product-lane__meta {
    margin: 0;
    color: var(--h4-accent-gold-light);
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.h4-product-command__price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.h4-product-command__price strong {
    color: var(--h4-text);
    font-family: "Montserrat", "Inter", sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
}

.h4-product-command__price span {
    color: var(--h4-muted);
    font-weight: 700;
}

.h4-product-command__row {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    border-bottom: 1px solid rgb(255 255 255 / 7%);
    padding-bottom: 0.58rem;
}

.h4-product-command__row span {
    color: var(--h4-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.h4-product-command__row strong {
    color: var(--h4-text);
}

.h4-section-kicker {
    max-width: 62rem;
    margin-bottom: clamp(0.9rem, 1.7vw, 1.35rem);
}

.h4-section-kicker p:last-child {
    max-width: 65ch;
}

.h4-product-lane-grid,
.h4-package-grid,
.h4-product-feature-grid,
.h4-product-compare-cards {
    display: grid;
    gap: clamp(0.85rem, 1.2vw, 1.15rem);
}

.h4-product-lane-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.h4-package-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.h4-product-feature-grid,
.h4-product-compare-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h4-product-lane,
.h4-package-card,
.h4-product-feature-grid article,
.h4-product-compare-card,
.h4-tier-ladder__track article {
    border: 1px solid var(--h4-border);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 0%)),
        var(--h4-surface);
    box-shadow: var(--h4-shadow);
    padding: clamp(0.9rem, 1.35vw, 1.25rem);
}

.h4-product-lane,
.h4-package-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.h4-product-lane--featured,
.h4-package-card--featured,
.h4-product-compare-card--featured {
    border-color: rgb(242 200 121 / 45%);
    background:
        linear-gradient(145deg, rgb(168 128 57 / 20%), rgb(15 47 51 / 22%)),
        var(--h4-surface-elevated);
    box-shadow:
        0 0 24px rgb(168 128 57 / 24%),
        var(--h4-shadow);
}

.h4-product-lane h3,
.h4-package-card h3,
.h4-product-compare-card h3,
.h4-tier-ladder__track h3 {
    margin-top: 0.35rem;
}

.h4-product-lane__price {
    margin: 0.1rem 0 0.45rem;
    color: var(--h4-text);
    font-family: "Montserrat", "Inter", sans-serif;
    font-size: clamp(1.85rem, 2.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
}

.h4-product-lane__price span {
    color: var(--h4-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.h4-product-lane__fit,
.h4-package-card__fit {
    color: rgb(247 248 248 / 86%);
}

.h4-product-lane ul,
.h4-package-card ul {
    margin: 0.2rem 0 1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.48rem;
}

.h4-product-lane li,
.h4-package-card li {
    position: relative;
    padding-left: 1.15rem;
    color: var(--h4-muted);
}

.h4-product-lane li::before,
.h4-package-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--h4-accent-gold-light);
}

.h4-product-lane p:last-child,
.h4-package-card p:last-child {
    margin-top: auto;
}

.h4-product-feature-band {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
    gap: clamp(1rem, 2vw, 2rem);
    align-items: start;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 18px;
    background:
        linear-gradient(110deg, rgb(15 47 51 / 74%), rgb(17 23 28 / 94%)),
        var(--h4-bg-alt);
    padding: clamp(1rem, 1.9vw, 1.6rem);
}

.h4-product-feature-grid article {
    box-shadow: none;
    background: rgb(255 255 255 / 4%);
}

.h4-product-feature-grid strong {
    color: var(--h4-text);
}

.h4-product-feature-grid p,
.h4-product-compare-card p,
.h4-tier-ladder__track p {
    margin-bottom: 0;
}

.h4-package-card__top {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    align-items: center;
    color: var(--h4-accent-gold-light);
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.h4-package-card__top strong {
    color: var(--h4-text);
    text-transform: none;
    letter-spacing: 0;
}

.h4-tier-mini {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
}

.h4-tier-mini span {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 999px;
    background: rgb(255 255 255 / 5%);
    color: var(--h4-text);
    font-size: 0.74rem;
    font-weight: 800;
}

.h4-tier-ladder__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.2vw, 1.1rem);
}

.h4-tier-ladder__track article span {
    color: var(--h4-accent-gold-light);
    font-weight: 900;
}

.h4-product-cta {
    align-items: stretch;
}

.h4-plugin-shot-grid {
    display: grid;
    gap: clamp(0.8rem, 1.3vw, 1.2rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block: clamp(0.8rem, 1.5vw, 1.25rem);
}

.h4-plugin-shot-card {
    border-radius: 16px;
    border: 1px solid var(--h4-border);
    background:
        linear-gradient(140deg, rgb(15 47 51 / 16%), rgb(168 128 57 / 10%)),
        var(--h4-surface);
    box-shadow: var(--h4-shadow);
    overflow: hidden;
}

.h4-plugin-shot-media {
    display: block;
    width: 100%;
}

.h4-plugin-shot-card img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.h4-plugin-shot-card h3,
.h4-plugin-shot-card p {
    margin-inline: clamp(0.75rem, 1.1vw, 1rem);
}

.h4-plugin-shot-card h3 {
    margin-top: 0.74rem;
    margin-bottom: 0.35rem;
}

.h4-plugin-shot-card p {
    margin-top: 0;
    margin-bottom: 0.9rem;
}

.h4wp-soft-glow {
    box-shadow: var(--h4-shadow-soft);
}

.h4wp-noise-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.045;
    background-image:
        radial-gradient(rgb(255 255 255 / 60%) 0.45px, transparent 0.45px),
        radial-gradient(rgb(255 255 255 / 28%) 0.45px, transparent 0.45px);
    background-size: 3px 3px, 5px 5px;
    mix-blend-mode: overlay;
}

@media (max-width: 720px) {
    .brand-lockup {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-nav ul {
        gap: 0.7rem;
    }

    .h4-global-header__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .h4-global-header__nav {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: visible;
    }

    .h4-global-header__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .h4-global-header__menu-item--dropdown::after {
        display: none;
    }

    .h4-global-header__menu-item--dropdown {
        position: static;
    }

    .h4-global-header__dropdown {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        margin-top: 0.35rem;
        border-radius: 12px;
        background: rgb(9 14 20 / 98%);
        border-color: rgb(255 255 255 / 10%);
    }

    .h4-global-footer__inner {
        justify-content: flex-start;
    }

    .h4-global-footer__meta,
    .h4-global-footer__about,
    .h4-global-footer__support {
        width: 100%;
        justify-content: flex-start;
    }

    .h4wp-pricing-grid,
    .h4wp-card-grid,
    .h4wp-includes-grid,
    .h4-sales-plan-grid,
    .h4-sales-stat-grid,
    .h4-sales-two-col,
    .h4-shop-plan-grid,
    .h4-shop-proof__grid {
        grid-template-columns: 1fr;
    }

    .h4-product-hero__grid,
    .h4-product-feature-band,
    .h4-product-lane-grid,
    .h4-package-grid,
    .h4-product-feature-grid,
    .h4-product-compare-cards,
    .h4-tier-ladder__track {
        grid-template-columns: 1fr;
    }

    .h4-shop-hero__grid {
        grid-template-columns: 1fr;
    }

    .h4-plugin-shot-grid {
        grid-template-columns: 1fr;
    }

    .h4wp-final-cta,
    .h4-sales-cta--inline,
    .h4-product-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .h4-product-hero {
        border-radius: 16px;
    }

    .h4-product-command__row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .h4-tier-mini {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h4wp-compare {
        overflow: visible;
        border: 0;
    }

    .h4wp-compare table,
    .h4wp-compare thead,
    .h4wp-compare tbody,
    .h4wp-compare tr,
    .h4wp-compare th,
    .h4wp-compare td {
        display: block;
        width: 100%;
    }

    .h4wp-compare thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .h4wp-compare tr {
        margin-bottom: 0.85rem;
        border: 1px solid var(--h4-border);
        border-radius: 14px;
        background: rgb(255 255 255 / 2.5%);
        padding: 0.82rem;
    }

    .h4wp-compare td {
        display: grid;
        grid-template-columns: minmax(7.5rem, 40%) minmax(0, 1fr);
        gap: 0.65rem;
        border: 0;
        padding: 0.38rem 0;
    }

    .h4wp-compare td::before {
        color: var(--h4-accent-gold-light);
        font-weight: 700;
    }

    .h4wp-compare td:nth-child(1)::before {
        content: "Capability";
    }

    .h4wp-compare td:nth-child(2)::before {
        content: "DIY Starter";
    }

    .h4wp-compare td:nth-child(3)::before {
        content: "Managed Plans";
    }
}

@media (min-width: 3840px) {
    :root {
        --h4-base-font: 19px;
        --h4-content-max: min(92vw, 180rem);
    }
}

@media (min-width: 5120px) {
    :root {
        --h4-base-font: 21px;
        --h4-content-max: min(91vw, 220rem);
    }
}

@media (min-width: 7680px) {
    :root {
        --h4-base-font: 23px;
        --h4-content-max: min(90vw, 320rem);
    }
}