/* ==========================================================
   CSS VARIABLES
   ========================================================== */

:root{

    --primary:#0b63ce;
    --primary-dark:#084b9b;
    --primary-light:#eef6ff;

    --text:#333333;
    --text-light:#666666;

    --border:#dddddd;
    --surface:#fafafa;
    --white:#ffffff;

    --success:#198754;
    --warning:#f4a000;
    --danger:#d63333;

    --radius:10px;

    --shadow:0 6px 20px rgba(0,0,0,.08);

    --transition:.25s ease;

    --container:980px;

}


/* ==========================================================
   ARTICLE CONTAINER
   ========================================================== */

.bg007{ max-width:var(--container); margin:0 auto; padding:40px 20px 70px; color:var(--text); line-height:1.85; }


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

.bg007 h1{margin:0 0 20px; font-size:2.7rem; line-height:1.25; color:#111; }

.bg007 h2{margin:70px 0 22px; font-size:2rem; line-height:1.35; color:#111; }

.bg007 h3{margin:45px 0 18px; font-size:1.45rem; line-height:1.45; color:#111; }

.bg007 h4{margin:30px 0 15px; font-size:1.15rem; }

.bg007 p{ margin:0 0 24px; }

.bg007 strong{font-weight:700; }

.bg007 em{font-style:italic; }


/* ==========================================================
   LINKS
   ========================================================== */

.bg007 a{color:var(--primary); text-decoration:none; transition:color var(--transition); }

.bg007 a:hover{ color:var(--primary-dark); text-decoration:underline; }


/* ==========================================================
   LISTS
   ========================================================== */

.bg007 ul,
.bg007 ol{margin:0 0 28px 28px; }

.bg007 li{margin-bottom:10px; }


/* ==========================================================
   HORIZONTAL RULE
   ========================================================== */

.bg007 hr{border:0; border-top:1px solid var(--border); margin:60px 0; }


/* ==========================================================
   IMAGE DEFAULTS
   ========================================================== */

.bg007 img{

    display:block;

    max-width:100%;

    height:auto;

}


/* ==========================================================
   FIGURE
   ========================================================== */

.bg007 figure{

    margin:45px 0;

}

.bg007 figcaption{

    margin-top:12px;

    text-align:center;

    font-size:.92rem;

    color:var(--text-light);

    font-style:italic;

}


/* ==========================================================
   TABLE DEFAULT
   ========================================================== */

.bg007 table{

    width:100%;

    border-collapse:collapse;

}


/* ==========================================================
   SECTION SPACING
   ========================================================== */

.bg007 section{

    margin:65px 0;

}

/* ==========================================================
   SPACING HELPERS
   ========================================================== */

.mt-0{margin-top:0!important;}
.mb-0{margin-bottom:0!important;}

.mt-1{margin-top:10px!important;}
.mt-2{margin-top:20px!important;}
.mt-3{margin-top:30px!important;}

.mb-1{margin-bottom:10px!important;}
.mb-2{margin-bottom:20px!important;}
.mb-3{margin-bottom:30px!important;}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.bg007 .visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    border:0;

}


/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

    background:#dcecff;

    color:#111;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* ----------------------------------------------------------
   Large Tablets
   ---------------------------------------------------------- */

@media (max-width:992px){

    .bg007{
        padding-left:24px;
        padding-right:24px;
    }

    .feature-grid,
    .benefits-grid,
    .related-article-grid,
    .related-service-grid{
        gap:22px;
    }

}


/* ----------------------------------------------------------
   Tablets
   ---------------------------------------------------------- */

@media (max-width:768px){

    /* Layout */

    .bg007{
        padding:30px 18px 50px;
    }

    /* Typography */

    .bg007 h1{
        font-size:2.1rem;
    }

    .bg007 h2{
        font-size:1.65rem;
        margin-top:55px;
    }

    .bg007 h3{
        font-size:1.3rem;
    }

    .bg007 .article-intro,
    .bg007 .lead{
        font-size:1.05rem;
    }

    /* Meta */

    .bg007 .article-meta{
        display:block;
    }

    .bg007 .article-meta div{
        margin-bottom:10px;
    }

    /* Images */

    .bg007 .hero-image{
        margin:35px auto;
    }

    .bg007 .article-figure{
        margin:40px auto;
    }

    .bg007 .article-figure figcaption{
        padding:0 10px;
    }

    .bg007 .feature-image,
    .bg007 .cta-image{
        margin:35px auto;
    }

    /* Cards & Boxes */

    .bg007 .summary-box,
    .bg007 .table-of-contents,
    .bg007 .living-document,
    .bg007 .callout,
    .bg007 .info-box,
    .bg007 .quick-facts,
    .bg007 .important,
    .bg007 .pro-tip,
    .bg007 .best-practice,
    .bg007 .definition-box,
    .bg007 .key-takeaways,
    .bg007 .related-reading,
    .bg007 .faq-callout,
    .bg007 .article-note,
    .bg007 .contact-panel{
        padding:22px;
    }

    .bg007 .feature-card,
    .bg007 .benefit-card,
    .bg007 .content-panel,
    .bg007 .service-highlight{
        padding:22px;
    }

    /* Grid Layouts */

    .bg007 .feature-grid,
    .bg007 .benefits-grid,
    .bg007 .related-article-grid,
    .bg007 .related-service-grid,
    .bg007 .cta-features,
    .bg007 .trust-panel,
    .bg007 .two-column{
        grid-template-columns:1fr;
    }

    /* CTA 

    .bg007 .cta-content{
        padding:28px;
    }

    .bg007 .cta-buttons{
        flex-direction:column;
    }

    .bg007 .cta-buttons .btn{
        width:100%;
        min-width:100%;
    } */

    /* FAQ */

    .bg007 .faq-item summary{
        padding:20px 54px 20px 18px;
        font-size:1rem;
    }

    .bg007 .faq-answer{
        padding:0 18px 20px;
    }

    /* Tables */

    .bg007 .comparison-table{
        min-width:620px;
    }

    .bg007 .comparison-table th,
    .bg007 .comparison-table td{
        padding:14px;
    }

    /* Blockquote */

    .bg007 blockquote{
        padding:22px;
    }

    /* Navigation */

    .bg007 .article-navigation{
        flex-direction:column;
    }

    .bg007 .back-to-top{
        text-align:center;
    }

    .bg007 .related-service{
        padding:20px;
    }

}


/* ----------------------------------------------------------
   Mobile Phones
   ---------------------------------------------------------- */

@media (max-width:480px){

    /* Layout */

    .bg007{
        padding:25px 15px 40px;
    }

    /* Typography */

    .bg007 h1{
        font-size:1.85rem;
    }

    .bg007 h2{
        font-size:1.45rem;
    }

    .bg007 h3{
        font-size:1.15rem;
    }

    .bg007 .article-meta{
        font-size:.88rem;
    }

    .bg007 .article-intro,
    .bg007 .lead{
        font-size:1rem;
    }

    /* Boxes */

    .bg007 .summary-box,
    .bg007 .table-of-contents,
    .bg007 .living-document,
    .bg007 .callout,
    .bg007 .info-box,
    .bg007 .quick-facts,
    .bg007 .important,
    .bg007 .pro-tip,
    .bg007 .best-practice,
    .bg007 .definition-box,
    .bg007 .key-takeaways,
    .bg007 .related-reading,
    .bg007 .faq-callout,
    .bg007 .article-note,
    .bg007 .contact-panel,
    .bg007 .cta-content,
    .bg007 .knowledge-hub{
        padding:18px;
    }

    /* Cards */

    .bg007 .feature-card,
    .bg007 .benefit-card,
    .bg007 .content-panel,
    .bg007 .related-service,
    .bg007 .related-article-content{
        padding:18px;
    }

    /* Hero */

    .bg007 .table-of-contents{
        margin:45px 0;
    }

    /* Images */

    .bg007 .article-figure img{
        border-radius:8px;
    }

    /* Tables */

    .bg007 .comparison-table th,
    .bg007 .comparison-table td{
        padding:12px;
    }

    /* FAQ */

    .bg007 .faq-item summary{
        padding:18px 48px 18px 16px;
    }

    .bg007 .faq-item summary::after{
        width:24px;
        height:24px;
        right:16px;
        font-size:18px;
    }

    .bg007 .faq-answer{
        padding:0 16px 18px;
    }

    /* CTA 

    .bg007 .cta-content{
        padding:20px;
    }*/

    .bg007 .contact-panel{
        padding:18px;
    }

    /* Blockquote */

    .bg007 blockquote{
        padding:18px;
        font-size:1rem;
    }

    /* Navigation */

    .bg007 .article-navigation a{
        padding:18px;
    }

}
/* ==========================================================
   BG007.CSS
   Part 2
   Header • Hero • Article Meta • TOC
   ========================================================== */


/* ==========================================================
   BREADCRUMB
   ========================================================== */

.bg007 .breadcrumb{

    margin:0 0 25px;

    font-size:.92rem;

    color:var(--text-light);

}

.bg007 .breadcrumb a{

    color:var(--primary);

    text-decoration:none;

}

.bg007 .breadcrumb a:hover{

    text-decoration:underline;

}

.bg007 .breadcrumb span{

    margin:0 8px;

    color:#999;

}


/* ==========================================================
   ARTICLE HEADER
   ========================================================== */

.bg007 .article-header{

    margin-bottom:45px;

}

.bg007 .article-header .category{
    margin-bottom:18px;
}
.bg007 .article-badge{
    display:inline-block;
    margin-bottom:18px;
    padding:6px 14px;
    border-radius:40px;
    background:var(--primary-light);
    color:var(--primary);
    font-size:.82rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.4px;
}

/* ==========================================================
   ARTICLE META
   ========================================================== */

.bg007 .article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin:25px 0 35px;

    font-size:.92rem;

    color:var(--text-light);

}

.bg007 .article-meta div{

    display:flex;

    align-items:center;

    gap:6px;

}


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

.bg007 .article-intro{

    font-size:1.15rem;

    line-height:1.9;

    color:#444;

    margin-bottom:35px;

}


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

.bg007 .hero-image{

    margin:45px auto;

    max-width:900px;

}

.bg007 .hero-image picture{

    display:block;

}

.bg007 .hero-image img{

    width:100%;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.bg007 .hero-image figcaption{

    margin-top:14px;

}


/* ==========================================================
   LIVING DOCUMENT NOTICE
   ========================================================== */

.bg007 .living-document{

    margin:45px 0;

    padding:24px 28px;

    background:#eef6ff;

    border-left:5px solid var(--primary);

    border-radius:var(--radius);

}

.bg007 .living-document h3{

    margin-top:0;

}

.bg007 .living-document p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   ARTICLE SUMMARY
   ========================================================== */

.bg007 .summary-box{

    margin:50px 0;

    padding:30px;

    background:var(--surface);

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

    border-radius:var(--radius);

}

.bg007 .summary-box h2,

.bg007 .summary-box h3{

    margin-top:0;

}

.bg007 .summary-box ul{

    margin:20px 0 0 22px;

}

.bg007 .summary-box li{

    margin-bottom:12px;

}


/* ==========================================================
   TABLE OF CONTENTS
   ========================================================== */

.bg007 .table-of-contents{

    margin:60px 0;

    padding:30px;

    background:#f7f9fc;

    border:1px solid #dbe5f1;

    border-radius:var(--radius);

}

.bg007 .table-of-contents h2{

    margin-top:0;

    margin-bottom:22px;

}

.bg007 .table-of-contents ol{

    margin:0;

    padding-left:24px;

}

.bg007 .table-of-contents li{

    margin-bottom:12px;

}

.bg007 .table-of-contents a{

    font-weight:500;

}

.bg007 .table-of-contents a:hover{

    text-decoration:underline;

}


/* ==========================================================
   ARTICLE STATISTICS
   ========================================================== */

.bg007 .article-stats{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin:30px 0;

    color:var(--text-light);

    font-size:.9rem;

}

.bg007 .article-stats span{

    display:flex;

    align-items:center;

    gap:8px;

}


/* ==========================================================
   SECTION DIVIDER
   ========================================================== */

.bg007 .section-divider{

    width:90px;

    height:4px;

    margin:50px auto;

    background:var(--primary);

    border-radius:4px;

}


/* ==========================================================
   LEAD PARAGRAPH
   ========================================================== */

.bg007 .lead{

    font-size:1.15rem;

    line-height:1.9;

    color:#444;

}


/* ==========================================================
   BG007.CSS
   Part 3
   Content Components
   Callouts • Information Boxes • Lists • Highlights
   ========================================================== */


/* ==========================================================
   CONTENT SECTION
   ========================================================== */

.bg007 .content-section{

    margin:70px 0;

}

.bg007 .content-section:first-of-type{

    margin-top:0;

}


/* ==========================================================
   LEAD PARAGRAPH
   ========================================================== */

.bg007 .content-section > p:first-of-type{

    font-size:1.08rem;

    line-height:1.9;

}


/* ==========================================================
   CALLOUT
   ========================================================== */

.bg007 .callout{

    margin:40px 0;

    padding:28px;

    background:var(--primary-light);

    border-left:5px solid var(--primary);

    border-radius:var(--radius);

}

.bg007 .callout h3{

    margin-top:0;

}

.bg007 .callout p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   INFORMATION BOX
   ========================================================== */

.bg007 .info-box{

    margin:40px 0;

    padding:28px;

    background:#f8fbff;

    border:1px solid #d9e7f7;

    border-radius:var(--radius);

}

.bg007 .info-box h3{

    margin-top:0;

}

.bg007 .info-box ul{

    margin-top:18px;

}

.bg007 .info-box p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   QUICK FACTS
   ========================================================== */

.bg007 .quick-facts{

    margin:45px 0;

    padding:28px;

    background:var(--surface);

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

    border-radius:var(--radius);

}

.bg007 .quick-facts h3{

    margin-top:0;

}

.bg007 .quick-facts ul{

    margin-top:18px;

}

.bg007 .quick-facts li{

    margin-bottom:12px;

}


/* ==========================================================
   IMPORTANT NOTE
   ========================================================== */

.bg007 .important{

    margin:40px 0;

    padding:24px;

    background:#fff8e8;

    border-left:5px solid var(--warning);

    border-radius:var(--radius);

}

.bg007 .important p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   PRO TIP
   ========================================================== */

.bg007 .pro-tip{

    margin:40px 0;

    padding:24px;

    background:#eef7ff;

    border-left:5px solid var(--primary);

    border-radius:var(--radius);

}

.bg007 .pro-tip strong{

    color:var(--primary);

}


/* ==========================================================
   BEST PRACTICE
   ========================================================== */

.bg007 .best-practice{

    margin:40px 0;

    padding:24px;

    background:#eefaf3;

    border-left:5px solid var(--success);

    border-radius:var(--radius);

}

.bg007 .best-practice p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   HIGHLIGHT
   ========================================================== */

.bg007 .highlight{

    background:#fff4b3;

    padding:2px 5px;

    border-radius:3px;

}


/* ==========================================================
   CHECKLIST
   ========================================================== */

.bg007 .check-list{

    list-style:none;

    margin:28px 0;

    padding:0;

}

.bg007 .check-list li{

    position:relative;

    padding-left:34px;

    margin-bottom:14px;

}

.bg007 .check-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:var(--success);

    font-weight:700;

}


/* ==========================================================
   DEFINITION BOX
   ========================================================== */

.bg007 .definition-box{

    margin:45px 0;

    padding:28px;

    background:var(--surface);

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

    border-radius:var(--radius);

}

.bg007 .definition-box h3{

    margin-top:0;

}

.bg007 .definition-box dt{

    margin-top:18px;

    font-weight:700;

}

.bg007 .definition-box dd{

    margin:8px 0 18px;

}


/* ==========================================================
   BLOCKQUOTE
   ========================================================== */

.bg007 blockquote{

    margin:45px 0;

    padding:26px 32px;

    background:#f8fbff;

    border-left:5px solid var(--primary);

    border-radius:var(--radius);

    font-style:italic;

}

.bg007 blockquote p:last-child{

    margin-bottom:0;

}

.bg007 blockquote cite{

    display:block;

    margin-top:18px;

    color:var(--text-light);

    font-style:normal;

}



/* ==========================================================
   BG007.CSS
   Part 4
   Cards • Feature Grid • Service Highlights
   ========================================================== */


/* ==========================================================
   FEATURE GRID
   ========================================================== */

.bg007 .feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:28px;

    margin:50px 0;

}


/* ==========================================================
   FEATURE CARD
   ========================================================== */

.bg007 .feature-card{

    display:flex;

    flex-direction:column;

    background:var(--white);

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

    border-radius:var(--radius);

    padding:26px;

    transition:all var(--transition);

}

.bg007 .feature-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}

.bg007 .feature-card h3{

    margin-top:0;

    margin-bottom:16px;

}

.bg007 .feature-card p{

    flex:1;

    margin-bottom:18px;

}

.bg007 .feature-card:last-child{

    margin-bottom:0;

}


/* ==========================================================
   FEATURE IMAGE
   ========================================================== */

.bg007 .feature-card img{

    width:100%;

    height:auto;

    border-radius:8px;

    margin-bottom:18px;

}


/* ==========================================================
   FEATURE FOOTER
   ========================================================== */

.bg007 .feature-footer{

    margin-top:auto;

    padding-top:16px;

    border-top:1px solid #ececec;

}


/* ==========================================================
   SERVICE HIGHLIGHT
   ========================================================== */

.bg007 .service-highlight{

    margin:50px 0;

    padding:30px;

    background:#fdfdfd;

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

    border-radius:var(--radius);

    box-shadow:0 3px 10px rgba(0,0,0,.04);

}

.bg007 .service-highlight h2,

.bg007 .service-highlight h3{

    margin-top:0;

}

.bg007 .service-highlight p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   BENEFITS GRID
   ========================================================== */

.bg007 .benefits-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:24px;

    margin:45px 0;

}


/* ==========================================================
   BENEFIT CARD
   ========================================================== */

.bg007 .benefit-card{

    position:relative;

    padding:24px;

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

    border-radius:var(--radius);

    background:var(--white);

}

.bg007 .benefit-card::before{

    content:"✓";

    position:absolute;

    top:18px;

    right:18px;

    color:var(--success);

    font-size:1.4rem;

    font-weight:700;

}

.bg007 .benefit-card h3{

    margin-top:0;

}

.bg007 .benefit-card p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   TWO COLUMN CONTENT
   ========================================================== */

.bg007 .two-column{

    display:grid;

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

    gap:35px;

    margin:45px 0;

}


/* ==========================================================
   CONTENT PANEL
   ========================================================== */

.bg007 .content-panel{

    padding:24px;

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

    border-radius:var(--radius);

    background:var(--surface);

}

.bg007 .content-panel h3{

    margin-top:0;

}

.bg007 .content-panel p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   FEATURE LIST
   ========================================================== */

.bg007 .feature-list{

    margin:25px 0;

    padding:0;

    list-style:none;

}

.bg007 .feature-list li{

    position:relative;

    padding-left:30px;

    margin-bottom:14px;

}

.bg007 .feature-list li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:var(--success);

    font-weight:700;

}


/* ==========================================================
   CONTENT HIGHLIGHT
   ========================================================== */

.bg007 .content-highlight{

    padding:18px 20px;

    margin:30px 0;

    background:#f8fbff;

    border-left:4px solid var(--primary);

    border-radius:6px;

}



/* ==========================================================
   BG007.CSS
   Part 5
   Figures • Images • Tables
   ========================================================== */


/* ==========================================================
   ARTICLE FIGURE
   ========================================================== */

.bg007 .article-figure{

    margin:55px auto;

    max-width:900px;

    text-align:center;

}

.bg007 .article-figure picture{

    display:block;

}

.bg007 .article-figure img{

    width:100%;

    height:auto;

    display:block;

    border-radius:var(--radius);

    border:1px solid #e8e8e8;

    box-shadow:var(--shadow);

    transition:transform var(--transition);

}

.bg007 .article-figure:hover img{

    transform:translateY(-2px);

}

.bg007 .article-figure figcaption{

    margin-top:16px;

    padding:0 20px;

    color:var(--text-light);

    font-size:.92rem;

    line-height:1.6;

    font-style:italic;

}


/* ==========================================================
   FEATURE IMAGE
   ========================================================== */

.bg007 .feature-image{

    margin:45px auto;

    max-width:850px;

}

.bg007 .feature-image img{

    width:100%;

    border-radius:var(--radius);

}


/* ==========================================================
   CTA IMAGE
   ========================================================== 

.bg007 .cta-image{

    margin:40px auto;

    max-width:850px;

}

.bg007 .cta-image img{

    display:block;

    width:100%;

    height:auto;

    border-radius:var(--radius);

}*/


/* ==========================================================
   IMAGE WRAPPER
   ========================================================== */

.bg007 .image-wrapper{

    overflow:hidden;

    border-radius:var(--radius);

}


/* ==========================================================
   COMPARISON TABLE
   ========================================================== */

.bg007 .table-wrapper{

    margin:45px 0;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}

.bg007 .comparison-table{

    width:100%;

    min-width:720px;

    border-collapse:collapse;

    background:#fff;

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

}

.bg007 .comparison-table caption{

    caption-side:top;

    margin-bottom:18px;

    text-align:left;

    font-weight:700;

    font-size:1.2rem;

}

.bg007 .comparison-table thead{

    background:var(--primary);

}

.bg007 .comparison-table th{

    padding:16px;

    color:#fff;

    text-align:left;

    font-weight:600;

}

.bg007 .comparison-table td{

    padding:16px;

    border-top:1px solid #ececec;

    vertical-align:top;

}

.bg007 .comparison-table tbody tr:nth-child(even){

    background:#fafafa;

}

.bg007 .comparison-table tbody tr:hover{

    background:#eef6ff;

}

.bg007 .comparison-table td:first-child{

    font-weight:600;

}


/* ==========================================================
   TABLE LABELS
   ========================================================== */

.bg007 .good{

    color:var(--success);

    font-weight:700;

}

.bg007 .average{

    color:#d18d00;

    font-weight:700;

}

.bg007 .poor{

    color:#c62828;

    font-weight:700;

}


/* ==========================================================
   IMAGE CREDIT
   ========================================================== */

.bg007 .image-credit{

    margin-top:10px;

    text-align:right;

    font-size:.82rem;

    color:#999;

}



/* ==========================================================
   BG007.CSS
   Part 6
   FAQ • Related Reading • Article Components
   ========================================================== */


/* ==========================================================
   FAQ SECTION
   ========================================================== */

.bg007 .faq-list{

    margin:70px 0;

}

.bg007 .faq-item{

    margin:0 0 18px;

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

    border-radius:var(--radius);

    overflow:hidden;

    background:var(--white);

    transition:border-color var(--transition),
               box-shadow var(--transition);

}

.bg007 .faq-item[open]{

    border-color:var(--primary);

    box-shadow:var(--shadow);

}


/* ==========================================================
   FAQ SUMMARY
   ========================================================== */

.bg007 .faq-item summary{

    position:relative;

    display:block;

    cursor:pointer;

    list-style:none;

    padding:22px 60px 22px 24px;

    font-size:1.05rem;

    font-weight:600;

    line-height:1.6;

}

.bg007 .faq-item summary::-webkit-details-marker{

    display:none;

}

.bg007 .faq-item summary::marker{

    display:none;

}

.bg007 .faq-item summary:hover{

    background:#f7fbff;

}


/* ==========================================================
   FAQ ICON
   ========================================================== */

.bg007 .faq-item summary::after{

    content:"+";

    position:absolute;

    top:50%;

    right:24px;

    transform:translateY(-50%);

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary-light);

    color:var(--primary);

    font-size:22px;

    font-weight:700;

}

.bg007 .faq-item[open] summary::after{

    content:"−";

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   FAQ ANSWER
   ========================================================== */

.bg007 .faq-answer{

    padding:0 24px 24px;

}

.bg007 .faq-answer p:last-child{

    margin-bottom:0;

}

.bg007 .faq-answer ul{

    margin-top:18px;

}


/* ==========================================================
   FAQ CALLOUT
   ========================================================== */

.bg007 .faq-callout{

    margin:40px 0;

    padding:24px;

    background:#f8fbff;

    border-left:5px solid var(--primary);

    border-radius:var(--radius);

}


/* ==========================================================
   RELATED READING
   ========================================================== */

.bg007 .related-reading{

    margin:60px 0;

    padding:28px;

    background:var(--surface);

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

    border-radius:var(--radius);

}

.bg007 .related-reading h3{

    margin-top:0;

}

.bg007 .related-reading ul{

    margin-top:18px;

}

.bg007 .related-reading li{

    margin-bottom:12px;

}


/* ==========================================================
   KEY TAKEAWAYS
   ========================================================== */

.bg007 .key-takeaways{

    margin:55px 0;

    padding:30px;

    background:#f5f9ff;

    border:1px solid #d7e6fb;

    border-radius:var(--radius);

}

.bg007 .key-takeaways h2,

.bg007 .key-takeaways h3{

    margin-top:0;

}

.bg007 .key-takeaways ul{

    margin-top:18px;

}


/* ==========================================================
   ARTICLE NOTE
   ========================================================== */

.bg007 .article-note{

    margin:40px 0;

    padding:22px;

    background:#fffdf2;

    border-left:5px solid var(--warning);

    border-radius:var(--radius);

}


/* ==========================================================
   SECTION NAVIGATION
   ========================================================== */

.bg007 .section-navigation{

    margin:60px 0;

    text-align:center;

}

.bg007 .section-navigation a{

    display:inline-block;

    margin:6px;

    padding:10px 18px;

    border-radius:30px;

    background:var(--primary-light);

    color:var(--primary);

    text-decoration:none;

    transition:all var(--transition);

}

.bg007 .section-navigation a:hover{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   CONTENT DIVIDER
   ========================================================== */

.bg007 .content-divider{

    width:80px;

    height:4px;

    margin:60px auto;

    border-radius:4px;

    background:var(--primary);

}


/* ==========================================================
   BG007.CSS
   Part 7
   CTA • Conversion Panels • Trust Elements
   ========================================================== */


/* ==========================================================
   CTA SECTION
   ========================================================== */

.bg007 .cta-section{

    margin:80px 0;

    padding:0;

}


/* ==========================================================
   CTA WRAPPER
   ========================================================== */

.bg007 .cta-wrapper{

    background:#0b63ce;

    color:#fff;

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 14px 36px rgba(0,0,0,.14);

}


/* ==========================================================
   CTA IMAGE
   ========================================================== */

.bg007 .cta-image{

    margin:0;

}

.bg007 .cta-image picture{

    display:block;

}

.bg007 .cta-image img{

    display:block;

    width:100%;

    height:auto;

}


/* ==========================================================
   CTA CONTENT
   ========================================================== */

.bg007 .cta-content{

    padding:42px;

}


/* ==========================================================
   CTA HEADINGS
   ========================================================== */

.bg007 .cta-content h2{

    margin:0 0 20px;

    color:#fff;

    font-size:2rem;

    line-height:1.25;

}

.bg007 .cta-content h3{

    color:#fff;

}


/* ==========================================================
   CTA TEXT
   ========================================================== */

.bg007 .cta-content p{

    color:rgba(255,255,255,.92);

    line-height:1.9;

}

.bg007 .cta-lead{

    font-size:1.15rem;

    margin-bottom:22px;

}


/* ==========================================================
   CTA NOTE
   ========================================================== */

.bg007 .cta-note{

    margin:25px 0;

    padding:18px 20px;

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

    border-left:4px solid rgba(255,255,255,.7);

    border-radius:8px;

    font-size:.96rem;

}


/* ==========================================================
   CTA BUTTON GROUP
   ========================================================== */

.bg007 .cta-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:35px;

}


/* ==========================================================
   CTA BUTTONS
   ========================================================== */

.bg007 .cta-buttons .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    padding:15px 28px;

    border-radius:8px;

    font-weight:600;

    text-decoration:none;

    transition:all .25s ease;

}


/* ==========================================================
   PRIMARY BUTTON
   ========================================================== */

.bg007 .cta-buttons .btn-primary{

    background:#fff;

    color:#0b63ce;

    border:2px solid #fff;

}

.bg007 .cta-buttons .btn-primary:hover{

    background:#f5f5f5;

    transform:translateY(-2px);

}


/* ==========================================================
   SECONDARY BUTTON
   ========================================================== */

.bg007 .cta-buttons .btn-secondary{

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,255,255,.7);

}

.bg007 .cta-buttons .btn-secondary:hover{

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

    transform:translateY(-2px);

}


/* ==========================================================
   CTA FEATURES
   ========================================================== */

.bg007 .cta-features{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    margin:35px 0;

}


.bg007 .cta-feature{

    padding:18px;

    border-radius:8px;

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

}


.bg007 .cta-feature h4{

    margin-top:0;

    color:#fff;

}


.bg007 .cta-feature p{

    margin-bottom:0;

}


/* ==========================================================
   GUARANTEE BOX
   ========================================================== */

.bg007 .guarantee-box{

    margin:40px 0;

    padding:24px;

    background:#eef7ff;

    border-left:5px solid var(--primary);

    border-radius:var(--radius);

}

.bg007 .guarantee-box h3{

    margin-top:0;

}


/* ==========================================================
   TRUST PANEL
   ========================================================== */

.bg007 .trust-panel{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:18px;

    margin:40px 0;

}

.bg007 .trust-item{

    padding:20px;

    background:#fafafa;

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

    border-radius:var(--radius);

    text-align:center;

}

.bg007 .trust-item h4{

    margin:15px 0 10px;

}

.bg007 .trust-item p{

    margin-bottom:0;

    font-size:.95rem;

}


/* ==========================================================
   CONTACT PANEL
   ========================================================== */

.bg007 .contact-panel{

    margin:50px 0;

    padding:28px;

    background:var(--surface);

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

    border-radius:var(--radius);

    text-align:center;

}

.bg007 .contact-panel h3{

    margin-top:0;

}

.bg007 .contact-panel p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   CTA DIVIDER
   ========================================================== */

.bg007 .cta-divider{

    width:100px;

    height:4px;

    margin:60px auto;

    background:var(--primary);

    border-radius:4px;

}



/* ==========================================================
   BG007.CSS
   Part 8
   Related Content • Footer • Navigation
   ========================================================== */


/* ==========================================================
   RELATED ARTICLES
   ========================================================== */

.bg007 .related-articles{

    margin:80px 0 60px;

}

.bg007 .related-articles h2{

    margin-bottom:30px;

}

.bg007 .related-article-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

}

.bg007 .related-article{

    background:var(--white);

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

    border-radius:var(--radius);

    overflow:hidden;

    transition:all var(--transition);

}

.bg007 .related-article:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

.bg007 .related-article img{

    width:100%;

    display:block;

}

.bg007 .related-article-content{

    padding:22px;

}

.bg007 .related-article-content h3{

    margin-top:0;

    margin-bottom:12px;

    font-size:1.2rem;

}

.bg007 .related-article-content p{

    margin-bottom:0;

}


/* ==========================================================
   RELATED SERVICES
   ========================================================== */

.bg007 .related-services{

    margin:70px 0;

}

.bg007 .related-services h2{

    margin-bottom:30px;

}

.bg007 .related-service-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

}

.bg007 .related-service{

    padding:24px;

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

    border-radius:var(--radius);

    background:var(--surface);

}

.bg007 .related-service h3{

    margin-top:0;

}

.bg007 .related-service p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   ARTICLE TAGS
   ========================================================== */

.bg007 .article-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:55px 0 30px;

}

.bg007 .article-tags a{

    display:inline-block;

    padding:8px 14px;

    border-radius:30px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:.85rem;

    text-decoration:none;

    transition:all var(--transition);

}

.bg007 .article-tags a:hover{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   ARTICLE FOOTER
   ========================================================== */

.bg007 .article-footer{

    margin-top:70px;

    padding-top:35px;

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

}

.bg007 .article-footer p{

    color:var(--text-light);

}

.bg007 .article-updated{

    margin-top:25px;

    font-size:.9rem;

    color:#888;

}


/* ==========================================================
   ARTICLE NAVIGATION
   ========================================================== */

.bg007 .article-navigation{

    display:flex;

    gap:24px;

    margin:70px 0;

}

.bg007 .article-navigation a{

    flex:1;

    display:block;

    padding:22px;

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

    border-radius:var(--radius);

    background:#fff;

    text-decoration:none;

    transition:all var(--transition);

}

.bg007 .article-navigation a:hover{

    border-color:var(--primary);

    box-shadow:var(--shadow);

}

.bg007 .article-navigation small{

    display:block;

    margin-bottom:10px;

    color:#888;

}

.bg007 .article-navigation strong{

    color:#111;

    line-height:1.5;

}


/* ==========================================================
   BACK TO TOP
   ========================================================== */

.bg007 .back-to-top{

    margin:50px 0;

    text-align:right;

}

.bg007 .back-to-top a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-weight:600;

    color:var(--primary);

    text-decoration:none;

}

.bg007 .back-to-top a:hover{

    text-decoration:underline;

}


/* ==========================================================
   KNOWLEDGE HUB NOTICE
   ========================================================== */

.bg007 .knowledge-hub{

    margin:60px 0;

    padding:24px;

    background:#f7fbff;

    border-left:5px solid var(--primary);

    border-radius:var(--radius);

}

.bg007 .knowledge-hub h3{

    margin-top:0;

}

.bg007 .knowledge-hub p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   BG007.CSS
   Part 9
   Utilities • Accessibility • Responsive Refinements
   ========================================================== */


/* ==========================================================
   DISPLAY HELPERS
   ========================================================== */

.bg007 .d-block{

    display:block;

}

.bg007 .d-flex{

    display:flex;

}

.bg007 .flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.bg007 .flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.bg007 .flex-wrap{

    flex-wrap:wrap;

}


/* ==========================================================
   WIDTH HELPERS
   ========================================================== */

.bg007 .w-100{

    width:100%;

}


/* ==========================================================
   SPACING HELPERS
   ========================================================== */

.mt-0{margin-top:0!important;}
.mb-0{margin-bottom:0!important;}

.mt-1{margin-top:10px!important;}
.mt-2{margin-top:20px!important;}
.mt-3{margin-top:30px!important;}
.mt-4{margin-top:40px!important;}
.mt-5{margin-top:60px!important;}

.mb-1{margin-bottom:10px!important;}
.mb-2{margin-bottom:20px!important;}
.mb-3{margin-bottom:30px!important;}
.mb-4{margin-bottom:40px!important;}
.mb-5{margin-bottom:60px!important;}


/* ==========================================================
   TEXT HELPERS
   ========================================================== */

.bg007 .text-left{

    text-align:left;

}

.bg007 .text-center{

    text-align:center;

}

.bg007 .text-right{

    text-align:right;

}

.bg007 .text-muted{

    color:var(--text-light);

}

.bg007 .text-primary{

    color:var(--primary);

}


/* ==========================================================
   RADIUS HELPERS
   ========================================================== */

.bg007 .rounded{

    border-radius:var(--radius);

}


/* ==========================================================
   SHADOW HELPERS
   ========================================================== */

.bg007 .shadow{

    box-shadow:var(--shadow);

}

/* ==========================================================
   KEYBOARD FOCUS
   ========================================================== */

.bg007 a:focus-visible,

.bg007 button:focus-visible,

.bg007 summary:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:3px;

}

/* ==========================================================
   BG007.CSS
   Part 10
   Production Finish
   Print • Performance • Accessibility
   Version 1.0
   ========================================================== */


/* ==========================================================
   DETAILS
   ========================================================== */

.bg007 details{

display:block;

}

.bg007 summary{

cursor:pointer;

}

/* ==========================================================
   SKIP LINK
   ========================================================== */

.bg007 .skip-link{

    position:absolute;

    left:20px;

    top:-60px;

    z-index:9999;

    padding:12px 18px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    border-radius:6px;

}

.bg007 .skip-link:focus{

    top:20px;

}


/* ==========================================================
   IMAGE OPTIMIZATION
   ========================================================== */

.bg007 img{

image-rendering:auto;

}

.bg007 img[loading="lazy"]{

content-visibility:auto;

}

/* ==========================================================
   BROWSER RENDERING
   ========================================================== */

.bg007,
.bg007 *{

box-sizing:border-box;

}

html{

    -webkit-text-size-adjust:100%;

    text-rendering:optimizeLegibility;

}

body{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    .bg007 *,
.bg007 *::before,
.bg007 *::after{

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }

}


/* ==========================================================
   PRINT
   ========================================================== */

@media print{

    body{

        background:#fff;

        color:#000;

    }

    .bg007 .breadcrumb,

    .bg007 .article-meta,

    .bg007  .table-of-contents,

    .bg007 .cta-section,

    .bg007 .article-navigation,

    .bg007 .back-to-top,

    .bg007 .related-articles,

    .bg007 .related-services,

    .bg007 .article-tags{

        display:none!important;

    }

    .bg007{

        max-width:100%;

        padding:0;

    }

    img{

        max-width:100%!important;

        page-break-inside:avoid;

    }

    figure,

    table,

    blockquote,

    .callout,

    .summary-box,

    .quick-facts,

    .key-takeaways{

        page-break-inside:avoid;

    }

    h2,

    h3{

        page-break-after:avoid;

    }

    a{

        color:#000;

        text-decoration:none;

    }

}


/* ==========================================================
   FUTURE DARK MODE PLACEHOLDER
   ========================================================== */

@media (prefers-color-scheme:dark){

    /*
        Reserved for BG007 v2.0

        Intentionally left blank.
    */

}


/* ==========================================================
   VERSION
   ========================================================== */

/*

-------------------------------------------------------------

BG007.CSS

Production Version 1.0

Developed for

DollarTypingService.com

Article

What Is a Professional Typing Service?

Optimized from cornerstone.css

Contains only the selectors used by BG-007.

Design Goals

✓ Lightweight

✓ Responsive

✓ Semantic HTML5

✓ Accessibility

✓ Core Web Vitals

✓ Fast Rendering

✓ Easy Maintenance

Expected Size

Development
≈20 KB

Minified
≈12 KB

Supports

Desktop
Tablet
Mobile

-------------------------------------------------------------

*/