/* ==========================================================
   LOCALHOSTING UK — HOSTING PAGE
   Twenty-One theme / localhostinguk
   Mockup-matched version
   ========================================================== */


/* ==========================================================
   PAGE TOKENS
   ========================================================== */

.lhuk-hosting-page {
    --lhuk-bg: #ffffff;
    --lhuk-surface: #f4f3fb;
    --lhuk-surface-2: #eeedf7;

    --lhuk-border: rgba(31, 34, 80, 0.16);
    --lhuk-border-strong: rgba(109, 78, 255, 0.62);

    --lhuk-text: #171a3b;
    --lhuk-heading: #151936;
    --lhuk-muted: #69708e;

    --lhuk-accent: #7357e8;
    --lhuk-accent-soft: #8c72f2;
    --lhuk-button-text: #ffffff;

    width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0 0 88px;

    background: var(--lhuk-bg);
    color: var(--lhuk-text);

    transition:
        background-color .25s ease,
        color .25s ease;
}


/* ==========================================================
   REMOVE WHMCS MAIN-BODY GUTTERS FOR THIS PAGE ONLY
   The actual content is still constrained by the
   .lhuk-hosting-container below.
   ========================================================== */

#main-body:has(.lhuk-hosting-page) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#main-body:has(.lhuk-hosting-page) > .container {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#main-body:has(.lhuk-hosting-page) > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ==========================================================
   INNER CONTENT WIDTH
   Matches the Claude mockup composition.
   ========================================================== */

.lhuk-hosting-container {
    width: min(1160px, calc(100% - 48px));

    margin: 0 auto;

    box-sizing: border-box;
}


/* ==========================================================
   HERO
   ========================================================== */

.lhuk-hosting-hero {
    padding: 70px 0 54px;
}

.lhuk-hosting-eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 20px;
    padding: 9px 16px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--lhuk-accent);
    border-radius: 999px;
}

.lhuk-hosting-title {
    display: block;
    width: 100%;
    max-width: 820px !important;
    margin: 0;
    color: var(--lhuk-heading) !important;
    font-size: clamp(48px, 4.1vw, 38px) !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    letter-spacing: -.045em !important;
}

.lhuk-hosting-intro {
    max-width: 720px;
    margin: 24px 0 0;
    color: var(--lhuk-muted);
    font-size: 17px;
    line-height: 1.75;
}


/* ==========================================================
   HOSTING CARDS
   ========================================================== */

.lhuk-hosting-grid {
    display: grid !important;

    width: 100%;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    align-items: start;

    margin: 0;
    padding: 0;
}

.lhuk-hosting-card {
    display: block;

    width: 100%;
    min-width: 0;

    margin: 0 !important;

    overflow: hidden;

    box-sizing: border-box;

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

    border-radius: 28px;

    background:
        var(--lhuk-surface);

    box-shadow:
        0 10px 30px rgba(20, 22, 50, .04);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}

.lhuk-hosting-card:hover {
    transform: translateY(-3px);

    border-color:
        var(--lhuk-border-strong);

    box-shadow:
        0 18px 42px rgba(75, 51, 150, .10);
}


/* ==========================================================
   CARD SKETCH / IMAGE PLACEHOLDER
   ========================================================== */

.lhuk-card-sketch {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 126px;

    margin: 28px 28px 0;
    padding: 24px;

    box-sizing: border-box;

    border:
        1px dashed
        var(--lhuk-border-strong);

    border-radius: 22px;

    color: var(--lhuk-muted);

    text-align: center;

    font-size: 14px;
    line-height: 1.45;
}

.lhuk-card-sketch span {
    display: block;

    max-width: 245px;
}


/* ==========================================================
   CARD BODY
   ========================================================== */

.lhuk-card-body {
    padding: 23px 28px 28px;
}

.lhuk-card-body h2 {
    margin: 0 0 12px;

    color: var(--lhuk-heading) !important;

    font-size: 23px !important;
    line-height: 1.2 !important;

    font-weight: 500 !important;
    letter-spacing: -.025em !important;
}

.lhuk-card-body p {
    min-height: 72px;

    margin: 0;

    color: var(--lhuk-muted);

    font-size: 15px;
    line-height: 1.55;
}


/* ==========================================================
   PRICE
   ========================================================== */

.lhuk-card-price {
    margin: 20px 0 18px;

    color:
        var(--lhuk-accent-soft);

    font-size: 15px;
    line-height: 1.4;

    font-weight: 600;
}


/* ==========================================================
   CARD BUTTON
   ========================================================== */

.lhuk-card-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 40px;

    padding: 8px 16px;

    box-sizing: border-box;

    border:
        1px solid
        var(--lhuk-border-strong);

    border-radius: 999px;

    color:
        var(--lhuk-accent-soft);

    background: transparent;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 600;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.lhuk-card-button:hover,
.lhuk-card-button:focus {
    color: var(--lhuk-button-text);

    background: var(--lhuk-accent);
    border-color: var(--lhuk-accent);

    transform: translateY(-1px);
}


/* ==========================================================
   FOURTH CARD
   Mockup uses 3 cards on row one and SSL on row two,
   aligned to the first column.
   ========================================================== */

.lhuk-hosting-card:nth-child(4) {
    grid-column: 1;
}


/* ==========================================================
   INCLUDED SECTION
   ========================================================== */

.lhuk-hosting-included {
    margin-top: 72px;

    padding: 44px;

    box-sizing: border-box;

    border:
        1px solid
        transparent;

    border-radius: 34px;

    background:
        var(--lhuk-surface-2);
}


/* ==========================================================
   INCLUDED HEADING
   ========================================================== */

.lhuk-included-heading {
    max-width: 760px;
}

.lhuk-included-heading h2 {
    margin: 0;

    color:
        var(--lhuk-heading) !important;

    font-size:
        clamp(30px, 3.1vw, 42px) !important;

    line-height: 1.05 !important;

    font-weight: 500 !important;

    letter-spacing: -.035em !important;
}

.lhuk-included-heading p {
    margin: 14px 0 0;

    color:
        var(--lhuk-muted);

    font-size: 15px;
    line-height: 1.55;
}


/* ==========================================================
   INCLUDED GRID
   ========================================================== */

.lhuk-included-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-top: 38px;
}

.lhuk-included-item {
    min-height: 108px;

    padding: 0 22px;

    border-left:
        1px solid
        var(--lhuk-border-strong);

    box-sizing: border-box;
}

.lhuk-included-item:nth-child(1),
.lhuk-included-item:nth-child(5) {
    padding-left: 0;

    border-left: 0;
}

.lhuk-included-item:nth-child(n + 5) {
    margin-top: 30px;
}

.lhuk-included-item h3 {
    margin: 0 0 7px;

    color:
        var(--lhuk-heading) !important;

    font-size: 16px !important;
    line-height: 1.3 !important;

    font-weight: 600 !important;
}

.lhuk-included-item p {
    margin: 0;

    color:
        var(--lhuk-muted);

    font-size: 14px;
    line-height: 1.5;
}


/* ==========================================================
   OPTIONAL STORY / CAMERA-ROLL SECTION
   These styles are safe to keep if the corresponding
   markup is added later. CSS cannot create the content
   itself if those elements are not present in hosting.php.
   ========================================================== */

.lhuk-hosting-story {
    margin-top: 86px;
    padding-top: 56px;

    border-top:
        1px solid
        var(--lhuk-border);
}

.lhuk-story-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 40px;
}

.lhuk-story-kicker {
    margin: 0 0 14px;

    color:
        var(--lhuk-accent-soft);

    font-size: 12px;
    line-height: 1;

    font-weight: 700;
    letter-spacing: .20em;

    text-transform: uppercase;
}

.lhuk-story-heading h2 {
    max-width: 720px;

    margin: 0;

    color:
        var(--lhuk-heading);

    font-size:
        clamp(30px, 3vw, 42px);

    line-height: 1.08;

    font-weight: 500;

    letter-spacing: -.035em;
}

.lhuk-story-heading p {
    max-width: 300px;

    margin: 2px 0 0;

    color:
        var(--lhuk-muted);

    font-size: 14px;
    line-height: 1.5;
    text-align: right;
}

.lhuk-story-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 14px;

    margin-top: 32px;

    overflow: hidden;
}

.lhuk-story-item {
    min-width: 0;
}

.lhuk-story-image {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 180px;

    border:
        1px dashed
        var(--lhuk-border-strong);

    border-radius: 22px;

    color:
        var(--lhuk-muted);

    text-align: center;

    font-size: 13px;
}

.lhuk-story-item p {
    margin: 10px 0 0;

    color:
        var(--lhuk-muted);

    font-size: 13px;
    line-height: 1.45;
}

.lhuk-story-item small {
    display: block;

    margin-top: 4px;

    color:
        var(--lhuk-muted);

    opacity: .75;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

body.dark-mode .lhuk-hosting-page,
body.theme-dark .lhuk-hosting-page,
body[data-theme="dark"] .lhuk-hosting-page,
body.dark .lhuk-hosting-page,
.dark-mode .lhuk-hosting-page,
.theme-dark .lhuk-hosting-page {

    --lhuk-bg: #141625;

    --lhuk-surface: #222534;
    --lhuk-surface-2: #242738;

    --lhuk-border:
        rgba(177, 177, 208, .20);

    --lhuk-border-strong:
        rgba(145, 115, 255, .68);

    --lhuk-text: #a5a7bd;
    --lhuk-heading: #f0eff7;
    --lhuk-muted: #9295ad;

    --lhuk-accent: #8b6df2;
    --lhuk-accent-soft: #a997ff;

    --lhuk-button-text: #ffffff;
}


/*
 * The WHMCS main-body itself needs the same dark background
 * so the mockup does not show a white strip around the page.
 */

body.dark-mode #main-body:has(.lhuk-hosting-page),
body.theme-dark #main-body:has(.lhuk-hosting-page),
body[data-theme="dark"] #main-body:has(.lhuk-hosting-page),
body.dark #main-body:has(.lhuk-hosting-page) {
    background: #141625;
}

body.dark-mode .lhuk-hosting-card,
body.theme-dark .lhuk-hosting-card,
body[data-theme="dark"] .lhuk-hosting-card,
body.dark .lhuk-hosting-card,
.dark-mode .lhuk-hosting-card,
.theme-dark .lhuk-hosting-card {
    box-shadow: none;
}


/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 991px) {

    .lhuk-hosting-container {
        width: min(100% - 36px, 760px);
    }

    .lhuk-hosting-hero {
        padding: 58px 0 42px;
    }

    .lhuk-hosting-title {
        max-width: 720px !important;
        font-size: clamp(44px, 7vw, 60px) !important;
    }

    .lhuk-hosting-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .lhuk-hosting-card:nth-child(4) {
        grid-column: auto;
    }

    .lhuk-included-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .lhuk-included-item:nth-child(1),
    .lhuk-included-item:nth-child(5) {
        padding-left: 0;
        border-left: 0;
    }

    .lhuk-included-item:nth-child(2),
    .lhuk-included-item:nth-child(4),
    .lhuk-included-item:nth-child(6) {
        border-left:
            1px solid
            var(--lhuk-border-strong);
    }

    .lhuk-story-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .lhuk-hosting-page {
        padding-bottom: 60px;
    }

    .lhuk-hosting-container {
        width: min(100% - 28px, 620px);
    }

    .lhuk-hosting-hero {
        padding: 48px 0 34px;
    }

    .lhuk-hosting-title {
        max-width: 100% !important;

        font-size:
            clamp(40px, 12vw, 56px) !important;

        line-height: 1 !important;
    }

    .lhuk-hosting-intro {
        margin-top: 20px;
        font-size: 16px;
    }

    .lhuk-hosting-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .lhuk-hosting-card:nth-child(4) {
        grid-column: auto;
    }

    .lhuk-card-sketch {
        min-height: 115px;
        margin: 20px 20px 0;
    }

    .lhuk-card-body {
        padding: 20px;
    }

    .lhuk-card-body p {
        min-height: 0;
    }

    .lhuk-hosting-included {
        margin-top: 50px;

        padding: 28px 22px;

        border-radius: 26px;
    }

    .lhuk-included-heading h2 {
        font-size: 32px !important;
    }

    .lhuk-included-grid {
        grid-template-columns: 1fr;
        margin-top: 30px;
    }

    .lhuk-included-item,
    .lhuk-included-item:nth-child(n + 5) {
        min-height: auto;

        margin-top: 0;
        margin-bottom: 24px;

        padding: 0 0 24px !important;

        border-left: 0 !important;

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

    .lhuk-included-item:last-child {
        margin-bottom: 0;

        padding-bottom: 0 !important;

        border-bottom: 0 !important;
    }

    .lhuk-story-heading {
        flex-direction: column;
        gap: 14px;
    }

    .lhuk-story-heading p {
        max-width: 100%;
        text-align: left;
    }

    .lhuk-story-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================
   REDUCE MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .lhuk-hosting-page,
    .lhuk-hosting-card,
    .lhuk-card-button {
        transition: none;
    }

    .lhuk-hosting-card:hover,
    .lhuk-card-button:hover {
        transform: none;
    }
}


/* ==========================================================
   DARK MODE — WHMCS / LAGOM THEME STATE
   IMPORTANT:
   The theme toggle can apply its state to <html> rather than
   <body>. These selectors intentionally cover both.
   ========================================================== */

/* Page variables */
html.dark .lhuk-hosting-page,
html.dark-mode .lhuk-hosting-page,
html.theme-dark .lhuk-hosting-page,
html.mode-dark .lhuk-hosting-page,
html.is-dark .lhuk-hosting-page,
html[data-theme="dark"] .lhuk-hosting-page,
html[data-color-scheme="dark"] .lhuk-hosting-page,
html[data-color-mode="dark"] .lhuk-hosting-page,
html[data-mode="dark"] .lhuk-hosting-page,

body.dark .lhuk-hosting-page,
body.dark-mode .lhuk-hosting-page,
body.theme-dark .lhuk-hosting-page,
body.mode-dark .lhuk-hosting-page,
body.is-dark .lhuk-hosting-page,
body[data-theme="dark"] .lhuk-hosting-page,
body[data-color-scheme="dark"] .lhuk-hosting-page,
body[data-color-mode="dark"] .lhuk-hosting-page,
body[data-mode="dark"] .lhuk-hosting-page,

.dark .lhuk-hosting-page,
.dark-mode .lhuk-hosting-page,
.theme-dark .lhuk-hosting-page,
.mode-dark .lhuk-hosting-page,
.is-dark .lhuk-hosting-page,
[data-theme="dark"] .lhuk-hosting-page,
[data-color-scheme="dark"] .lhuk-hosting-page,
[data-color-mode="dark"] .lhuk-hosting-page,
[data-mode="dark"] .lhuk-hosting-page {

    --lhuk-bg: #141625;
    --lhuk-surface: #222534;
    --lhuk-surface-2: #242738;

    --lhuk-border: rgba(177, 177, 208, .20);
    --lhuk-border-strong: rgba(145, 115, 255, .68);

    --lhuk-text: #a5a7bd;
    --lhuk-heading: #f0eff7;
    --lhuk-muted: #9295ad;

    --lhuk-accent: #8b6df2;
    --lhuk-accent-soft: #a997ff;
    --lhuk-button-text: #ffffff;

    color-scheme: dark;
}


/* Main page background */
html.dark #main-body:has(.lhuk-hosting-page),
html.dark-mode #main-body:has(.lhuk-hosting-page),
html.theme-dark #main-body:has(.lhuk-hosting-page),
html.mode-dark #main-body:has(.lhuk-hosting-page),
html.is-dark #main-body:has(.lhuk-hosting-page),
html[data-theme="dark"] #main-body:has(.lhuk-hosting-page),
html[data-color-scheme="dark"] #main-body:has(.lhuk-hosting-page),
html[data-color-mode="dark"] #main-body:has(.lhuk-hosting-page),
html[data-mode="dark"] #main-body:has(.lhuk-hosting-page),

body.dark #main-body:has(.lhuk-hosting-page),
body.dark-mode #main-body:has(.lhuk-hosting-page),
body.theme-dark #main-body:has(.lhuk-hosting-page),
body.mode-dark #main-body:has(.lhuk-hosting-page),
body.is-dark #main-body:has(.lhuk-hosting-page),
body[data-theme="dark"] #main-body:has(.lhuk-hosting-page),
body[data-color-scheme="dark"] #main-body:has(.lhuk-hosting-page),
body[data-color-mode="dark"] #main-body:has(.lhuk-hosting-page),
body[data-mode="dark"] #main-body:has(.lhuk-hosting-page) {

    background: #141625 !important;
}


/* Cards */
html.dark .lhuk-hosting-card,
html.dark-mode .lhuk-hosting-card,
html.theme-dark .lhuk-hosting-card,
html[data-theme="dark"] .lhuk-hosting-card,
html[data-color-scheme="dark"] .lhuk-hosting-card,
html[data-color-mode="dark"] .lhuk-hosting-card,
html[data-mode="dark"] .lhuk-hosting-card,

body.dark .lhuk-hosting-card,
body.dark-mode .lhuk-hosting-card,
body.theme-dark .lhuk-hosting-card,
body[data-theme="dark"] .lhuk-hosting-card,
body[data-color-scheme="dark"] .lhuk-hosting-card,
body[data-color-mode="dark"] .lhuk-hosting-card,
body[data-mode="dark"] .lhuk-hosting-card {

    background: #222534 !important;
    border-color: rgba(177, 177, 208, .20);
    box-shadow: none;
}


/* Included/specifications panel */
html.dark .lhuk-hosting-included,
html.dark-mode .lhuk-hosting-included,
html.theme-dark .lhuk-hosting-included,
html[data-theme="dark"] .lhuk-hosting-included,
html[data-color-scheme="dark"] .lhuk-hosting-included,
html[data-color-mode="dark"] .lhuk-hosting-included,
html[data-mode="dark"] .lhuk-hosting-included,

body.dark .lhuk-hosting-included,
body.dark-mode .lhuk-hosting-included,
body.theme-dark .lhuk-hosting-included,
body[data-theme="dark"] .lhuk-hosting-included,
body[data-color-scheme="dark"] .lhuk-hosting-included,
body[data-color-mode="dark"] .lhuk-hosting-included,
body[data-mode="dark"] .lhuk-hosting-included {

    background: #242738 !important;
    border-color: transparent;
}


/* Text colours — force them above Twenty-One defaults */
html.dark .lhuk-hosting-title,
html.dark-mode .lhuk-hosting-title,
html.theme-dark .lhuk-hosting-title,
html[data-theme="dark"] .lhuk-hosting-title,
html[data-color-scheme="dark"] .lhuk-hosting-title,
html[data-color-mode="dark"] .lhuk-hosting-title,
html[data-mode="dark"] .lhuk-hosting-title,

body.dark .lhuk-hosting-title,
body.dark-mode .lhuk-hosting-title,
body.theme-dark .lhuk-hosting-title,
body[data-theme="dark"] .lhuk-hosting-title,
body[data-color-scheme="dark"] .lhuk-hosting-title,
body[data-color-mode="dark"] .lhuk-hosting-title,
body[data-mode="dark"] .lhuk-hosting-title {

    color: #f0eff7 !important;
}


html.dark .lhuk-card-body h2,
html.dark-mode .lhuk-card-body h2,
html.theme-dark .lhuk-card-body h2,
html[data-theme="dark"] .lhuk-card-body h2,
html[data-color-scheme="dark"] .lhuk-card-body h2,
html[data-color-mode="dark"] .lhuk-card-body h2,
html[data-mode="dark"] .lhuk-card-body h2,

body.dark .lhuk-card-body h2,
body.dark-mode .lhuk-card-body h2,
body.theme-dark .lhuk-card-body h2,
body[data-theme="dark"] .lhuk-card-body h2,
body[data-color-scheme="dark"] .lhuk-card-body h2,
body[data-color-mode="dark"] .lhuk-card-body h2,
body[data-mode="dark"] .lhuk-card-body h2 {

    color: #f0eff7 !important;
}


html.dark .lhuk-included-heading h2,
html.dark-mode .lhuk-included-heading h2,
html.theme-dark .lhuk-included-heading h2,
html[data-theme="dark"] .lhuk-included-heading h2,
html[data-color-scheme="dark"] .lhuk-included-heading h2,
html[data-color-mode="dark"] .lhuk-included-heading h2,
html[data-mode="dark"] .lhuk-included-heading h2,

body.dark .lhuk-included-heading h2,
body.dark-mode .lhuk-included-heading h2,
body.theme-dark .lhuk-included-heading h2,
body[data-theme="dark"] .lhuk-included-heading h2,
body[data-color-scheme="dark"] .lhuk-included-heading h2,
body[data-color-mode="dark"] .lhuk-included-heading h2,
body[data-mode="dark"] .lhuk-included-heading h2 {

    color: #f0eff7 !important;
}


/* Muted copy */
html.dark .lhuk-hosting-intro,
html.dark .lhuk-card-body p,
html.dark .lhuk-card-sketch,
html.dark .lhuk-included-heading p,
html.dark .lhuk-included-item p,
html.dark-mode .lhuk-hosting-intro,
html.dark-mode .lhuk-card-body p,
html.dark-mode .lhuk-card-sketch,
html.dark-mode .lhuk-included-heading p,
html.dark-mode .lhuk-included-item p,
html.theme-dark .lhuk-hosting-intro,
html.theme-dark .lhuk-card-body p,
html.theme-dark .lhuk-card-sketch,
html.theme-dark .lhuk-included-heading p,
html.theme-dark .lhuk-included-item p,
html[data-theme="dark"] .lhuk-hosting-intro,
html[data-theme="dark"] .lhuk-card-body p,
html[data-theme="dark"] .lhuk-card-sketch,
html[data-theme="dark"] .lhuk-included-heading p,
html[data-theme="dark"] .lhuk-included-item p,

body.dark .lhuk-hosting-intro,
body.dark .lhuk-card-body p,
body.dark .lhuk-card-sketch,
body.dark .lhuk-included-heading p,
body.dark .lhuk-included-item p,
body.dark-mode .lhuk-hosting-intro,
body.dark-mode .lhuk-card-body p,
body.dark-mode .lhuk-card-sketch,
body.dark-mode .lhuk-included-heading p,
body.dark-mode .lhuk-included-item p,
body.theme-dark .lhuk-hosting-intro,
body.theme-dark .lhuk-card-body p,
body.theme-dark .lhuk-card-sketch,
body.theme-dark .lhuk-included-heading p,
body.theme-dark .lhuk-included-item p,
body[data-theme="dark"] .lhuk-hosting-intro,
body[data-theme="dark"] .lhuk-card-body p,
body[data-theme="dark"] .lhuk-card-sketch,
body[data-theme="dark"] .lhuk-included-heading p,
body[data-theme="dark"] .lhuk-included-item p {

    color: #9295ad !important;
}


/* Dark-mode card sketch and divider lines */
html.dark .lhuk-card-sketch,
html.dark-mode .lhuk-card-sketch,
html.theme-dark .lhuk-card-sketch,
html[data-theme="dark"] .lhuk-card-sketch,
body.dark .lhuk-card-sketch,
body.dark-mode .lhuk-card-sketch,
body.theme-dark .lhuk-card-sketch,
body[data-theme="dark"] .lhuk-card-sketch {

    border-color: rgba(145, 115, 255, .68);
}


/* Dark-mode story section, when present */
html.dark .lhuk-hosting-story,
html.dark-mode .lhuk-hosting-story,
html.theme-dark .lhuk-hosting-story,
html[data-theme="dark"] .lhuk-hosting-story,
body.dark .lhuk-hosting-story,
body.dark-mode .lhuk-hosting-story,
body.theme-dark .lhuk-hosting-story,
body[data-theme="dark"] .lhuk-hosting-story {

    border-top-color: rgba(177, 177, 208, .20);
}


/* Dark-mode button */
html.dark .lhuk-card-button:hover,
html.dark-mode .lhuk-card-button:hover,
html.theme-dark .lhuk-card-button:hover,
html[data-theme="dark"] .lhuk-card-button:hover,
body.dark .lhuk-card-button:hover,
body.dark-mode .lhuk-card-button:hover,
body.theme-dark .lhuk-card-button:hover,
body[data-theme="dark"] .lhuk-card-button:hover {

    color: #ffffff !important;
    background: #8b6df2 !important;
    border-color: #8b6df2 !important;
}


/* ==========================================================
   DARK MODE — KEEP THE WHOLE HOSTING AREA DARK
   ========================================================== */

html.dark:has(.lhuk-hosting-page),
html.dark-mode:has(.lhuk-hosting-page),
html.theme-dark:has(.lhuk-hosting-page),
html[data-theme="dark"]:has(.lhuk-hosting-page),
html[data-color-scheme="dark"]:has(.lhuk-hosting-page),
html[data-color-mode="dark"]:has(.lhuk-hosting-page),
html[data-mode="dark"]:has(.lhuk-hosting-page),

body.dark:has(.lhuk-hosting-page),
body.dark-mode:has(.lhuk-hosting-page),
body.theme-dark:has(.lhuk-hosting-page),
body[data-theme="dark"]:has(.lhuk-hosting-page),
body[data-color-scheme="dark"]:has(.lhuk-hosting-page),
body[data-color-mode="dark"]:has(.lhuk-hosting-page),
body[data-mode="dark"]:has(.lhuk-hosting-page) {

    background: #141625 !important;
}

.lhuk-card-sketch.lhuk-wordpress-visual{
    min-height:260px;
    margin:28px 28px 0;
    padding:10px;
    border:0 !important;
    background:transparent;
}

.lhuk-card-mascot{
    display:block;
    width:auto;
    height:235px;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    transform-origin:50% 85%;
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

@media (max-width:767px){
    .lhuk-card-sketch.lhuk-wordpress-visual{
        min-height:220px;
        margin:20px 20px 0;
    }

    .lhuk-wordpress-mascot{
        height:195px;
    }
}

@media (prefers-reduced-motion:reduce){
    .lhuk-wordpress-mascot{
        animation:none;
    }
}