.colored-text {
    color: rgb(247, 66, 30);
}

.strikethrough-text {
    text-decoration: line-through;
}

/* Codex mobile LCP tuning 20260708-mobile-lcp1: mobile-only first viewport; keep desktop and secondary hero backgrounds unchanged. */
@media (max-width: 767px) {
    .header, #hoston-2, #hoston-3,
    .about__header, .reseller__header,
    .wordpress__header, .web__header, .vps__header {
        padding-top: 112px;
        padding-bottom: 72px;
    }
    .header__content h1,
    .header__content p {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Microsoft YaHei", sans-serif;
        text-rendering: optimizeSpeed;
    }
    .header__content h1 {
        font-size: clamp(24px, 7.2vw, 30px);
        line-height: 1.18;
    }
    .header__content p.mt-4 {
        margin-top: 12px !important;
        font-size: 14px;
        line-height: 1.55;
        opacity: .88;
    }
    .header__content .list-inline.mt-4 {
        margin-top: 16px !important;
        gap: 10px !important;
        flex-wrap: wrap;
    }
    .header__content .btn {
        min-height: 40px;
        padding: 9px 14px;
    }
    .header .col-lg-6 > img.img-fluid {
        max-width: min(84vw, 320px);
        height: auto;
        margin-top: 8px;
    }
}
@media (max-width: 420px) {
    .header__content p.mt-4 {
        font-size: 13.5px;
        line-height: 1.5;
    }
    .header .col-lg-6 > img.img-fluid {
        max-width: min(82vw, 300px);
    }
}

/* Codex mobile LCP tuning 20260708-mobile-lcp2: reduce mobile hero image footprint without hiding it. */
@media (max-width: 767px) {
    .header .col-lg-6 > img.img-fluid {
        max-width: min(64vw, 240px);
        margin-top: 14px;
    }
}
@media (max-width: 420px) {
    .header .col-lg-6 > img.img-fluid {
        max-width: min(60vw, 220px);
    }
}

/* Codex mobile LCP tuning 20260708-mobile-lcp3: homepage-only WebP hero background; no secondary-page override. */
.codex-home-hero {
    background-image: url('/static/image/header-bg.webp') !important;
}
@media (max-width: 767px) {
    .codex-home-hero .col-lg-6 > img.img-fluid {
        max-width: min(84vw, 320px);
        height: auto;
        margin-top: 8px;
    }
}
@media (max-width: 420px) {
    .codex-home-hero .col-lg-6 > img.img-fluid {
        max-width: min(82vw, 300px);
    }
}

/* Codex mobile LCP tuning 20260708-mobile-lcp8: home mobile first viewport only; desktop and secondary heroes stay unchanged. */
@media (max-width: 767px) {
    .codex-home-hero {
        min-height: auto !important;
        padding-top: 96px !important;
        padding-bottom: 48px !important;
        align-items: flex-start !important;
    }
    .codex-home-hero .container,
    .codex-home-hero .row {
        align-items: flex-start !important;
    }
    .codex-home-hero .row > .col-lg-6:nth-child(2),
    .codex-home-hero picture {
        display: none !important;
    }
    .codex-home-hero .header__content h1 {
        font-size: clamp(24px, 7vw, 30px) !important;
        line-height: 1.16 !important;
        margin-bottom: 0 !important;
    }
    .codex-home-hero .header__content p.mt-4 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        max-height: 7.8em;
        margin-top: 10px !important;
        line-height: 1.52 !important;
    }
    .codex-home-hero .header__content .list-inline {
        margin-top: 14px !important;
    }
}

/* Codex mobile LCP tuning 20260708-mobile-lcp9: remove home mobile background-image from LCP path only. */
@media (max-width: 767px) {
    .codex-home-hero {
        background-image: linear-gradient(135deg, #8b0da8 0%, #35107d 46%, #111068 100%) !important;
        padding-top: 92px !important;
        padding-bottom: 36px !important;
    }
}

/* Codex mobile LCP tuning 20260708-mobile-lcp10: keep cookie notice compact so it does not become mobile LCP. */
@media (max-width: 767px) {
    #ck-banner {
        padding: 8px 10px !important;
        max-height: 58px !important;
        overflow: hidden !important;
    }
    #ck-banner .ck-content,
    #ck-banner .ck-actions {
        margin: 0 !important;
    }
    #ck-banner .ck-content p,
    #ck-banner p {
        font-size: 11px !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }
}

/* Codex mobile LCP tuning 20260708-mobile-lcp11: compact above-fold copy blocks for mobile LCP. */
@media (max-width: 767px) {
    .codex-home-hero .header__content h1 {
        font-size: clamp(20px, 6.2vw, 26px) !important;
        line-height: 1.12 !important;
    }
    .codex-home-hero .header__content p.mt-4 {
        font-size: 13px !important;
        line-height: 1.42 !important;
        -webkit-line-clamp: 3 !important;
        max-height: 4.4em !important;
    }
}

/* Codex mobile LCP tuning 20260708-mobile-lcp12: tighter mobile hero summary text. */
@media (max-width: 767px) {
    .codex-home-hero .header__content p.mt-4 {
        -webkit-line-clamp: 2 !important;
        max-height: 2.9em !important;
    }
}

/* Codex mobile visual safety 20260708-mobile-lcp13: prevent mobile horizontal overflow. */
@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden !important;
    }
    header,
    section,
    .container,
    .row {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    h1,
    h2,
    h3,
    p {
        overflow-wrap: anywhere;
    }
}

/* Codex mobile visual safety 20260708-mobile-lcp14: keep IP content sections inside viewport. */
@media (max-width: 767px) {
    .section__style--2,
    .section__style--2 .sub-title,
    .section__style--2 .sub-title p,
    .section__style--2 h2,
    .section__style--2 h3 {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
    .section__style--2 .sub-title {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Codex mobile visual safety 20260708-mobile-lcp15: make IP section intro wrap before viewport edge. */
@media (max-width: 767px) {
    .section__style--2 .sub-title p {
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
}