/* =========================================================
   GREEN GROVE SOIL
   EXPLANATION BLOCK SYSTEM V1

   Uses existing website design tokens only.
   ========================================================= */


/* ---------------------------------------------------------
   INTRODUCTION
   --------------------------------------------------------- */

.gg-explain-intro{
    margin:0 0 28px;
    color:var(--text);
    font-size:1em;
}

.gg-explain-intro > *:last-child{
    margin-bottom:0;
}


/* ---------------------------------------------------------
   MAIN EXPLANATION BLOCK
   --------------------------------------------------------- */

.gg-explain-block{
    position:relative;

    margin:0 0 28px;

    padding:
        28px
        30px
        30px;

    background:#fff;

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

    border-radius:26px;

    box-shadow:none;

    overflow:hidden;

    scroll-margin-top:110px;
}


/*
 * Alternating rhythm without
 * introducing a new brand color.
 */
.gg-explain-block:nth-of-type(even){
    background:var(--soft);
}


/* ---------------------------------------------------------
   BLOCK HEADER
   --------------------------------------------------------- */

.gg-explain-head{
    display:grid;

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

    gap:15px;

    align-items:start;

    margin-bottom:18px;
}


.gg-explain-number{
    display:grid;

    place-items:center;

    width:48px;
    height:48px;

    flex:0 0 auto;

    color:var(--green);

    background:var(--soft);

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

    border-radius:16px;

    font-size:13px;

    font-weight:900;

    line-height:1;
}


.gg-explain-heading{
    min-width:0;
}


/*
 * Neutralize previous "large card H2"
 * rules because the section itself
 * is now the card.
 */
.gg-explain-heading h2{
    margin:0 !important;

    padding:3px 0 0 !important;

    color:
        var(
            --brand-dark,
            var(--green2)
        ) !important;

    background:
        transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    font-size:
        clamp(
            23px,
            2.2vw,
            30px
        ) !important;

    font-weight:900 !important;

    line-height:1.45 !important;
}


.gg-explain-heading h2::before,
.gg-explain-heading h2::after{
    display:none !important;
}


/* ---------------------------------------------------------
   BODY
   --------------------------------------------------------- */

.gg-explain-body{
    color:var(--text);

    font-size:1em;

    line-height:2;
}


.gg-explain-body > *:first-child{
    margin-top:0 !important;
}


.gg-explain-body > *:last-child{
    margin-bottom:0 !important;
}


.gg-explain-body p{
    max-width:none !important;

    margin:
        0
        0
        17px !important;
}


/* ---------------------------------------------------------
   LIST BLOCKS
   --------------------------------------------------------- */

.gg-explain-block--list
.gg-explain-body > ul,

.gg-explain-block--list
.gg-explain-body > ol{

    display:grid;

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

    gap:10px;

    margin:
        20px
        0
        0 !important;

    padding:
        0 !important;

    list-style:none;

    background:
        transparent !important;

    border:0 !important;

    border-radius:0 !important;
}


.gg-explain-block--list
.gg-explain-body > ul > li,

.gg-explain-block--list
.gg-explain-body > ol > li{

    position:relative;

    min-height:54px;

    margin:0 !important;

    padding:
        12px
        38px
        12px
        14px;

    display:flex;

    align-items:center;

    color:var(--text);

    background:#fff;

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

    border-radius:15px;

    line-height:1.7;
}


.gg-explain-block--list
.gg-explain-body > ul > li::before,

.gg-explain-block--list
.gg-explain-body > ol > li::before{

    content:"";

    position:absolute;

    right:16px;

    top:50%;

    width:8px;
    height:8px;

    border-radius:999px;

    background:var(--green);

    transform:
        translateY(-50%);
}


.gg-explain-block--list
.gg-explain-body > ul > li::marker,

.gg-explain-block--list
.gg-explain-body > ol > li::marker{
    content:"";
}


/* LTR */

html[dir="ltr"]
.gg-explain-block--list
.gg-explain-body > ul > li,

html[dir="ltr"]
.gg-explain-block--list
.gg-explain-body > ol > li{

    padding:
        12px
        14px
        12px
        38px;
}


html[dir="ltr"]
.gg-explain-block--list
.gg-explain-body > ul > li::before,

html[dir="ltr"]
.gg-explain-block--list
.gg-explain-body > ol > li::before{

    right:auto;
    left:16px;
}


/* ---------------------------------------------------------
   DECISION BLOCKS
   --------------------------------------------------------- */

.gg-explain-block--decision{
    border-inline-start:
        4px solid
        var(--green);
}


.gg-explain-block--decision
.gg-explain-number{
    color:#fff;

    background:var(--green);

    border-color:var(--green);
}


/* ---------------------------------------------------------
   COMPARISON BLOCKS
   --------------------------------------------------------- */

.gg-explain-block--comparison{
    background:var(--soft);
}


.gg-explain-block--comparison
.gg-explain-number{
    color:#fff;

    background:
        var(
            --green2,
            var(--green)
        );

    border-color:
        var(
            --green2,
            var(--green)
        );
}


/* ---------------------------------------------------------
   PROCESS / HOW-TO
   --------------------------------------------------------- */

.gg-explain-block--process
.gg-explain-head{
    padding-bottom:16px;

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


/* ---------------------------------------------------------
   TECHNICAL / IMPORTANT
   --------------------------------------------------------- */

.gg-explain-block--technical{

    background:
        var(--soft);

    border-inline-start:
        4px solid
        var(--green);
}


/* ---------------------------------------------------------
   TABLE BLOCK
   --------------------------------------------------------- */

.gg-explain-block--table
.gg-explain-body{
    overflow:hidden;
}


.gg-explain-block--table table{

    display:block;

    width:100%;

    max-width:100%;

    overflow-x:auto;

    margin:
        20px
        0
        0 !important;

    border:
        1px solid
        var(--line) !important;

    border-radius:
        18px !important;

    box-shadow:
        none !important;

    -webkit-overflow-scrolling:
        touch;
}


/* ---------------------------------------------------------
   IMAGES INSIDE BLOCKS
   --------------------------------------------------------- */

.gg-explain-body figure{
    margin:
        24px
        0
        4px !important;

    overflow:hidden;

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

    border-radius:20px;
}


.gg-explain-body figure img,
.gg-explain-body > img{

    display:block;

    width:100%;

    height:auto;

    border-radius:20px;

    transform:none !important;
}


.gg-explain-body figcaption{

    padding:
        11px
        14px;

    color:var(--muted);

    background:#fff;

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

    font-size:13px;
}


/* ---------------------------------------------------------
   INTERNAL H3 SUB-SECTIONS
   --------------------------------------------------------- */

.gg-explain-body h3{

    margin:
        27px
        0
        11px !important;

    padding:0 !important;

    color:
        var(
            --brand-dark,
            var(--green2)
        ) !important;

    font-size:
        21px !important;

    font-weight:
        900 !important;

    background:
        transparent !important;
}


.gg-explain-body h3::before{
    display:none !important;
}


/* ---------------------------------------------------------
   LINK PRESENTATION
   --------------------------------------------------------- */

.gg-explain-body a{

    color:var(--green);

    font-weight:700;

    text-decoration:
        underline;

    text-underline-offset:
        4px;
}


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

@media(max-width:760px){

    .gg-explain-block{

        margin-bottom:18px;

        padding:
            20px
            17px
            22px;

        border-radius:20px;
    }


    .gg-explain-head{

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

        gap:11px;

        margin-bottom:15px;
    }


    .gg-explain-number{

        width:39px;
        height:39px;

        border-radius:12px;

        font-size:11px;
    }


    .gg-explain-heading h2{

        padding-top:1px !important;

        font-size:
            22px !important;

        line-height:
            1.5 !important;
    }


    .gg-explain-body{

        font-size:
            16px;

        line-height:
            1.95;
    }


    .gg-explain-block--list
    .gg-explain-body > ul,

    .gg-explain-block--list
    .gg-explain-body > ol{

        grid-template-columns:
            1fr;
    }


    .gg-explain-block--list
    .gg-explain-body > ul > li,

    .gg-explain-block--list
    .gg-explain-body > ol > li{

        min-height:50px;

        border-radius:13px;
    }

}


/* =========================================================
   /GREEN GROVE EXPLANATION BLOCK SYSTEM V1
   ========================================================= */


/* =========================================================
   GGS ARTICLE BLOCK LAYOUT FIX V2
   ========================================================= */


/* ---------------------------------------------------------
   FIXED OFFICIAL HEADER OFFSET
   --------------------------------------------------------- */

html{
    scroll-padding-top:92px !important;
}

body:has(.gg-article-page){
    padding-top:72px !important;
    overflow-x:hidden !important;
}


/* ---------------------------------------------------------
   ARTICLE PAGE MUST STAY IN NORMAL DOCUMENT FLOW
   --------------------------------------------------------- */

.gg-article-page{
    display:block !important;

    width:100% !important;

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;

    overflow:visible !important;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.gg-article-hero{
    display:block !important;

    position:relative !important;

    top:auto !important;
    inset:auto !important;

    z-index:1 !important;

    width:100% !important;

    margin:0 !important;

    padding:
        46px
        0
        34px !important;

    overflow:visible !important;
}


.gg-article-hero-inner{
    position:relative !important;

    top:auto !important;

    width:
        min(
            1200px,
            calc(100% - 48px)
        ) !important;

    margin:
        0
        auto !important;
}


/* ---------------------------------------------------------
   NOTHING IN HERO MAY BE FIXED / STICKY
   --------------------------------------------------------- */

.gg-article-breadcrumb,
.gg-article-category,
.gg-article-hero h1,
.gg-article-summary,
.gg-article-meta,
.gg-article-figure{

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    inset:auto !important;

    transform:none !important;

    z-index:auto !important;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.gg-article-hero h1{

    display:block !important;

    max-width:950px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(
            --brand-dark,
            var(--green2)
        ) !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    white-space:
        normal !important;

    overflow:
        visible !important;

    font-size:
        clamp(
            34px,
            4vw,
            54px
        ) !important;

    font-weight:
        900 !important;

    line-height:
        1.35 !important;
}


/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.gg-article-summary{

    max-width:
        850px !important;

    margin:
        18px
        0
        0 !important;

    font-size:
        18px !important;

    line-height:
        1.9 !important;
}


/* ---------------------------------------------------------
   HERO IMAGE
   --------------------------------------------------------- */

.gg-article-figure{

    display:block !important;

    width:100% !important;

    margin:
        24px
        0
        0 !important;
}


.gg-article-figure img,
.gg-article-hero .article-hero-img{

    display:block !important;

    position:static !important;

    width:100% !important;

    height:auto !important;

    aspect-ratio:
        16 / 7.6 !important;

    max-height:
        540px !important;

    object-fit:
        cover !important;

    transform:
        none !important;

    border-radius:
        26px !important;
}


/* ---------------------------------------------------------
   REAL ARTICLE LAYOUT
   --------------------------------------------------------- */

.gg-article-layout{

    width:
        min(
            1200px,
            calc(100% - 48px)
        ) !important;

    margin:
        0
        auto !important;

    padding:
        50px
        0
        76px !important;

    display:grid !important;

    /*
       TOC = left
       Main explanation = right
    */
    grid-template-columns:
        280px
        minmax(0, 820px) !important;

    grid-template-areas:
        "toc main" !important;

    justify-content:
        center !important;

    align-items:
        start !important;

    gap:
        38px !important;

    direction:
        ltr !important;

    overflow:
        visible !important;
}


/* ---------------------------------------------------------
   MAIN COLUMN
   --------------------------------------------------------- */

.gg-article-main{

    grid-area:
        main !important;

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        820px !important;

    position:
        relative !important;

    overflow:
        visible !important;
}


.gg-article-page-ar
.gg-article-main{

    direction:
        rtl !important;

    text-align:
        right !important;
}


.gg-article-page-en
.gg-article-main{

    direction:
        ltr !important;

    text-align:
        left !important;
}


/* ---------------------------------------------------------
   DESKTOP TABLE OF CONTENTS
   --------------------------------------------------------- */

.gg-toc-desktop{

    grid-area:
        toc !important;

    display:block !important;

    position:
        sticky !important;

    top:
        96px !important;

    width:
        280px !important;

    max-width:
        280px !important;

    max-height:
        calc(100vh - 120px) !important;

    overflow-y:
        auto !important;

    direction:
        rtl !important;

    z-index:
        2 !important;
}


/* ---------------------------------------------------------
   ARTICLE CONTENT
   --------------------------------------------------------- */

.gg-article-main .article{

    display:block !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        auto !important;

    position:
        relative !important;

    overflow:
        visible !important;
}


/* ---------------------------------------------------------
   EXPLANATION BLOCKS
   --------------------------------------------------------- */

.gg-explain-block{

    display:block !important;

    position:relative !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        auto !important;

    margin:
        0
        0
        24px !important;

    padding:
        27px
        28px
        29px !important;

    overflow:
        visible !important;

    transform:
        none !important;
}


/*
 * Do not let titles from previous CSS become
 * fixed, absolute or layered over one another.
 */

.gg-explain-head,
.gg-explain-heading,
.gg-explain-heading h2,
.gg-explain-body,
.gg-explain-body h2,
.gg-explain-body h3{

    position:
        relative !important;

    top:
        auto !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        auto !important;

    inset:
        auto !important;

    transform:
        none !important;
}


.gg-explain-heading h2{

    display:block !important;

    width:auto !important;

    height:auto !important;

    margin:
        0 !important;

    padding:
        2px
        0
        0 !important;

    white-space:
        normal !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;

    z-index:
        auto !important;
}


/* ---------------------------------------------------------
   BLOCK PARAGRAPHS
   --------------------------------------------------------- */

.gg-explain-body p{

    width:
        auto !important;

    max-width:
        none !important;

    margin:
        0
        0
        17px !important;

    line-height:
        2 !important;
}


/* ---------------------------------------------------------
   LIST BLOCKS
   --------------------------------------------------------- */

.gg-explain-block--list
.gg-explain-body > ul,

.gg-explain-block--list
.gg-explain-body > ol{

    width:
        100% !important;

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


/* ---------------------------------------------------------
   PRODUCT / DOCS / FAQ / COMMUNITY
   --------------------------------------------------------- */

.gg-article-main .product-widget,
.gg-article-main .docs-panel,
.gg-article-main .faq,
.gg-article-main .feedback-section,
.gg-related-section,
.gg-final-cta{

    position:
        relative !important;

    width:
        100% !important;

    max-width:
        none !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;

    transform:
        none !important;
}


/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

.gg-explain-body table,
.gg-article-main .article-content table{

    max-width:
        100% !important;

    overflow-x:
        auto !important;
}


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

@media(max-width:1000px){

    body:has(.gg-article-page){
        padding-top:
            72px !important;
    }


    .gg-article-hero-inner,
    .gg-article-layout{

        width:
            min(
                900px,
                calc(100% - 30px)
            ) !important;
    }


    .gg-article-layout{

        display:block !important;

        padding-top:
            34px !important;
    }


    .gg-toc-desktop{

        display:
            none !important;
    }


    .gg-toc-mobile{

        display:
            block !important;
    }


    .gg-article-main{

        width:
            100% !important;

        max-width:
            none !important;
    }

}


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

@media(max-width:650px){

    body:has(.gg-article-page){

        padding-top:
            68px !important;
    }


    .gg-article-hero{

        padding:
            28px
            0
            24px !important;
    }


    .gg-article-hero-inner,
    .gg-article-layout{

        width:
            calc(100% - 24px)
            !important;
    }


    .gg-article-hero h1{

        font-size:
            29px !important;

        line-height:
            1.42 !important;
    }


    .gg-article-summary{

        font-size:
            16px !important;
    }


    .gg-article-figure img{

        aspect-ratio:
            16 / 9 !important;

        border-radius:
            18px !important;
    }


    .gg-explain-block{

        margin-bottom:
            15px !important;

        padding:
            19px
            16px
            21px !important;

        border-radius:
            18px !important;
    }


    .gg-explain-block--list
    .gg-explain-body > ul,

    .gg-explain-block--list
    .gg-explain-body > ol{

        grid-template-columns:
            1fr !important;
    }

}


/* /GGS ARTICLE BLOCK LAYOUT FIX V2 */


/* =========================================================
   GGS EXPLANATION CARD STYLE V3
   Reference design: clean white technical cards
   ========================================================= */


/* PAGE RHYTHM */

.gg-article-main{
    background:transparent !important;
}


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

.gg-explain-block,
.gg-explain-block:nth-of-type(even),
.gg-explain-block--comparison,
.gg-explain-block--decision,
.gg-explain-block--process,
.gg-explain-block--technical,
.gg-explain-block--list{

    display:block !important;

    width:100% !important;

    margin:
        0
        0
        26px !important;

    padding:
        27px
        30px
        28px !important;

    background:
        #ffffff !important;

    border:
        1px solid
        rgba(4,78,35,.025) !important;

    border-inline-start:
        1px solid
        rgba(4,78,35,.025) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 9px 30px
        rgba(15,23,42,.065) !important;

    overflow:
        visible !important;
}


/* =========================================================
   REMOVE NUMBERS
   ========================================================= */

.gg-explain-number{
    display:none !important;
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.gg-explain-head,
.gg-explain-block--process .gg-explain-head{

    display:block !important;

    margin:
        0
        0
        11px !important;

    padding:
        0 !important;

    border:
        0 !important;
}


.gg-explain-heading{
    display:block !important;

    width:100% !important;
}


/* TITLE - SAME FEEL AS REFERENCE */

.gg-explain-heading h2{

    display:block !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #044e23 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    font-size:
        17px !important;

    font-weight:
        900 !important;

    line-height:
        1.6 !important;
}


.gg-explain-heading h2::before,
.gg-explain-heading h2::after{
    display:none !important;
}


/* =========================================================
   BODY TEXT
   ========================================================= */

.gg-explain-body{

    color:
        #4d5767 !important;

    font-size:
        14.5px !important;

    font-weight:
        400 !important;

    line-height:
        2.05 !important;
}


.gg-explain-body p{

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0
        0
        10px !important;

    color:
        #4d5767 !important;

    line-height:
        2.05 !important;
}


.gg-explain-body p:last-child{
    margin-bottom:0 !important;
}


/* =========================================================
   SIMPLE BULLET LIST
   ========================================================= */

.gg-explain-block--list
.gg-explain-body > ul,

.gg-explain-body > ul{

    display:block !important;

    width:100% !important;

    margin:
        7px
        0
        0 !important;

    padding:
        0
        22px
        0
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    list-style:
        disc !important;
}


.gg-explain-block--list
.gg-explain-body > ul > li,

.gg-explain-body > ul > li{

    display:list-item !important;

    position:static !important;

    width:auto !important;

    min-height:0 !important;

    margin:
        4px
        0 !important;

    padding:
        0
        2px
        0
        0 !important;

    color:
        #4d5767 !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    line-height:
        1.95 !important;
}


/* remove previous custom dot */

.gg-explain-block--list
.gg-explain-body > ul > li::before,

.gg-explain-body > ul > li::before{
    display:none !important;
}


/* native green bullet */

.gg-explain-block--list
.gg-explain-body > ul > li::marker,

.gg-explain-body > ul > li::marker{

    color:
        #0b7a36 !important;

    font-size:
        .85em !important;
}


/* =========================================================
   ORDERED LIST
   ========================================================= */

.gg-explain-body > ol{

    display:block !important;

    margin:
        7px
        0
        0 !important;

    padding:
        0
        24px
        0
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;
}


.gg-explain-body > ol > li{

    display:list-item !important;

    min-height:0 !important;

    margin:
        5px
        0 !important;

    padding:0 !important;

    color:
        #4d5767 !important;

    background:
        transparent !important;

    border:
        0 !important;

    line-height:
        1.95 !important;
}


.gg-explain-body > ol > li::before{
    display:none !important;
}


.gg-explain-body > ol > li::marker{

    color:
        #0b7a36 !important;

    font-weight:
        800 !important;
}


/* =========================================================
   H3 INSIDE CARD
   ========================================================= */

.gg-explain-body h3{

    margin:
        18px
        0
        7px !important;

    padding:
        0 !important;

    color:
        #044e23 !important;

    font-size:
        16px !important;

    font-weight:
        800 !important;

    line-height:
        1.7 !important;
}


.gg-explain-body h3::before{
    display:none !important;
}


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

.gg-explain-body a{

    color:
        #075f2d !important;

    font-weight:
        700 !important;

    text-decoration:
        underline !important;

    text-decoration-thickness:
        1px !important;

    text-underline-offset:
        3px !important;
}


/* =========================================================
   IMAGES INSIDE CARD
   ========================================================= */

.gg-explain-body figure{

    margin:
        18px
        0
        2px !important;

    border:
        0 !important;

    border-radius:
        12px !important;

    overflow:
        hidden !important;
}


.gg-explain-body figure img,
.gg-explain-body > img{

    width:
        100% !important;

    height:
        auto !important;

    border-radius:
        12px !important;

    box-shadow:
        none !important;
}


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

.gg-explain-body table{

    margin:
        17px
        0
        0 !important;

    background:#fff !important;

    border:
        1px solid
        #e8ece9 !important;

    border-radius:
        12px !important;

    box-shadow:
        none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

    .gg-explain-block,
    .gg-explain-block:nth-of-type(even),
    .gg-explain-block--comparison,
    .gg-explain-block--decision,
    .gg-explain-block--process,
    .gg-explain-block--technical,
    .gg-explain-block--list{

        margin-bottom:
            17px !important;

        padding:
            21px
            18px
            22px !important;

        border-radius:
            13px !important;

        box-shadow:
            0 7px 23px
            rgba(15,23,42,.06)
            !important;
    }


    .gg-explain-heading h2{

        font-size:
            16px !important;

        line-height:
            1.65 !important;
    }


    .gg-explain-body{

        font-size:
            14px !important;

        line-height:
            2 !important;
    }

}


/* /GGS EXPLANATION CARD STYLE V3 */


/* =========================================================
   GGS ARTICLE TITLE TUNE V4
   Make block titles more integrated and slightly larger
   ========================================================= */

.gg-explain-head{
    display:block !important;
    margin:0 0 14px !important;
    padding:0 0 10px !important;
    border-bottom:1px solid #edf2ee !important;
}

.gg-explain-heading{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
}

.gg-explain-heading h2{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    color:#044e23 !important;
    font-size:23px !important;
    font-weight:900 !important;
    line-height:1.55 !important;
    letter-spacing:0 !important;
    text-align:right !important;
    white-space:normal !important;
    overflow:visible !important;
    text-wrap:balance !important;
}

.gg-article-page-en .gg-explain-heading h2{
    text-align:left !important;
}

.gg-explain-body{
    font-size:15.5px !important;
    line-height:2.08 !important;
}

.gg-explain-body p{
    font-size:15.5px !important;
    line-height:2.08 !important;
}

@media(max-width:650px){

    .gg-explain-head{
        margin:0 0 12px !important;
        padding:0 0 9px !important;
    }

    .gg-explain-heading h2{
        font-size:20px !important;
        line-height:1.6 !important;
    }

    .gg-explain-body,
    .gg-explain-body p{
        font-size:14.5px !important;
        line-height:2.02 !important;
    }
}

/* /GGS ARTICLE TITLE TUNE V4 */


/* =========================================================
   GGS ALL EXPLANATION BLOCKS UNIFIED V5
   Applies to EVERY explanation block in EVERY article
   ========================================================= */


/* ALL BLOCK TYPES = SAME VISUAL IDENTITY */

.gg-explain-block,
.gg-explain-block--list,
.gg-explain-block--table,
.gg-explain-block--note,
.gg-explain-block--comparison,
.gg-explain-block--decision,
.gg-explain-block--process,
.gg-explain-block--technical,
.gg-explain-block:nth-of-type(odd),
.gg-explain-block:nth-of-type(even){

    display:block !important;

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

    margin:0 0 24px !important;

    padding:28px 30px 30px !important;

    background:#ffffff !important;

    border:1px solid #eef1ef !important;

    border-inline-start:1px solid #eef1ef !important;

    border-radius:15px !important;

    box-shadow:
        0 8px 28px
        rgba(15,23,42,.055) !important;

    position:relative !important;

    overflow:hidden !important;

    transform:none !important;
}


/* REMOVE OLD NUMBERS / SPECIAL MARKERS */

.gg-explain-number{
    display:none !important;
}


/* HEADER */

.gg-explain-head,
.gg-explain-block--process .gg-explain-head{

    display:block !important;

    width:100% !important;

    margin:0 0 14px !important;

    padding:0 0 11px !important;

    border:0 !important;

    border-bottom:
        1px solid
        #edf1ee !important;
}


.gg-explain-heading{
    display:block !important;
    width:100% !important;
}


/* ALL H2 TITLES */

.gg-explain-block .gg-explain-heading h2{

    display:block !important;

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

    margin:0 !important;
    padding:0 !important;

    color:#045326 !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    font-size:23px !important;

    font-weight:900 !important;

    line-height:1.55 !important;

    text-align:right !important;

    white-space:normal !important;

    overflow:visible !important;
}


.gg-explain-block .gg-explain-heading h2::before,
.gg-explain-block .gg-explain-heading h2::after{
    display:none !important;
}


/* ENGLISH */

html[dir="ltr"]
.gg-explain-block
.gg-explain-heading h2{

    text-align:left !important;
}


/* BODY */

.gg-explain-block .gg-explain-body{

    width:100% !important;

    color:#535e6d !important;

    font-size:16px !important;

    font-weight:400 !important;

    line-height:2.05 !important;
}


.gg-explain-block .gg-explain-body p{

    width:100% !important;

    max-width:none !important;

    margin:0 0 12px !important;

    padding:0 !important;

    color:#535e6d !important;

    font-size:16px !important;

    line-height:2.05 !important;
}


.gg-explain-block .gg-explain-body p:last-child{
    margin-bottom:0 !important;
}


/* H3 INSIDE BLOCK */

.gg-explain-block .gg-explain-body h3{

    display:block !important;

    margin:20px 0 8px !important;

    padding:0 !important;

    color:#045326 !important;

    background:transparent !important;

    font-size:18px !important;

    font-weight:800 !important;

    line-height:1.65 !important;
}


.gg-explain-block .gg-explain-body h3::before,
.gg-explain-block .gg-explain-body h3::after{
    display:none !important;
}


/* ALL UL LISTS = SIMPLE REFERENCE STYLE */

.gg-explain-block .gg-explain-body ul{

    display:block !important;

    width:100% !important;

    margin:8px 0 0 !important;

    padding:0 23px 0 0 !important;

    list-style:disc !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;
}


.gg-explain-block .gg-explain-body ul li{

    display:list-item !important;

    position:static !important;

    width:auto !important;

    min-height:0 !important;

    margin:5px 0 !important;

    padding:0 3px 0 0 !important;

    color:#535e6d !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    font-size:15.5px !important;

    line-height:1.95 !important;
}


.gg-explain-block .gg-explain-body ul li::before{
    display:none !important;
}


.gg-explain-block .gg-explain-body ul li::marker{

    color:#087739 !important;

    font-size:.85em !important;
}


/* ORDERED LISTS */

.gg-explain-block .gg-explain-body ol{

    display:block !important;

    margin:8px 0 0 !important;

    padding:0 25px 0 0 !important;

    background:transparent !important;

    border:0 !important;
}


.gg-explain-block .gg-explain-body ol li{

    display:list-item !important;

    min-height:0 !important;

    margin:5px 0 !important;

    padding:0 !important;

    color:#535e6d !important;

    background:transparent !important;

    border:0 !important;

    font-size:15.5px !important;

    line-height:1.95 !important;
}


.gg-explain-block .gg-explain-body ol li::before{
    display:none !important;
}


.gg-explain-block .gg-explain-body ol li::marker{

    color:#087739 !important;

    font-weight:800 !important;
}


/* ENGLISH LIST PADDING */

html[dir="ltr"]
.gg-explain-block .gg-explain-body ul{

    padding:
        0
        0
        0
        23px !important;
}


html[dir="ltr"]
.gg-explain-block .gg-explain-body ol{

    padding:
        0
        0
        0
        25px !important;
}


/* LINKS */

.gg-explain-block .gg-explain-body a{

    color:#086b35 !important;

    font-weight:700 !important;

    text-decoration:
        underline !important;

    text-decoration-thickness:
        1px !important;

    text-underline-offset:
        3px !important;
}


/* BLOCK IMAGES */

.gg-explain-block .gg-explain-body figure{

    width:100% !important;

    margin:20px 0 2px !important;

    overflow:hidden !important;

    background:transparent !important;

    border:0 !important;

    border-radius:13px !important;

    box-shadow:none !important;
}


.gg-explain-block .gg-explain-body figure img,
.gg-explain-block .gg-explain-body > img{

    display:block !important;

    width:100% !important;

    height:auto !important;

    border-radius:13px !important;

    box-shadow:none !important;

    transform:none !important;
}


/* TABLES */

.gg-explain-block .gg-explain-body table{

    width:100% !important;

    margin:18px 0 0 !important;

    background:#fff !important;

    border:
        1px solid
        #e6ebe7 !important;

    border-radius:12px !important;

    box-shadow:none !important;
}


/* BLOCKQUOTES / TECHNICAL NOTES */

.gg-explain-block .gg-explain-body blockquote{

    margin:18px 0 0 !important;

    padding:14px 16px !important;

    color:#535e6d !important;

    background:#f7faf8 !important;

    border:0 !important;

    border-right:
        3px solid
        #087739 !important;

    border-radius:10px !important;

    box-shadow:none !important;
}


/* MOBILE */

@media(max-width:650px){

    .gg-explain-block,
    .gg-explain-block--list,
    .gg-explain-block--table,
    .gg-explain-block--note,
    .gg-explain-block--comparison,
    .gg-explain-block--decision,
    .gg-explain-block--process,
    .gg-explain-block--technical{

        margin-bottom:17px !important;

        padding:
            21px
            18px
            22px !important;

        border-radius:
            13px !important;

        box-shadow:
            0 6px 21px
            rgba(15,23,42,.05)
            !important;
    }


    .gg-explain-head{

        margin-bottom:
            11px !important;

        padding-bottom:
            9px !important;
    }


    .gg-explain-block
    .gg-explain-heading h2{

        font-size:
            20px !important;

        line-height:
            1.6 !important;
    }


    .gg-explain-block
    .gg-explain-body,

    .gg-explain-block
    .gg-explain-body p{

        font-size:
            15px !important;

        line-height:
            2 !important;
    }


    .gg-explain-block
    .gg-explain-body ul li,

    .gg-explain-block
    .gg-explain-body ol li{

        font-size:
            14.5px !important;
    }

}


/* /GGS ALL EXPLANATION BLOCKS UNIFIED V5 */


/* =========================================================
   GGS ARTICLE HERO REFINE V6
   Improve title + hero image
   ========================================================= */


/* HERO WRAP */

.gg-article-hero{
    padding:38px 0 26px !important;
}

.gg-article-hero-inner{
    width:min(1140px, calc(100% - 40px)) !important;
    margin:0 auto !important;
    text-align:center !important;
}


/* BREADCRUMB + CATEGORY */

.gg-article-breadcrumb{
    margin:0 auto 12px !important;
    color:#6a7280 !important;
    font-size:13px !important;
    line-height:1.8 !important;
}

.gg-article-category{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 auto 14px !important;
    padding:8px 14px !important;
    background:#f4faf6 !important;
    color:#0a6b35 !important;
    border:1px solid #dcecdf !important;
    border-radius:999px !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1 !important;
}


/* TITLE */

.gg-article-hero h1{
    display:block !important;
    width:100% !important;
    max-width:980px !important;
    margin:0 auto 18px !important;
    padding:0 !important;
    color:#045326 !important;
    font-size:clamp(38px, 5vw, 68px) !important;
    font-weight:900 !important;
    line-height:1.18 !important;
    letter-spacing:-0.02em !important;
    text-align:center !important;
    text-wrap:balance !important;
    white-space:normal !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}


/* SUMMARY */

.gg-article-summary{
    max-width:760px !important;
    margin:0 auto 14px !important;
    color:#5f6977 !important;
    font-size:18px !important;
    font-weight:400 !important;
    line-height:2 !important;
    text-align:center !important;
}


/* META */

.gg-article-meta,
.gg-article-hero .meta{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:10px 16px !important;
    margin:0 auto !important;
    color:#6d7582 !important;
    font-size:13.5px !important;
    line-height:1.8 !important;
}

.gg-article-meta span,
.gg-article-hero .meta span{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
}


/* HERO IMAGE CARD */

.gg-article-figure{
    position:relative !important;
    width:min(980px, 100%) !important;
    margin:34px auto 0 !important;
    padding:14px !important;
    background:#ffffff !important;
    border:1px solid #edf1ee !important;
    border-radius:30px !important;
    box-shadow:
        0 16px 45px rgba(15,23,42,.08) !important;
    overflow:hidden !important;
}

.gg-article-figure::before,
.gg-article-figure::after{
    display:none !important;
    content:none !important;
}


/* HERO IMAGE */

.gg-article-figure img,
.gg-article-hero .article-hero-img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 9.2 !important;
    max-height:560px !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:#eff5f1 !important;
    border-radius:22px !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
}


/* IF THERE IS CAPTION */

.gg-article-figure figcaption{
    margin-top:10px !important;
    color:#76808c !important;
    font-size:12.5px !important;
    line-height:1.8 !important;
    text-align:center !important;
}


/* MOBILE */

@media(max-width:900px){

    .gg-article-hero{
        padding:28px 0 20px !important;
    }

    .gg-article-hero-inner{
        width:min(100%, calc(100% - 26px)) !important;
    }

    .gg-article-hero h1{
        max-width:100% !important;
        font-size:clamp(30px, 8vw, 46px) !important;
        line-height:1.24 !important;
        margin-bottom:14px !important;
    }

    .gg-article-summary{
        max-width:100% !important;
        font-size:16px !important;
        line-height:1.95 !important;
        margin-bottom:12px !important;
    }

    .gg-article-meta,
    .gg-article-hero .meta{
        gap:8px 12px !important;
        font-size:12.5px !important;
    }

    .gg-article-figure{
        margin-top:24px !important;
        padding:10px !important;
        border-radius:22px !important;
    }

    .gg-article-figure img,
    .gg-article-hero .article-hero-img{
        aspect-ratio:16 / 10 !important;
        border-radius:16px !important;
    }
}


/* /GGS ARTICLE HERO REFINE V6 */


/* =========================================================
   GGS ARTICLE HERO TITLE + IMAGE V7
   Big centered title, summary under it, image below hero
   ========================================================= */


/* ARTICLE TOP LAYOUT */

.article{
    display:flex !important;
    flex-direction:column !important;
}


/* BREADCRUMB */

.article > .breadcrumb{
    order:1 !important;
    width:fit-content !important;
    max-width:100% !important;
    margin:8px auto 18px !important;
    padding:8px 14px !important;
    color:#0b6d35 !important;
    background:#f4faf6 !important;
    border:1px solid #dcecdf !important;
    border-radius:999px !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
}


/* TITLE */

.article > h1{
    order:2 !important;
    width:100% !important;
    max-width:920px !important;
    margin:0 auto 20px !important;
    padding:0 !important;
    color:#044e23 !important;
    font-size:clamp(42px, 5.3vw, 78px) !important;
    font-weight:900 !important;
    line-height:1.12 !important;
    letter-spacing:-0.02em !important;
    text-align:center !important;
    text-wrap:balance !important;
    white-space:normal !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}


/* SUMMARY */

.article > .summary{
    order:3 !important;
    width:100% !important;
    max-width:840px !important;
    margin:0 auto 14px !important;
    padding:0 !important;
    color:#5f6977 !important;
    font-size:20px !important;
    font-weight:400 !important;
    line-height:1.95 !important;
    text-align:center !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}


/* META */

.article > .meta{
    order:4 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:10px 16px !important;
    width:100% !important;
    margin:0 auto 26px !important;
    padding:0 !important;
    color:#78818d !important;
    font-size:13.5px !important;
    line-height:1.8 !important;
    text-align:center !important;
    border:0 !important;
    background:transparent !important;
}

.article > .meta span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
}


/* HERO IMAGE BELOW TITLE AREA */

.article > .article-hero-img{
    order:5 !important;
    display:block !important;
    width:min(100%, 1080px) !important;
    max-width:1080px !important;
    height:auto !important;
    margin:0 auto 34px !important;
    border:1px solid #e7ede9 !important;
    border-radius:28px !important;
    box-shadow:0 18px 46px rgba(15,23,42,.08) !important;
    background:#eef4f0 !important;
    object-fit:cover !important;
    object-position:center center !important;
    overflow:hidden !important;
}


/* PRODUCT WIDGET AFTER IMAGE */

.article > .product-widget,
.article > #order-box{
    order:6 !important;
}


/* ARTICLE CONTENT AFTER HERO */

.article > .article-content{
    order:7 !important;
}

.article > .faq{
    order:8 !important;
}

.article > .feedback-section{
    order:9 !important;
}

.article > .section{
    order:10 !important;
}


/* ENGLISH */

html[dir="ltr"] .article > h1,
html[dir="ltr"] .article > .summary,
html[dir="ltr"] .article > .meta{
    text-align:center !important;
}


/* MOBILE */

@media(max-width:900px){

    .article > .breadcrumb{
        margin:6px auto 14px !important;
        padding:7px 12px !important;
        font-size:12px !important;
    }

    .article > h1{
        max-width:100% !important;
        margin-bottom:14px !important;
        font-size:clamp(30px, 8vw, 50px) !important;
        line-height:1.2 !important;
    }

    .article > .summary{
        max-width:100% !important;
        margin-bottom:12px !important;
        font-size:16px !important;
        line-height:1.9 !important;
    }

    .article > .meta{
        gap:8px 12px !important;
        margin-bottom:20px !important;
        font-size:12.5px !important;
    }

    .article > .article-hero-img{
        width:100% !important;
        margin-bottom:24px !important;
        border-radius:20px !important;
    }
}


/* /GGS ARTICLE HERO TITLE + IMAGE V7 */


/* =========================================================
   GGS ARTICLE HERO TITLE + IMAGE V7
   Big centered title, summary under it, image below hero
   ========================================================= */


/* ARTICLE TOP LAYOUT */

.article{
    display:flex !important;
    flex-direction:column !important;
}


/* BREADCRUMB */

.article > .breadcrumb{
    order:1 !important;
    width:fit-content !important;
    max-width:100% !important;
    margin:8px auto 18px !important;
    padding:8px 14px !important;
    color:#0b6d35 !important;
    background:#f4faf6 !important;
    border:1px solid #dcecdf !important;
    border-radius:999px !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
}


/* TITLE */

.article > h1{
    order:2 !important;
    width:100% !important;
    max-width:920px !important;
    margin:0 auto 20px !important;
    padding:0 !important;
    color:#044e23 !important;
    font-size:clamp(42px, 5.3vw, 78px) !important;
    font-weight:900 !important;
    line-height:1.12 !important;
    letter-spacing:-0.02em !important;
    text-align:center !important;
    text-wrap:balance !important;
    white-space:normal !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}


/* SUMMARY */

.article > .summary{
    order:3 !important;
    width:100% !important;
    max-width:840px !important;
    margin:0 auto 14px !important;
    padding:0 !important;
    color:#5f6977 !important;
    font-size:20px !important;
    font-weight:400 !important;
    line-height:1.95 !important;
    text-align:center !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}


/* META */

.article > .meta{
    order:4 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:10px 16px !important;
    width:100% !important;
    margin:0 auto 26px !important;
    padding:0 !important;
    color:#78818d !important;
    font-size:13.5px !important;
    line-height:1.8 !important;
    text-align:center !important;
    border:0 !important;
    background:transparent !important;
}

.article > .meta span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
}


/* HERO IMAGE BELOW TITLE AREA */

.article > .article-hero-img{
    order:5 !important;
    display:block !important;
    width:min(100%, 1080px) !important;
    max-width:1080px !important;
    height:auto !important;
    margin:0 auto 34px !important;
    border:1px solid #e7ede9 !important;
    border-radius:28px !important;
    box-shadow:0 18px 46px rgba(15,23,42,.08) !important;
    background:#eef4f0 !important;
    object-fit:cover !important;
    object-position:center center !important;
    overflow:hidden !important;
}


/* PRODUCT WIDGET AFTER IMAGE */

.article > .product-widget,
.article > #order-box{
    order:6 !important;
}


/* ARTICLE CONTENT AFTER HERO */

.article > .article-content{
    order:7 !important;
}

.article > .faq{
    order:8 !important;
}

.article > .feedback-section{
    order:9 !important;
}

.article > .section{
    order:10 !important;
}


/* ENGLISH */

html[dir="ltr"] .article > h1,
html[dir="ltr"] .article > .summary,
html[dir="ltr"] .article > .meta{
    text-align:center !important;
}


/* MOBILE */

@media(max-width:900px){

    .article > .breadcrumb{
        margin:6px auto 14px !important;
        padding:7px 12px !important;
        font-size:12px !important;
    }

    .article > h1{
        max-width:100% !important;
        margin-bottom:14px !important;
        font-size:clamp(30px, 8vw, 50px) !important;
        line-height:1.2 !important;
    }

    .article > .summary{
        max-width:100% !important;
        margin-bottom:12px !important;
        font-size:16px !important;
        line-height:1.9 !important;
    }

    .article > .meta{
        gap:8px 12px !important;
        margin-bottom:20px !important;
        font-size:12.5px !important;
    }

    .article > .article-hero-img{
        width:100% !important;
        margin-bottom:24px !important;
        border-radius:20px !important;
    }
}


/* /GGS ARTICLE HERO TITLE + IMAGE V7 */


/* =========================================================
   GGS ARTICLE HERO TITLE + IMAGE V7
   Big centered title, summary under it, image below hero
   ========================================================= */


/* ARTICLE TOP LAYOUT */

.article{
    display:flex !important;
    flex-direction:column !important;
}


/* BREADCRUMB */

.article > .breadcrumb{
    order:1 !important;
    width:fit-content !important;
    max-width:100% !important;
    margin:8px auto 18px !important;
    padding:8px 14px !important;
    color:#0b6d35 !important;
    background:#f4faf6 !important;
    border:1px solid #dcecdf !important;
    border-radius:999px !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
}


/* TITLE */

.article > h1{
    order:2 !important;
    width:100% !important;
    max-width:920px !important;
    margin:0 auto 20px !important;
    padding:0 !important;
    color:#044e23 !important;
    font-size:clamp(42px, 5.3vw, 78px) !important;
    font-weight:900 !important;
    line-height:1.12 !important;
    letter-spacing:-0.02em !important;
    text-align:center !important;
    text-wrap:balance !important;
    white-space:normal !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}


/* SUMMARY */

.article > .summary{
    order:3 !important;
    width:100% !important;
    max-width:840px !important;
    margin:0 auto 14px !important;
    padding:0 !important;
    color:#5f6977 !important;
    font-size:20px !important;
    font-weight:400 !important;
    line-height:1.95 !important;
    text-align:center !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}


/* META */

.article > .meta{
    order:4 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:10px 16px !important;
    width:100% !important;
    margin:0 auto 26px !important;
    padding:0 !important;
    color:#78818d !important;
    font-size:13.5px !important;
    line-height:1.8 !important;
    text-align:center !important;
    border:0 !important;
    background:transparent !important;
}

.article > .meta span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
}


/* HERO IMAGE BELOW TITLE AREA */

.article > .article-hero-img{
    order:5 !important;
    display:block !important;
    width:min(100%, 1080px) !important;
    max-width:1080px !important;
    height:auto !important;
    margin:0 auto 34px !important;
    border:1px solid #e7ede9 !important;
    border-radius:28px !important;
    box-shadow:0 18px 46px rgba(15,23,42,.08) !important;
    background:#eef4f0 !important;
    object-fit:cover !important;
    object-position:center center !important;
    overflow:hidden !important;
}


/* PRODUCT WIDGET AFTER IMAGE */

.article > .product-widget,
.article > #order-box{
    order:6 !important;
}


/* ARTICLE CONTENT AFTER HERO */

.article > .article-content{
    order:7 !important;
}

.article > .faq{
    order:8 !important;
}

.article > .feedback-section{
    order:9 !important;
}

.article > .section{
    order:10 !important;
}


/* ENGLISH */

html[dir="ltr"] .article > h1,
html[dir="ltr"] .article > .summary,
html[dir="ltr"] .article > .meta{
    text-align:center !important;
}


/* MOBILE */

@media(max-width:900px){

    .article > .breadcrumb{
        margin:6px auto 14px !important;
        padding:7px 12px !important;
        font-size:12px !important;
    }

    .article > h1{
        max-width:100% !important;
        margin-bottom:14px !important;
        font-size:clamp(30px, 8vw, 50px) !important;
        line-height:1.2 !important;
    }

    .article > .summary{
        max-width:100% !important;
        margin-bottom:12px !important;
        font-size:16px !important;
        line-height:1.9 !important;
    }

    .article > .meta{
        gap:8px 12px !important;
        margin-bottom:20px !important;
        font-size:12.5px !important;
    }

    .article > .article-hero-img{
        width:100% !important;
        margin-bottom:24px !important;
        border-radius:20px !important;
    }
}


/* /GGS ARTICLE HERO TITLE + IMAGE V7 */


/* =========================================================
   GGS REAL ARTICLE HERO V8
   Correct selectors for current V6 article structure
   ========================================================= */


/* ---------------------------------------------------------
   HERO SECTION
   --------------------------------------------------------- */

.gg-article-hero{
    width:100% !important;

    padding:
        38px
        0
        34px !important;

    background:
        #ffffff !important;

    border:0 !important;
}


/* ---------------------------------------------------------
   TITLE CARD
   --------------------------------------------------------- */

.gg-article-hero-inner{
    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    width:
        min(
            1160px,
            calc(100% - 44px)
        ) !important;

    margin:
        0
        auto !important;

    padding:
        46px
        56px
        0 !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbf8 100%
        ) !important;

    border:
        1px solid
        #dce9df !important;

    border-radius:
        28px !important;

    box-shadow:
        0 16px 45px
        rgba(15,23,42,.05)
        !important;

    text-align:
        center !important;

    overflow:
        visible !important;
}


/* ---------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------- */

.gg-article-breadcrumb{

    align-self:
        stretch !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    margin:
        0
        0
        18px !important;

    color:
        #758078 !important;

    font-size:
        12px !important;

    text-align:
        right !important;
}


/* ---------------------------------------------------------
   CATEGORY BADGE
   --------------------------------------------------------- */

.gg-article-category{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    align-self:
        flex-end !important;

    width:
        auto !important;

    margin:
        0
        0
        22px !important;

    padding:
        8px
        15px !important;

    color:
        #ffffff !important;

    background:
        #08733c !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    font-size:
        12px !important;

    font-weight:
        900 !important;

    line-height:
        1.35 !important;
}


/* ---------------------------------------------------------
   MAIN TITLE
   --------------------------------------------------------- */

.gg-article-hero h1{

    position:
        static !important;

    display:block !important;

    width:
        100% !important;

    max-width:
        930px !important;

    margin:
        0
        auto
        23px !important;

    padding:
        0 !important;

    color:
        #064b2f !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    font-size:
        clamp(
            44px,
            5.2vw,
            72px
        ) !important;

    font-weight:
        900 !important;

    line-height:
        1.18 !important;

    letter-spacing:
        -.035em !important;

    text-align:
        center !important;

    text-wrap:
        balance !important;

    white-space:
        normal !important;

    overflow:
        visible !important;

    transform:
        none !important;
}


/* ---------------------------------------------------------
   ARTICLE SUMMARY
   --------------------------------------------------------- */

.gg-article-summary{

    width:
        100% !important;

    max-width:
        830px !important;

    margin:
        0
        auto
        17px !important;

    padding:
        0 !important;

    color:
        #58665f !important;

    background:
        transparent !important;

    border:
        0 !important;

    font-size:
        17px !important;

    font-weight:
        400 !important;

    line-height:
        2 !important;

    text-align:
        center !important;
}


/* ---------------------------------------------------------
   ARTICLE META
   --------------------------------------------------------- */

.gg-article-meta{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex-wrap:wrap !important;

    width:
        100% !important;

    gap:
        7px
        14px !important;

    margin:
        0
        auto
        32px !important;

    padding:
        0 !important;

    color:
        #718078 !important;

    font-size:
        12.5px !important;

    text-align:
        center !important;
}


.gg-article-meta span{

    display:inline-flex !important;

    align-items:center !important;

    white-space:
        nowrap !important;
}


/* ---------------------------------------------------------
   IMAGE
   This is BELOW the title card content
   --------------------------------------------------------- */

.gg-article-figure{

    position:
        relative !important;

    display:block !important;

    width:
        calc(100% + 2px) !important;

    max-width:
        none !important;

    margin:
        0
        -1px
        -1px !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    background:
        #eef4ef !important;

    border:
        0 !important;

    border-radius:
        0
        0
        27px
        27px !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


.gg-article-figure img,
.gg-article-figure .article-hero-img{

    position:
        static !important;

    display:block !important;

    width:
        100% !important;

    height:
        auto !important;

    max-height:
        590px !important;

    aspect-ratio:
        16 / 8.2 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    object-fit:
        cover !important;

    object-position:
        center !important;

    background:
        #eef4ef !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


/* ---------------------------------------------------------
   ENGLISH
   --------------------------------------------------------- */

.gg-article-page-en
.gg-article-breadcrumb{

    text-align:
        left !important;

    justify-content:
        flex-start !important;
}


.gg-article-page-en
.gg-article-category{

    align-self:
        flex-start !important;
}


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

@media(max-width:700px){

    .gg-article-hero{

        padding:
            20px
            0
            24px !important;
    }


    .gg-article-hero-inner{

        width:
            calc(100% - 20px)
            !important;

        padding:
            28px
            20px
            0 !important;

        border-radius:
            20px !important;
    }


    .gg-article-breadcrumb{

        margin-bottom:
            13px !important;

        font-size:
            11px !important;
    }


    .gg-article-category{

        margin-bottom:
            17px !important;

        padding:
            7px
            12px !important;

        font-size:
            11px !important;
    }


    .gg-article-hero h1{

        max-width:
            100% !important;

        margin-bottom:
            16px !important;

        font-size:
            clamp(
                31px,
                9vw,
                45px
            ) !important;

        line-height:
            1.28 !important;
    }


    .gg-article-summary{

        font-size:
            15px !important;

        line-height:
            1.9 !important;
    }


    .gg-article-meta{

        margin-bottom:
            22px !important;

        font-size:
            11.5px !important;
    }


    .gg-article-figure{

        width:
            calc(100% + 2px) !important;

        border-radius:
            0
            0
            19px
            19px !important;
    }


    .gg-article-figure img,
    .gg-article-figure .article-hero-img{

        aspect-ratio:
            16 / 10 !important;

        max-height:
            none !important;
    }

}


/* /GGS REAL ARTICLE HERO V8 */


/* =========================================================
   GGS ARTICLE HERO RTL + EXPORT STYLE V9
   Fix Arabic hero alignment and lower content like export page
   ========================================================= */


/* ---------- ARABIC HERO CONTAINER ---------- */

html[dir="rtl"] .gg-article-hero-inner{
    align-items:stretch !important;
    text-align:right !important;
    padding:72px 64px 0 !important;
}


/* ---------- BREADCRUMB ---------- */

html[dir="rtl"] .gg-article-breadcrumb{
    width:100% !important;
    margin:0 0 18px !important;
    text-align:right !important;
    justify-content:flex-start !important;
}


/* ---------- CATEGORY BADGE ---------- */

html[dir="rtl"] .gg-article-category{
    align-self:flex-end !important;
    margin:8px 0 26px auto !important;
}


/* ---------- TITLE ---------- */

html[dir="rtl"] .gg-article-hero h1{
    width:100% !important;
    max-width:980px !important;
    margin:0 0 24px !important;
    text-align:right !important;
    direction:rtl !important;
    line-height:1.22 !important;
    letter-spacing:-0.025em !important;
    text-wrap:pretty !important;
}


/* ---------- SUMMARY ---------- */

html[dir="rtl"] .gg-article-summary{
    width:100% !important;
    max-width:900px !important;
    margin:0 0 18px !important;
    text-align:right !important;
    direction:rtl !important;
}


/* ---------- META ---------- */

html[dir="rtl"] .gg-article-meta{
    width:100% !important;
    margin:0 0 34px !important;
    justify-content:flex-start !important;
    text-align:right !important;
    direction:rtl !important;
}


/* ---------- IMAGE BLOCK ---------- */

html[dir="rtl"] .gg-article-figure{
    margin-top:8px !important;
}


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

@media(max-width:700px){

    html[dir="rtl"] .gg-article-hero-inner{
        padding:34px 20px 0 !important;
    }

    html[dir="rtl"] .gg-article-breadcrumb{
        margin-bottom:12px !important;
    }

    html[dir="rtl"] .gg-article-category{
        margin:6px 0 18px auto !important;
    }

    html[dir="rtl"] .gg-article-hero h1{
        margin-bottom:16px !important;
        text-align:right !important;
        line-height:1.28 !important;
    }

    html[dir="rtl"] .gg-article-summary{
        margin-bottom:14px !important;
        text-align:right !important;
    }

    html[dir="rtl"] .gg-article-meta{
        margin-bottom:22px !important;
        justify-content:flex-start !important;
    }
}


/* /GGS ARTICLE HERO RTL + EXPORT STYLE V9 */


/* =========================================================
   GGS ARTICLE TOC STICKY V10
   Keep Table of Contents visible while article scrolls
   ========================================================= */


/* Sticky requires ancestors not to clip it */

.gg-article-page,
.gg-article-layout,
.gg-article-main,
.gg-article-main .article{
    overflow:visible !important;
    transform:none !important;
}


/* DESKTOP TABLE OF CONTENTS */

@media(min-width:1001px){

    .gg-article-layout{
        align-items:start !important;
    }

    .gg-toc-desktop{
        display:block !important;

        position:-webkit-sticky !important;
        position:sticky !important;

        top:92px !important;

        align-self:start !important;

        height:auto !important;
        max-height:calc(100vh - 115px) !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        z-index:10 !important;

        margin:0 !important;

        scrollbar-width:thin;
        scrollbar-color:#b7cbbd transparent;
    }


    .gg-toc-desktop::-webkit-scrollbar{
        width:5px;
    }

    .gg-toc-desktop::-webkit-scrollbar-track{
        background:transparent;
    }

    .gg-toc-desktop::-webkit-scrollbar-thumb{
        background:#b7cbbd;
        border-radius:20px;
    }

}


/* Mobile/tablet: no sticky sidebar */

@media(max-width:1000px){

    .gg-toc-desktop{
        display:none !important;
        position:static !important;
        top:auto !important;
        max-height:none !important;
        overflow:visible !important;
    }

    .gg-toc-mobile{
        display:block !important;
        position:relative !important;
        top:auto !important;
    }

}


/* /GGS ARTICLE TOC STICKY V10 */


/* =========================================================
   GGS TOC REAL FIXED V11
   JS controlled - independent from sticky ancestors
   ========================================================= */

@media(min-width:1001px){

    .gg-toc-slot{
        grid-area:toc !important;

        position:relative !important;

        display:block !important;

        width:280px !important;
        min-width:280px !important;

        align-self:stretch !important;

        overflow:visible !important;
    }


    .gg-toc-slot > .gg-toc-desktop{

        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:block !important;

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

        margin:0 !important;

        max-height:calc(100vh - 120px) !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        z-index:35 !important;
    }


    /* ACTUALLY FIXED WHILE SCROLLING */

    .gg-toc-slot > .gg-toc-desktop.gg-toc-is-fixed{

        position:fixed !important;

        top:92px !important;

        right:auto !important;
        bottom:auto !important;

        margin:0 !important;

        z-index:45 !important;
    }


    /* STOP AT END OF ARTICLE */

    .gg-toc-slot > .gg-toc-desktop.gg-toc-is-bottom{

        position:absolute !important;

        top:auto !important;

        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        width:100% !important;

        margin:0 !important;
    }

}


/* MOBILE */

@media(max-width:1000px){

    .gg-toc-slot{
        display:none !important;
    }

}


/* /GGS TOC REAL FIXED V11 */


/* =========================================================
   GGS TOC LOCKED FIXED V12
   No internal scrolling.
   Entire TOC stays locked in viewport.
   ========================================================= */

@media(min-width:1001px){

    .gg-toc-slot{
        grid-area:toc !important;
        display:block !important;

        width:270px !important;
        min-width:270px !important;

        position:relative !important;
        overflow:visible !important;
    }


    .gg-toc-slot > .gg-toc-desktop{

        display:block !important;

        width:270px !important;
        max-width:270px !important;

        height:auto !important;
        max-height:none !important;

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

        overflow:visible !important;
        overflow-x:visible !important;
        overflow-y:visible !important;

        scrollbar-width:none !important;

        background:#fff !important;

        border:1px solid #e3ebe5 !important;

        border-radius:20px !important;

        box-shadow:
            0 12px 35px
            rgba(15,23,42,.07) !important;
    }


    .gg-toc-slot >
    .gg-toc-desktop::-webkit-scrollbar{
        display:none !important;
        width:0 !important;
        height:0 !important;
    }


    /* REAL FIXED STATE */

    .gg-toc-slot >
    .gg-toc-desktop.gg-toc-is-fixed{

        position:fixed !important;

        top:88px !important;

        bottom:auto !important;

        z-index:45 !important;

        max-height:none !important;

        overflow:visible !important;
    }


    /*
     * Disable previous "stop at article bottom".
     * User wants it permanently fixed while scrolling.
     */

    .gg-toc-slot >
    .gg-toc-desktop.gg-toc-is-bottom{

        position:fixed !important;

        top:88px !important;

        bottom:auto !important;

        max-height:none !important;

        overflow:visible !important;
    }


    /* CONTENTS TITLE */

    .gg-toc-desktop > strong{

        display:block !important;

        margin:0 0 8px !important;

        padding:0 4px 9px !important;

        color:#064b2f !important;

        font-size:14px !important;

        font-weight:900 !important;

        line-height:1.4 !important;

        border-bottom:
            1px solid
            #edf1ee !important;
    }


    /* COMPACT LIST */

    .gg-toc-desktop .gg-toc-list{

        display:block !important;

        margin:0 !important;
        padding:0 !important;

        list-style:none !important;
    }


    .gg-toc-desktop .gg-toc-list li{

        display:block !important;

        margin:0 !important;
        padding:0 !important;
    }


    .gg-toc-desktop .gg-toc-list a{

        display:flex !important;

        align-items:center !important;

        gap:7px !important;

        width:100% !important;

        min-height:0 !important;

        margin:0 !important;

        padding:5px 4px !important;

        color:#66736c !important;

        border-bottom:
            1px solid
            #f1f4f2 !important;

        font-size:11.5px !important;

        font-weight:500 !important;

        line-height:1.35 !important;

        text-decoration:none !important;
    }


    .gg-toc-desktop
    .gg-toc-list li:last-child a{

        border-bottom:0 !important;
    }


    /* NUMBER */

    .gg-toc-desktop
    .gg-toc-number{

        display:inline-block !important;

        min-width:19px !important;

        color:#08733c !important;

        font-size:9.5px !important;

        font-weight:900 !important;
    }


    /*
     * Keep each TOC item on one line so a long article
     * can still fit inside the viewport.
     */

    .gg-toc-desktop
    .gg-toc-list a > span:last-child{

        display:block !important;

        min-width:0 !important;

        flex:1 !important;

        white-space:nowrap !important;

        overflow:hidden !important;

        text-overflow:ellipsis !important;
    }


    .gg-toc-desktop
    .gg-toc-list a:hover,

    .gg-toc-desktop
    .gg-toc-list a.is-active{

        color:#08733c !important;

        background:#f6faf7 !important;

        border-radius:7px !important;
    }

}


/* MOBILE REMAINS NORMAL ACCORDION */

@media(max-width:1000px){

    .gg-toc-slot{
        display:none !important;
    }

    .gg-toc-mobile{
        display:block !important;
    }

}


/* /GGS TOC LOCKED FIXED V12 */


/* =========================================================
   GGS TOC SPACING + END STOP V13
   Larger text, wider spacing, exact stop at article end
   ========================================================= */

@media(min-width:1001px){

    .gg-toc-slot{
        grid-area:toc !important;
        position:relative !important;
        display:block !important;
        width:300px !important;
        min-width:300px !important;
        overflow:visible !important;
    }

    .gg-toc-slot > .gg-toc-desktop{
        display:block !important;
        width:300px !important;
        max-width:300px !important;
        margin:0 !important;
        padding:20px 18px !important;
        background:#fff !important;
        border:1px solid #dfe9e2 !important;
        border-radius:22px !important;
        box-shadow:0 14px 38px rgba(15,23,42,.06) !important;
        overflow:visible !important;
        max-height:none !important;
        height:auto !important;
    }

    .gg-toc-slot > .gg-toc-desktop.gg-toc-is-fixed{
        position:fixed !important;
        top:92px !important;
        z-index:45 !important;
        margin:0 !important;
    }

    .gg-toc-slot > .gg-toc-desktop.gg-toc-is-bottom{
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        top:auto !important;
        bottom:0 !important;
        z-index:20 !important;
        margin:0 !important;
    }

    .gg-toc-desktop > strong{
        display:block !important;
        margin:0 0 14px !important;
        padding:0 4px 12px !important;
        color:#065f3c !important;
        font-size:18px !important;
        font-weight:900 !important;
        line-height:1.5 !important;
        border-bottom:1px solid #e8efea !important;
    }

    .gg-toc-desktop .gg-toc-list{
        display:block !important;
        margin:0 !important;
        padding:0 !important;
        list-style:none !important;
    }

    .gg-toc-desktop .gg-toc-list li{
        display:block !important;
        margin:0 !important;
        padding:0 !important;
    }

    .gg-toc-desktop .gg-toc-list a{
        display:flex !important;
        align-items:flex-start !important;
        gap:12px !important;
        width:100% !important;
        margin:0 !important;
        padding:10px 6px !important;
        color:#5b685f !important;
        text-decoration:none !important;
        border-bottom:1px solid #f1f5f2 !important;
        font-size:14px !important;
        font-weight:600 !important;
        line-height:1.8 !important;
        min-height:0 !important;
    }

    .gg-toc-desktop .gg-toc-list li:last-child a{
        border-bottom:0 !important;
    }

    .gg-toc-desktop .gg-toc-number{
        display:inline-block !important;
        min-width:28px !important;
        color:#0b7a44 !important;
        font-size:12px !important;
        font-weight:900 !important;
        line-height:1.8 !important;
        text-align:right !important;
        flex-shrink:0 !important;
    }

    .gg-toc-desktop .gg-toc-list a > span:last-child{
        display:block !important;
        flex:1 !important;
        min-width:0 !important;
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:unset !important;
    }

    .gg-toc-desktop .gg-toc-list a:hover,
    .gg-toc-desktop .gg-toc-list a.is-active{
        color:#0a7a43 !important;
        background:#f5faf7 !important;
        border-radius:10px !important;
    }
}

@media(max-width:1000px){
    .gg-toc-slot{
        display:none !important;
    }
}


/* /GGS TOC SPACING + END STOP V13 */


/* =========================================================
   GGS TOC COMPACT BALANCED V14
   Medium typography + tighter spacing
   ========================================================= */

@media(min-width:1001px){

    .gg-toc-slot{
        width:285px !important;
        min-width:285px !important;
    }


    .gg-toc-slot > .gg-toc-desktop{

        width:285px !important;
        max-width:285px !important;

        padding:
            16px
            15px !important;

        border-radius:
            19px !important;
    }


    /* عنوان محتويات المقال */

    .gg-toc-desktop > strong{

        margin:
            0
            0
            8px !important;

        padding:
            0
            4px
            9px !important;

        font-size:
            16px !important;

        line-height:
            1.4 !important;
    }


    /* كل سطر */

    .gg-toc-desktop
    .gg-toc-list a{

        gap:
            9px !important;

        padding:
            6px
            5px !important;

        font-size:
            12.5px !important;

        font-weight:
            500 !important;

        line-height:
            1.55 !important;
    }


    /* الأرقام */

    .gg-toc-desktop
    .gg-toc-number{

        min-width:
            23px !important;

        font-size:
            10.5px !important;

        line-height:
            1.55 !important;
    }


    /* منع المسافات الإضافية */

    .gg-toc-desktop
    .gg-toc-list li{

        margin:
            0 !important;

        padding:
            0 !important;
    }


    /* النص يسمح بسطرين فقط عند الحاجة */

    .gg-toc-desktop
    .gg-toc-list a > span:last-child{

        display:
            -webkit-box !important;

        -webkit-box-orient:
            vertical !important;

        -webkit-line-clamp:
            2 !important;

        white-space:
            normal !important;

        overflow:
            hidden !important;

        line-height:
            1.55 !important;
    }

}


/* /GGS TOC COMPACT BALANCED V14 */


/* =========================================================
   GGS ARABIC ARTICLE / TOC SWAP V15

   Arabic desktop:
   LEFT  = article
   RIGHT = table of contents
   ========================================================= */

@media(min-width:1001px){

    html[dir="rtl"] .gg-article-layout{

        /*
         * left column  = article
         * right column = TOC
         */

        grid-template-columns:
            minmax(0, 820px)
            285px !important;

        grid-template-areas:
            "main toc" !important;

        gap:
            38px !important;

        direction:
            ltr !important;

        justify-content:
            center !important;

        align-items:
            start !important;
    }


    html[dir="rtl"] .gg-article-main{

        grid-area:
            main !important;

        direction:
            rtl !important;

        text-align:
            right !important;

        width:
            100% !important;

        max-width:
            820px !important;
    }


    html[dir="rtl"] .gg-toc-slot{

        grid-area:
            toc !important;

        width:
            285px !important;

        min-width:
            285px !important;

        direction:
            rtl !important;
    }


    html[dir="rtl"]
    .gg-toc-slot >
    .gg-toc-desktop{

        width:
            285px !important;

        max-width:
            285px !important;

        direction:
            rtl !important;

        text-align:
            right !important;
    }

}


/* MOBILE remains one column */

@media(max-width:1000px){

    html[dir="rtl"] .gg-article-layout{

        display:
            block !important;

        direction:
            rtl !important;
    }

}


/* /GGS ARABIC ARTICLE / TOC SWAP V15 */