/*
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.46
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(96vw, 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: hidden;
}

body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    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);
}

body.h4bs-help4wordpress-site .h4bs-builder-page {
    color: var(--h4-text);
}

body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4wp-section),
body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4-product-hero),
body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4wp-card-grid),
body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4wp-card),
body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4-product-feature-band),
body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4-product-screen-grid),
body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4wp-final-cta) {
    background:
        radial-gradient(circle at 12% 4%, rgb(15 47 51 / 30%), transparent 36%),
        radial-gradient(circle at 90% 92%, rgb(168 128 57 / 20%), transparent 38%),
        var(--h4-bg) !important;
    color: var(--h4-text) !important;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: clamp(0.9rem, 1.2vw, 1.4rem);
    box-shadow: var(--h4-shadow);
    padding: clamp(0.85rem, 1.65vw, 1.5rem);
    overflow: hidden;
}

.h4bs-builder-page .h4bs-block-html:has(.h4wp-section) > *:first-child,
.h4bs-builder-page .h4bs-block-html:has(.h4-product-hero) > *:first-child {
    margin-top: 0;
}

.h4bs-builder-page .h4bs-block-html:has(.h4wp-section) > *:last-child,
.h4bs-builder-page .h4bs-block-html:has(.h4wp-final-cta) > *:last-child {
    margin-bottom: 0;
}

.h4wp-section {
    position: relative;
    width: 100%;
    max-width: min(100%, 1180px);
    margin: clamp(1rem, 1.9vw, 1.7rem) auto;
    padding: clamp(1rem, 2.1vw, 1.9rem);
    color: var(--h4-text);
    background:
        linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%)),
        var(--h4-surface);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 20px;
    box-shadow: var(--h4-shadow);
    overflow: hidden;
}

.h4wp-section--contrast,
.h4wp-section--lab-demo {
    background:
        linear-gradient(135deg, rgb(15 47 51 / 78%) 0%, rgb(17 23 28 / 96%) 54%, rgb(85 66 34 / 62%) 100%),
        var(--h4-bg-alt);
    border-color: rgb(242 200 121 / 22%);
}

.h4wp-section__header {
    max-width: 76ch;
    margin: 0 0 clamp(0.9rem, 1.6vw, 1.35rem);
}

.h4wp-section__header > *:last-child,
.h4wp-section > *:last-child {
    margin-bottom: 0;
}

.h4wp-section h2,
.h4wp-section h3,
.h4wp-section h4,
.h4wp-section strong {
    color: var(--h4-text);
}

.h4wp-section h2 {
    max-width: 21ch;
}

.h4wp-section p,
.h4wp-section li {
    color: rgb(247 248 248 / 82%);
}

.h4wp-section .h4wp-card-grid {
    margin-top: clamp(0.75rem, 1.25vw, 1.1rem);
}

.h4wp-section .h4wp-card {
    background:
        linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%)),
        var(--h4-surface-elevated);
}

.h4wp-section .h4wp-card p {
    color: rgb(247 248 248 / 78%);
}

.h4-product-screen-card {
    background:
        linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%)),
        var(--h4-surface-elevated);
    border-color: rgb(255 255 255 / 10%);
}

.h4-product-screen-card h3 {
    color: var(--h4-text);
}

.h4-product-screen-card p {
    color: rgb(247 248 248 / 78%);
}

.h4wp-section .h4bs-website-snapshot-frame,
.h4wp-section .h4bs-siteshot-frame {
    background: #f7f8f8;
}

.h4-client-showcase {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.h4-portfolio-page {
    --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-border: rgb(255 255 255 / 8%);
    --h4-shadow: 0 24px 48px rgb(0 0 0 / 32%);
    color: var(--h4-text);
}

.h4-client-category {
    min-width: 0;
    padding-top: clamp(1.25rem, 2.2vw, 1.8rem);
    border-top: 1px solid rgb(255 255 255 / 12%);
}

.h4-client-category__header {
    max-width: 78ch;
    margin-bottom: clamp(1rem, 1.8vw, 1.45rem);
    padding-left: clamp(0.85rem, 1.3vw, 1.15rem);
    border-left: 3px solid var(--h4-accent-gold);
}

.h4-client-category__header > *:last-child {
    margin-bottom: 0;
}

.h4-client-category__label {
    margin: 0 0 0.38rem;
    color: var(--h4-accent-gold-light) !important;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.h4-client-case {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(18rem, 0.88fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 8px;
    background: var(--h4-surface-elevated);
    box-shadow: 0 18px 45px rgb(0 0 0 / 22%);
}

.h4-client-case__media,
.h4-client-case__body {
    min-width: 0;
}

.h4-client-case__media {
    display: flex;
    align-items: stretch;
    border-right: 1px solid rgb(255 255 255 / 10%);
    background: #f7f8f8;
}

.h4-client-case__media .h4bs-website-snapshot-wrap,
.h4-client-case__media .h4bs-website-snapshot-link,
.h4-client-case__media .h4bs-website-snapshot-frame,
.h4-client-case__media .h4bs-siteshot-wrap,
.h4-client-case__media .h4bs-siteshot-link,
.h4-client-case__media .h4bs-siteshot-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.h4-client-case__media .h4bs-website-snapshot-frame,
.h4-client-case__media .h4bs-siteshot-frame {
    height: 100%;
    border: 0;
    border-radius: 0;
}

.h4-client-case__media .h4bs-website-snapshot-image,
.h4-client-case__media .h4bs-siteshot-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 26rem;
    object-fit: contain;
    object-position: top center;
    background: #071013;
}

.h4-client-case__media .h4bs-website-snapshot-caption,
.h4-client-case__media .h4bs-siteshot-caption {
    padding: 0.65rem 0.8rem;
    color: #172126;
    background: #fff;
}

.h4-client-case__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.15rem, 2.4vw, 2.15rem);
}

.h4-client-case__body p,
.h4-client-case__body li {
    color: var(--h4-muted);
}

.h4-client-case__body h4 {
    margin-bottom: 0.6rem;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.h4-client-case__body h4 a,
.h4-portfolio-more .h4-work-card h3 a {
    color: var(--h4-text);
    text-decoration-color: rgb(242 200 121 / 50%);
    text-underline-offset: 0.18em;
}

.h4-client-case__body h4 a:hover,
.h4-client-case__body h4 a:focus-visible,
.h4-portfolio-more .h4-work-card h3 a:hover,
.h4-portfolio-more .h4-work-card h3 a:focus-visible {
    color: var(--h4-accent-gold-light);
}

.h4-client-case__features {
    display: grid;
    gap: 0.48rem;
    margin: 0.4rem 0 1.1rem;
    padding: 0;
    list-style: none;
}

.h4-client-case__features li {
    position: relative;
    padding-left: 1.15rem;
}

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

.h4-client-case__link {
    align-self: flex-start;
    margin-top: auto;
    color: var(--h4-accent-gold-light) !important;
    font-weight: 800;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
}

.h4-portfolio-more .h4-work-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.h4-portfolio-more .h4-work-card > * {
    min-width: 0;
}

.h4-portfolio-more .h4-work-card h3,
.h4-portfolio-more .h4-work-card p {
    margin-bottom: 0;
}

.h4-portfolio-more .h4-work-card p:last-child {
    margin-top: auto;
    padding-top: 0.35rem;
}

.h4-portfolio-more .h4bs-website-snapshot-image,
.h4-portfolio-more .h4bs-siteshot-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
}

@media (max-width: 860px) {
    .h4-client-case {
        grid-template-columns: minmax(0, 1fr);
    }

    .h4-client-case__media {
        border-right: 0;
        border-bottom: 1px solid rgb(255 255 255 / 10%);
    }

    .h4-client-case__media .h4bs-website-snapshot-image,
    .h4-client-case__media .h4bs-siteshot-image {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 480px) {
    .h4-client-case__link,
    .h4-portfolio-more .h4-work-card .button {
        width: 100%;
        justify-content: center;
    }
}

.h4wp-button,
.h4bs-help4wordpress-site .h4bs-block-html a.button,
.h4wp-section .button,
.h4wp-section a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    max-width: 100%;
    border: 0;
    border-radius: 999px;
    background: var(--h4-gradient-ui), #1f2a30;
    color: var(--h4-text) !important;
    padding: 0.72rem 1.05rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 26px rgb(0 0 0 / 22%);
}

.h4wp-button--primary,
.h4bs-help4wordpress-site .h4bs-block-html a.button-primary,
.h4wp-section .button-primary,
.h4wp-section a.button-primary {
    background: var(--h4-gradient-gold), #f2c879;
    color: #071013 !important;
}

.h4wp-button--ghost {
    border: 1px solid rgb(255 255 255 / 14%);
    background: rgb(255 255 255 / 7%);
    color: var(--h4-text) !important;
}

body.h4bs-help4wordpress-site .h4bs-builder-page a.button,
body.h4bs-help4wordpress-site .h4bs-builder-page .button,
body.h4bs-help4wordpress-site a.button,
body.h4bs-help4wordpress-site .button {
    background-color: #1f2a30 !important;
    background-image: var(--h4-gradient-ui) !important;
    color: var(--h4-text) !important;
}

body.h4bs-help4wordpress-site .h4bs-builder-page a.button-primary,
body.h4bs-help4wordpress-site .h4bs-builder-page .button-primary,
body.h4bs-help4wordpress-site a.button-primary,
body.h4bs-help4wordpress-site .button-primary {
    background-color: #f2c879 !important;
    background-image: var(--h4-gradient-gold) !important;
    color: #071013 !important;
}

body.h4bs-help4wordpress-site .h4-product-feature-grid article {
    background:
        linear-gradient(145deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%)),
        var(--h4-surface-elevated);
}

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);
    overflow: visible;
}

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

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

@media (max-width: 600px) {
    body.admin-bar #wpadminbar {
        position: fixed;
    }
}

.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;
    overflow: visible;
}

.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__menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.6rem;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 10px;
    background: rgb(255 255 255 / 6%);
    color: var(--h4-text);
    font: 800 0.78rem/1 "Montserrat", "Inter", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.72rem 0.86rem;
    cursor: pointer;
}

.h4-global-header__menu-toggle:hover,
.h4-global-header__menu-toggle:focus-visible {
    border-color: rgb(242 200 121 / 45%);
    background: rgb(242 200 121 / 13%);
    outline: 0;
}

.h4-global-header__menu-icon {
    display: inline-grid;
    gap: 0.22rem;
    width: 1.05rem;
}

.h4-global-header__menu-icon span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.h4-global-header ul,
.h4-global-header ol,
.h4-global-footer ul,
.h4-global-footer ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.h4-global-header li,
.h4-global-footer li {
    list-style: none;
}

.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;
    max-width: 100%;
}

.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.62rem;
    margin-bottom: -0.62rem;
}

.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.45rem;
    right: -0.45rem;
    top: 100%;
    height: 2.2rem;
}
.h4-global-header__dropdown {
    position: absolute;
    top: calc(100% + 0.02rem);
    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;
    max-width: 100%;
}

.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-action-svg {
    display: block;
    width: 1.34rem;
    height: 1.34rem;
    flex: 0 0 auto;
}

.h4-global-action-svg__bg {
    fill: #101a20;
    stroke: rgb(242 200 121 / 22%);
    stroke-width: 1;
}

.h4-global-action-svg__mark {
    fill: var(--h4-accent-gold-light);
    opacity: 0.34;
}

.h4-global-action-svg__glyph {
    fill: #f8fbff;
}

.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__icon-button:hover .h4-global-action-svg__bg,
.h4-global-header__icon-button:focus-visible .h4-global-action-svg__bg,
.h4-global-footer__icon:hover .h4-global-action-svg__bg,
.h4-global-footer__icon:focus-visible .h4-global-action-svg__bg {
    fill: #0f2f33;
    stroke: rgb(242 200 121 / 72%);
}

.h4-global-header__icon-button:hover .h4-global-action-svg__mark,
.h4-global-header__icon-button:focus-visible .h4-global-action-svg__mark,
.h4-global-footer__icon:hover .h4-global-action-svg__mark,
.h4-global-footer__icon:focus-visible .h4-global-action-svg__mark {
    opacity: 0.62;
}

.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.28rem, 0.54vw, 0.62rem);
    }

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

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

    .h4-global-header__cta {
        padding: 0.66rem 0.88rem;
        font-size: 0.72rem;
        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 .h4-global-action-svg {
    width: 1.24rem;
    height: 1.24rem;
}

.h4-global-footer__icon:hover,
.h4-global-footer__icon:focus-visible {
    transform: translateY(-1px);
    color: #f8fbff;
    background: rgb(242 200 121 / 14%);
    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 {
    min-width: 0;
    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;
    }

    body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4wp-section),
    body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4-product-hero),
    body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4wp-card-grid),
    body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4wp-card),
    body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4-product-feature-band),
    body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4-product-screen-grid),
    body.h4bs-help4wordpress-site .h4bs-builder-page .h4bs-block-html:has(.h4wp-final-cta) {
        padding: clamp(0.65rem, 2.8vw, 1rem);
    }

    .h4wp-section {
        border-radius: 16px;
        padding: clamp(0.9rem, 4vw, 1.2rem);
    }

    .h4wp-section h2 {
        max-width: none;
    }

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

    .h4bs-builder-page,
    .h4bs-builder-page *,
    .h4wp-card-grid,
    .h4wp-card-grid > *,
    .h4wp-card,
    .h4-product-hero,
    .h4-product-hero *,
    .h4-website-snapshot-example,
    .h4-siteshot-example,
    .h4-website-snapshot-example *,
    .h4-siteshot-example * {
        min-width: 0;
    }

    .h4bs-builder-page img,
    .h4bs-builder-page svg,
    .h4bs-builder-page video,
    .h4bs-builder-page canvas,
    .h4bs-builder-page iframe {
        max-width: 100%;
    }

    .h4bs-website-snapshot-wrap,
    .h4bs-siteshot-wrap,
    .h4bs-website-snapshot-link,
    .h4bs-siteshot-link,
    .h4bs-website-snapshot-frame,
    .h4bs-siteshot-frame,
    .h4bs-website-snapshot-image,
    .h4bs-siteshot-image {
        width: 100% !important;
        max-width: 100% !important;
    }

    .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 (max-width: 860px) {
    .h4-global-header__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 0.68rem !important;
        padding: 0.72rem 0.9rem !important;
    }

    .h4-global-header__brand {
        grid-column: 1 !important;
        min-width: 0 !important;
    }

    .h4-global-header__brand-lockup {
        max-width: min(13rem, 58vw) !important;
    }

    .h4-global-header__brand-logo {
        width: min(11.5rem, 58vw) !important;
        max-height: 2.85rem !important;
    }

    .h4-global-header__menu-toggle {
        display: inline-flex !important;
        grid-column: 2 !important;
        justify-self: end !important;
    }

    .h4-global-header__nav,
    .h4-global-header__actions {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: none !important;
    }

    .h4-global-header.is-open .h4-global-header__nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        gap: 0.48rem !important;
        overflow: visible !important;
        padding-top: 0.2rem !important;
    }

    .h4-global-header.is-open .h4-global-header__actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 0.48rem !important;
        padding-top: 0.1rem !important;
    }

    .h4-global-header__nav > a,
    .h4-global-header__menu-item > a,
    .h4-global-header__dropdown a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 2.55rem !important;
        border: 1px solid rgb(255 255 255 / 12%) !important;
        border-radius: 10px !important;
        background: rgb(255 255 255 / 5%) !important;
        padding: 0.68rem 0.78rem !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .h4-global-header__menu-item {
        display: grid !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
    }

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

    .h4-global-header__menu-item--dropdown > a::after {
        content: "+" !important;
        margin-left: 0.65rem !important;
        color: var(--h4-accent-gold-light) !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    .h4-global-header__menu-item--dropdown.is-open > a::after {
        content: "-" !important;
    }

    .h4-global-header__dropdown {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        margin: 0.42rem 0 0 !important;
        padding: 0.42rem !important;
        border-radius: 10px !important;
    }

    .h4-global-header__menu-item--dropdown.is-open .h4-global-header__dropdown,
    .h4-global-header__menu-item--dropdown:focus-within .h4-global-header__dropdown {
        display: grid !important;
    }

    .h4-global-header__icon-button {
        width: 2.45rem !important;
        height: 2.45rem !important;
    }

    .h4-global-header__cta {
        min-height: 2.45rem !important;
        padding: 0.72rem 0.9rem !important;
    }
}

@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);
    }
}

/* Help4WordPress sales surfaces: deliberately light, open, and conversion-led. */
body.h4wp-sales-light {
    color: #11171a;
    background: #fff;
}

body.h4wp-sales-light::before,
body.h4wp-sales-light::after {
    display: none;
}

body.h4wp-sales-light .site-main {
    width: 100%;
    max-width: none;
    padding: 0;
}

body.h4wp-sales-light .site-main > h1,
body.h4wp-sales-light .content-panel > h1 {
    display: none;
}

body.h4wp-sales-light .content-panel,
body.h4wp-sales-light .h4bs-block-html:has(.h4-sales-home),
body.h4wp-sales-light .h4bs-builder-page .h4bs-block-html:has(.h4-sales-home) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #11171a !important;
    overflow: visible;
}

body.h4wp-sales-light .h4-global-footer {
    margin-top: 0;
}

.h4-sales-home {
    --h4-sales-ink: #11171a;
    --h4-sales-muted: #526067;
    --h4-sales-border: #d9e0e3;
    --h4-sales-soft: #edf1f2;
    --h4-sales-gold: #d59f22;
    --h4-sales-gold-dark: #8f6511;
    --h4-sales-teal: #0c6d73;
    width: 100%;
    max-width: 100%;
    overflow: clip;
    color: var(--h4-sales-ink);
    background: #fff;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

.h4-sales-home *,
.h4-sales-home *::before,
.h4-sales-home *::after {
    box-sizing: border-box;
}

.h4-sales-home h1,
.h4-sales-home h2,
.h4-sales-home h3,
.h4-sales-home p,
.h4-sales-home ul,
.h4-sales-home figure {
    margin-top: 0;
}

.h4-sales-home h1,
.h4-sales-home h2,
.h4-sales-home h3,
.h4-sales-home a,
.h4-sales-home button {
    letter-spacing: 0;
}

.h4-sales-home h1,
.h4-sales-home h2,
.h4-sales-home h3 {
    color: var(--h4-sales-ink);
    background: transparent;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    text-transform: none;
}

.h4-sales-home h1 {
    max-width: 15ch;
    margin-bottom: 1.4rem;
    font-size: 3.55rem;
    line-height: 1.02;
    font-weight: 800;
}

.h4-sales-home h1 span {
    color: var(--h4-sales-gold-dark);
}

.h4-sales-home h2 {
    margin-bottom: 1rem;
    font-size: 2.55rem;
    line-height: 1.1;
    font-weight: 780;
}

.h4-sales-home h3 {
    margin-bottom: 0.55rem;
    font-size: 1.12rem;
    line-height: 1.25;
    font-weight: 760;
}

.h4-sales-home p {
    color: var(--h4-sales-muted);
    font-size: 1.04rem;
    line-height: 1.7;
}

.h4-sales-shell {
    width: min(100% - 2rem, 74rem);
    margin-inline: auto;
}

.h4-sales-hero,
.h4-sales-subhero {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.h4-sales-hero__grid,
.h4-sales-subhero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(23rem, 0.97fr);
    align-items: center;
    gap: 4.2rem;
    padding-block: 2rem 2.6rem;
}

.h4-sales-hero__copy > p,
.h4-sales-subhero__grid > div > p {
    max-width: 39rem;
    margin-bottom: 1.7rem;
    font-size: 1.16rem;
}

.h4-sales-hero__media,
.h4-sales-subhero figure {
    position: relative;
    width: 100%;
    aspect-ratio: 8 / 5;
    margin-bottom: 0;
    overflow: hidden;
    border: 1px solid #d8dfe2;
    border-radius: 6px;
    box-shadow: 0 24px 60px rgb(19 34 39 / 14%);
}

.h4-sales-hero__media::after,
.h4-sales-subhero figure::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgb(255 255 255 / 65%);
    pointer-events: none;
}

.h4-sales-hero__media img,
.h4-sales-subhero figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h4-sales-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.h4-sales-button {
    display: inline-flex;
    min-height: 3.05rem;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.88rem 1.28rem;
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.h4-sales-button:hover,
.h4-sales-button:focus-visible {
    transform: translateY(-1px);
}

.h4-sales-button--primary {
    color: #11171a;
    background: var(--h4-sales-gold);
    border-color: var(--h4-sales-gold);
}

.h4-sales-button--primary:hover,
.h4-sales-button--primary:focus-visible {
    color: #11171a;
    background: #e3ae32;
    border-color: #e3ae32;
}

.h4-sales-button--secondary {
    color: var(--h4-sales-ink);
    background: #fff;
    border-color: #9ba8ad;
}

.h4-sales-button--secondary:hover,
.h4-sales-button--secondary:focus-visible {
    color: var(--h4-sales-ink);
    border-color: var(--h4-sales-ink);
}

.h4-sales-button--dark {
    color: #fff;
    background: #11171a;
    border-color: #899398;
}

.h4-sales-button--dark:hover,
.h4-sales-button--dark:focus-visible {
    color: #fff;
    background: #20282c;
}

.h4-sales-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.3rem;
    margin: 1.45rem 0 0;
    padding: 0;
    color: #46545a;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 680;
}

.h4-sales-trust li {
    position: relative;
    padding-left: 1.05rem;
    color: #46545a;
}

.h4-sales-trust li::before {
    content: "";
    position: absolute;
    top: 0.48em;
    left: 0;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--h4-sales-teal);
}

.h4-sales-journey,
.h4-sales-fit {
    border-block: 1px solid var(--h4-sales-border);
    background: var(--h4-sales-soft);
}

.h4-sales-journey .h4-sales-shell,
.h4-sales-pricing .h4-sales-shell,
.h4-sales-services .h4-sales-shell,
.h4-sales-builder .h4-sales-shell,
.h4-sales-proof .h4-sales-shell,
.h4-sales-faq .h4-sales-shell,
.h4-sales-fit .h4-sales-shell {
    padding-block: 5.2rem;
}

.h4-sales-section-heading {
    max-width: 47rem;
    margin-bottom: 2.5rem;
}

.h4-sales-section-heading p {
    margin-bottom: 0;
}

.h4-sales-journey__rail,
.h4-sales-fit__rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.h4-sales-journey__rail article,
.h4-sales-fit__rail article {
    min-width: 0;
    border-left: 1px solid #c8d1d5;
    padding: 0.25rem 2rem 0.25rem 1.35rem;
}

.h4-sales-journey__rail span {
    display: block;
    margin-bottom: 1.1rem;
    color: var(--h4-sales-gold-dark);
    font-size: 0.79rem;
    font-weight: 850;
}

.h4-sales-journey__rail p,
.h4-sales-fit__rail p {
    margin-bottom: 0;
    font-size: 0.93rem;
}

.h4-sales-pricing {
    background: #fff;
}

.h4-sales-plan-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px solid var(--h4-sales-border);
}

.h4-sales-plan {
    position: relative;
    min-width: 0;
    padding: 2rem 1.55rem 2.1rem;
}

.h4-sales-plan + .h4-sales-plan {
    border-left: 1px solid var(--h4-sales-border);
}

.h4-sales-plan.is-featured {
    box-shadow: inset 0 4px 0 var(--h4-sales-gold);
}

.h4-sales-plan__name {
    margin-bottom: 1.15rem;
    color: #445158 !important;
    font-size: 0.79rem !important;
    font-weight: 850;
    text-transform: uppercase;
}

.h4-sales-plan__price {
    min-height: 2.6rem;
    margin-bottom: 0.7rem;
    color: var(--h4-sales-ink) !important;
    font-size: 2rem !important;
    font-weight: 840;
    line-height: 1.1 !important;
}

.h4-sales-plan__price span {
    color: #66747a;
    font-size: 0.86rem;
    font-weight: 700;
}

.h4-sales-plan__fit {
    min-height: 6.2rem;
    font-size: 0.92rem !important;
}

.h4-sales-plan ul {
    min-height: 8.4rem;
    margin: 1.2rem 0 1.4rem;
    padding: 0;
    list-style: none;
}

.h4-sales-plan li {
    position: relative;
    margin-bottom: 0.58rem;
    padding-left: 1.15rem;
    color: #38464c;
    font-size: 0.89rem;
    line-height: 1.45;
}

.h4-sales-plan li::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--h4-sales-teal);
}

.h4-sales-plan__link,
.h4-sales-text-link {
    color: #0a5f65;
    font-weight: 800;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25rem;
}

.h4-sales-plan__link:hover,
.h4-sales-plan__link:focus-visible,
.h4-sales-text-link:hover,
.h4-sales-text-link:focus-visible {
    color: #073f43;
}

.h4-sales-pricing__help {
    margin: 1.7rem 0 0;
    text-align: center;
}

.h4-sales-enterprise {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border-bottom: 1px solid var(--h4-sales-border);
    padding: 1.7rem 0;
}

.h4-sales-enterprise h3,
.h4-sales-enterprise p {
    margin-bottom: 0.2rem;
}

.h4-sales-services {
    background: var(--h4-sales-soft);
}

.h4-sales-services__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 5.4rem;
}

.h4-sales-services__grid > .h4-sales-section-heading {
    margin-bottom: 0;
}

.h4-sales-service-list {
    display: grid;
    align-content: start;
}

.h4-sales-service-list--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
}

.h4-sales-service {
    display: grid;
    grid-template-columns: 2.7rem minmax(0, 1fr);
    gap: 1rem;
    min-width: 0;
    border-top: 1px solid #c8d1d5;
    padding: 1.25rem 0;
}

.h4-sales-service:last-child {
    border-bottom: 1px solid #c8d1d5;
}

.h4-sales-service img {
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: 2.35rem;
    height: 2.35rem;
}

.h4-sales-service > p:empty {
    display: none;
}

.h4-sales-service > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.h4-sales-service h3,
.h4-sales-service p {
    margin-bottom: 0;
}

.h4-sales-service h3 a {
    color: var(--h4-sales-ink);
    text-decoration: none;
}

.h4-sales-service h3 a:hover,
.h4-sales-service h3 a:focus-visible {
    color: var(--h4-sales-teal);
}

.h4-sales-service p {
    font-size: 0.91rem;
}

.h4-sales-builder {
    color: #fff;
    background: #20282c;
}

.h4-sales-builder__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(19rem, 0.88fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5.6rem);
}

.h4-sales-builder__media {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #536167;
    border-radius: 4px;
    background: #fff;
}

.h4-sales-builder__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}

.h4-sales-builder__copy {
    min-width: 0;
}

.h4-sales-builder__copy .h4-product-eyebrow {
    color: #f2c14e !important;
}

.h4-sales-builder__copy h2 {
    max-width: 15ch;
    color: #fff !important;
}

.h4-sales-builder__copy > p:not(.h4-product-eyebrow) {
    color: #c8d2d6 !important;
}

.h4-sales-builder .h4-sales-button--dark {
    color: #11171a;
    border-color: #fff;
    background: #fff;
}

.h4-sales-builder .h4-sales-button--dark:hover,
.h4-sales-builder .h4-sales-button--dark:focus-visible {
    color: #11171a;
    border-color: #d4dde0;
    background: #d4dde0;
}

.h4-sales-builder__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.1rem;
    margin: 1.3rem 0;
    padding: 0;
    list-style: none;
}

.h4-sales-builder__facts li {
    position: relative;
    padding-left: 1rem;
    color: #dbe3e6;
    font-size: 0.8rem;
    font-weight: 720;
}

.h4-sales-builder__facts li::before {
    content: "";
    position: absolute;
    top: 0.48em;
    left: 0;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--h4-sales-teal);
}

.h4-sales-proof {
    background: #fff;
}

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

.h4-sales-proof__rail article {
    min-width: 0;
}

.h4-sales-proof .h4bs-website-snapshot-wrap,
.h4-sales-proof .h4bs-website-snapshot-link,
.h4-sales-proof .h4bs-website-snapshot-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.h4-sales-proof .h4bs-website-snapshot-frame {
    overflow: hidden;
    border: 1px solid var(--h4-sales-border);
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
}

.h4-sales-proof .h4bs-website-snapshot-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

.h4-sales-proof .h4bs-website-snapshot-caption {
    display: block;
    margin-top: 0.65rem;
    color: var(--h4-sales-ink);
    font-size: 0.9rem;
    font-weight: 760;
}

.h4-sales-proof__rail h3 {
    margin: 0.65rem 0 0;
    font-size: 1.05rem;
}

.h4-sales-proof__rail h3 a {
    color: var(--h4-sales-ink);
    text-decoration-color: rgb(12 104 107 / 38%);
    text-underline-offset: 0.18em;
}

.h4-sales-proof__rail h3 a:hover,
.h4-sales-proof__rail h3 a:focus-visible {
    color: var(--h4-sales-teal);
}

.h4-sales-faq {
    border-top: 1px solid var(--h4-sales-border);
    background: #fff;
}

.h4-sales-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 5.4rem;
}

.h4-sales-faq__grid > .h4-sales-section-heading {
    margin-bottom: 0;
}

.h4-sales-faq__list details {
    border-top: 1px solid var(--h4-sales-border);
    padding: 1.1rem 0;
}

.h4-sales-faq__list details:last-child {
    border-bottom: 1px solid var(--h4-sales-border);
}

.h4-sales-faq__list summary {
    cursor: pointer;
    color: var(--h4-sales-ink);
    font-size: 1rem;
    font-weight: 760;
}

.h4-sales-faq__list details p {
    margin: 0.8rem 0 0;
    font-size: 0.92rem;
}

.h4-sales-final {
    background: #0b0e11;
}

.h4-sales-final__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding-block: 4.4rem;
}

.h4-sales-final h2 {
    max-width: 19ch;
    margin-bottom: 0.7rem;
    color: #fff;
}

.h4-sales-final p {
    margin-bottom: 0;
    color: #bbc5c9;
}

.h4-sales-final .h4-sales-actions {
    justify-content: flex-end;
}

.h4-sales-text-link--light,
.h4-sales-text-link--light:hover,
.h4-sales-text-link--light:focus-visible {
    color: #fff;
}

.h4-sales-subhero h1 {
    max-width: 16ch;
    font-size: 3.2rem;
}

.h4-sales-subhero__note {
    margin-top: 1.25rem;
    margin-bottom: 0 !important;
    color: #647177 !important;
    font-size: 0.83rem !important;
}

.h4-sales-services--compact .h4-sales-shell {
    padding-block: 4.5rem;
}

.h4-global-header {
    background: rgb(11 14 17 / 97%);
    border-bottom-color: rgb(255 255 255 / 11%);
    backdrop-filter: blur(14px);
}

.h4-global-header__inner {
    width: min(100% - 2rem, 74rem);
    padding: 0.72rem 0;
    gap: 1.35rem;
}

.h4-global-header__brand-lockup {
    max-width: 11.4rem;
}

.h4-global-header__brand-logo {
    width: 10.9rem;
    max-height: 2.8rem;
}

.h4-global-header__nav {
    gap: 1.05rem;
}

.h4-global-header__nav a {
    color: #eef2f3;
    font-size: 0.82rem;
    font-weight: 680;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
}

.h4-global-header__nav a:hover,
.h4-global-header__nav a:focus-visible {
    color: #f0bd4a;
}

.h4-global-header__dropdown {
    border-radius: 6px;
}

.h4-global-header__dropdown a {
    border-radius: 4px;
}

.h4-global-header__sales-call,
.h4-global-header__cta {
    display: inline-flex;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0.72rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 820;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
}

.h4-global-header__sales-call {
    border: 1px solid rgb(255 255 255 / 34%);
    color: #fff;
    background: transparent;
}

.h4-global-header__sales-call:hover,
.h4-global-header__sales-call:focus-visible {
    color: #fff;
    border-color: #fff;
}

.h4-global-header__cta {
    border: 1px solid #d59f22;
    color: #11171a;
    background: #d59f22;
}

.h4-global-header__cta:hover,
.h4-global-header__cta:focus-visible {
    color: #11171a;
    border-color: #e3ae32;
    background: #e3ae32;
}

@media (max-width: 1080px) {
    .h4-global-header__nav {
        gap: 0.62rem;
    }

    .h4-global-header__nav a {
        font-size: 0.75rem;
    }

    .h4-global-header__sales-call,
    .h4-global-header__cta {
        padding-inline: 0.72rem;
        font-size: 0.73rem;
    }

    .h4-sales-hero__grid,
    .h4-sales-subhero__grid {
        gap: 2.6rem;
    }

    .h4-sales-home h1 {
        font-size: 3.25rem;
    }

    .h4-sales-services__grid,
    .h4-sales-builder__grid,
    .h4-sales-faq__grid {
        gap: 3rem;
    }
}

@media (min-width: 861px) and (max-width: 1280px) {
    .h4-global-header__inner {
        flex-wrap: nowrap;
        row-gap: 0;
    }

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

    .h4-global-header__brand-lockup {
        max-width: 8.4rem;
    }

    .h4-global-header__brand-logo {
        width: 8.2rem;
    }

    .h4-global-header__nav {
        order: initial;
        flex: 1 1 auto;
        width: auto;
        justify-content: center;
        flex-wrap: nowrap;
        row-gap: 0;
    }

    .h4-global-header__nav a {
        font-size: 0.72rem;
    }

    .h4-global-header__actions {
        width: auto;
        margin-left: 0;
        flex-wrap: nowrap;
    }
}

@media (max-width: 860px) {
    .h4-global-header__inner {
        width: 100%;
        padding: 0.72rem 1rem !important;
    }

    .h4-global-header__menu-toggle {
        border-radius: 4px !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .h4-global-header.is-open .h4-global-header__actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h4-global-header__sales-call,
    .h4-global-header__cta {
        width: 100%;
        min-height: 2.7rem !important;
    }

    .h4-global-header__nav > a,
    .h4-global-header__menu-item > a,
    .h4-global-header__dropdown a {
        border-radius: 4px !important;
    }

    .h4-sales-hero__grid,
    .h4-sales-subhero__grid {
        grid-template-columns: 1fr;
        gap: 2.3rem;
        padding-block: 2.5rem 1.8rem;
    }

    .h4-sales-home h1,
    .h4-sales-subhero h1 {
        max-width: 16ch;
        font-size: 3rem;
    }

    .h4-sales-home h2 {
        font-size: 2.15rem;
    }

    .h4-sales-journey__rail,
    .h4-sales-fit__rail,
    .h4-sales-plan-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h4-sales-journey__rail article:nth-child(3),
    .h4-sales-fit__rail article:nth-child(3) {
        margin-top: 2rem;
    }

    .h4-sales-plan:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--h4-sales-border);
    }

    .h4-sales-plan:nth-child(4) {
        border-top: 1px solid var(--h4-sales-border);
    }

    .h4-sales-services__grid,
    .h4-sales-builder__grid,
    .h4-sales-faq__grid {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .h4-sales-proof__rail {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .h4-sales-final__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .h4-sales-final .h4-sales-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .h4-sales-shell {
        width: min(100% - 1.5rem, 74rem);
    }

    .h4-sales-home h1,
    .h4-sales-subhero h1 {
        font-size: 2.4rem;
        line-height: 1.06;
    }

    .h4-sales-home h2 {
        font-size: 1.85rem;
    }

    .h4-sales-hero__copy > p,
    .h4-sales-subhero__grid > div > p {
        font-size: 1rem;
    }

    .h4-sales-actions,
    .h4-sales-actions .h4-sales-button {
        width: 100%;
    }

    .h4-sales-hero__copy .h4-sales-actions,
    .h4-sales-subhero .h4-sales-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h4-sales-hero__copy .h4-sales-button,
    .h4-sales-subhero .h4-sales-button {
        min-width: 0;
        padding-inline: 0.6rem;
        font-size: 0.82rem;
    }

    .h4-sales-trust {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
        font-size: 0.72rem;
    }

    .h4-sales-trust li {
        padding-left: 0.85rem;
    }

    .h4-sales-hero__media,
    .h4-sales-subhero figure {
        aspect-ratio: 16 / 7;
    }

    .h4-sales-journey .h4-sales-shell,
    .h4-sales-pricing .h4-sales-shell,
    .h4-sales-services .h4-sales-shell,
    .h4-sales-builder .h4-sales-shell,
    .h4-sales-proof .h4-sales-shell,
    .h4-sales-faq .h4-sales-shell,
    .h4-sales-fit .h4-sales-shell {
        padding-block: 3.8rem;
    }

    .h4-sales-journey__rail,
    .h4-sales-fit__rail,
    .h4-sales-plan-rail,
    .h4-sales-service-list--grid {
        grid-template-columns: 1fr;
    }

    .h4-sales-journey__rail article,
    .h4-sales-fit__rail article {
        margin-top: 0 !important;
        border-top: 1px solid #c8d1d5;
        border-left: 0;
        padding: 1.3rem 0;
    }

    .h4-sales-plan + .h4-sales-plan,
    .h4-sales-plan:nth-child(3),
    .h4-sales-plan:nth-child(4) {
        border-top: 1px solid var(--h4-sales-border);
        border-left: 0;
    }

    .h4-sales-plan__fit,
    .h4-sales-plan ul {
        min-height: 0;
    }

    .h4-sales-enterprise {
        align-items: flex-start;
        flex-direction: column;
    }

    .h4-sales-builder__facts {
        display: grid;
        grid-template-columns: 1fr;
    }

    .h4-sales-final__inner {
        padding-block: 3.5rem;
    }
}

/* Builder tutorial system */
.h4-tutorial {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    min-width: 0;
}

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

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

.h4-tutorial-section-heading h2 {
    margin: 0.25rem 0 0.6rem;
    color: var(--h4-text);
    font-family: "Montserrat", "Inter", sans-serif;
    font-size: clamp(1.8rem, 2.8vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.h4-tutorial-section-heading > p:last-child {
    margin-bottom: 0;
    color: var(--h4-muted);
    font-size: 1.02rem;
    line-height: 1.7;
}

.h4-tutorial-visual,
.h4-tutorial-videos,
.h4-tutorial-walkthrough,
.h4-tutorial-mistakes,
.h4-tutorial-next {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.h4-tutorial-visual {
    padding-block: clamp(0.5rem, 1.5vw, 1.2rem);
}

.h4-tutorial-visual__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
    gap: 1rem;
    margin-top: clamp(1rem, 2vw, 1.6rem);
}

.h4-tutorial-screen {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 8px;
    background: #12191f;
    box-shadow: 0 22px 52px rgb(0 0 0 / 28%);
}

.h4-tutorial-screen--primary {
    grid-row: span 2;
}

.h4-tutorial-screen__chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgb(255 255 255 / 9%);
    background: #091018;
}

.h4-tutorial-screen__chrome span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef6b5d;
}

.h4-tutorial-screen__chrome span:nth-child(2) {
    background: #efc45d;
}

.h4-tutorial-screen__chrome span:nth-child(3) {
    background: #55c79a;
}

.h4-tutorial-screen__chrome strong {
    margin-left: 0.35rem;
    color: rgb(235 242 245 / 70%);
    font-size: 0.72rem;
    letter-spacing: 0;
}

.h4-tutorial-screen__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #081018;
}

.h4-tutorial-screen__media img,
.h4-tutorial-screen__media video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: top left;
    background: #081018;
}

.h4-tutorial-screen__media img {
    transition: transform 180ms ease;
}

.h4-tutorial-screen__media video {
    object-fit: contain;
}

.h4-tutorial-screen__media:hover img,
.h4-tutorial-screen__media:focus-visible img {
    transform: scale(1.015);
}

.h4-tutorial-screen__number {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #0877c9;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 5px 16px rgb(0 0 0 / 38%);
}

.h4-tutorial-screen__zoom {
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    background: rgb(5 13 20 / 88%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}

.h4-tutorial-screen__copy {
    padding: 1rem;
}

.h4-tutorial-screen__copy h3 {
    margin: 0.2rem 0 0.45rem;
    color: #fff;
    font-size: 1.15rem;
    letter-spacing: 0;
}

.h4-tutorial-screen__copy p {
    color: rgb(235 242 245 / 78%);
    line-height: 1.6;
}

.h4-tutorial-screen__copy details {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgb(255 255 255 / 9%);
}

.h4-tutorial-screen__copy summary {
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.h4-tutorial-screen__copy details p {
    margin: 0.7rem 0 0;
}

.h4-tutorial-screen__check {
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(255 255 255 / 9%);
}

.h4-tutorial-screen__check strong {
    color: #9ce8dc;
}

.h4-tutorial-walkthrough {
    display: grid;
    grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1.45fr);
    gap: clamp(1.2rem, 3vw, 3rem);
    align-items: start;
    padding-block: clamp(1rem, 2vw, 2rem);
}

.h4-tutorial-walkthrough > .h4-tutorial-section-heading {
    position: sticky;
    top: 96px;
}

.h4-tutorial-steps {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.h4-tutorial-step {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 1rem;
    min-width: 0;
    padding: 0 0 1.5rem;
}

.h4-tutorial-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 46px;
    bottom: 0;
    left: 26px;
    width: 2px;
    background: linear-gradient(#0877c9, rgb(156 232 220 / 28%));
}

.h4-tutorial-step__number {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgb(156 232 220 / 42%);
    border-radius: 8px;
    background: #0b2232;
    color: #9ce8dc;
    font-size: 0.9rem;
    font-weight: 900;
}

.h4-tutorial-step__body {
    min-width: 0;
    padding: 0.2rem 0 1.35rem;
    border-bottom: 1px solid rgb(255 255 255 / 9%);
}

.h4-tutorial-step__body h3 {
    margin: 0;
    color: #fff;
    font-size: 1.28rem;
    letter-spacing: 0;
}

.h4-tutorial-step__action {
    margin: 0.45rem 0 0.9rem;
    color: rgb(235 242 245 / 88%);
    font-size: 1rem;
    line-height: 1.65;
}

.h4-tutorial-step__proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.h4-tutorial-step__proof p {
    margin: 0;
    padding: 0.75rem;
    border-left: 3px solid #0877c9;
    background: rgb(8 119 201 / 10%);
    color: var(--h4-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.h4-tutorial-step__proof strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.h4-tutorial-mistakes {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-block: 1px solid rgb(242 200 121 / 18%);
    background: linear-gradient(120deg, rgb(58 38 18 / 48%), rgb(12 20 27 / 20%));
}

.h4-tutorial-mistakes__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.h4-tutorial-mistakes__grid article {
    min-width: 0;
    padding-left: 1rem;
    border-left: 2px solid #f2c879;
}

.h4-tutorial-mistakes__grid article > span {
    color: #f2c879;
    font-size: 0.72rem;
    font-weight: 900;
}

.h4-tutorial-mistakes__grid h3 {
    margin: 0.35rem 0 0.5rem;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0;
}

.h4-tutorial-mistakes__grid p {
    margin: 0;
    color: var(--h4-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.h4-tutorial-next > .h4wp-card-grid {
    margin-top: 1.25rem;
}

.h4-tutorial-next__all {
    margin: 1rem 0 0;
}

.h4-tutorial-videos {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding-block: clamp(0.75rem, 2vw, 1.5rem);
}

.h4-tutorial-videos__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.35rem;
}

.h4-tutorial-video {
    display: grid;
    align-content: start;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgb(156 232 220 / 22%);
    border-radius: 8px;
    background: #0d1821;
    box-shadow: 0 18px 42px rgb(0 0 0 / 20%);
}

.h4-tutorial-video__media {
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    background: #050b10;
}

.h4-tutorial-video__media video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    background: #050b10;
}

.h4-tutorial-video__copy {
    min-width: 0;
    padding: 1.15rem;
}

.h4-tutorial-video__number {
    margin: 0 0 0.4rem;
    color: #9ce8dc;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.h4-tutorial-video__copy h3 {
    margin: 0 0 0.55rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.h4-tutorial-video__copy > p:not(.h4-tutorial-video__number) {
    color: #c8d8e0;
    line-height: 1.65;
}

.h4-tutorial-video__copy details {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgb(255 255 255 / 11%);
}

.h4-tutorial-video__copy summary {
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.h4-tutorial-video__copy details ol {
    display: grid;
    gap: 0.85rem;
    margin: 0.9rem 0 0;
    padding-left: 1.25rem;
}

.h4-tutorial-video__copy details li {
    color: #9ce8dc;
}

.h4-tutorial-video__copy details strong {
    color: #fff;
}

.h4-tutorial-video__copy details p {
    margin: 0.25rem 0 0;
    color: #c8d8e0;
    line-height: 1.65;
}

.h4-tutorial-video__copy summary:focus-visible,
.h4-tutorial-video__copy .button:focus-visible,
.h4-tutorial-video__media video:focus-visible {
    outline: 3px solid #f2c879;
    outline-offset: 3px;
}

.h4-doc-search {
    width: 100%;
    min-width: 0;
    margin-top: 1.25rem;
}

.h4-doc-search__controls {
    display: none;
    gap: 1rem;
    padding: clamp(1rem, 2.4vw, 1.75rem) 0;
    border-block: 1px solid rgb(156 232 220 / 24%);
}

.h4-doc-search[data-h4-doc-search-ready="1"] .h4-doc-search__controls {
    display: grid;
}

.h4-doc-search__field {
    width: min(100%, 760px);
}

.h4-doc-search__field > label {
    display: block;
    margin-bottom: 0.45rem;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
}

.h4-doc-search__field > div {
    position: relative;
}

.h4-doc-search__field input {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 0.72rem 3rem 0.72rem 0.9rem;
    border: 1px solid rgb(156 232 220 / 42%);
    border-radius: 6px;
    background: #fff;
    color: #102333;
    font: inherit;
}

.h4-doc-search__field input::placeholder {
    color: #526473;
    opacity: 1;
}

.h4-doc-search__field button {
    position: absolute;
    top: 5px;
    right: 5px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #e9f3f8;
    color: #102333;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
}

.h4-doc-search__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.h4-doc-search__filters button {
    min-height: 38px;
    padding: 0.5rem 0.72rem;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 4px;
    background: #111d27;
    color: #dce9ef;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 750;
    cursor: pointer;
}

.h4-doc-search__filters button[aria-pressed="true"] {
    border-color: #9ce8dc;
    background: #0877c9;
    color: #fff;
}

.h4-doc-search__field input:focus-visible,
.h4-doc-search__field button:focus-visible,
.h4-doc-search__filters button:focus-visible {
    outline: 3px solid #f2c879;
    outline-offset: 2px;
}

.h4-doc-search__status {
    margin: 0;
    color: #b9ccd5;
    font-size: 0.9rem;
    font-weight: 700;
}

.h4-doc-search__results {
    margin-top: 1.25rem;
}

.h4-doc-search__item[hidden],
.h4-doc-search__empty[hidden],
.h4-doc-search__field button[hidden] {
    display: none !important;
}

.h4-doc-search__empty {
    margin-top: 1.25rem;
    padding: 1.25rem 0;
    border-block: 1px solid rgb(242 200 121 / 28%);
}

.h4-doc-search__empty h3 {
    margin: 0 0 0.4rem;
    color: #fff;
    font-size: 1.2rem;
}

.h4-doc-search__empty p {
    max-width: 720px;
    margin: 0;
    color: var(--h4-muted);
}

.h4-tutorial-faq {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding-block: clamp(0.75rem, 2vw, 1.5rem);
}

.h4-tutorial-faq__items {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.h4-tutorial-faq__items details {
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 6px;
    background: #111a22;
}

.h4-tutorial-faq__items summary {
    padding: 1rem 1.15rem;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.h4-tutorial-faq__items details[open] summary {
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.h4-tutorial-faq__items p {
    margin: 0;
    padding: 1rem 1.15rem 1.15rem;
    color: var(--h4-muted);
    line-height: 1.7;
}

@media (max-width: 860px) {
    .h4-tutorial-visual__grid,
    .h4-tutorial-walkthrough {
        grid-template-columns: 1fr;
    }

    .h4-tutorial-screen--primary {
        grid-row: auto;
    }

    .h4-tutorial-walkthrough > .h4-tutorial-section-heading {
        position: static;
    }

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

    .h4-tutorial-videos__grid {
        grid-template-columns: 1fr;
    }

    .h4-doc-search__filters {
        flex-wrap: nowrap;
        margin-inline: -0.25rem;
        padding: 0.25rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .h4-doc-search__filters button {
        flex: 0 0 auto;
    }
}

@media (max-width: 600px) {
    .h4-tutorial {
        gap: 1.35rem;
    }

    .h4-tutorial-visual,
    .h4-tutorial-videos,
    .h4-tutorial-walkthrough,
    .h4-tutorial-next {
        width: 100%;
    }

    .h4-tutorial-section-heading h2 {
        font-size: 1.75rem;
    }

    .h4-tutorial-step {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 0.75rem;
    }

    .h4-tutorial-step__number {
        width: 42px;
        height: 42px;
    }

    .h4-tutorial-step:not(:last-child)::before {
        top: 36px;
        left: 20px;
    }

    .h4-tutorial-step__proof,
    .h4-tutorial-mistakes__grid {
        grid-template-columns: 1fr;
    }

    .h4-tutorial-mistakes {
        padding-inline: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .h4-tutorial-screen__media img {
        transition: none;
    }
}

