/* LUMOHOSTING / HOME HERO V2 — all rules scoped to the replacement section.
   Load AFTER main.css. No global header, pricing or studio selectors. */
.lumo-human-hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 82% 34%,#edfbdc 0%,transparent 43%),linear-gradient(110deg,#fff 0%,#fbfdf9 65%,#f6fcee 100%);color:#101b29;padding:clamp(48px,5.8vw,86px) 0 18px}
.lumo-human-hero::before{content:"";pointer-events:none;position:absolute;inset:0;background-image:radial-gradient(#b6d69d 0.8px,transparent 0.8px);background-size:24px 24px;opacity:.2;mask-image:linear-gradient(90deg,transparent 42%,#000 100%);z-index:-1}
.lumo-human-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.lumo-human-hero__copy{position:relative;z-index:5;min-width:0;padding:16px 0 24px}
.lumo-human-hero__eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.75rem;font-weight:840;letter-spacing:.115em;color:#416d2c}
.lumo-human-hero__spark{display:grid;place-items:center;width:31px;height:31px;border:1px solid #cfedb6;border-radius:10px;background:#eafbd9;font-size:1.2rem;color:#478626}
.lumo-human-hero h1{margin:24px 0 0;max-width:680px;font-weight:850;font-size:clamp(3.1rem,4.9vw,5.35rem);letter-spacing:-.063em;line-height:1.03;text-wrap:balance}
.lumo-human-hero h1 span{display:block;color:#458c2e}
.lumo-human-hero__lead{max-width:560px;margin:24px 0 0;color:#596b60;font-size:clamp(1rem,1.15vw,1.13rem);line-height:1.75}
.lumo-human-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.lumo-human-hero__button{min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:12px 24px;border-radius:13px;font-weight:800;font-size:.91rem;line-height:1.25;text-align:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.lumo-human-hero__button:hover{transform:translateY(-2px)}
.lumo-human-hero__button--primary{background:linear-gradient(125deg,#caff3f,#86e23e);color:#111e14;box-shadow:0 12px 27px #79bd402e}
.lumo-human-hero__button--primary:hover{box-shadow:0 16px 32px #79bd4052}
.lumo-human-hero__button--secondary{background:#fff;border:1px solid #cddac7;color:#172a1b}
.lumo-human-hero__button--secondary:hover{border-color:#7eb953}
.lumo-human-hero__benefits{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;list-style:none;padding:0;margin:25px 0 0;color:#3d5644;font-size:.85rem;font-weight:720}
.lumo-human-hero__benefits li{display:inline-flex;align-items:center;gap:7px}
.lumo-human-hero__benefits li>span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#ddf6c3;color:#427e23;font-size:.75rem}
.lumo-human-hero__help{display:inline-flex;align-items:center;gap:10px;margin-top:27px;padding:8px 17px 8px 9px;background:#fff;border:1px solid #dfead7;border-radius:18px;box-shadow:0 12px 30px #253b1710;transition:border-color .2s ease}
.lumo-human-hero__help:hover{border-color:#abd987}
.lumo-human-hero__help-icon{display:grid;place-items:center;width:41px;height:41px;border-radius:12px;background:#e6f9d0;color:#4c8f2e;font-size:1.2rem}
.lumo-human-hero__help strong,.lumo-human-hero__help small{display:block;line-height:1.4}
.lumo-human-hero__help strong{color:#1e2c23;font-size:.78rem}.lumo-human-hero__help small{margin-top:1px;color:#4b862c;font-size:.72rem;font-weight:700}
/* MAIN PORTRAIT COMPOSITION */
.lumo-human-hero__scene{position:relative;min-width:0;width:100%;max-width:625px;aspect-ratio:1/1.04;margin:0 auto;isolation:isolate}
.lumo-human-hero__halo{position:absolute;inset:10% 7% 8% 9%;border-radius:52% 48% 49% 51%;background:radial-gradient(circle at 40% 34%,#f9fff3,#def7c1 65%,#bfe89e 100%);box-shadow:inset 0 0 0 1px #7db65033}
.lumo-human-hero__orbit{position:absolute;inset:6% 2% 7% 5%;border-radius:50%;border:1px solid #cde7ba;transform:rotate(-16deg);pointer-events:none}
.lumo-human-hero__orbit--two{inset:0 0 2% 0;border-style:dashed;opacity:.54;transform:rotate(17deg)}
.lumo-human-hero__portrait-wrap{position:absolute;inset:5% 11% 9% 10%;z-index:2;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:44% 45% 25% 22%;background:linear-gradient(155deg,#e5f9d0 5%,#f7fdf1 60%,#d0eeb7 100%)}
.lumo-human-hero__portrait{display:block;width:100%;height:100%;object-fit:cover;object-position:center 24%;filter:saturate(.94)}
/* Real pricing from includes/pricing.php: no invented amount */
.lumo-human-hero__price-card{position:absolute;top:19%;left:-3%;z-index:5;width:min(42%,215px);padding:16px 17px 15px;border-radius:20px;background:#fff;border:1px solid #edf0e9;box-shadow:0 24px 55px #10291826;transform:rotate(-3deg)}
.lumo-human-hero__price-top{display:flex;align-items:center;gap:8px;color:#2c3b2d;font-size:.67rem;font-weight:900;letter-spacing:.07em}
.lumo-human-hero__price-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#c9f65a;color:#1e3a19;font-size:1.1rem}
.lumo-human-hero__price-mark{margin-left:auto;color:#629b3c;font-size:1.2rem}
.lumo-human-hero__price{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin:12px 0 0;color:#122032}
.lumo-human-hero__price span{font-size:.73rem;font-weight:700;color:#647366}
.lumo-human-hero__price strong{font-size:clamp(1.9rem,3.5vw,3.1rem);line-height:1;font-weight:900;letter-spacing:-.05em}
.lumo-human-hero__price--fallback strong{font-size:1.35rem}
.lumo-human-hero__price-card p{margin:10px 0 11px;color:#637265;font-size:.68rem;line-height:1.4}
.lumo-human-hero__price-card>a{font-size:.76rem;color:#397c25;font-weight:800}
/* WEBSITE MINIATURE, DISTINCT FROM THE LARGE PROJECT STUDIO BELOW */
.lumo-human-hero__site-card{position:absolute;z-index:4;right:-2%;bottom:8%;width:45%;padding:7px;border-radius:14px;background:#fff;box-shadow:0 20px 46px #1931212e;transform:rotate(7deg);border:1px solid #dae9d0}
.lumo-human-hero__site-chrome{display:flex;align-items:center;gap:3px;background:#142332;border-radius:8px 8px 0 0;padding:8px 9px}
.lumo-human-hero__site-chrome i{width:5px;height:5px;border-radius:100%;background:#8b9caa}.lumo-human-hero__site-chrome i:first-child{background:#b7f52a}.lumo-human-hero__site-chrome span{margin-left:auto;font-size:.48rem;color:#e0e9eb;letter-spacing:.03em}
.lumo-human-hero__site-body{display:grid;grid-template-columns:1.1fr .9fr;gap:10px;align-items:center;padding:13px 12px;background:#f7fcef}
.lumo-human-hero__site-lines{display:grid;gap:6px}.lumo-human-hero__site-lines b{display:block;width:100%;height:5px;border-radius:3px;background:#d1e3c3}.lumo-human-hero__site-lines b:nth-child(1){width:65%;height:9px;background:#1f4230}.lumo-human-hero__site-lines b:nth-child(3){width:77%}.lumo-human-hero__site-lines em{display:block;width:55%;height:11px;border-radius:4px;background:#b7f52a}
.lumo-human-hero__site-image{display:grid;place-items:center;min-height:73px;border-radius:11px;background:radial-gradient(circle at 30% 35%,#e9ffd0,#a1dc79);color:#2b712e;font-size:2.3rem}
.lumo-human-hero__site-note{display:block;padding:7px 4px 3px;color:#617967;font-size:.57rem;letter-spacing:.1em;font-weight:850}
.lumo-human-hero__ssl{position:absolute;z-index:6;right:2%;top:13%;display:flex;align-items:center;gap:8px;padding:10px 14px 10px 9px;border:1px solid #e1ecd9;border-radius:13px;background:#fff;box-shadow:0 14px 34px #17341d1a;transform:rotate(5deg)}
.lumo-human-hero__ssl span{display:grid;place-items:center;background:#e4f9ce;color:#4c902b;width:28px;height:28px;border-radius:9px;font-weight:900}.lumo-human-hero__ssl strong{font-size:.73rem;color:#29432c;white-space:nowrap}
.lumo-human-hero__float-star{position:absolute;color:#83bd4c;font-size:1.8rem;z-index:3}.lumo-human-hero__float-star--one{right:5%;top:37%}.lumo-human-hero__float-star--two{left:15%;bottom:15%;font-size:1.15rem}
.lumo-human-hero__bottom{display:flex;align-items:center;gap:9px;padding:10px 0 1px;color:#4c7950;font-size:.76rem;font-weight:750}.lumo-human-hero__bottom-symbol{font-size:1.15rem;color:#5aab31}
@media(max-width:1050px){.lumo-human-hero__grid{grid-template-columns:1fr;gap:14px}.lumo-human-hero__copy{max-width:780px}.lumo-human-hero h1{max-width:820px;font-size:clamp(3rem,6.3vw,5rem)}.lumo-human-hero__scene{max-width:610px}.lumo-human-hero__bottom{justify-content:center}}
@media(max-width:650px){.lumo-human-hero{padding:48px 0 19px}.lumo-human-hero__eyebrow{font-size:.66rem;letter-spacing:.07em}.lumo-human-hero h1{font-size:clamp(2.55rem,10.4vw,3.7rem);line-height:1.08;margin-top:19px}.lumo-human-hero__lead{margin-top:20px;font-size:.98rem;line-height:1.68}.lumo-human-hero__actions{display:grid;gap:10px;margin-top:24px}.lumo-human-hero__button{width:100%;min-height:50px}.lumo-human-hero__benefits{gap:8px 12px;font-size:.74rem}.lumo-human-hero__help{margin-top:22px}.lumo-human-hero__scene{max-width:490px;margin-top:13px;aspect-ratio:1/1.09}.lumo-human-hero__price-card{left:0;top:17%;width:45%;border-radius:15px;padding:12px 11px}.lumo-human-hero__price-top{font-size:.56rem}.lumo-human-hero__price-icon{width:22px;height:22px}.lumo-human-hero__price{margin-top:9px}.lumo-human-hero__price strong{font-size:clamp(1.55rem,7vw,2.55rem)}.lumo-human-hero__price-card p{font-size:.58rem}.lumo-human-hero__price-card>a{font-size:.66rem}.lumo-human-hero__site-card{right:0;bottom:5%;width:47%}.lumo-human-hero__site-image{min-height:50px}.lumo-human-hero__ssl{right:0;top:7%;padding:6px 9px}.lumo-human-hero__ssl span{width:23px;height:23px}.lumo-human-hero__ssl strong{font-size:.64rem}.lumo-human-hero__bottom{font-size:.7rem}}
@media(max-width:390px){.lumo-human-hero h1{font-size:2.42rem}.lumo-human-hero__site-chrome span{display:none}.lumo-human-hero__site-note{font-size:.47rem}.lumo-human-hero__price-card{top:14%}.lumo-human-hero__price strong{font-size:1.62rem}}
@media(prefers-reduced-motion:reduce){.lumo-human-hero__button{transition:none}.lumo-human-hero__button:hover{transform:none}}

/* =============================================================
   V3: PRICE TICKET COMPOSITION / SCOPED OVERRIDES
   Intentionally placed at the end to override the V2 desktop,
   tablet and mobile placement rules. The PHP price remains dynamic.
============================================================= */

/* Restore a clear focal area around the subject's upper-body gesture. */
.lumo-human-hero .lumo-human-hero__price-card {
    top: 58%;
    left: -2%;
    right: auto;
    bottom: auto;
    z-index: 6;
    width: min(39%, 205px);
    padding: 17px 17px 15px;
    border: 1px solid rgba(192, 225, 166, .84);
    border-radius: 21px;
    background:
        radial-gradient(circle at 100% 0%, rgba(215, 255, 170, .70), transparent 47%),
        linear-gradient(155deg, #fff 0%, #fdfff8 63%, #f2fbe8 100%);
    box-shadow:
        0 25px 52px rgba(15, 50, 26, .17),
        0 5px 13px rgba(15, 50, 26, .08),
        inset 0 1px 0 rgba(255, 255, 255, .96);
    transform: rotate(-4deg);
    transform-origin: 70% 50%;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}

/* Offset lime paper behind the white price ticket. */
.lumo-human-hero .lumo-human-hero__price-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8px -7px -8px 8px;
    border-radius: inherit;
    background: linear-gradient(150deg, #dfff96, #84cb51);
    border: 1px solid rgba(56, 124, 41, .17);
    transform: rotate(4deg);
    pointer-events: none;
}

/* Small decorative corner glint—not a claim or discount badge. */
.lumo-human-hero .lumo-human-hero__price-card::after {
    content: "✳";
    position: absolute;
    top: -15px;
    right: -13px;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 12px;
    background: #142b25;
    color: #caff3f;
    border: 3px solid #fff;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(15, 40, 25, .18);
    transform: rotate(14deg);
    pointer-events: none;
}

.lumo-human-hero .lumo-human-hero__price-top {
    padding-bottom: 9px;
    border-bottom: 1px dashed #d7e7ce;
    letter-spacing: .075em;
}

.lumo-human-hero .lumo-human-hero__price-icon {
    background: #d9faab;
    border: 1px solid #caed9a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.lumo-human-hero .lumo-human-hero__price {
    margin-top: 13px;
    gap: 3px;
}

.lumo-human-hero .lumo-human-hero__price strong {
    color: #132335;
    letter-spacing: -.065em;
}

.lumo-human-hero .lumo-human-hero__price-card p {
    margin: 9px 0 12px;
    color: #52695a;
}

.lumo-human-hero .lumo-human-hero__price-card > a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 27px;
    border-bottom: 1px solid currentColor;
    text-underline-offset: 3px;
}

/* A motion cue only on intentional interaction; nothing constantly moves. */
@media (hover: hover) and (pointer: fine) {
    .lumo-human-hero .lumo-human-hero__price-card:hover,
    .lumo-human-hero .lumo-human-hero__price-card:focus-within {
        transform: translateY(-7px) rotate(-2deg);
        box-shadow:
            0 33px 65px rgba(15, 50, 26, .20),
            0 8px 18px rgba(15, 50, 26, .09);
    }
}

@media (max-width: 1050px) {
    .lumo-human-hero .lumo-human-hero__price-card {
        top: 57%;
        left: 0;
        width: min(39%, 205px);
    }
}

@media (max-width: 650px) {
    .lumo-human-hero .lumo-human-hero__price-card {
        top: 58%;
        left: 0;
        width: 43%;
        padding: 11px 11px 10px;
        border-radius: 15px;
    }
    .lumo-human-hero .lumo-human-hero__price-card::before {
        inset: 5px -4px -5px 5px;
    }
    .lumo-human-hero .lumo-human-hero__price-card::after {
        right: -8px;
        top: -10px;
        width: 23px;
        height: 23px;
        font-size: .8rem;
        border-width: 2px;
        border-radius: 8px;
    }
    .lumo-human-hero .lumo-human-hero__price-top {
        padding-bottom: 6px;
    }
    .lumo-human-hero .lumo-human-hero__price {
        margin-top: 8px;
    }
    .lumo-human-hero .lumo-human-hero__price-card p {
        margin: 6px 0 6px;
    }
    .lumo-human-hero .lumo-human-hero__price-card > a {
        min-height: 21px;
    }
}

@media (max-width: 390px) {
    .lumo-human-hero .lumo-human-hero__price-card {
        top: 61%;
        left: 0;
        width: 45%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lumo-human-hero .lumo-human-hero__price-card {
        transition: none;
    }
    .lumo-human-hero .lumo-human-hero__price-card:hover,
    .lumo-human-hero .lumo-human-hero__price-card:focus-within {
        transform: rotate(-4deg);
    }
}

/* ============================================================
   HERO V4: BRAND ICON + WEBSITE MINIATURE
   Brand appears ONCE in the price-card corner; the mock website
   uses its own UI illustration instead of repeating the logo.
   Relies on the existing favicon path used by includes/header.php.
============================================================ */

/* Replace the decorative star on the price ticket with the brand mark. */
.lumo-human-hero .lumo-human-hero__price-card::after {
    content: "";
    background-color: #142b25;
    background-image: url('/assets/images/branding/favicon-48x48.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 23px 23px;
    transform: rotate(0deg);
}

/* A tiny recognizable website preview, NOT a second brand symbol. */
.lumo-human-hero .lumo-human-hero__site-image {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 25% 20%, #e8ffd0, #a2de7c);
}

/* Hide the old decorative glyph without altering the PHP/HTML. */
.lumo-human-hero .lumo-human-hero__site-image > span {
    font-size: 0;
    line-height: 0;
}

/* Browser top bar, with the mock website body beneath it. */
.lumo-human-hero .lumo-human-hero__site-image::before {
    content: "";
    position: absolute;
    width: 58%;
    height: 60%;
    border: 2px solid #244b2e;
    border-radius: 6px;
    background: linear-gradient(to bottom, #244b2e 0 24%, #f7fff0 24% 100%);
    transform: rotate(-7deg);
    box-shadow: 3px 4px 0 #659e4d55;
}

/* Website content: a headline, supporting lines and small CTA block. */
.lumo-human-hero .lumo-human-hero__site-image::after {
    content: "";
    position: absolute;
    left: 29%;
    top: 49%;
    width: 26%;
    height: 7%;
    border-radius: 2px;
    background: #2e5a37;
    box-shadow:
        0 8px 0 -1px #a0c88a,
        0 14px 0 -1px #a0c88a,
        0 22px 0 1px #99e42d;
    transform: rotate(-7deg);
}

@media (max-width: 650px) {
    .lumo-human-hero .lumo-human-hero__price-card::after {
        background-size: 19px 19px;
    }
    .lumo-human-hero .lumo-human-hero__site-image::before {
        border-width: 1.5px;
        border-radius: 4px;
    }
    .lumo-human-hero .lumo-human-hero__site-image::after {
        box-shadow:
            0 6px 0 -1px #a0c88a,
            0 11px 0 -1px #a0c88a,
            0 16px 0 0 #99e42d;
    }
}

/* V5: readable mobile price ticket and keyboard access */
.lumo-human-hero *,
.lumo-human-hero *::before,
.lumo-human-hero *::after { box-sizing: border-box; }
.lumo-human-hero a:focus-visible {
    outline: 3px solid #367526;
    outline-offset: 5px;
}
.lumo-human-hero .lumo-human-hero__price-card > a { min-height: 44px; }
.lumo-human-hero .lumo-human-hero__help { min-height: 60px; }
@media (max-width: 650px) {
    .lumo-human-hero .lumo-human-hero__scene {
        aspect-ratio: auto;
        padding-top: 100%;
        padding-bottom: 12px;
    }
    .lumo-human-hero .lumo-human-hero__halo { inset: 5% 7% 37% 9%; }
    .lumo-human-hero .lumo-human-hero__orbit { inset: 3% 2% 36% 5%; }
    .lumo-human-hero .lumo-human-hero__orbit--two { inset: 0 0 34%; }
    .lumo-human-hero .lumo-human-hero__portrait-wrap {
        inset: 3% 11% auto 10%;
        height: auto;
        aspect-ratio: .9;
    }
    .lumo-human-hero .lumo-human-hero__price-card {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 16px);
        max-width: 360px;
        margin: 12px auto 0;
        padding: 16px 18px;
        transform: none;
    }
    .lumo-human-hero .lumo-human-hero__price-top { font-size: .72rem; }
    .lumo-human-hero .lumo-human-hero__price { margin-top: 12px; gap: 5px; }
    .lumo-human-hero .lumo-human-hero__price strong { font-size: 2.6rem; }
    .lumo-human-hero .lumo-human-hero__price--fallback strong { font-size: 1.35rem; }
    .lumo-human-hero .lumo-human-hero__price-card p { font-size: .78rem; }
    .lumo-human-hero .lumo-human-hero__price-card > a { font-size: .82rem; min-height: 44px; }
    .lumo-human-hero .lumo-human-hero__site-card { top: 37%; bottom: auto; right: 0; }
    .lumo-human-hero .lumo-human-hero__float-star--two { bottom: auto; top: 53%; }
    .lumo-human-hero .lumo-human-hero__price-card:hover,
    .lumo-human-hero .lumo-human-hero__price-card:focus-within { transform: none; }
}

/* V6: hero typography refinement */
.lumo-human-hero h1 {
    letter-spacing: -.045em;
    line-height: 1.08;
}
.lumo-human-hero .lumo-human-hero__lead {
    max-width: 52ch;
    color: #46594d;
    font-size: clamp(1.0625rem, 1.15vw, 1.125rem);
    line-height: 1.75;
    text-wrap: pretty;
}
@media (max-width: 650px) {
    .lumo-human-hero h1 {
        font-size: clamp(2.375rem, 9.8vw, 3.25rem);
        letter-spacing: -.035em;
        line-height: 1.12;
    }
    .lumo-human-hero .lumo-human-hero__lead {
        font-size: 1rem;
        line-height: 1.7;
    }
}
@media (max-width: 480px) {
    .lumo-human-hero h1 {
        font-size: clamp(2.375rem, 10vw, 2.75rem);
    }
}

/* V7: mobile dashboard status and page spacing */
@media (max-width: 650px) {
    .infra-panel .infra-panel-header,
    .vps-console-card .vps-console-header {
        flex-wrap: wrap;
        gap: 14px;
    }
    .infra-panel .infra-panel-header > div,
    .vps-console-card .vps-console-header > div { min-width: 0; }
    .infra-panel .infra-status,
    .vps-console-card .vps-console-status {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: max-content;
        max-width: 100%;
        height: auto;
        flex: 0 0 auto;
        white-space: normal;
    }
    /* Only empty spans are decorative status dots. */
    .infra-panel .infra-status span:empty,
    .vps-console-card .vps-console-status span:empty {
        display: inline-block;
        width: 8px;
        height: 8px;
        flex: 0 0 8px;
    }
    .infra-panel .infra-status span:not(:empty),
    .vps-console-card .vps-console-status span:not(:empty) {
        position: static;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: auto;
        height: auto;
        min-width: 0;
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        white-space: nowrap;
        line-height: 1.4;
    }
    .lumo-human-hero { padding-top: 32px; }
    .lumo-human-hero .lumo-human-hero__grid { gap: 8px; }
    .lumo-human-hero .lumo-human-hero__copy { padding-bottom: 8px; }
    .lumo-human-hero .lumo-human-hero__scene { margin-top: 0; }
    .pricing-section .pricing-card { padding: 24px 20px; }
    .pricing-section .pricing-card-head p {
        min-height: 0;
        margin-top: 8px;
    }
    .pricing-section .pricing-price { margin-top: 20px; flex-wrap: wrap; row-gap: 8px; }
    .pricing-section .pricing-btn { margin-top: 18px; min-height: 50px; }
    .pricing-section .pricing-divider { margin: 20px 0 18px; }
    .pricing-section .pricing-feature-title { margin-bottom: 12px; }
}

/* V8: cover the matching status badge in the final CTA */
@media (max-width: 650px) {
    .final-cta-dashboard .final-cta-dashboard-top { flex-wrap: wrap; gap: 14px; }
    .final-cta-dashboard .final-cta-dashboard-top > div { min-width: 0; }
    .final-cta-dashboard .final-cta-status {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: max-content;
        max-width: 100%;
        height: auto;
        flex: 0 0 auto;
        white-space: normal;
    }
    .final-cta-dashboard .final-cta-status span:empty {
        display: inline-block;
        width: 8px;
        height: 8px;
        flex: 0 0 8px;
    }
    .final-cta-dashboard .final-cta-status span:not(:empty) {
        position: static;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: auto;
        height: auto;
        min-width: 0;
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        white-space: nowrap;
        line-height: 1.4;
    }
}

/* ============================================================
   V9 / MOBILE-FIRST HERO COMPOSITION (2026-10-25)
   The story is visible immediately: headline, human, price, CTA.
   Desktop remains unchanged. No JavaScript, extra image or font.
============================================================ */
@media (max-width: 650px) {
  .lumo-human-hero { padding: 17px 0 18px; }
  .lumo-human-hero .lumo-human-hero__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* Turn the existing copy wrapper into a presentation-only wrapper.
     No duplicated artwork or duplicate mobile H1. */
  .lumo-human-hero .lumo-human-hero__copy { display: contents; }
  .lumo-human-hero .lumo-human-hero__eyebrow { order: 1; font-size: .61rem; gap: 7px; }
  .lumo-human-hero .lumo-human-hero__spark { width: 26px; height: 26px; }
  .lumo-human-hero h1 {
    order: 2;
    margin: 10px 0 0;
    font-size: clamp(2rem, 8.9vw, 2.72rem);
    line-height: 1.07;
    letter-spacing: -.047em;
    max-width: 17ch;
    text-wrap: balance;
  }
  .lumo-human-hero h1 span { display: inline; }
  .lumo-human-hero .lumo-human-hero__scene {
    order: 3;
    flex: none;
    width: 100%;
    max-width: 390px;
    height: clamp(230px, 66vw, 310px);
    margin: 11px auto 0;
    padding: 0;
    aspect-ratio: auto;
    overflow: visible;
  }
  .lumo-human-hero .lumo-human-hero__halo { inset: 4% 12% 4% 19%; }
  .lumo-human-hero .lumo-human-hero__orbit { inset: 0 8% 2% 14%; }
  .lumo-human-hero .lumo-human-hero__orbit--two { inset: 0 9% 1% 12%; }
  .lumo-human-hero .lumo-human-hero__portrait-wrap {
    inset: 0 13% 0 21%;
    height: auto;
    aspect-ratio: auto;
    border-radius: 43% 43% 18% 18%;
  }
  .lumo-human-hero .lumo-human-hero__portrait { object-position: center 20%; }
  /* Price is now attached to the portrait rather than below it. */
  .lumo-human-hero .lumo-human-hero__price-card {
    position: absolute;
    top: auto;
    bottom: 7%;
    left: 0;
    right: auto;
    width: min(48%, 174px);
    max-width: none;
    margin: 0;
    padding: 10px 11px 9px;
    border-radius: 15px;
    transform: rotate(-3deg);
  }
  .lumo-human-hero .lumo-human-hero__price-top { font-size: .57rem; padding-bottom: 4px; gap: 5px; }
  .lumo-human-hero .lumo-human-hero__price-icon { width: 21px; height: 21px; }
  .lumo-human-hero .lumo-human-hero__price { margin: 8px 0 0; gap: 3px; }
  .lumo-human-hero .lumo-human-hero__price strong { font-size: clamp(1.67rem, 7vw, 2.2rem); }
  .lumo-human-hero .lumo-human-hero__price--fallback strong { font-size: 1rem; }
  .lumo-human-hero .lumo-human-hero__price-card p { font-size: .6rem; margin: 6px 0 3px; }
  .lumo-human-hero .lumo-human-hero__price-card > a { min-height: 30px; font-size: .69rem; }
  .lumo-human-hero .lumo-human-hero__price-card:hover,
  .lumo-human-hero .lumo-human-hero__price-card:focus-within { transform: rotate(-3deg); }
  .lumo-human-hero .lumo-human-hero__site-card,
  .lumo-human-hero .lumo-human-hero__float-star,
  .lumo-human-hero .lumo-human-hero__ssl { display: none; }
  .lumo-human-hero .lumo-human-hero__actions {
    order: 4;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
    margin-top: 15px;
    width: 100%;
  }
  .lumo-human-hero .lumo-human-hero__button { min-height: 47px; padding: 9px 13px; font-size: .78rem; gap: 6px; }
  .lumo-human-hero .lumo-human-hero__button--secondary { padding-inline: 12px; }
  .lumo-human-hero .lumo-human-hero__lead {
    order: 5;
    margin: 15px 0 0;
    font-size: .9rem;
    line-height: 1.52;
    color: #46594d;
  }
  .lumo-human-hero .lumo-human-hero__benefits {
    order: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 12px;
    font-size: .7rem;
  }
  .lumo-human-hero .lumo-human-hero__benefits li > span { width: 17px; height: 17px; }
  .lumo-human-hero .lumo-human-hero__help { order: 7; margin-top: 15px; }
  .lumo-human-hero .lumo-human-hero__bottom { padding-top: 15px; }
}
@media (max-width: 360px) {
  .lumo-human-hero h1 { font-size: 2rem; }
  .lumo-human-hero .lumo-human-hero__scene { height: 220px; }
  .lumo-human-hero .lumo-human-hero__actions { grid-template-columns: 1fr; }
  .lumo-human-hero .lumo-human-hero__button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lumo-human-hero .lumo-human-hero__price-card { transition: none; }
}

/* ============================================================
   V10 / MOBILE-FIRST REFINEMENT
   Distinguishes the company homepage from a Web Hosting page.
   Smaller decorative elements; leave desktop hero untouched.
============================================================ */
.lumo-human-hero__services { display: none; }
@media (max-width: 650px) {
  .lumo-human-hero .lumo-human-hero__services {
    display: block;
    order: 2;
    margin: 10px 0 0;
    max-width: 100%;
    font-size: clamp(.65rem, 2.75vw, .77rem);
    line-height: 1.5;
    color: #375d36;
    font-weight: 740;
    letter-spacing: -.012em;
  }
  .lumo-human-hero__services span { color: #84aa73; padding-inline: 2px; }
  .lumo-human-hero .lumo-human-hero__scene {
    height: clamp(245px, 69vw, 320px);
    margin-top: 9px;
  }
  .lumo-human-hero .lumo-human-hero__portrait-wrap {
    inset: 0 9% 0 17%;
  }
  .lumo-human-hero .lumo-human-hero__portrait {
    object-position: center 20%;
  }
  .lumo-human-hero .lumo-human-hero__price-card {
    left: 0;
    bottom: 5%;
    width: min(47%, 178px);
  }
  .lumo-human-hero .lumo-human-hero__actions { margin-top: 12px; }
}
@media (max-width: 360px) {
  .lumo-human-hero .lumo-human-hero__scene { height: 235px; }
  .lumo-human-hero .lumo-human-hero__services { font-size: .65rem; }
}