/* =========================================================
   RETACH SHARED FAQ
   Visual: /services/direct/
   ========================================================= */

#faq.retach-faq{
    position:relative;
    isolation:isolate;

    margin:0 !important;
    padding:48px 0 70px !important;

    background:
        radial-gradient(
            circle at 13% 18%,
            rgba(119,94,255,.055),
            transparent 33%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(119,184,255,.08),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #fbfaff 0%,
            #f7faff 52%,
            #fbfcff 100%
        ) !important;

    color:#111521;
}

#faq.retach-faq *,
#faq.retach-faq *::before,
#faq.retach-faq *::after{
    box-sizing:border-box;
}


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

#faq.retach-faq > .container{
    width:min(980px,calc(100% - 48px)) !important;

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


/* =========================================================
   TITLE — SAME COMPOSITION AS DIRECT
   ========================================================= */

#faq.retach-faq .h2,
#faq.retach-faq > .container > h2,
#faq.retach-faq h2:first-of-type{
    width:100% !important;
    max-width:none !important;

    margin:
        0
        0
        46px !important;

    padding:0 !important;

    color:#2d3038 !important;
    background:none !important;

    font-family:
        Inter,
        Manrope,
        system-ui,
        sans-serif !important;

    font-size:
        clamp(
            44px,
            4vw,
            52px
        ) !important;

    line-height:1.05 !important;
    letter-spacing:-.045em !important;
    font-weight:730 !important;

    text-align:center !important;

    -webkit-text-fill-color:initial !important;
}

#faq.retach-faq h2::before,
#faq.retach-faq .h2::before{
    content:none !important;
}


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

   Direct:
   .faq-grid

   Old Segtach:
   .faq
   ========================================================= */

#faq.retach-faq .faq-grid,
#faq.retach-faq .faq{
    width:100% !important;

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

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

    gap:16px !important;
}


/* =========================================================
   ITEM
   ========================================================= */

#faq.retach-faq details.faq-item,
#faq.retach-faq details.item{
    position:relative;

    width:100% !important;

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

    overflow:hidden;

    border:
        1px solid
        rgba(207,216,238,.45) !important;

    border-radius:20px !important;

    background:
        linear-gradient(
            105deg,
            rgba(255,255,255,.94) 0%,
            rgba(249,252,255,.88) 53%,
            rgba(242,248,255,.83) 100%
        ) !important;

    box-shadow:
        inset
        0 1px 0
        rgba(255,255,255,.98) !important;

    transition:
        border-color .18s ease,
        background .18s ease;
}


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

#faq.retach-faq details.faq-item > summary,
#faq.retach-faq details.item > summary.q{
    position:relative;

    width:100% !important;
    min-height:84px !important;

    margin:0 !important;

    padding:
        23px
        78px
        23px
        26px !important;

    display:flex !important;
    align-items:center !important;

    gap:0 !important;

    list-style:none !important;

    cursor:pointer;

    color:#151923 !important;

    font-family:
        Inter,
        Manrope,
        system-ui,
        sans-serif !important;

    font-size:17px !important;
    line-height:1.3 !important;
    font-weight:650 !important;

    letter-spacing:-.018em !important;
}

#faq.retach-faq details > summary::-webkit-details-marker{
    display:none !important;
}

#faq.retach-faq details > summary::marker{
    content:"" !important;
}


/* =========================================================
   OLD SEGTACH TAGS:
   "Start", "Budget", etc.
   Direct doesn't have them.
   ========================================================= */

#faq.retach-faq .q .tag{
    display:none !important;
}


/* =========================================================
   ARROW
   ========================================================= */

#faq.retach-faq .faq-arrow,
#faq.retach-faq .q .arrow{
    position:absolute !important;

    top:50% !important;
    right:27px !important;

    width:39px !important;
    height:39px !important;

    margin:0 !important;

    display:grid !important;
    place-items:center !important;

    border:
        1px solid
        rgba(255,255,255,.72) !important;

    border-radius:50% !important;

    color:#111521 !important;

    background:
        rgba(255,255,255,.46) !important;

    box-shadow:
        inset
        0 1px 0
        rgba(255,255,255,.92) !important;

    opacity:1 !important;

    font-size:0 !important;
    line-height:0 !important;

    transform:
        translateY(-50%) !important;
}


/* black triangle like Direct */

#faq.retach-faq .faq-arrow::before,
#faq.retach-faq .q .arrow::before{
    content:"";

    width:0;
    height:0;

    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:13px solid #111521;

    transform:none !important;
}


/* opened */

#faq.retach-faq
details.faq-item[open]
.faq-arrow,
#faq.retach-faq
details.item[open]
.q .arrow{
    transform:
        translateY(-50%)
        rotate(180deg) !important;
}


/* =========================================================
   OPEN ITEM
   ========================================================= */

#faq.retach-faq details.faq-item[open],
#faq.retach-faq details.item[open]{
    border-color:
        rgba(202,211,235,.62) !important;

    background:
        linear-gradient(
            105deg,
            rgba(255,255,255,.97),
            rgba(246,250,255,.92)
        ) !important;
}


/* =========================================================
   ANSWERS
   ========================================================= */

#faq.retach-faq .faq-a{
    margin:0 !important;

    padding:
        0
        78px
        25px
        26px !important;

    color:#5d6678 !important;

    font-family:
        Inter,
        Manrope,
        system-ui,
        sans-serif !important;

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


#faq.retach-faq details.item > .a{
    max-height:none !important;

    overflow:visible !important;

    transition:none !important;
}


#faq.retach-faq details.item > .a > .content{
    margin:0 !important;

    padding:
        0
        78px
        25px
        26px !important;

    color:#5d6678 !important;

    font-family:
        Inter,
        Manrope,
        system-ui,
        sans-serif !important;

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


#faq.retach-faq .content p,
#faq.retach-faq .faq-a p{
    margin:0 !important;

    color:inherit !important;

    font:inherit !important;
}


#faq.retach-faq .content p + p,
#faq.retach-faq .faq-a p + p{
    margin-top:10px !important;
}


#faq.retach-faq .content ul,
#faq.retach-faq .faq-a ul{
    margin:
        9px
        0
        0
        19px !important;

    padding:0 !important;

    color:inherit !important;
}


/* Old extra Segtach elements */

#faq.retach-faq .meta,
#faq.retach-faq .actions{
    display:none !important;
}


/* =========================================================
   HOVER
   ========================================================= */

@media(hover:hover){

    #faq.retach-faq details.faq-item:hover,
    #faq.retach-faq details.item:hover{
        border-color:
            rgba(185,199,232,.72) !important;
    }

}


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

@media(max-width:767px){

    #faq.retach-faq{
        padding:
            39px
            0
            48px !important;
    }


    #faq.retach-faq > .container{
        width:
            calc(100% - 28px) !important;
    }


    #faq.retach-faq .h2,
    #faq.retach-faq > .container > h2,
    #faq.retach-faq h2:first-of-type{
        margin-bottom:
            27px !important;

        font-size:
            clamp(
                34px,
                9.8vw,
                42px
            ) !important;

        line-height:
            1.03 !important;
    }


    #faq.retach-faq .faq-grid,
    #faq.retach-faq .faq{
        gap:10px !important;
    }


    #faq.retach-faq details.faq-item,
    #faq.retach-faq details.item{
        border-radius:
            16px !important;
    }


    #faq.retach-faq details.faq-item > summary,
    #faq.retach-faq details.item > summary.q{
        min-height:
            66px !important;

        padding:
            17px
            58px
            17px
            17px !important;

        font-size:
            14px !important;

        line-height:
            1.27 !important;
    }


    #faq.retach-faq .faq-arrow,
    #faq.retach-faq .q .arrow{
        right:
            15px !important;

        width:
            34px !important;

        height:
            34px !important;
    }


    #faq.retach-faq .faq-arrow::before,
    #faq.retach-faq .q .arrow::before{
        border-left-width:
            6px;

        border-right-width:
            6px;

        border-top-width:
            10px;
    }


    #faq.retach-faq .faq-a,
    #faq.retach-faq details.item > .a > .content{
        padding:
            0
            58px
            19px
            17px !important;

        font-size:
            13px !important;

        line-height:
            1.5 !important;
    }

}

/* === RETACH FAQ WIDTH ALIGN START === */

@media (min-width:768px){

  #faq.retach-faq > .container{
    width:980px !important;
    max-width:calc(100% - 48px) !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:0 !important;
    padding-right:0 !important;
  }

  #faq.retach-faq .faq,
  #faq.retach-faq .faq-grid{
    width:100% !important;
    max-width:none !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding-left:0 !important;
    padding-right:0 !important;
  }

  #faq.retach-faq details.item,
  #faq.retach-faq details.faq-item{
    width:100% !important;
    max-width:none !important;
  }

}

@media (max-width:767px){

  #faq.retach-faq > .container{
    width:calc(100% - 28px) !important;
    max-width:none !important;

    margin-left:auto !important;
    margin-right:auto !important;
  }

}

/* === RETACH FAQ WIDTH ALIGN END === */

/* === RETACH FAQ REAL WIDTH START === */

@media (min-width:768px){

  /*
     Do not rely on the old Segtach container.
     Constrain the actual FAQ content itself.
  */

  #faq.retach-faq .faq,
  #faq.retach-faq .faq-grid{
    width:min(980px, calc(100% - 48px)) !important;
    max-width:980px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:0 !important;
    padding-right:0 !important;
  }


  #faq.retach-faq .h2,
  #faq.retach-faq > h2,
  #faq.retach-faq > .container > h2,
  #faq.retach-faq h2:first-of-type{
    width:min(980px, calc(100% - 48px)) !important;
    max-width:980px !important;

    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:46px !important;

    padding-left:0 !important;
    padding-right:0 !important;

    text-align:center !important;
  }


  #faq.retach-faq details.item,
  #faq.retach-faq details.faq-item{
    width:100% !important;
    max-width:100% !important;

    margin-left:0 !important;
    margin-right:0 !important;
  }

}


@media (max-width:767px){

  #faq.retach-faq .faq,
  #faq.retach-faq .faq-grid{
    width:calc(100% - 28px) !important;
    max-width:none !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:0 !important;
    padding-right:0 !important;
  }


  #faq.retach-faq .h2,
  #faq.retach-faq > h2,
  #faq.retach-faq > .container > h2,
  #faq.retach-faq h2:first-of-type{
    width:calc(100% - 28px) !important;

    margin-left:auto !important;
    margin-right:auto !important;

    text-align:center !important;
  }

}

/* === RETACH FAQ REAL WIDTH END === */