/* ==========================================================
   HOSTING MAGAZINE
   PAGE: GUIDE

   Page-specific composition only.
   Shared components remain in 20-hm-components.css.
   ========================================================== */


/* PAGE / THEME */

.hm2026-guide{
    background:var(--hm-bg);
    color:var(--hm-text-700);
}

body.postid-176 h1.entry-title,
body.postid-176 .entry-title,
body.postid-176 .page-title{
    display:none!important;
}

body.postid-176 .site-content,
body.postid-176 .content-wrap,
body.postid-176 .content-area,
body.postid-176 .site-main,
body.postid-176 .entry-content{
    margin-top:0!important;
    padding-top:0!important;
}


/* HERO */

.hm2026-guide .guide-hero{
    position:relative;
    overflow:hidden;
    padding:82px 0 76px;

    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(37,99,235,.30),
            transparent 31%
        ),
        radial-gradient(
            circle at 72% 100%,
            rgba(5,150,105,.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--hm-navy-950) 0%,
            var(--hm-navy-900) 58%,
            #172554 100%
        );

    color:#cbd5e1;
}

.hm2026-guide .guide-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.10;

    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size:58px 58px;
}

.hm2026-guide .guide-hero-grid{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,1.12fr)
        minmax(340px,.88fr);

    gap:62px;
    align-items:center;
}

.hm2026-guide .guide-hero h1{
    max-width:820px!important;
    margin:0 0 20px!important;

    color:#fff!important;

    font-size:52px!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
}

.hm2026-guide .guide-hero-copy{
    max-width:760px;
    margin:0 0 27px!important;

    color:#cbd5e1;

    font-size:17px;
    line-height:1.68;
}

.hm2026-guide .guide-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-top:18px;
}

.hm2026-guide .guide-meta span{
    display:inline-flex;
    align-items:center;

    min-height:34px;

    padding:7px 11px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;

    background:rgba(255,255,255,.055);
    color:#e2e8f0;

    font-size:11px;
    line-height:1;
    font-weight:750;
}


/* HERO ACTIONS */

.hm2026-guide .hero-actions{
    display:flex;
    flex-wrap:wrap;

    gap:10px;
    margin-top:25px;
}

.hm2026-guide .hero-actions .btn{
    min-height:46px;
}


/* HERO CHECK */

.hm2026-guide .hero-check{
    padding:18px;

    border:1px solid rgba(255,255,255,.15);
    border-radius:var(--hm-radius-lg);

    background:rgba(255,255,255,.075);

    box-shadow:0 28px 65px rgba(0,0,0,.24);
}

.hm2026-guide .hero-check-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;
    margin-bottom:14px;
}

.hm2026-guide .hero-check-label{
    color:#a7f3d0;

    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.hm2026-guide .hero-check-time{
    color:#94a3b8;
    font-size:10px;
    font-weight:700;
}

.hm2026-guide .hero-check-main{
    padding:20px;

    border-radius:var(--hm-radius-md);
    background:#fff;
}

.hm2026-guide .hero-check-row{
    display:grid;
    grid-template-columns:36px minmax(0,1fr);

    gap:12px;
    align-items:start;

    padding:12px 0;

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

.hm2026-guide .hero-check-row:first-child{
    padding-top:0;
}

.hm2026-guide .hero-check-row:last-child{
    padding-bottom:0;
    border-bottom:0;
}

.hm2026-guide .hero-check-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    border-radius:var(--hm-radius-sm);

    background:var(--hm-green-050);
    color:var(--hm-green-700);

    font-size:10px;
    font-weight:950;
}

.hm2026-guide .hero-check-row strong{
    display:block;

    margin-bottom:3px;

    color:var(--hm-text-900);
    font-size:13px;
}

.hm2026-guide .hero-check-row p{
    margin:0!important;

    color:var(--hm-text-500);

    font-size:11.5px;
    line-height:1.6;
}


/* BODY */

.hm2026-guide .guide-body{
    position:relative;
    padding:72px 0 80px;
}

.hm2026-guide .guide-intro{
    max-width:900px;
    margin:0 auto 46px;
}

.hm2026-guide .guide-intro p{
    font-size:16px;
    line-height:1.8;
}

.hm2026-guide .guide-text{
    min-width:0;
}

.hm2026-guide .guide-text > p{
    font-size:15px;
    line-height:1.82;
}


/* TOC */

.hm2026-guide .guide-toc{
    display:grid;

    grid-template-columns:minmax(0,1fr) 280px;

    gap:42px;
    align-items:start;
}

.hm2026-guide .toc-side{
    position:sticky;
    top:110px;
}

.hm2026-guide .toc-title{
    margin-bottom:12px;

    color:var(--hm-text-900);

    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.hm2026-guide .toc-side a{
    display:block;

    padding:8px 0;

    border-bottom:1px solid var(--hm-border-soft);

    color:var(--hm-text-700);

    font-size:12px;
    line-height:1.4;
}

.hm2026-guide .toc-side a:hover{
    color:var(--hm-blue-600);
}


/* GUIDE BLOCKS */

.hm2026-guide .guide-block{
    margin-bottom:64px;
    scroll-margin-top:110px;
}

.hm2026-guide .guide-block > h2{
    margin-bottom:16px!important;

    font-size:32px!important;
    line-height:1.15!important;
    letter-spacing:-.02em!important;
}

.hm2026-guide .guide-block > p{
    max-width:880px;

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


/* HOSTING TYPES */

.hm2026-guide .hosting-types{
    display:grid;

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

    gap:18px;
    margin-top:28px;
}

.hm2026-guide .hosting-type{
    min-width:0;
}

.hm2026-guide .hosting-type-head{
    display:flex;
    align-items:flex-start;

    gap:13px;
    margin-bottom:13px;
}

.hm2026-guide .hosting-type h3{
    margin:0!important;
    font-size:20px!important;
}

.hm2026-guide .hosting-type p{
    font-size:13px;
    line-height:1.7;
}


/* METRICS */

.hm2026-guide .metric-cards{
    gap:16px;
    margin-top:26px;
}

.hm2026-guide .metric-card{
    min-width:0;
}

.hm2026-guide .metric-card .hm-icon{
    margin-bottom:15px;
}

.hm2026-guide .metric-card h3{
    margin-bottom:8px!important;
    font-size:18px!important;
}

.hm2026-guide .metric-card p{
    margin:0!important;

    color:var(--hm-text-500);

    font-size:12.5px;
    line-height:1.65;
}


/* REQUIREMENTS */

.hm2026-guide .require-grid{
    gap:17px;
    margin-top:26px;
}

.hm2026-guide .require-card{
    min-width:0;
}

.hm2026-guide .require-card h3{
    font-size:18px!important;
}

.hm2026-guide .require-list{
    display:grid;

    gap:8px;
    margin-top:15px;
}

.hm2026-guide .require-list li{
    font-size:12px;
    line-height:1.55;
}


/* QUESTIONS */

.hm2026-guide .question-grid{
    gap:16px;
    margin-top:28px;
}

.hm2026-guide .question-card{
    position:relative;
    min-width:0;
}

.hm2026-guide .question-number{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    margin-bottom:14px;

    border-radius:var(--hm-radius-sm);

    background:var(--hm-blue-050);
    color:var(--hm-blue-600);

    font-size:10px;
    font-weight:950;
}

.hm2026-guide .question-card h3{
    font-size:18px!important;
}

.hm2026-guide .question-card p{
    margin-bottom:0!important;

    font-size:12.5px;
    line-height:1.68;
}


/* PRICE */

.hm2026-guide .price-anatomy{
    display:grid;

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

    gap:16px;
    margin-top:26px;
}

.hm2026-guide .price-part{
    padding:18px 0;

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

.hm2026-guide .price-part strong{
    display:block;

    margin-bottom:5px;

    color:var(--hm-text-900);
    font-size:14px;
}

.hm2026-guide .price-part span{
    color:var(--hm-text-500);

    font-size:12px;
    line-height:1.6;
}


/* SECURITY */

.hm2026-guide .security-box{
    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(300px,.95fr);

    gap:24px;
    align-items:stretch;

    margin-top:27px;
}

.hm2026-guide .security-main{
    min-width:0;
}

.hm2026-guide .security-list{
    display:grid;

    gap:12px;
    margin-top:20px;
}

.hm2026-guide .security-item{
    display:flex;

    gap:12px;
    align-items:flex-start;
}

.hm2026-guide .security-item strong{
    display:block;

    color:var(--hm-text-900);
    font-size:13px;
}

.hm2026-guide .security-item span{
    color:var(--hm-text-500);
    font-size:12px;
}


/* SUPPORT */

.hm2026-guide .support-grid{
    gap:16px;
    margin-top:26px;
}

.hm2026-guide .support-card{
    min-width:0;
}

.hm2026-guide .support-card h3{
    font-size:18px!important;
}

.hm2026-guide .support-card p{
    margin:0!important;

    font-size:12.5px;
    line-height:1.65;
}


/* RED FLAGS */

.hm2026-guide .redflags{
    display:grid;

    gap:12px;
    margin-top:23px;
}

.hm2026-guide .redflag{
    display:flex;

    gap:12px;
    align-items:flex-start;

    padding:14px 0;

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

.hm2026-guide .redflag:last-child{
    border-bottom:0;
}

.hm2026-guide .redflag-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;

    flex:0 0 30px;

    border-radius:999px;

    background:var(--hm-warning-bg);
    color:var(--hm-warning);

    font-size:10px;
    font-weight:950;
}


/* WARNING / BACKUP */

.hm2026-guide .warning-box{
    margin-top:22px;
}

.hm2026-guide .backup-box{
    margin-top:25px;
}


/* FINAL CHECK */

.hm2026-guide .final-check{
    margin-top:30px;
}

.hm2026-guide .final-check-grid{
    display:grid;

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

    gap:10px 22px;
}

.hm2026-guide .final-check-item{
    display:flex;

    gap:10px;
    align-items:flex-start;

    padding:9px 0;

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


/* RELATED */

.hm2026-guide .related-grid{
    gap:14px;
    margin-top:27px;
}

.hm2026-guide .related-card{
    min-width:0;
}

.hm2026-guide .related-arrow{
    flex:0 0 auto;
}


/* FAQ */

.hm2026-guide .faq summary{
    font-size:16px!important;
    line-height:1.45!important;
}

.hm2026-guide .faq details > p{
    max-width:900px;

    font-size:14px!important;
    line-height:1.8!important;
}


/* CTA — composition only */

.hm2026-guide .hm-cta-panel{
    margin-top:8px;
}


/* UTILITY */

.hm2026-guide .guide-spacer{
    margin-top:20px;
}


/* TABLET */

@media(max-width:950px){

    .hm2026-guide .guide-hero-grid{
        grid-template-columns:1fr;
        gap:42px;
    }

    .hm2026-guide .guide-toc{
        grid-template-columns:1fr;
    }

    .hm2026-guide .toc-side{
        position:static;
        order:-1;
    }

    .hm2026-guide .hosting-types,
    .hm2026-guide .price-anatomy,
    .hm2026-guide .security-box{
        grid-template-columns:1fr;
    }

    .hm2026-guide .final-check-grid{
        grid-template-columns:1fr;
    }

}


/* MOBILE */

@media(max-width:650px){

    .hm2026-guide .guide-hero{
        padding:60px 0 62px;
    }

    .hm2026-guide .guide-hero h1{
        font-size:39px!important;
    }

    .hm2026-guide .guide-hero-copy{
        font-size:15px;
    }

    .hm2026-guide .hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .hm2026-guide .hero-actions .btn{
        width:100%;
    }

    .hm2026-guide .guide-body{
        padding:54px 0 62px;
    }

    .hm2026-guide .guide-block{
        margin-bottom:50px;
    }

    .hm2026-guide .guide-block > h2{
        font-size:27px!important;
    }

    .hm2026-guide .hosting-types,
    .hm2026-guide .price-anatomy,
    .hm2026-guide .security-box{
        grid-template-columns:1fr;
    }

    .hm2026-guide .faq summary{
        font-size:15px!important;
    }

    .hm2026-guide .faq details > p{
        font-size:13.5px!important;
    }

}


/* VERY SMALL */

@media(max-width:430px){

    .hm2026-guide .guide-hero h1{
        font-size:34px!important;
    }

    .hm2026-guide .hero-check{
        padding:13px;
    }

    .hm2026-guide .hero-check-main{
        padding:16px;
    }

}


/* ==========================================================
   GUIDE G03 — VISUAL REMEDIATION
   Final visual refinement before freeze.

   IMPORTANT:
   - no shared component base duplication
   - hm-insight remains untouched globally
   - only Guide-specific composition
   ========================================================== */


/* ----------------------------------------------------------
   BACKUP BOX

   hm-insight is reused as the shared visual surface,
   but this content needs a Guide-specific internal layout.
   ---------------------------------------------------------- */

.hm2026-guide .backup-box.hm-insight{
    display:grid;

    grid-template-columns:40px minmax(0,1fr);

    gap:0 14px;

    align-content:start;
    align-items:start;

    min-width:0;
}

.hm2026-guide .backup-box.hm-insight > .hm-icon{
    grid-column:1;
    grid-row:1;

    margin:0!important;

    align-self:start;
}

.hm2026-guide .backup-box.hm-insight > h2,
.hm2026-guide .backup-box.hm-insight > h3{
    grid-column:2;
    grid-row:1;

    align-self:center;

    margin:0!important;

    font-size:20px!important;
    line-height:1.18!important;
    letter-spacing:-.015em;
}

.hm2026-guide .backup-box.hm-insight > p{
    grid-column:1 / -1;

    width:100%!important;
    max-width:none!important;

    margin:18px 0 0!important;

    color:var(--hm-text-700);

    font-size:13px!important;
    line-height:1.7!important;

    word-break:normal;
    overflow-wrap:normal;
}

.hm2026-guide .backup-box.hm-insight > .mini-list{
    grid-column:1 / -1;

    display:grid;

    grid-template-columns:1fr;

    gap:0;

    width:100%;

    margin:16px 0 0!important;
    padding:14px 0 0!important;

    border-top:1px solid rgba(5,150,105,.16);
}

.hm2026-guide .backup-box.hm-insight > .mini-list li{
    position:relative;

    width:100%;

    margin:0!important;
    padding:8px 0 8px 22px!important;

    color:var(--hm-text-700);

    font-size:12.5px!important;
    line-height:1.55!important;
}

.hm2026-guide .backup-box.hm-insight > .mini-list li::before{
    position:absolute;

    left:0;
    top:8px;
}


/* ----------------------------------------------------------
   DENSE CARD MICROCOPY
   Small readability improvement only.
   ---------------------------------------------------------- */

.hm2026-guide .metric-card p,
.hm2026-guide .question-card p,
.hm2026-guide .support-card p{
    font-size:13px;
    line-height:1.7;
}

.hm2026-guide .hosting-type p{
    font-size:13px;
    line-height:1.72;
}

.hm2026-guide .require-list li{
    font-size:12.5px;
    line-height:1.6;
}


/* ----------------------------------------------------------
   RELATED CONTENT
   Keep shared hm-link-card visuals.
   Only improve internal vertical rhythm.
   ---------------------------------------------------------- */

.hm2026-guide .related-card{
    display:flex;
    flex-direction:column;

    height:100%;
}

.hm2026-guide .related-card .related-arrow{
    margin-top:auto;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media(max-width:950px){

    .hm2026-guide .backup-box.hm-insight{
        grid-template-columns:40px minmax(0,1fr);
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:650px){

    .hm2026-guide .backup-box.hm-insight{
        grid-template-columns:36px minmax(0,1fr);

        gap:0 11px;
    }

    .hm2026-guide .backup-box.hm-insight > h2,
    .hm2026-guide .backup-box.hm-insight > h3{
        font-size:18px!important;
    }

    .hm2026-guide .backup-box.hm-insight > p{
        margin-top:16px!important;

        font-size:13px!important;
    }

    .hm2026-guide .backup-box.hm-insight > .mini-list li{
        font-size:12.5px!important;
    }

}